@extends('cargo_company.templates.layout')

@section('head')
<link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.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: 160px; }
    .filter-bar .filter-item.search { flex: 1; min-width: 260px; margin-left: auto; max-width: 340px; }
    .filter-bar label {
        font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px; margin: 0;
    }
    .filter-bar .form-control { height: 36px; font-size: 13.5px; border-color: #e5e9f0; }

    .notice {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .notice.info  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
    .notice i { font-size: 20px; flex-shrink: 0; }
    .notice .msg { flex: 1; font-size: 13.5px; font-weight: 500; min-width: 180px; }
    .notice .msg strong { font-weight: 700; }
</style>
@endsection

@section('content')
<div class="row"><div class="col-lg-12">

    {{-- Info banner when limit is reached --}}
    @if($hasWarehouse)
        <div class="notice info">
            <i class="ri-information-line"></i>
            <div class="msg">
                Your cargo company already has a warehouse account.
                Only <strong>one warehouse</strong> is allowed per cargo company.
            </div>
        </div>
    @endif

    <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">Manage warehouse accounts for your cargo company</p>
            </div>
            @if(! $hasWarehouse)
                <a href="{{ route('cargo_company.warehouses.create') }}" class="btn btn-primary btn-sm">
                    <i class="ri-add-line"></i> Add Warehouse
                </a>
            @endif
        </div>

        <div class="filter-bar">
            <div class="filter-item search">
                <label>Search</label>
                <input type="text" id="searchInput" class="form-control form-control-sm"
                       placeholder="Search by name, email, or 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 class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Contact</th>
                            <th>Phone Verified</th>
                            <th>Status</th>
                            <th>Created</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("cargo_company.warehouses.list") }}',
            data: function (d) { d.keyword = $('#searchInput').val(); }
        },
        columns: [
            { data: 'DT_RowIndex',        searchable: false, orderable: false, width: '40px' },
            { data: 'name_col',           searchable: false, orderable: false },
            { data: 'contact_col',        searchable: false, orderable: false },
            { data: 'phone_verified_col', searchable: false, orderable: false },
            { data: 'status_col',         searchable: false, orderable: false },
            { data: 'created_col',        name: 'created_at' }
        ],
        order: [[5, '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 warehouses yet</div>',
            zeroRecords: '<div class="text-center py-4 text-muted">No matching warehouses</div>',
            lengthMenu: 'Show _MENU_',
            info: 'Showing _START_ to _END_ of _TOTAL_',
            infoEmpty: 'No entries',
            infoFiltered: '(filtered from _MAX_)',
            paginate: { previous: '‹', next: '›' }
        }
    });

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