@extends('admin.layouts.app')

@section('title', 'District')
@section('datatable')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">District</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item active">District</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="row">
    
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <div class="flex-grow-1">
                    <a href="{{route('admin.district.create')}}" class="btn btn-info add-btn" ><i class="ri-add-fill me-1 align-bottom"></i> Add District</a>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                        <a href="#" onclick="filter()"  class="btn btn-danger"><i class="ri-filter-2-line me-1 align-bottom"></i> Filter</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th width="10">#</th>
                            <th width="100">Nama</th>
                            <th width="120">Kabupaten / Kota</th>
                            <th width="60">Dibuat</th>
                            <th width="10">#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search" autocomplete="off">	
        <div class="row">
            <div class="col-md-12">
                    <label class="control-label" for="province_name">Select Province</label>
                    <select name="province_name" class="form-control" data-placeholder="Select Province"></select>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                    <label class="control-label" for="region_name">Select Region</label>
                    <select name="region_name" class="form-control" data-placeholder="Select Region"></select>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                    <label class="control-label" for="district_name">Name</label>
                    <input type="text" name="district_name" class="form-control" placeholder="Name">
            </div>
        </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3 d-grid">
        <button form="form-search" type="submit" class="btn btn-primary" title="Apply"><i class="ri-search-line"></i> Filter</button>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript">
function filter(){
    $('#searchCanvas').offcanvas('show');
}
$(function(){
    $( "select[name=province_name]" ).select2({
        ajax: {
          url: "{{route('admin.province.select')}}",
          type:'GET',
          dataType: 'json',
          data: function (params) {
            return {
              name:params.term,
              page:params.page,
              limit:30,
            };
          },
          processResults: function (data,params) {
            params.page = params.page || 1;
            var option = [];
            $.each(data.rows,function(index,item){
              option.push({
                id:item.id,  
                text: `${item.name}`,
              });
            });
            return {
              results: option, 
              pagination: { 
                more : (params.page * 30) < data.total
              },
            };
          },
        },
        dropdownParent: $("#searchCanvas"),
      });

      $(document).on("change", "select[name=province_name]", function () {
        $('select[name=region_name]').val(null);
      });

    $( "select[name=region_name" ).select2({
        ajax: {
          url: "{{route('admin.region.select')}}",
          type:'GET',
          dataType: 'json',
          data: function (params) {
            return {
              province_id:$('select[name=province_name]').val(),
              name:params.term,
              page:params.page,
              limit:30,
            };
          },
          processResults: function (data,params) {
            params.page = params.page || 1;
            var option = [];
            $.each(data.rows,function(index,item){
              option.push({
                id:item.id,  
                text: `${item.type} ${item.name}`,
                "data-code": item.postal_code
              });
            });
            return {
              results: option, 
              pagination: { 
                more : (params.page * 30) < data.total
              },
            };
          },
        },
        dropdownParent: $("#searchCanvas"),
      });

    dataTable = $('.datatable').DataTable( {
        stateSave:true,
        processing: true,
        serverSide: true,
        filter:false,
        info:false,
        lengthChange:true,
        responsive: true,
        order: [[ 4, "asc" ]],
        ajax: {
            url: "{{route('admin.district.read')}}",
            type: "GET",
            data:function(data){
                var province_name = $('#form-search').find('select[name=province_name]').val();
                var region_name = $('#form-search').find('select[name=region_name]').val();
                var district_name = $('#form-search').find('input[name=district_name]').val();
                data.province_id = province_name;
                data.region_id = region_name;
                data.district_name = district_name;
            }
        },
        columnDefs:[
            {
                orderable: false,targets:[0]
            },
            { className: "text-right", targets: [0] },
            { className: "text-center", targets: [4] },
            { render: function ( data, type, row ) {
                return `${row.region_name}`
            },targets: [2]
            },
            { render: function ( data, type, row ) {
                return `<div class="dropdown d-inline-block">
                <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-fill align-middle"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{{url('admin/district')}}/${row.id}/edit"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
                            <li>
                                <a href="#" class="dropdown-item delete" data-id="${row.id}">
                                    <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete
                                </a>
                            </li>
                            </ul>
                            </div>`
            },targets: [4]
            }
        ],
        columns: [
            { data: "no" },
            { data: "name" },
            { data: "region_name" },
            { data: "created_at" },
            { data: "id" },
        ]
    });
    $('#form-search').submit(function(e){
        e.preventDefault();
        dataTable.draw();
        $('#searchCanvas').offcanvas('hide');
    })
    $(document).on('click','.delete',function(){
        var id = $(this).data('id');
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: !0,
            confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
            cancelButtonClass: "btn btn-danger w-xs mt-2",
            confirmButtonText: "Yes, delete it!",
            buttonsStyling: !1,
            showCloseButton: !0,
        }).then(function (t) {
            if(t.value){
                var data = {
                    _token: "{{ csrf_token() }}",
                    _method:'delete'
                };
                $.ajax({
                    url: `{{url('admin/district')}}/${id}`,
                    dataType: 'json', 
                    data:data,
                    type:'POST',
                    beforeSend:function(){
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response){
                    if(response.status){
                        $('.overlay').addClass('d-none');
                        Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                        dataTable.ajax.reload( null, false );
                    }
                    else{
                        Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                }).fail(function(response){
                    var response = response.responseJSON;
                    $('.overlay').addClass('d-none');
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                })	
            }
            //t.value && Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 });
        });
    })
})
</script>
@endpush