@extends('layouts.main')
@section('title', 'Shop')
@section('style')
  <style>
    .tracking-wrapper {
      background-color: #fff;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
      margin-bottom: 2rem;
    }

    .tracking-header {
      border-bottom: 1px solid #dee2e6;
      padding-bottom: 1rem;
      margin-bottom: 1.5rem;
    }

    .timeline {
      position: relative;
      padding-left: 40px;
      border-left: 3px solid #dee2e6;
    }

    .timeline-step {
      position: relative;
      margin-bottom: 2rem;
    }

    .timeline-step:last-child {
      margin-bottom: 0;
    }

    .timeline-step::before {
      content: '';
      position: absolute;
      left: -13px;
      top: 5px;
      width: 22px;
      height: 22px;
      background-color: #dee2e6;
      border-radius: 50%;
      z-index: 2;
      border: 2px solid #fff;
      transition: all 0.3s ease-in-out;
    }

    .timeline-step.completed::before {
      background-color: #198754;
      box-shadow: 0 0 0 2px #198754;
    }

    .timeline-step.active::before {
      background-color: #0d6efd;
      box-shadow: 0 0 0 2px #0d6efd;
    }

    .status-card {
      background-color: #f8f9fa;
      padding: 1.2rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
      transition: 0.3s;
    }

    .status-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .status-icon {
      font-size: 1.4rem;
      margin-right: 10px;
      color: #0d6efd;
    }

    .status-completed .status-icon {
      color: #198754;
    }

    .status-date {
      font-size: 0.9rem;
      color: #6c757d;
    }

    .badge-status {
      font-size: 0.75rem;
      background-color: #d1e7dd;
      color: #0f5132;
    }

    @media (max-width: 768px) {
      .timeline {
        padding-left: 30px;
      }

      .timeline-step::before {
        left: -10px;
        width: 18px;
        height: 18px;
      }

      .status-card {
        font-size: 0.9rem;
      }
    }
  </style>
@endsection

@php
  $page_name = '';
@endphp


@php
  use Carbon\Carbon;
@endphp

@section('content')
  <div class="container my-4">
    <div class="tracking-wrapper">

      <div class="tracking-header">
        <h4>Shipment Tracking</h4>
        <div class="row mt-3">
          <div class="col-md-6">
            <strong>AWB Code:</strong>
            {{ isset($tracking_data['tracking_data']['shipment_track'][0]['awb_code']) ? $tracking_data['tracking_data']['shipment_track'][0]['awb_code'] : 'N/A' }}<br>

            <strong>Courier:</strong>
            {{ isset($tracking_data['tracking_data']['shipment_track'][0]['courier_name']) ? $tracking_data['tracking_data']['shipment_track'][0]['courier_name'] : 'N/A' }}<br>

            <strong>Origin:</strong>
            {{ isset($tracking_data['tracking_data']['shipment_track'][0]['origin']) ? $tracking_data['tracking_data']['shipment_track'][0]['origin'] : 'N/A' }}<br>

            <strong>Destination:</strong>
            {{ isset($tracking_data['tracking_data']['shipment_track'][0]['destination']) ? $tracking_data['tracking_data']['shipment_track'][0]['destination'] : 'N/A' }}
          </div>
          <div class="col-md-6 text-md-end mt-3 mt-md-0">
            <strong>Status:</strong>
            @php
              $currentStatus = $tracking_data['tracking_data']['shipment_track'][0]['current_status'] ?? 'N/A';
              $statusClass = strtolower($currentStatus) === 'canceled' ? 'bg-danger' : 'bg-success';
            @endphp
            <span class="badge {{ $statusClass }}">{{ $currentStatus }}</span><br>

            <strong>Delivered To:</strong>
            {{ isset($tracking_data['tracking_data']['shipment_track'][0]['delivered_to']) &&
            $tracking_data['tracking_data']['shipment_track'][0]['delivered_to'] != ''
                ? $tracking_data['tracking_data']['shipment_track'][0]['delivered_to']
                : 'N/A' }}<br>

            <strong>Delivered Date:</strong>
            {{ !empty($tracking_data['tracking_data']['shipment_track'][0]['delivered_date'])
                ? \Carbon\Carbon::parse($tracking_data['tracking_data']['shipment_track'][0]['delivered_date'])->format('d M Y h:i A')
                : 'N/A' }}<br>

            <strong>Pickup Date:</strong>
            {{ !empty($tracking_data['tracking_data']['shipment_track'][0]['pickup_date'])
                ? \Carbon\Carbon::parse($tracking_data['tracking_data']['shipment_track'][0]['pickup_date'])->format('d M Y h:i A')
                : 'N/A' }}
          </div>
        </div>
      </div>

      @if (!empty($tracking_data['tracking_data']['shipment_track'][0]['pod_status']))
        <div class="mb-3 text-center">
          <strong>Proof of Delivery:</strong><br>
          <img src="{{ $tracking_data['tracking_data']['shipment_track'][0]['pod_status'] }}" alt="POD"
            class="img-fluid rounded shadow-sm" style="max-width: 300px;">
        </div>
      @endif

      <div class="timeline">
        @if (
            !empty($tracking_data['tracking_data']['shipment_track_activities']) &&
                is_array($tracking_data['tracking_data']['shipment_track_activities']))
          @foreach ($tracking_data['tracking_data']['shipment_track_activities'] as $index => $activity)
            @php
              $isLast = $index === count($tracking_data['tracking_data']['shipment_track_activities']) - 1;
              $class = $isLast ? 'active' : 'completed';
              $activityDate = !empty($activity['date'])
                  ? \Carbon\Carbon::parse($activity['date'])->format('d M Y h:i A')
                  : 'N/A';
              $location = !empty($activity['location']) ? $activity['location'] : 'N/A';
              $statusLabel = $activity['sr-status-label'] ?? 'N/A';
              $status = $activity['status'] ?? 'N/A';
              $activityName = $activity['activity'] ?? 'N/A';
            @endphp

            <div class="timeline-step {{ $class }}">
              <div class="status-card {{ $class == 'completed' ? 'status-completed' : '' }}">
                <div class="d-flex align-items-center mb-2">
                  <i class="bi bi-truck status-icon"></i>
                  <strong>{{ $activityName }}</strong>
                </div>
                <div class="status-date">{{ $activityDate }}</div>
                <div class="text-muted mb-1">{{ $location }}</div>
                <span class="badge badge-status">Status: {{ $status }}</span>
                <span class="badge bg-info text-dark ms-2">{{ $statusLabel }}</span>
              </div>
            </div>
          @endforeach
        @else
          <p>No shipment activities available.</p>
        @endif
      </div>

      @if (!empty($tracking_data['tracking_data']['track_url']))
        <div class="mt-3">
          <a href="{{ $tracking_data['tracking_data']['track_url'] }}" target="_blank" class="btn btn-primary">
            Track on Shiprocket
          </a>
        </div>
      @endif

    </div>
  </div>
@endsection