@extends('layouts.tracking')

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

@section('content')
  <style>
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>


  <section class="py-6 bg-light">
    <div class="container">

      <!-- HEADER -->
      <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">

          <div class="d-flex justify-content-between flex-wrap align-items-center">
            <div>
              <h3 class="fw-bold mb-1">
                <i class="fa-solid fa-box-open text-primary me-2"></i>
                Tracking ID: {{ $parcel->tracking_id }}
              </h3>
              <p class="text-muted mb-0">Track your shipment progress and delivery updates.</p>
            </div>

            <div>
              <a href="mailto:{{ $appSetting->email }}" class="btn btn-primary">
                <i class="fa-solid fa-headset me-2"></i>Contact Support
              </a>
            </div>
          </div>

        </div>
      </div>

      <div class="row g-4">

        <!-- SENDER -->
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-primary text-white fw-semibold">
              <i class="fa-solid fa-paper-plane me-2"></i>Sender Information
            </div>

            <div class="card-body">

              <p><strong>Name:</strong> {{ $parcel->sender_name }}</p>
              <p><strong>Email:</strong> {{ $parcel->sender_contact }}</p>
              <p><strong>Address:</strong> {{ $parcel->sender_address }}</p>
              <p><strong>Phone:</strong> {{ $parcel->sender_phone }}</p>

            </div>
          </div>
        </div>

        <!-- RECEIVER -->
        <div class="col-md-6">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-success text-white fw-semibold">
              <i class="fa-solid fa-location-dot me-2"></i>Receiver Information
            </div>

            <div class="card-body">

              <p><strong>Name:</strong> {{ $parcel->reci_name }}</p>
              <p><strong>Email:</strong> {{ $parcel->reci_contact }}</p>
              <p><strong>Address:</strong> {{ $parcel->reci_address }}</p>
              <p><strong>Phone:</strong> {{ $parcel->reci_phone }}</p>

            </div>
          </div>
        </div>

      </div>


      <!-- SHIPMENT DETAILS -->
      <div class="card shadow-sm border-0 mt-4">
        <div class="card-header fw-semibold">
          <i class="fa-solid fa-truck-fast me-2 text-primary"></i>Shipment Details
        </div>

        <div class="card-body">

          <div class="row g-3">

            @if($parcel->dep_date)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Departure Date</strong>
                  <p class="mb-0">{{ $parcel->dep_date }}</p>
                </div>
              </div>
            @endif

            @if($parcel->pickup_date)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Pick-up Date</strong>
                  <p class="mb-0">{{ $parcel->pickup_date }}</p>
                </div>
              </div>
            @endif

            @if($parcel->exp_date)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Expected Delivery</strong>
                  <p class="mb-0">{{ $parcel->exp_date }}</p>
                </div>
              </div>
            @endif

            @if($parcel->carrier_no)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Carrier ID</strong>
                  <p class="mb-0">{{ $parcel->carrier_no }}</p>
                </div>
              </div>
            @endif

            @if($parcel->branch_pro)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Processed Branch</strong>
                  <p class="mb-0">{{ $parcel->branch_pro }}</p>
                </div>
              </div>
            @endif

            @if($parcel->pickup_branch)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Pick-up Branch</strong>
                  <p class="mb-0">{{ $parcel->pickup_branch }}</p>
                </div>
              </div>
            @endif

            @if($parcel->total_price)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Total shipping Cost</strong>
                  <p class="mb-0 text-success fw-bold">${{ $parcel->total_price }}</p>
                </div>
              </div>
            @endif

            @if($parcel->freight_cost)
              <div class="col-md-4">
                <div class="p-3 bg-light rounded">
                  <strong>Freight Cost</strong>
                  <p class="mb-0 text-success fw-bold">${{ $parcel->freight_cost }}</p>
                </div>
              </div>
            @endif

            @if($parcel->description)
              <div class="col-12">
                <div class="p-3 bg-light rounded">
                  <strong>Package Description</strong>
                  <p class="mb-0">{{ $parcel->description }}</p>
                </div>
              </div>
            @endif

          </div>

        </div>
      </div>


      <!-- PACKAGES -->
<div class="card shadow-sm border-0 mt-4">
<div class="card-header fw-semibold">
<i class="fa-solid fa-box text-primary me-2"></i>
Package Details
</div>

<div class="card-body p-2">

@if($packages && $packages->count())

