djid_siput/resources/views/penentuan-target/detail.blade.php

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
 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;
 }
 .ic {
   width: 1.5rem;
   height: 1.3rem;
   border-radius: .5rem;
   text-align: center;
   cursor:pointer;
   /* background: #cdcdcd; */
   /* padding-top: .3rem; */
   font-size: 1em;
   list-style: none;
   color: #000;
 }
</style>
<br/>
<br/>
<form action="{{route('penentuan-target.update',$data->id)}}" method="POST" id="form-edit">
@csrf
  <div class="col">
     <div class="form-group">
         <label for="exampleInputEmail1">Program *</label>
         <input type="text" class="form-control" value="{{!empty($data->templateProgram)?$data->templateProgram->nama:'-'}}" readonly>
         <small id="tahunProgramHelp" class="form-text text-muted" style="color:red !important"></small>
         <!-- <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="exampleInputEmail1">Tipe Target *</label>
         <select class="form-control" id="opt-tipe-target" name="tipe_target" disabled> 
            <option value="0" {{$data->tipe_target==0?'selected':''}}>Spesifik UPT</option>
            <option value="1" {{$data->tipe_target==1?'selected':''}}>Semua</option>
         </select>
     </div>
     <div class="form-group" id="div-opt-periode">
         <label for="exampleInputEmail1">Periode *</label>
         <select class="form-control" id="opt-periode" name="periode" disabled> 
            @for($i=1;$i<=$data->jumlah;$i++)
                <option value="{{$i}}"}} {{(!empty(Session::has('previous_periode')) && session('previous_periode')==$i)?'selected':''}}>Periode {{$i}}</option>
            @endfor
         </select>
     </div>
     <div class="form-group">
         <label for="exampleInputEmail1">Satuan *</label>
         <input type="text" class="form-control" name="satuan_target" id="satuan-target" value="{{$data->satuan_target}}">
     </div>
    
    <div class="btn btn-primary btn-lg btn-block" style="background: #193865;margin-top: 1em">TARGET</div>
    <div class="tb-container" id="table_semua" style="display:none">
      <table class="table table-bordered">
          <thead >
            <tr class="table-dark">
              <th scope="col">Periode</th>
              <th scope="col">Target</th>
            </tr>
          </thead>
          <tbody>
                @for($row_periode=1;$row_periode<=$data->jumlah;$row_periode++)             
                    <?php
                        $row = App\Model\TahunProgramDetailUpt::where('id_tahun_program_detail',$data->id)->where('periode',$row_periode)->first();
                    ?>
                    @if(!empty($row))    
                      <tr>
                          <td>
                              <input type="number" name="semua_periode_{{$row_periode}}" value="{{$row_periode}}" class="form-control" readonly>
                          </td>
                          <td>
                              <input type="number" name="semua_target_{{$row_periode}}" class="form-control" value="{{$row->target}}" readonly>
                          </td>
                      </tr>
                    @else
                      <tr>
                          <td>
                              <input type="number" name="semua_periode_{{$row_periode}}" value="{{$row_periode}}" class="form-control" readonly>
                          </td>
                          <td>
                              <input type="number" name="semua_target_{{$row_periode}}" class="form-control" value="0" readonly>
                          </td>
                      </tr>
                    @endif
                @endfor
          </tbody>
      </table>
    </div>
  
    @for($row_periode=1;$row_periode<=$data->jumlah;$row_periode++)
        <div class="tb-container table_spesifik_upt_periode" id="table_spesifik_upt_periode_{{$row_periode}}" style="display:none">

            <table class="table table-bordered">
                <thead >
                    <tr class="table-dark">
                    <th scope="col">Periode</th>
                    <th scope="col">UPT</th>
                    <th scope="col">Target</th>
                    </tr>
                </thead>
          
                <tbody>
                    @foreach($upt as $row_upt)
                        <?php 
                        
                        $row = App\Model\TahunProgramDetailUpt::where('id_tahun_program_detail',$data->id)->where('periode',$row_periode)->where('id_upt',$row_upt->office_id)->first();

                        ?>
                        @if(!empty($row))
                            <tr>
                                <td>
                                    <input type="number" name="spesifik_periode_{{$row_periode}}_{{$row_upt->office_id}}" value="{{$row_periode}}" class="form-control" readonly>
                                </td>
                                <td>
                                    <input type="hidden" name="spesifik_id_upt_{{$row_periode}}_{{$row_upt->office_id}}" value="{{$row_upt->office_id}}">
                                    <input type="text" class="form-control" value="{{$row_upt->office_name}}" readonly>
                                </td>
                                <td>
                                    <input type="number" name="spesifik_target_{{$row_periode}}_{{$row_upt->office_id}}" class="form-control" value="{{$row->target}}" readonly>
                                </td>
                            </tr>
                        @else
                            <tr>
                                <td>
                                    <input type="number" name="spesifik_periode_{{$row_periode}}_{{$row_upt->office_id}}" value="{{$row_periode}}" class="form-control" readonly>
                                </td>
                                <td>
                                    <input type="hidden" name="spesifik_id_upt_{{$row_periode}}_{{$row_upt->office_id}}" value="{{$row_upt->office_id}}">
                                    <input type="text" class="form-control" value="{{$row_upt->office_name}}" readonly>
                                </td>
                                <td>
                                    <input type="number" name="spesifik_target_{{$row_periode}}_{{$row_upt->office_id}}" class="form-control" value="0" readonly>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>
    @endfor

    
    <div class="tb-container">
      <div class="row" style="padding:20px">
        <div class="col-md-10"></div>
        <div class="col-md-2">
            <a href="{{route('penentuan-target')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Kembali</a>
        </div>
      </div>
    </div>
  </div>
</form>
<script>

$('#opt-tipe-target').on('change',function(){
    var tipe_target = $(this).val();
    
    //tipe target 0 = spesifik upt, tipe target 1 = semua
    if(tipe_target == 0){
        $('#table_spesifik_upt').css('display','block');
        $('#table_semua').css('display','none');
        $('#div-opt-periode').css('display','block');
        $('#opt-periode').css('display','block');
        $('#opt-periode').trigger('change');
    }else{
        $('#table_spesifik_upt').css('display','none');
        $('#table_semua').css('display','block');
        $('#div-opt-periode').css('display','none');
        $('#opt-periode').css('display','none');
        $('.table_spesifik_upt_periode').css('display','none');
    }
});

$('#opt-periode').on('change',function(){
    var periode = $(this).val();
    $('.table_spesifik_upt_periode').css('display','none');
    $('#table_spesifik_upt_periode_'+periode).css('display','block');
});

$('#opt-tipe-target').trigger('change');
</script>
@endsection