@extends('admin.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>
    #dataTable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; font-weight: 600; background: #f8fafc; white-space: nowrap; }
    #dataTable td { font-size: 13px; vertical-align: middle; }
    .avatar-xs .avatar-title { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; font-size: 13px; }
    .select2-container { width: 180px !important; }
    #searchInput { width: 260px; }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
                <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                <div class="d-flex gap-2">
                    <input type="text" id="searchInput" class="form-control form-control-sm"
                           placeholder="Search name, email, company, code...">
                    <select id="statusFilter" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        @foreach(config('global.account_statuses') as $k => $v)
                            <option value="{{ $k }}">{{ $v['text'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-nowrap table-hover align-middle" id="dataTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>User Code</th>
                                <th>Cargo Company</th>
                                <th>Contact</th>
                                <th>Location</th>
                                <th>Assigned Orders</th>
                                <th>Warehouses</th>
                                <th>Status</th>
                                <th>Approved</th>
                                <th>Registered</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, placeholder: 'All Status' });

    var searchTimer = null;

    var table = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            url: '{{ route("admin.cargo_companies.list") }}',
            data: function (d) {
                d.status_filter = $('#statusFilter').val();
                d.search = { value: $('#searchInput').val() };
            }
        },
        columns: [
            { data: 'DT_RowIndex',     searchable: false, orderable: false, width: '40px' },
            { data: 'user_code_col',   name: 'user_code' },
            { data: 'company_col',     name: 'company_name', orderable: false },
            { data: 'contact_col',     searchable: false, orderable: false },
            { data: 'location_col',    searchable: false, orderable: false },
            { data: 'orders_count',    searchable: false, orderable: false },
            { data: 'warehouses_count',searchable: false, orderable: false },
            { data: 'status_badge',    name: 'status', searchable: false, orderable: false },
            { data: 'approved_col',    searchable: false, orderable: false },
            { data: 'registered_at',   name: 'created_at' },
            { data: 'action',          searchable: false, orderable: false, className: 'text-end' }
        ],
        order: [[9, 'desc']],
        pageLength: 10,
        language: {
            processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>',
            emptyTable: '<div class="text-center py-4 text-muted">No cargo companies found</div>',
            zeroRecords: '<div class="text-center py-4 text-muted">No matching cargo companies</div>',
            lengthMenu: 'Show _MENU_',
            info: 'Showing _START_ to _END_ of _TOTAL_',
            infoEmpty: 'No entries',
            infoFiltered: '(filtered from _MAX_)',
            paginate: { previous: '‹', next: '›' }
        }
    });

    $('#statusFilter').on('change', function () { table.ajax.reload(); });

    $('#searchInput').on('keyup', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(function () { table.ajax.reload(); }, 350);
    });

    $(document).on('click', '.change-status', function () {
        var id = $(this).data('id'), status = $(this).data('status');
        $.ajax({
            url: '{{ route("admin.cargo_companies.status") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', id: id, status: status },
            success: function (r) {
                if (r.status === 'success') { toastr.success(r.message); table.ajax.reload(null, false); }
                else toastr.error(r.message);
            },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed to update status'); }
        });
    });
});
</script>
@endsection