@extends('merchant.templates.layout')

@section('head')
<link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.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; }
</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">
            <div>
                <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                <p class="text-muted small mb-0">Browse cargo companies available for your shipments</p>
            </div>
            <div style="width:240px;">
                <input type="text" id="searchInput" class="form-control form-control-sm"
                       placeholder="Search company, code, or email...">
            </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>Company</th>
                            <th>Location</th>
                            <th>Contact</th>
                            <th>Status</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>
$(function () {
    var table = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            url: '{{ route("merchant.cargo_companies.list") }}',
            data: function (d) {
                d.keyword = $('#searchInput').val();
            }
        },
        columns: [
            { data: 'company_col',  orderable: false },
            { data: 'location_col', orderable: false },
            { data: 'contact_col',  orderable: false },
            { data: 'status_col',   orderable: false, searchable: false },
            { data: 'action',       orderable: false, searchable: false, className: 'text-end' }
        ],
        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 cargo companies found</div>',
            zeroRecords: '<div class="text-center py-4 text-muted">No matching cargo companies</div>'
        }
    });

    var timer;
    $('#searchInput').on('keyup', function () {
        clearTimeout(timer);
        timer = setTimeout(function () { table.ajax.reload(); }, 350);
    });
});
</script>
@endsection