@extends('admin.layouts.app')

@section('title', 'Shipping Rates')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="sr-page-header d-flex align-items-center justify-content-between flex-wrap">
          <div>
            <h2 class="sr-title">Shipment Tracking</h2>
            <p class="sr-sub">Monitor and track all your shipments</p>
          </div>
          <div class="sr-header-btns">
            <button class="btn-typ1">Export Data</button>
            <button class="btn-typ2">Track Shipment</button>
          </div>
        </div>

        <!-- Stats strip -->
        <div class="sr-stats-strip">
          <div class="sr-single">
            <div class="sr-stat">
              <span class="sr-stat-num sr-num-blue">23</span>
              <span class="sr-stat-label">Pending Pickup</span>
            </div>
          </div>
          <div class="sr-single">
            <div class="sr-stat">
              <span class="sr-stat-num sr-num-purple">67</span>
              <span class="sr-stat-label">In Transit</span>
            </div>
          </div>
          <div class="sr-single">
            <div class="sr-stat">
              <span class="sr-stat-num sr-num-amber">34</span>
              <span class="sr-stat-label">Out for Delivery</span>
            </div>
          </div>
          <div class="sr-single">
            <div class="sr-stat">
              <span class="sr-stat-num sr-num-green">156</span>
              <span class="sr-stat-label">Delivered</span>
            </div>
          </div>
          <div class="sr-single">
            <div class="sr-stat">
              <span class="sr-stat-num sr-num-d-blue">5</span>
              <span class="sr-stat-label">Delayed</span>
            </div>
          </div>
        </div>

        <!-- Filter bar -->
        <div class="sr-card">
          <div class="sr-filter-bar">
            <div class="sr-search-wrap">
              <svg class="sr-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
              </svg>
              <input class="sr-search-input" type="search" placeholder="Search...">
            </div>
            <div class="sr-tabs">
              <button class="sr-tab active">All Carriers</button>
              <button class="sr-tab">Standard</button>
              <button class="sr-tab">Express</button>
              <button class="sr-tab">
                Date Range
                <svg class="sr-tab-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </button>
            </div>
          </div>
        </div>

        <!-- ======================================================
             Rate Card 1 — FedEx Express (Active / Recommended)
             ====================================================== -->
        <div class="sr-card">
          <div class="d-flex flex-wrap">
            <div class="sr-img-sect-full">
              <img src="{{ asset('admin_assets/images/shipping-blank.webp') }}" alt="track img">
            </div>
            <div class="sr-content-full">
              <div class="sr-card-top flex-wrap">
                <div class="sr-card-id-row">
                  <div class="sr-card-id-info">
                    <div class="sr-card-id-primary">
                      Tracking #: TRK-8945612347
                      <!-- <span class="separator">•</span>
                      <span class="carrier-name">FedEx Express</span> -->
                    </div>
                    <div class="sr-card-id-secondary">Order #ORD-2401 &nbsp;•&nbsp; FedEx Express</div>
                  </div>
                </div>
                <span class="sr-badge sr-badge--blue">Recommended</span>
              </div>
              <!-- Meta grid -->
              <div class="sr-meta-grid">
                <div>
                  <div class="sr-meta-label">Shipped From</div>
                  <div class="sr-meta-val">San Francisco, CA</div>
                </div>
                <div>
                  <div class="sr-meta-label">Destination</div>
                  <div class="sr-meta-val">New York, NY</div>
                </div>
                <div>
                  <div class="sr-meta-label">Ship Date</div>
                  <div class="sr-meta-val">Apr 6, 2026</div>
                </div>
                <div>
                  <div class="sr-meta-label">Est. Delivery</div>
                  <div class="sr-meta-val">Apr 9, 2026</div>
                </div>
              </div>

              <!-- Tracking status steps -->
              <div class="sr-steps-wrap">
                <div class="sr-step">
                  <div class="sr-step-circle done">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div class="sr-step-lbl">Picked Up</div>
                </div>
                <div class="sr-connector done"></div>
                <div class="sr-step">
                  <div class="sr-step-circle done">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div class="sr-step-lbl">In Transit</div>
                </div>
                <div class="sr-connector"></div>
                <div class="sr-step">
                  <div class="sr-step-circle pending">3</div>
                  <div class="sr-step-lbl">Out for Delivery</div>
                </div>
                <div class="sr-connector"></div>
                <div class="sr-step">
                  <div class="sr-step-circle pending">4</div>
                  <div class="sr-step-lbl">Delivered</div>
                </div>
              </div>

              <!-- Latest update info box -->
              <div class="sr-info-box sr-info-box--blue">
                <div class="sr-info-title">Latest Update</div>
                <p class="sr-info-text">Package arrived at FedEx facility in Chicago, IL – Apr 7, 3:45 PM</p>
              </div>

              <!-- Action buttons -->
              <div class="sr-action-row">
                <button class="btn-typ1">View Full History</button>
                <button class="btn-typ1">Track on Carrier Site</button>
                <button class="btn-typ1">Update Customer</button>
              </div>
            </div>
          </div>
          
        </div>

         <!-- ======================================================
             Rate Card 2 — USPS Ground (Rate Update Pending)
             ====================================================== -->
        <div class="sr-card orange-bodr">
          <div class="d-flex flex-wrap">
            <div class="sr-img-sect-full">
              <img src="{{ asset('admin_assets/images/delay.webp') }}" alt="track img">
            </div>
            <div class="sr-content-full">
              <div class="sr-card-top flex-wrap">
                <div class="sr-card-id-row">
                  <div class="sr-card-id-info">
                    <div class="sr-card-id-primary">
                      Tracking #: TRK-7834521098
                      <!-- <span class="separator">•</span>
                      <span class="carrier-name">FedEx Express</span> -->
                    </div>
                    <div class="sr-card-id-secondary">Order #ORD-2395 &nbsp;•&nbsp;  USPS Priority</div>
                  </div>
                </div>
                <span class="sr-badge sr-badge--red">⚠️ Delayed</span>
              </div>
              <!-- Meta grid -->
              <div class="sr-meta-grid">
                <div>
                  <div class="sr-meta-label">Shipped From</div>
                  <div class="sr-meta-val">San Francisco, CA</div>
                </div>
                <div>
                  <div class="sr-meta-label">Destination</div>
                  <div class="sr-meta-val">New York, NY</div>
                </div>
                <div>
                  <div class="sr-meta-label">Ship Date</div>
                  <div class="sr-meta-val strike">Apr 6, 2026</div>
                </div>
                <div>
                  <div class="sr-meta-label">Est. Delivery</div>
                  <div class="sr-meta-val updated">Apr 9, 2026</div>
                </div>
              </div>

              <!-- Tracking status steps -->
              <div class="sr-steps-wrap">
                <div class="sr-step">
                  <div class="sr-step-circle done">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div class="sr-step-lbl">Picked Up</div>
                </div>
                <div class="sr-connector done"></div>
                <div class="sr-step">
                  <div class="sr-step-circle done">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div class="sr-step-lbl">In Transit</div>
                </div>
                <div class="sr-connector"></div>
                <div class="sr-step">
                  <div class="sr-step-circle pending">3</div>
                  <div class="sr-step-lbl">Out for Delivery</div>
                </div>
                <div class="sr-connector"></div>
                <div class="sr-step">
                  <div class="sr-step-circle pending">4</div>
                  <div class="sr-step-lbl">Delivered</div>
                </div>
              </div>

              <!-- Latest update info box -->
              <div class="sr-info-box sr-info-box--red">
                <div class="sr-info-title red">Latest Update</div>
                <p class="sr-info-text">Package arrived at FedEx facility in Chicago, IL – Apr 7, 3:45 PM</p>
              </div>

              <!-- Action buttons -->
              <div class="sr-action-row">
                <button class="btn-typ1">Contact Carrier</button>
                <button class="btn-typ1">Notify Customer</button>
                <button class="btn-typ1">View Details</button>
              </div>
            </div>
          </div>
          
        </div>
</main>
@endsection