@extends('layouts.app')
@section('content')
<!--begin::Content-->

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="create">
  <div class="modal-dialog modal-dialog-scrollable" id="create-app">
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="edit">
  <div class="modal-dialog modal-dialog-scrollable" id="edit-app">
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="edit_permasalahan">
  <div class="modal-dialog modal-dialog-scrollable" id="edit-app_permasalahan">
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="edit_keterangan">
  <div class="modal-dialog modal-dialog-scrollable" id="edit-app_keterangan">
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="delete">
  <div class="modal-dialog" id="delete-app">
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="pdf">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" id="pdf-app">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Export PDF</h5>
            <!--begin::Close-->
            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                <span class="svg-icon svg-icon-2x"></span>
            </div>
            <!--end::Close-->
        </div>
    
        <div class="modal-body">
            <form autocomplete="off"  id="formPdf" method="GET" action="{{route('pebe.pt.pdf_monevpenahanan.index')}}">
                <input type="hidden" name="tanggal_awal" id="tanggal_awal" value="{{$tanggal_awal}}">
                <input type="hidden" name="tanggal_akhir" id="tanggal_akhir" value="{{$tanggal_akhir}}">
                <input type="hidden" name="dittd_tanggal" id="dittd_tanggal" value="{{date('Y-m-d')}}">
                
                <div class="row">
                    <div class="col-12">
                        <div class="mb-5">
                            <label for="dittd_tanggal" class="required form-label">Tanggal TTD</label>
                            <input type="text" id="dittd_tanggal_input" class="form-control" placeholder="Masukan tanggal tanda tangan" required/>
                        </div>
                        <div class="mb-5">
                            <label for="dittd_jabatan" class="required form-label">Tanda Tangan 1</label>
                            <div class="d-flex">
                                <input type="text" name="dittd_jabatan" class="form-control" placeholder="Jabatan" required/>
                                <input type="text" name="dittd_nama" class="form-control mx-2" placeholder="Nama" required/>
                                <input type="text" name="dittd_nip" class="form-control" placeholder="NIP" required/>
                            </div>
                        </div>
                        <div class="mb-5">
                            <label for="disahkan_jabatan" class="required form-label">Tanda Tangan 2</label>
                            <div class="d-flex">
                                <input type="text" name="disahkan_jabatan" class="form-control" placeholder="Jabatan" required/>
                                <input type="text" name="disahkan_nama" class="form-control mx-2" placeholder="Nama" required/>
                                <input type="text" name="disahkan_nip" class="form-control" placeholder="NIP" required/>
                            </div>
                        </div>
                        <div class="mb-5">
                            <label for="diketahui_jabatan" class="required form-label">Tanda Tangan 3</label>
                            <div class="d-flex">
                                <input type="text" name="diketahui_jabatan" class="form-control" placeholder="Jabatan" required/>
                                <input type="text" name="diketahui_nama" class="form-control mx-2" placeholder="Nama" required/>
                                <input type="text" name="diketahui_nip" class="form-control" placeholder="NIP" required/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    
        <div class="modal-footer d-flex justify-content-between">
            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary" form="formPdf">Export</button>
        </div>
    </div>
  </div>
