djid_siput/resources/views/pembuatan-program/edit.blade.php

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
  .prev-holder, .className-wrap, .description-wrap, .tooltip-element, .copy-button {
   display:none !important;
 }
 .form-field{
    flex:0 0 50%;
    position:relative;
    width:50%;
    outline: 1px solid #a9a9a9;
 }

 .frmb {
    display:flex !important;
    flex-wrap:wrap !important;
    min-height:40px !important;
 }
 input, select {
     border: 0 !important;
     background: transparent !important;
     border-bottom: 1px solid #cdcdcd !important;
 }
 .tb-container{
   background: #fff;
   margin-top: 1em;
 }
 
 tbody > tr {
    line-height: 45px !important;
    min-height: 45px !important;
    height: 45px !important;
 }

 /* @media only screen and (max-width: 700px) {
  .field-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    font-size: 14px !important;
    padding-left:0px !important;
 } */
</style>
<br/>
<br/>
<form action="{{route('pembuatan-program.update',$data->id)}}" method="POST" enctype="multipart/form-data" id="form-edit">
@csrf
  <div class="col">
      <div class="form-group">
          <label for="">Nama Program *</label>
          <input type="text" class="form-control" id="namaProgram" name="nama" placeholder="No Data Available" value="{{$data->nama}}" required style="text-transform:uppercase" >
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="form-group">
          <label for="">Kategori *</label>
          <select class="form-control" id="tipe" name="tipe" required>
              <option value="0" {{$data->tipe==0?'selected':''}}>Program Perjanjian Kinerja</option>
              <option value="1" {{$data->tipe==1?'selected':''}}>Program Perjanjian Non Kinerja</option>
          </select>
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="form-group">
          <label for="">Icon Program</label>
          <input name="logo" class="form-control" type="file" id="file_input" multiple />
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="col-md-4" style="{{!empty($data->logo)?'block':'display:none'}}" id="card_file_preview">
          <div class="card">
            
              <div class="card-body pt-2" style="max-height:185px">
              Preview:<br>
                  <center>
                      <img src="{{!empty($data->logo)?asset('public/assets/images/template/'.$data->logo):''}}" id="file_preview" style="width:130px">
                  </center>
              </div>
          </div>
      </div> <br>
      <div class="form-group">
          <div class="custom-control custom-checkbox mb-3">
              <input class="custom-control-input" id="customCheck1" type="checkbox" name="is_required" value="1" {{$data->is_required==1?'checked':''}}>
              <label class="custom-control-label" for="customCheck1">Pilih jika sub program wajib diisi</label>
          </div>
      </div>

      <div class="row">
        <div class="col-md-9"></div>
        <!-- <div class="btn btn-primary" style="background: #B4CD93" id="add-item"><i class="fas fa-plus-circle"></i> Tambah Item Program</div> -->
        <button data-toggle="modal" type="button" data-target="#modal-sub-program" class="btn btn-primary" style="background: #B4CD93" id="add-sub-program"><i class="fas fa-plus-circle"></i> Tambah Sub Program</button>
      </div>
      <button type="button" class="btn btn-primary btn-lg btn-block" style="background: #193865;margin-top: 1em">Sub Program</button>
      <div class="tb-container">
          <table class="table table-bordered">
          <thead >
            <tr class="table-dark">
              <th scope="col">Nama Sub Program</th>
              <th scope="col">Aksi</th>
            </tr>
          </thead>
          <tbody id="tbody">
              @foreach($data->templateProgramDetail as $row)
                <tr>
                    <td>
                        {{$row->nama}}
                    </td>
                  
                    <td>
                      <center>
                        <a class="badge badge-primary" href="{{url('/pengaturan/pembuatan-program/edit/'.$data->id.'/subprogram/'.$row->id)}}" ><i class="fas fa-eye" style="color: blue" ></i> Lihat Detail</a>
                      </center>
                    </td>
                </tr>
              @endforeach
          </tbody>
        </table>
    </div>
</form>
  
<div class="tb-container">
  <div class="row" style="padding:20px">
    <div class="col-md-8"></div>
    <div class="col-md-4">
      <button type="button" class="btn btn-primary confirmation" data-target="form-edit" id="btn-submit" style="background: #193865"><i class="fa fa-save"></i> Simpan Perubahan</button>
      <a href="{{route('pembuatan-program')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Batal</a>
    </div>
  </div>
</div>

<form action="{{route('create-pembuatan-program.subprogram')}}" method="POST" enctype="multipart/form-data">
@csrf
	<div class="modal fade" id="modal-sub-program" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-md" role="document">
			<div class="modal-content modal-md">
				<div class="modal-header bg-primary">
					<h5 class="modal-title text-white" id="exampleModalLabel">Nama Sub Program</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12 form-group">
                <input type="hidden" name="id_template_program" value="{{$data->id}}">
                <input type="text" class="form-control" name="nama" id="add-sub-program" style="text-transform:uppercase" >
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="form-group">
              <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>&nbsp;&nbsp;SIMPAN</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times-circle"></i>&nbsp;&nbsp;BATAL</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
  
<script>
 
</script>

<script>
    $('#file_input').on('change',function(){
      var file = $(this).get(0).files[0];
      if(file){
          var reader = new FileReader();

          reader.onload = function(){
              $('#file_preview').attr('src',reader.result);
              $('#card_file_preview').show();
          }

          reader.readAsDataURL(file);
      }else{
        $('#card_file_preview').hide();
      }
      
    });
</script>
@endsection