@extends('vendor.layouts.app')

@section('title', 'Returns Tracking')

@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">Returns Tracking</h2>
            <p class="sr-sub">Monitor incoming return shipments</p>
          </div>
          <div class="sr-header-btns">
            <button class="btn-typ1">Export Report</button>
            <button class="btn-typ2">Generate Label</button>
          </div>
        </div>

        <!-- Stats strip -->
        <div class="sr-stats-strip rt">
          <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>

        <!-- Filter bar -->
        <div class="sr-card">
          <div class="sr-filter-bar">
            <div class="sr-tabs">
              <button class="sr-tab active">All Returns</button>
              <button class="sr-tab">In Transit</button>
              <button class="sr-tab">Out for Delivery</button>
              <button class="sr-tab">Completed</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">
                <div class="sr-card-id-row">
                  <div class="sr-card-id-info">
                    <div class="sr-card-id-primary">
                      Return #RTN-2401
                      <!-- <span class="separator">•</span>
                      <span class="carrier-name">FedEx Express</span> -->
                    </div>
                    <div class="sr-card-id-secondary">Order #ORD-2385 &nbsp;•&nbsp; USPS Priority Return</div>
                  </div>
                </div>
                <span class="sr-badge sr-badge--blue">In Transit</span>
              </div>
              <!-- Meta grid -->
              <div class="sr-meta-grid rt">
                <div>
                  <div class="sr-meta-label">Product</div>
                  <div class="sr-meta-val">Wireless Headphones</div>
                </div>
                <div>
                  <div class="sr-meta-label">Customer</div>
                  <div class="sr-meta-val">Sarah Johnson</div>
                </div>
                <div>
                  <div class="sr-meta-label">Return Reason</div>
                  <div class="sr-meta-val">Defective</div>
                </div>
                <div>
                  <div class="sr-meta-label">Tracking</div>
                  <div class="sr-meta-val">RTN-4567891234</div>
                </div>
                <div>
                  <div class="sr-meta-label">Expected</div>
                  <div class="sr-meta-val">Apr 10, 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">Label Sent</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">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">4</div>
                  <div class="sr-step-lbl">At Warehouse</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">Track Shipment</button>
                <button class="btn-typ1">View Return Details</button>
                <button class="btn-typ1">Contact 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">
                <div class="sr-card-id-row">
                  <div class="sr-card-id-info">
                    <div class="sr-card-id-primary">
                      Return #RTN-2395
                      <!-- <span class="separator">•</span>
                      <span class="carrier-name">FedEx Express</span> -->
                    </div>
                    <div class="sr-card-id-secondary">Order #ORD-2378 &nbsp;•&nbsp; FedEx Ground Return</div>
                  </div>
                </div>
                <span class="sr-badge sr-badge--red">?? Needs Inspection</span>
              </div>
              <!-- Meta grid -->
              <div class="sr-meta-grid rt">
                <div>
                  <div class="sr-meta-label">Shipped From</div>
                  <div class="sr-meta-val">Smart Watch Ultra</div>
                </div>
                <div>
                  <div class="sr-meta-label">Customer</div>
                  <div class="sr-meta-val">Mike Wilson</div>
                </div>
                <div>
                  <div class="sr-meta-label">Return Reason</div>
                  <div class="sr-meta-val">Wrong Item</div>
                </div>
                <div>
                  <div class="sr-meta-label">Received</div>
                  <div class="sr-meta-val">Apr 7, 2:30 PM</div>
                </div>
                <div>
                  <div class="sr-meta-label">Refund</div>
                  <div class="sr-meta-val green">$299.99</div>
                </div>
              </div>

              <!-- Latest update info box -->
              <div class="sr-info-box sr-info-box--red">
                <div class="sr-info-title red">??  Action Required: Inspect Return</div>
                <p class="sr-info-text px-4">This item has arrived at your warehouse and needs quality inspection before processing the refund.</p>
                <div class="sr-action-row mt-4 px-4">
                  <button class="btn-typ2">Start Inspection</button>
                  <button class="btn-typ1">View Checklist</button>
                </div>
              </div>
            </div>
          </div>
          
        </div>

         <!-- ======================================================
             Rate Card 3 
             ====================================================== -->
        <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">
                <div class="sr-card-id-row">
                  <div class="sr-card-id-info">
                    <div class="sr-card-id-primary">
                      Return #RTN-2388
                      <!-- <span class="separator">•</span>
                      <span class="carrier-name">FedEx Express</span> -->
                    </div>
                    <div class="sr-card-id-secondary">Order #ORD-2378 &nbsp;•&nbsp; UPS Return</div>
                  </div>
                </div>
                <span class="sr-badge sr-badge--prpl">? Processed</span>
              </div>
              <!-- Meta grid -->
              <div class="sr-meta-grid rt">
                <div>
                  <div class="sr-meta-label">Product</div>
                  <div class="sr-meta-val">Bluetooth Speaker</div>
                </div>
                <div>
                  <div class="sr-meta-label">Customer</div>
                  <div class="sr-meta-val">Emily Davis</div>
                </div>
                <div>
                  <div class="sr-meta-label">Return Reason</div>
                  <div class="sr-meta-val">Changed Mind</div>
                </div>
                <div>
                  <div class="sr-meta-label">Received</div>
                  <div class="sr-meta-val">Apr 5, 2026</div>
                </div>
                <div>
                  <div class="sr-meta-label">Refund</div>
                  <div class="sr-meta-val green">$79.99</div>
                </div>
              </div>

              <!-- Latest update info box -->
              <div class="sr-info-box sr-info-box--purple">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                  <div>
                    <h4>Inspection: ? Passed</h4>
                    <span>Item in good condition</span>
                  </div>
                  <div>
                    <h4>Refund: ? Processed</h4>
                    <span>Apr 5, 3:45 PM</span>
                  </div>
                  <div>
                    <h4>Stock: ? Restocked</h4>
                    <span>Added to inventory</span>
                  </div>
                </div>
              </div>
              <div class="sr-action-row mt-4 px-4">
                  <button class="btn-typ2">View Details</button>
                  <button class="btn-typ1">Print Receipt</button>
                </div>
            </div>

          </div>
          
        </div>
</main>
@endsection