</div>

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
  <!--begin::Post-->
  <div class="post d-flex flex-column-fluid" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
      @include('layouts.success_error')
      <!--begin::Row-->
      <div class="row g-5 g-xl-8">
        <div class="col-xl-12">
          <!--begin::List Widget 3-->
          <div class="card card-xl-stretch mb-xl-8">
            <!--begin::Header-->
            <div class="card-header py-5">
              <h3 class="card-title align-items-start flex-column">
                <span class="card-label fw-bolder fs-3 mb-1">Penahanan E-Berpadu</span>
                <span class="text-muted mt-1 fw-bold fs-7">Monev Penahanan</span>
              </h3>
              <div>
                <button class="btn btn-success btn-sm fw-bolder" id="btncreate" type="button"><i class="fas fa-plus"></i>Baru</button>
                <button type="button" data-bs-toggle="modal" data-bs-target="#pdf" class="btn btn-danger btn-sm fw-bolder ms-2"><i class="fa fa-file"></i>PDF</button>
              </div>
            </div>
            <!--end::Header-->

            <div class="card-header border-0 py-5">
              <form autocomplete="off">
                <input type="hidden" name="tanggal_awal" id="tanggal_awal" value="{{$tanggal_awal}}">
                <input type="hidden" name="tanggal_akhir" id="tanggal_akhir" value="{{$tanggal_akhir}}">

                <div class="d-md-flex " data-kt-customer-table-toolbar="base">
                  <div class="me-md-3">
                    <label class="col-form-label">No Penetapan : </label>
                  </div>
                  <div class="me-md-3 mb-3 mb-md-0">
                    {{-- <input class="form-control form-control-solid w-250px" placeholder="Pick date rage" id="pilih_range_tgl"/> --}}
                    <input class="form-control form-control-solid w-250px" placeholder="Pick date range" id="pilih_range_tgl"
                        value="{{\Carbon\Carbon::createFromFormat('Y-m-d',  $tanggal_awal)->format('d M Y')}} s/d {{\Carbon\Carbon::createFromFormat('Y-m-d',  $tanggal_akhir)->format('d M Y')}}"
                        />
                  </div>
                  <div class="d-flex me-md-3 mb-3 mb-md-0">
                    <button type="submit" class="btn btn-primary fw-bolder me-2"><i class="fas fa-search"></i>Lihat
                      Data</button>
                  </div>
                </div>
              </form>
            </div>

            <!--begin::Body-->
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-row-dashed table-row-gray-300 gy-5 gs-7">
                    <thead>
                      <tr class="fw-bolder text-gray-800 border-bottom border-gray-200 bg-light">
                        <th style="min-width: 100px; width: 100px;">No Urut</th>
                        <th style="min-width: 120px; width: 120px;">Tgl Input</th>
                        <th style="min-width: 120px; width: 120px;">No Perkara</th>
                        <th style="min-width: 120px; width: 120px;">PN Pengajuan</th>
                        <th class="min-w-200px w-200px">Permasalahan</th>
                        <th class="min-w-200px w-200px">Keterangan</th>
                        <th class="min-w-100px w-100px">Tipe</th>
                        <th class="min-w-100px w-100px">Ubah</th>
                      </tr>
                    </thead>
                    <tbody id="table_body">
                        @foreach($rows as $key => $r)
                        <tr>
                            <td>{{$key+1}}</td>
                            <td>{{\Carbon\Carbon::createFromFormat('Y-m-d', $r->tgl_input_user)->format('d-M-Y')}}</td>
                            <td>{{$r->no_perkara}}</td>
                            <td>{{$r->pn_pengajuan}}</td>
                            <td><div class="mb-2" >{!! nl2br($r->permasalahan) !!}</div><button class="btn btn-sm btn-icon btn-warning btnedit_permasalahan" data-id="{{$r->id}}" type="button"><span class="bi bi-pencil-square"></span></button></td>
                            <td><div class="mb-2" >{!! nl2br($r->keterangan) !!}</div><button class="btn btn-sm btn-icon btn-warning btnedit_keterangan" data-id="{{$r->id}}" type="button"><span class="bi bi-pencil-square"></span></button></td>
                            <td>{{$r->tipe}}</td>
                            <td>
                                <div class="d-flex">
                                    <button class="btn btn-sm btn-icon btn-warning btnedit me-2" data-id="{{$r->id}}" type="button"><span class="bi bi-pencil-square"></span></button>
                                    <button class="btn btn-sm btn-icon btn-danger btndelete_detail" data-id="{{$r->id}}" type="button"><span class="bi bi-trash"></span></button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table> 
              </div>
            </div>
            <!--end::Body-->
          </div>
          <!--end:List Widget 3-->
        </div>
      </div>
      <!--end::Row-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::Post-->
