@extends('template.admin.base')

@push('css')
<link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/admin/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title m-0">Daftar Provinsi</h5>
            <div id="buttons">
                <a href="{{ route('admin.provinsi.create') }}" class="btn btn-primary">
                <i class="icon-base ti tabler-plus me-sm-1"></i> Provinsi Baru
                </a>
            </div>
        </div>  

        <div class="card-datatable table-responsive pt-0">
            @if (session('success'))
            <div class="alert alert-dismissible alert-success d-flex align-items-center" role="alert">
                <span class="alert-icon rounded me-2">
                    <i class="icon-base ti tabler-check icon-md w-px-30"></i>
                </span>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            <table class="datatables-basic table" id="table">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Kode</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
                    
</div>

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="formDelete" action="{{ route('admin.provinsi.destroy', ':id') }}" method="POST">
            @csrf
            @method('DELETE')
            <div class="modal-header">
                <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Menghapus Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah data tersebut benar akan dihapus?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                    Batal
                </button>
                <button type="submit" class="btn btn-danger">Hapus</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('js')
    <script src="{{ asset('assets/admin/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    
    <script>
        $(function () {
            $('#table').DataTable({
                'responsive': true, 
                'lengthChange': true, 
                'autoWidth': false,
                'processing': true,
                'serverSide': true,
                'ajax': function(data, callback, settings) {
                    var order = '';
                    if (data.order.length > 0) {
                        order = data.order[0].dir == 'desc' ? '-' : '';
                        order = order + data.columns[data.order[0].column].data;
                    }
                    
                    $.ajax({
                        url: "{{ route('admin.provinsi.list') }}",
                        data: { 
                            size: data.length,
                            page: (data.start / data.length) + 1,
                            search: data.search.value,
                            sort: order, 
                            _token:'{{ csrf_token() }}'
                        },
                        type: "POST",
                        success: function(res) { 
                            callback({
                                recordsTotal: res.total,
                                recordsFiltered: res.total,
                                data: res.data
                            });
                        }
                    });

                },
                'columns': [
                    { data: 'nama' },
                    { data: 'kode' },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        targets: -1,
                        render: function (data, type, full, meta) {
                            var urlEdit = '{{ route("admin.provinsi.edit", ":id") }}';
                            urlEdit = urlEdit.replace(':id', data);
                            
                            var renderValue = 
                            '<a href="' + urlEdit + '" class="btn btn-sm btn-icon">' +
                            '   <i class="text-primary icon-base ti tabler-pencil"></i>' +
                            '</a>' + 
                            '<button type="button" class="btn btn-sm btn-icon delete" data-id="' + data + '">' + 
                            '   <i class="text-danger icon-base ti tabler-trash"></i>' +
                            '</button>';
                            return renderValue;
                        }
                    }
                ],
            });

            $('#table tbody').on( 'click', 'button.delete', function (e) {
                e.preventDefault();

                var form = $('#formDelete');
                var action = form.attr('action');
                action = action.replace(':id', $(this).data('id'));
                form.attr('action', action);
                $('#deleteConfirmModal').modal('show');
            });
        });
    </script>
@endpush