@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-xl" 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-xl" id="edit-app">
  </div>
</div>

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

<div class="modal fade" tabindex="-1" id="remove">
  <div class="modal-dialog modal-lg" id="remove-app">
  </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">
      <!--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">Surat Pengantar Laporan Range Harian :: 
                  
                  @if($row->tanggal_awal == $row->tanggal_akhir)
                  {{\Carbon\Carbon::createFromFormat('Y-m-d',  $row->tanggal_awal)->isoFormat('DD MMMM YYYY')}}
                  @else
                  {{\Carbon\Carbon::createFromFormat('Y-m-d',  $row->tanggal_awal)->isoFormat('DD MMMM YYYY')}} s/d {{\Carbon\Carbon::createFromFormat('Y-m-d',  $row->tanggal_akhir)->isoFormat('DD MMMM YYYY')}}
                  @endif

                </span>
              </h3>
              <div>
                <button type="button" class="btn btn-success fw-bolder me-2" id="btncreate"><i class="fas fa-plus"></i>Surat Baru</button>
              </div>
            </div>
            <!--end::Header-->

            <!--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 class="min-w-200px w-200px">Tanggal / Nomor</th>
                      <th class="min-w-200px w-200px">Tujuan</th>
                      <th class="min-w-200px w-200px">Pengirim</th>
                      <th class="min-w-150px w-150px">Berkas</th>
                      <th>Opsi</th>
                    </tr>
                  </thead>
                  <tbody id="table_body">
                    
                    @forelse ($row->surat as $r)
                    <tr id="ubah{{$r->id}}">
                      <td class="fs-8">{{$r->tanggal}}<br>{{$r->nomor}}</td>
                        <td class="fs-8">
                            {!! nl2br($r->tujuan_surat) !!}
                        </td>
                        <td class="fs-8">
                            {{$r->pengirim_nama}}<br>{{$r->pengirim_nip}}<br>{{$r->pengirim_jabatan}}
                        </td>
                        <td>
                          <div class="d-grid gap-1">
                            <a type="button"
                              href="{{route('pt.laporan.range_harian.pdf.surat.show',['id' => Crypt::encryptString($r->id) ]) }}"
                              class="btn btn-sm btn-primary" target="_blank"><i class="fas fa-envelope"></i> Berkas</a>
                            <a type="button"
                              href="{{route('pt.laporan.range_harian.pdf.plus.surat.show',['id' => Crypt::encryptString($r->id) ]) }}"
                              class="btn btn-sm btn-success" target="_blank"><i class="fas fa-envelope"></i> Berkas+</a>
                          </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-warning btn-icon btnedit me-2" data-id="{{$r->id}}"><i class="fas fa-pen"></i></button>
                            <button type="button" class="btn btn-sm btn-danger btn-icon btnremove" data-id="{{$r->id}}"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                    @empty
                    <tr class="text-center">
                        <td colspan="6"><i>Data Kosong</i></td>
                    </tr>
                    @endforelse
                  </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>
  function create(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).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 show(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#show-app').html(response.data);
            $("#show").modal('show');
        });
    };

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

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

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

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

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

    $(document).ready(function(){

        $(document).on('click','#btncreate',function(e){
          btn = $(this);  
          create('{{ route("pt.laporan.range_harian.surat.create", ['id' => $row->id]) }}', btn.data('id'));
        });

        $('#table_body').on('click','.btnedit',function(e){
          btn = $(this);
          edit('{{ route("pt.laporan.range_harian.surat.edit") }}', btn.data('id'));
        });

        $('#table_body').on('click','.btnshow',function(e){
          btn = $(this);
          show('{{ route("pt.laporan.range_harian.surat.show") }}', btn.data('id'));
        });

        $('#table_body').on('click','.btnremove',function(e){
          btn = $(this);
          remove('{{ route("pt.laporan.range_harian.surat.remove") }}', btn.data('id'));
        });

    });


</script>

@stop