</div>
<!--end::Content-->
@endsection


@section('js')

<script>
    // var start = moment().subtract(7, "days");
    // var end = moment();

    // function cb(start, end) {
    //     $("#pilih_range_tgl").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
    // }

    $("#pilih_range_tgl").daterangepicker({
        // startDate: start,
        // endDate: end,
        ranges: {
        "Hari Ini": [moment(), moment()],
        "Kemarin": [moment().subtract(1, "days"), moment().subtract(1, "days")],
        "7 Hari Terakhir": [moment().subtract(6, "days"), moment()],
        "30 Hari Terakhir": [moment().subtract(29, "days"), moment()],
        "Bulan Ini": [moment().startOf("month"), moment().endOf("month")],
        "Bulan Kemarin": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
        },
        "locale": {
            "separator": " s/d ",
            "format": "DD MMM YYYY"
        }
    }, function(start, end, label) {
        $('#tanggal_awal').val(start.format('YYYY-MM-DD'));
        $('#tanggal_akhir').val(end.format('YYYY-MM-DD'));
        });

    // $('#tgl_surat_pn_input').daterangepicker({
    //         singleDatePicker: true,
    //         locale: {format: 'DD/MM/YYYY'},
    //         "autoApply": true,
    //     }, function(start, end, label) {
    //         $('#tgl_surat_pn').val(start.format('YYYY-MM-DD'));
    //     });
        

    //cb(start, end);

    $('#dittd_tanggal_input').daterangepicker({
            singleDatePicker: true,
            locale: {format: 'DD/MM/YYYY'},
            "autoApply": true,
        }, function(start, end, label) {
            $('#dittd_tanggal').val(start.format('YYYY-MM-DD'));
        });

  function create(url){
        axios.get(url).then(function (response){
            $('#create-app').html(response.data);
            $("#create").modal('show');
        });
    };

    function edit(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#edit-app').html(response.data);
            $("#edit").modal('show');
        });
    };

    function edit_permasalahan(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#edit-app_permasalahan').html(response.data);
            $("#edit_permasalahan").modal('show');
        });
    };

    function edit_keterangan(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#edit-app_keterangan').html(response.data);
            $("#edit_keterangan").modal('show');
        });
    };

    function delete_detail(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#delete-app').html(response.data);
            $("#delete").modal('show');
        });
    };

    $('#create').on('hidden.bs.modal', function () {
        $('#create-app').empty();
    });

    $('#edit').on('hidden.bs.modal', function () {
        $('#edit-app').empty();
    });

    $('#edit_permasalahan').on('hidden.bs.modal', function () {
        $('#edit-app_permasalahan').empty();
    });

    $('#edit_keterangan').on('hidden.bs.modal', function () {
        $('#edit-app_keterangan').empty();
    });

    $('#delete').on('hidden.bs.modal', function () {
        $('#delete-app').empty();
    });

    $(document).ready(function(){

        $(document).on('click','#btncreate',function(e){
          btn = $(this);  
          create('{{ route("pebe.pt.monevpenahanan.create") }}');
        });
        
        $('#table_body').on('click','.btnedit',function(e){
          btn = $(this);
          edit('{{ route("pebe.pt.monevpenahanan.edit") }}', btn.data('id'));
        });
        
        $('#table_body').on('click','.btnedit_permasalahan',function(e){
          btn = $(this);
          edit_permasalahan('{{ route("pebe.pt.monevpenahanan.edit_permasalahan") }}', btn.data('id'));
        });
        
        $('#table_body').on('click','.btnedit_keterangan',function(e){
          btn = $(this);
          edit_keterangan('{{ route("pebe.pt.monevpenahanan.edit_keterangan") }}', btn.data('id'));
        });

        $(document).on('click','.btndelete_detail',function(e){
          btn = $(this);
          delete_detail('{{ route("pebe.pt.monevpenahanan.delete") }}', btn.data('id'));
        }); 
    });


</script>

@stop