@extends('cargo_company.templates.layout')

@section('head')
    <link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .filter-bar {
            display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
            padding: 16px 20px; border-bottom: 1px solid #e9edf2; background: #fafbfd;
        }
        .filter-bar .filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
        .filter-bar .filter-item.search { flex: 1; min-width: 220px; }
        .filter-bar label {
            font-size: 11px; font-weight: 600; color: #64748b;
            text-transform: uppercase; letter-spacing: .5px; margin: 0;
        }
        .filter-bar .form-select, .filter-bar .form-control {
            height: 36px; font-size: 13.5px; border-color: #e5e9f0;
        }
        .filter-bar .form-select:focus, .filter-bar .form-control:focus {
            border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1);
        }
        .filter-bar .select2-container { width: 100% !important; }
        .filter-bar .select2-selection {
            height: 36px !important; border: 1px solid #e5e9f0 !important;
            border-radius: 6px !important; padding: 5px 8px !important;
        }
        .filter-bar .select2-selection__rendered { line-height: 24px !important; font-size: 13.5px !important; }
        .filter-bar .select2-selection__arrow { height: 34px !important; }

        #dataTable thead th {
            background: #fafbfd;
            font-size: 11px; font-weight: 700; color: #64748b;
            text-transform: uppercase; letter-spacing: .6px;
            padding: 13px 20px; border-bottom: 1px solid #e9edf2;
            white-space: nowrap;
        }
        #dataTable tbody td {
            padding: 14px 20px; font-size: 13.5px; color: #334155;
            border-bottom: 1px solid #f1f4f9; vertical-align: middle;
        }
        #dataTable tbody tr:last-child td { border-bottom: none; }
        #dataTable tbody tr:hover { background: #fafbfd; }

        #dataTable .action-cell {
            display: inline-flex; gap: 4px;
        }
    </style>
@endsection

@section('content')
    <div class="row"><div class="col-lg-12">
        <div class="card">
            <div class="card-header py-3 border-bottom">
                <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                <p class="text-muted small mb-0">Track all transport deliveries for your shipments</p>
            </div>

            <div class="filter-bar">
                <div class="filter-item">
                    <label>Status</label>
                    <select id="statusFilter" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        @foreach(config('global.transporter_delivery_statuses') as $k => $v)
                            <option value="{{ $k }}">{{ $v['text'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="filter-item search">
                    <label>Search</label>
                    <input type="text" id="searchInput" class="form-control form-control-sm"
                           placeholder="Tracking, order reference, or transporter code...">
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-nowrap table-hover align-middle mb-0" id="dataTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Tracking</th>
                                <th>Order</th>
                                <th>Transporter Code</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Charges</th>
                                <th>Status</th>
                                <th>Marketplace</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div></div>
@endsection

@section('script')
    <script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function () {
            $('#statusFilter').select2({ minimumResultsForSearch: -1 });

            const table = $('#dataTable').DataTable({
                processing: true, serverSide: true, searching: false,
                ajax: {
                    url: '{{ route("cargo_company.deliveries.list") }}',
                    data: d => {
                        d.status  = $('#statusFilter').val();
                        d.keyword = $('#searchInput').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex',     searchable: false, orderable: false, width: '40px' },
                    { data: 'tracking_col',    name: 'tracking_number' },
                    { data: 'order_col',       searchable: false, orderable: false },
                    { data: 'transporter_col', searchable: false, orderable: false },
                    { data: 'qty_col',         searchable: false, orderable: false, className: 'text-end' },
                    { data: 'charges_col',     searchable: false, orderable: false, className: 'text-end' },
                    { data: 'status_badge',    searchable: false, orderable: false },
                    { data: 'published_col',   searchable: false, orderable: false },
                    { data: 'action',          searchable: false, orderable: false, className: 'text-end' }
                ],
                order: [[0, 'desc']],
                pageLength: 15,
                language: {
                    processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>',
                    emptyTable: '<div class="text-center py-4 text-muted">No deliveries yet</div>',
                    zeroRecords: '<div class="text-center py-4 text-muted">No matching deliveries</div>',
                    lengthMenu: 'Show _MENU_',
                    info: 'Showing _START_ to _END_ of _TOTAL_',
                    infoEmpty: 'No entries',
                    infoFiltered: '(filtered from _MAX_)',
                    paginate: { previous: '‹', next: '›' }
                }
            });

            $('#statusFilter').on('change', () => table.ajax.reload());
            let t;
            $('#searchInput').on('keyup', function () {
                clearTimeout(t); t = setTimeout(() => table.ajax.reload(), 350);
            });

            /* ═══ Toggle publish (quick action from list) ═══ */
            $(document).on('click', '.toggle-publish-btn', function (e) {
                e.preventDefault();

                const $btn        = $(this);
                const url         = $btn.data('url');
                const isPublished = $btn.data('published') === 1 || $btn.data('published') === '1';

                Swal.fire({
                    title: isPublished ? 'Unpublish this delivery?' : 'Publish to marketplace?',
                    text: isPublished
                        ? 'Products will be hidden from the marketplace.'
                        : 'Products will be visible to end users on the marketplace.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: isPublished ? 'Yes, unpublish' : 'Yes, publish',
                    confirmButtonColor: isPublished ? '#dc2626' : '#4338ca',
                }).then(r => {
                    if (!r.isConfirmed) return;

                    $btn.prop('disabled', true);

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function (res) {
                            if (res.status === 'success') {
                                toastr.success(res.message);
                                table.ajax.reload(null, false);
                            } else {
                                toastr.error(res.message || 'Failed');
                                $btn.prop('disabled', false);
                            }
                        },
                        error: function (xhr) {
                            toastr.error(xhr.responseJSON?.message || 'Failed');
                            $btn.prop('disabled', false);
                        }
                    });
                });
            });
        });
    </script>
@endsection