@extends('layouts.master_new')
@section('style')
    <style>
        /* Visual tweaks to match the provided mockup.
           Only styling/markup changes — logic and JS IDs preserved. */
  .nav-pills-custom .nav-link {
    background: #f3f6f9;
    border-radius: 10px;
    padding: .45rem 1rem;
    color: #000;
    font-weight: 600;
  }
  .nav-pills-custom .nav-link.active {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 2px 8px rgba(13,110,253,0.12);
  }
  .nav-pills-custom .badge {
    font-weight:600;
  }
  /* make export select look like a button to match screenshot */

  /* subtle spacing for toolbar buttons */
  .card-toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
  .card-toolbar .btn { margin-left: .25rem; }
  .card-toolbar > * { white-space:nowrap; }
  .card-toolbar .form-select { min-width:140px; }
  .badge-light-primary { background:#e7f1ff; color:#0d6efd; }
.select2-container--bootstrap5 .select2-selection {
    width: 33px !important;
}
.select2-dropdown--below{
    width: 140.547px !important;
}
.nav.nav-pills .show > .nav-link, .nav.nav-pills .nav-link.active {
        background-color: #1B84FF !important;
        color: #fff !important;
}

.loadboard-tabs {
    margin: 10px 30px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

/* Pills */
.loadboard-tabs .nav-link {
    border-radius: 10px;
    padding: 8px 16px;
    color: #6b7280;
    font-weight: 500;
    background: transparent;
    transition: all .2s ease;
}

/* Active tab */
.loadboard-tabs .nav-link.active {
    background: #1677ff;
    color: #fff;
}

/* Hover */
.loadboard-tabs .nav-link:hover {
    background: #f3f4f6;
}

/* Count text like (50) */
.loadboard-tabs .count {
    margin-left: 4px;
    font-weight: 500;
    opacity: .85;
}

/* Switch align */
.loadboard-tabs .form-switch {
    padding-left: 2.5em;
}
.nav-link{
  color:#000 !important;
}
  
.dispatch-header .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.dispatch-header .btn-light {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
.dispatch-header .separator {
    height: 28px;
    border-left: 1px solid #e5e7eb;
}
.filter-shell {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
    gap: 6px;
}

.filter-search {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 8px 12px;
}

.filter-search i {
    color: #9ca3af;
    margin-right: 8px;
}

.filter-search input {
    border: none;
    outline: none;
    width: 100%;
}

.filter-text {
    padding: 6px 10px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.filter-date {
    display: flex;
    align-items: center;
    padding: 6px 10px;
}

.filter-date i {
    margin-right: 6px;
    color: #6b7280;
}

.filter-date input {
    border: none;
    outline: none;
    width: 160px;
}

.filter-divider {
    width: 1px;
    height: 26px;
    background: #e5e7eb;
}

.filter-pill {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 14px;
    font-weight: 500;
}

/* Main container look */
.modern-loadboard-table {
    border-collapse: separate !important;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

/* Header */
.modern-loadboard-table thead th {
    background: #fafafa;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

/* Vertical separators */
.modern-loadboard-table thead th:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #e5e7eb;
}

/* Rows */
.modern-loadboard-table tbody tr {
    border-bottom: 1px solid #f0f1f3;
}

.modern-loadboard-table tbody tr:hover {
    background: #f9fafb;
}

/* Cells */
.modern-loadboard-table td {
    padding: 16px 12px;
}

/* Checkbox */
.modern-loadboard-table .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

/* Links */
.modern-loadboard-table a {
    color: #1677ff;
    font-weight: 600;
}

/* Rate bold */
.modern-loadboard-table td.text-end {
    font-weight: 600;
}

/* Status badge */
.modern-loadboard-table .badge {
    border-radius: 8px;
    font-weight: 600;
}

/* Action buttons */
.modern-loadboard-table .btn-primary {
    border-radius: 10px;
    padding: 6px 14px;
}

.status-filter-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;   
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
}

/* Dots */
.status-chip .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Colors */
.status-chip.open {
    background: #eaf7ef;
    color: #1e7f43;
}
.status-chip.open .dot { background:#2fb36d; }

.status-chip.invoice {
    background: #fff4e5;
    color: #9a5b13;
}
.status-chip.invoice .dot { background:#f4a640; }

.status-chip.delivered {
    background: #fff1eb;
    color: #a33f2b;
}
.status-chip.delivered .dot { background:#f27c5a; }

.status-chip.more .dot { background:#2b66d9; }

.status-chip.more {
    background: #e8f1ff;
    color: #2b66d9;
}

/* Right buttons */
.status-filter-bar .btn {
    border-radius: 10px;
}
.dispatch-header {
    background: #f9fafb;
    /* border: 1px solid #e5e7eb;
    border-radius: 16px; */
    padding-left: 20px;
    padding-right: 20px;
}

/* Title */
.dispatch-header h3 {
    font-size: 20px;
}

/* All buttons */
.dispatch-header .btn,
.dispatch-header select {
    border-radius: 12px;
    font-weight: 500;
    padding: 7px 14px;
}

/* Light buttons */
.dispatch-header .btn-light {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* Export select like blue button */
.dispatch-header select {
    background: #1677ff;
    color: #ffffff;
    border: none;
    width: 110px;
}

/* Separator */
.dispatch-header .separator {
    height: 28px;
    border-left: 1px solid #e5e7eb;
}

/* Icon buttons */
.dispatch-header .btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.filter-pill {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 6px 14px;
}
    </style>
@endsection
@section('content')
<!-- BEGIN: Modern Dispatch LoadBoard (Bootstrap 5 + Metronic-friendly) -->
<div class="card card-flush dispatch-header" style="background: #f9f9f9;">
  <!-- Header -->
  <div class="card-header align-items-center py-4 dispatch-header">
    <div class="card-title flex-column">
      <h3 class="fw-bold mb-0">Dispatch Load Board</h3>
      <div class="text-muted fs-7">Manage queues, filters, and load actions</div>
    </div>

    <div class="card-toolbar gap-2">
      <button type="button" class="btn btn-primary btn-sm">
        <i class="fa-solid fa-plus me-2"></i>New Load
      </button>

      <div class="dropdown">
        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
          <i class="fa-solid fa-layer-group me-2"></i>Bulk Actions
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#"><i class="fa-solid fa-user-check me-2"></i>Assign Driver</a></li>
          <li><a class="dropdown-item" href="#"><i class="fa-solid fa-truck-fast me-2"></i>Mark In Transit</a></li>
          <li><a class="dropdown-item" href="#"><i class="fa-solid fa-file-invoice me-2"></i>Create Invoice</a></li>
        </ul>
      </div>

      <!-- Keep your existing Export select id so your JS can keep working -->
      <select name="downloadOptions" id="downloadOptions" class="form-control">
        <option value="">Export</option>
        <option value="excel">Excel</option>
        <option value="csv">CSV</option>
        <option value="print">Print</option>
        <option value="reset">Reset</option>
        <option value="reload">Reload</option>
      </select>

      <div class="separator separator-vertical mx-2"></div>

      <a href="javascript:void(0)" class="btn btn-icon btn-light btn-sm" data-bs-toggle="tooltip" title="Notifications">
        <i class="fa-regular fa-bell"></i>
      </a>
      <a href="javascript:void(0)" class="btn btn-icon btn-light btn-sm" data-bs-toggle="tooltip" title="Settings">
        <i class="fa-solid fa-gear"></i>
      </a>
    </div>
  </div>

  <!-- Tabs (Queues) -->
<div class="card p-3 loadboard-tabs">

<ul class="nav nav-pills gap-2 align-items-center" role="tablist">
 @php
    $currentStatus = !empty(request()->get('statusp')) ? request()->get('statusp') : request()->get('statusd');
    $readytoinvoice = request()->get('readytoinvoice');
    $invoice = request()->get('invoice');
@endphp
    <li class="nav-item">
        <a class="nav-link {{ $currentStatus == 'Open' ? 'active' : '' }}"  href="?statusp=Open">
            Open <span class="count">({{$OpenloadCount}})</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link {{ $readytoinvoice == 1 ? 'active' : '' }}" href="?readytoinvoice=1">
            Ready to Invoice <span class="count">({{$ReadytoinvoiceloadCount}})</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link {{ $currentStatus == 'Delivered' ? 'active' : '' }}" href="?statusd=Delivered">
            Delivered <span class="count">({{$DeliverdloadCount}})</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link {{ $invoice == 1 ? 'active' : '' }}" href="?invoice=1">
            Invoice <span class="count">({{$InvoiceloadCount}})</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link"  href="{{ route('assets.trucksBoard.index') }}">
            Empty Trucks <span class="count"></span>
        </a>
    </li>

    <li class="ms-auto d-flex align-items-center">
        <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" id="boardViewSwitch">
            <label class="form-check-label ms-2">Board view</label>
        </div>
    </li>

</ul>
</div>

  <div class="card-body pt-0" style="background: #f8f9f9;">
   
<!-- Filter Bar -->
<div class="filter-shell">

    <!-- Search -->
    <div class="filter-search">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input id="search" type="text" placeholder="Search loads...">
    </div>

    <div class="filter-divider"></div>

    <!-- Pickup → Delivery Label -->
    <div class="filter-text">
        Pickup → Delivery
    </div>

    <div class="filter-divider"></div>

    <!-- SINGLE Date Range Picker -->
    <div class="filter-date" id="range">
        <i class="fa-solid fa-calendar-days"></i>
        <span id="range_text">Select Date Range</span>
    </div>

    <!-- Hidden fields -->
    <input type="hidden" id="start_date" name="start_date">
    <input type="hidden" id="end_date" name="end_date">

    <div class="filter-divider"></div>

      @if(getAuthMemberId() != 28)
    <!-- Status -->
    <div class="dropdown">
     <!-- Status Select -->