@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-lg 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-lg modal-dialog-scrollable" id="edit-app">    
    </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="remove">
    <div class="modal-dialog" 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">
      @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">Restorative Justice :: Input Bulanan</span>
                <span class="text-muted mt-1 fw-bold fs-7">Input No Perkara Restorative Justice</span>
              </h3>
              <div>
                <button type="button" class="btn btn-success fw-bolder" id="btncreate"><i class="fas fa-plus"></i> Baru</button>
              </div>
            </div>
            <!--end::Header-->
           
            <!--begin::Body-->
            <div class="card-body">
              <div class="alert bg-light-info border border-info border border-dashed d-flex flex-column flex-sm-row w-100 p-5 mb-10">
                <!--begin::Content-->
                <div class="d-flex">
                  <div class="d-flex flex-column pe-0 pe-sm-10">
                    <span class="text-muted fs-7 fw-bold">Satker</span>
                    <h5 class="mb-1">{{$satkeraktif_nama}}</h5>
                  </div>
                    @php
                      $bulan_nama = \Carbon\Carbon::createFromFormat('!m',$bulan)->isoFormat('MMMM');
                    @endphp
                  <div class="d-flex flex-column pe-0 pe-sm-10">
                    <span class="text-muted fs-7 fw-bold">Bulan</span>
                    <h5 class="mb-1">{{$bulan_nama}}</h5>
                  </div>
                  <div class="d-flex flex-column pe-0 pe-sm-10">
                    <span class="text-muted fs-7 fw-bold">Tahun</span>
                    <h5 class="mb-1">{{$tahun}}</h5>
                  </div>
                </div>
                <!--end::Content-->
              </div>
              <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: 300px; width: 300px;">No Perkara</th>
                        <th>Status</th>
                        <th style="min-width: 50px; width: 50px;">Opsi</th>
                    </tr>
                  </thead>
                  <tbody id="table_body">
                    @foreach($row as $item)
                    <tr id="row_{{$item->id}}">
                      <td>{{$item->no_perkara}}</td>
                      <td class="{{$item->status_perkara == 'BERHASIL'?'':'text-danger'}}">{{$item->status_perkara}}</td>
                      <td>
                        <div class="d-flex">
                            <button type="button" class="btn btn-sm btn-icon btn-warning btnedit me-2" data-id="{{$item->id}}"><span class="bi bi-pencil-square"></span></button>
                            <button type="button" class="btn btn-sm btn-icon btn-danger btnremove" data-id="{{$item->id}}"><span class="bi bi-trash"></span></button>
                        </div>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <!--end::Body-->
            <div class="card-footer">
              <a href="{{route('rj.pn.input.index',['pilihtahun' => $tahun])}}" type="button" class="btn btn-sm me-2 btn-secondary">Tutup</a>
            </div>
          </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, bulan, tahun, satker, jenis){
        axios.get(url, {
            params: {
                'bulan': bulan,
                'tahun': tahun,
                'satker_id': satker,
                'jenis': jenis,
            }
        }).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 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();
    });

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

    $(document).ready(function(){

        $(document).on('click','#btncreate',function(e){
          btn = $(this);  
          create('{{ route("rj.pn.input.create") }}', '{{$bulan}}', '{{$tahun}}', '{{$satkeraktif}}');
        });

        $('#table_body').on('click','.btnedit',function(e){
          btn = $(this);
          edit('{{ route("rj.pn.input.edit") }}', btn.data('id'));
        });
        
        $('#table_body').on('click','.btnremove',function(e){
          btn = $(this);
          remove('{{ route("rj.pn.input.remove") }}', btn.data('id'));
        });
        
    });


</script>

@stop