<div class="table-responsive">
<table class="table table-striped table-hover align-middle mb-0">

<thead class="table-light">
<tr>
<th>#</th>
<th>Type</th>
<th>Qty</th>
<th>Weight</th>
<th>Dimensions (L×W×H)</th>
<th>Description</th>
<th>Price</th>
<th>Image</th>
</tr>
</thead>

<tbody>

@foreach($packages as $index => $pkg)

<tr>

<td>{{ $index + 1 }}</td>

<td>
<span class="badge bg-primary">
{{ $pkg->type }}
</span>
</td>

<td>{{ $pkg->quantity }}</td>

<td>
<i class="fa-solid fa-weight-hanging text-secondary me-1"></i>
{{ $pkg->weight }} kg
</td>

<td>
{{ $pkg->length }} × {{ $pkg->width }} × {{ $pkg->height }} cm
</td>

<td>{{ $pkg->description }}</td>

<td class="text-success fw-semibold">
${{ $pkg->price }}
</td>

<td>

@if($pkg->image)
<img src="{{ asset($pkg->image) }}"
style="width:60px;height:60px;object-fit:cover;border-radius:6px;">
@else
<span class="text-muted">No Image</span>
@endif

</td>

</tr>

@endforeach

</tbody>

</table>
</div>

@else

<div class="text-center p-4 text-muted">
<i class="fa-solid fa-box-open fa-2x mb-2"></i>
<p class="mb-0">No package information available.</p>
</div>

@endif

</div>
</div>



      <!-- PROGRESS -->
      <div class="card shadow-sm border-0 mt-4">
        <div class="card-body">

          <h5 class="fw-semibold mb-3">
            <i class="fa-solid fa-chart-line text-success me-2"></i>
            Shipment Progress
          </h5>

          <div class="progress" style="height:18px;">
            <div class="progress-bar bg-success fw-bold" role="progressbar" style="width: {{ $parcel->percentage }}%">
              {{ $parcel->percentage }}%
            </div>
          </div>

        </div>
      </div>


<!-- TRACKING TIMELINE -->
<div class="card shadow-sm border-0 mt-4">

  <div class="card-header fw-semibold">
    <i class="fa-solid fa-route me-2 text-primary"></i>
    Tracking History
  </div>

  <div class="card-body">

    <style>

      .timeline-icon {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        font-size: 14px;
      }

      .timeline-line {
        border-left: 2px dashed #dee2e6;
        margin-left: 18px;
        padding-left: 20px;
      }

      .timeline-active {
        animation: pulse 1.5s infinite;
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        }
      }

    </style>


    @foreach($track as $item)

    @php

      /* Status Badge Color */
      $statusColor = match($item->cstatus) {
          'Pending' => 'warning',
          'In Transit' => 'primary',
          'Delivered' => 'success',
          'Cancelled' => 'danger',
          'Cancelleda' => 'danger',
          'On Hold' => 'secondary',
          default => 'dark'
      };

      /* Timeline Icon Color */
      $iconColor = match($item->cstatus) {
          'Pending' => '#ffc107',
          'In Transit' => '#0d6efd',
          'Delivered' => '#28a745',
          'Cancelled' => '#dc3545',
          'Cancelleda' => '#dc3545',
          'On Hold' => '#6c757d',
          default => '#343a40'
      };

    @endphp


      <div class="d-flex mb-4">

        <div class="me-3">

          <div class="timeline-icon {{ $loop->first ? 'timeline-active' : '' }}" style="background: {{ $iconColor }}">
            <i class="fa-solid fa-check"></i>
          </div>

        </div>


        <div class="flex-grow-1 timeline-line">

          <h6 class="mb-1 fw-bold">

            <span class="badge bg-{{ $statusColor }} fs-1">
              {{ $item->cstatus }}
            </span>

            @if($loop->first)
              <span class="badge bg-success ms-2">
                Current
              </span>
            @endif

          </h6>


          <p class="mb-1 text-muted">
            {{ $item->remark }}
          </p>


          <p class="mb-1 text-primary">
            <i class="fa-solid fa-location-dot me-1"></i>
            {{ $item->location }}
          </p>


          <small class="text-secondary">
            <i class="fa-regular fa-clock me-1"></i>
            {{ $item->updated_date }} | {{ $item->updated_time }}
          </small>

        </div>

      </div>

    @endforeach

  </div>
</div>


    </div>
  </section>



@endsection