@extends('backend.template.layouts.template-base')
@section('title', 'Delivery Persons List')

@section('content')
    <section>

        <div class="delivery-team  justify-content-between mb-4">
            <h2 class=" title-delivery text-title fw-semibold mb-0">Delivery Persons List</h2>
            <a href="{{ route('backend.template.delivery-team.create') }}"
                class="button-green d-flex align-items-center gap-2 px-3">
                <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                <span>Add New Person</span>
            </a>
        </div>

        {{-- Outer white container --}}
        <div class="fb-container">

            {{-- Filter Row --}}
            <div class="fb-filter-row justify-content-between">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="table-search-box" style="min-width:240px;">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                            alt="search">
                        <input type="text" id="dtSearch" placeholder="Search by user ID or name"
                            class="table-search-input">
                    </div>
                    <select id="roleFilter" class="table-filter-select" style="width:150px;">
                        <option value="">All Roles</option>
                        <option value="driver">Driver</option>
                        <option value="assistant">Assistant</option>
                    </select>
                    <select id="statusFilter" class="table-filter-select" style="width:150px;">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="draft">Draft</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span style="font-size:13px;color:#6b7280;">Show</span>
                    <select id="dtLength" class="table-filter-select" style="width:72px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span style="font-size:13px;color:#6b7280;">entries</span>
                </div>
            </div>

            {{-- Table --}}
            <div class="table-responsive">
                <table id="deliveryPersonsTable" class="table align-middle mb-0" style="min-width:900px;">
                    <thead class="all-table-head">
                        <tr>
                            <th class="table-head-content" style="width:110px;">Delivery<br>Person ID</th>
                            <th class="table-head-content">Delivery Person Details</th>
                            <th class="table-head-content">Zone</th>
                            <th class="table-head-content">Added By</th>
                            <th class="table-head-content">Added On</th>
                            <th class="table-head-content">Last Login</th>
                            <th class="table-head-content">Status</th>
                            <th class="table-head-content">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>

            {{-- Pagination Footer --}}
            <div class="d-flex justify-content-between align-items-center px-3 py-3" style="border-top:1px solid #f3f4f6;">
                <span id="dtInfo" style="font-size:13px;color:#6b7280;"></span>
                <div id="dtPagination" class="d-flex align-items-center gap-1"></div>
            </div>

        </div>{{-- /.fb-container --}}

    </section>

    {{-- Status Modal --}}
    <div class="modal fade" id="statusPersonModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" id="statusPersonHeader" style="height:60px;">
                    <h5 class="mt-2" id="statusPersonTitle"></h5>
                </div>
                <div class="modal-body">
                    <p id="statusPersonBody" class="mb-1"></p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="statusPersonConfirm" class="btn-inactive-action">Confirm</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deletePersonModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header delete-header" style="height:60px;">
                    <h5 class="mt-2">Delete Person?</h5>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong id="deletePersonName"></strong>? This action cannot be
                        undone.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="deletePersonConfirm" class="btn-delete-action">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const BASE = "{{ url('/admin/delivery-team') }}";

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        var table = $('#deliveryPersonsTable').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            dom: 'rt',
            ajax: {
                url: '{{ route('backend.template.delivery-team.index') }}',
                data: function(d) {
                    d.status = $('#statusFilter').val();
                    d.role = $('#roleFilter').val();
                }
            },
            columns: [{
                    data: 'person_code',
                    name: 'person_code'
                },
                {
                    data: 'person_details',
                    name: 'person_details',
                    orderable: false
                },
                {
                    data: 'zone_name',
                    name: 'zone_name',
                    orderable: false
                },
                {
                    data: 'added_by',
                    name: 'added_by',
                    orderable: false
                },
                {
                    data: 'added_on',
                    name: 'added_on',
                    orderable: false
                },
                {
                    data: null,
                    defaultContent: '<span style="color:#9ca3af;font-size:13px;">—</span>',
                    orderable: false
                },
                {
                    data: 'status_badge',
                    name: 'status',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                },
            ],
            pageLength: 10,
            drawCallback: function() {
                var info = this.api().page.info();
                var from = info.recordsDisplay === 0 ? 0 : info.start + 1;
                var to = Math.min(info.end, info.recordsDisplay);
                $('#dtInfo').text(from + '–' + to + ' of ' + info.recordsDisplay + ' results');
                renderPagination(info);
            }
        });

        function renderPagination(info) {
            var html = '';
            var prevDis = info.page === 0 ? 'disabled' : '';
            var nextDis = info.page >= info.pages - 1 ? 'disabled' : '';
            html += '<button class="dt-page-btn" ' + prevDis +
                ' onclick="table.page(\'previous\').draw(\'page\')"><i class="ri-arrow-left-s-line"></i></button>';
            html += '<span class="dt-page-current">' + (info.page + 1) + '</span>';
            html += '<button class="dt-page-btn" ' + nextDis +
                ' onclick="table.page(\'next\').draw(\'page\')"><i class="ri-arrow-right-s-line"></i></button>';
            $('#dtPagination').html(html);
        }

        $('#dtSearch').on('input', debounce(function() {
            table.search(this.value).draw();
        }, 350));
        $('#statusFilter, #roleFilter').on('change', function() {
            table.draw();
        });
        $('#dtLength').on('change', function() {
            table.page.len(+this.value).draw();
        });

        function debounce(fn, ms) {
            var t;
            return function() {
                clearTimeout(t);
                t = setTimeout(fn.bind(this), ms);
            };
        }

        var statusPersonId = null,
            statusPersonNext = null;

        function openStatusModal(id, current, name) {
            statusPersonId = id;
            statusPersonNext = current === 'active' ? 'inactive' : 'active';
            var isInact = statusPersonNext === 'inactive';
            $('#statusPersonTitle').text(isInact ? 'Inactivate Person' : 'Activate Person');
            $('#statusPersonHeader').attr('class', 'modal-header ' + (isInact ? 'inactive-header' : 'activate-header'));
            $('#statusPersonBody').html((isInact ? 'Inactivate ' : 'Activate ') + '<strong>' + name + '</strong>?');
            $('#statusPersonConfirm').attr('class', isInact ? 'btn-inactive-action' : 'btn-activate-action').text(isInact ?
                'Inactivate' : 'Activate');
            new bootstrap.Modal(document.getElementById('statusPersonModal')).show();
        }
        $('#statusPersonConfirm').on('click', function() {
            $(this).prop('disabled', true);
            $.ajax({
                url: BASE + '/' + statusPersonId + '/status',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'PATCH',
                    status: statusPersonNext
                },
                success: function() {
                    toastr.success('Status updated.');
                    setTimeout(() => table.draw(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#statusPersonConfirm').prop('disabled', false);
                }
            });
        });

        var deletePersonId = null;

        function openDeleteModal(id, name) {
            deletePersonId = id;
            $('#deletePersonName').text(name);
            new bootstrap.Modal(document.getElementById('deletePersonModal')).show();
        }
        $('#deletePersonConfirm').on('click', function() {
            $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: BASE + '/' + deletePersonId + '/destroy',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'DELETE'
                },
                success: function() {
                    toastr.success('Person deleted.');
                    bootstrap.Modal.getInstance(document.getElementById('deletePersonModal')).hide();
                    table.draw();
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#deletePersonConfirm').prop('disabled', false).text('Delete');
                }
            });
        });
    </script>
@endsection