@extends('layouts/layoutMaster')

@section('title', __('Transport Details'))

@section('vendor-style')
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
  <style>
    #transportMap { width: 100%; height: 60vh; }
    .qr-box img { max-width: 160px; height: auto; }

    .info-popup h6 {
      margin: 0 0 8px;
      font-weight: 600;
    }

    .info-popup h6 a {
      color: #0d6efd;
      text-decoration: none;
    }

    .info-popup h6 a:hover {
      text-decoration: underline;
    }

    .info-popup .label {
      color: #6c757d;
      font-size: 12px;
      display: inline-block;
      min-width: 60px;
    }

    .info-popup .value {
      font-size: 14px;
    }

    .info-popup div {
      margin-bottom: 4px;
    }
  </style>
@endsection

@section('vendor-script')
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
@endsection

@section('content')
  <x-breadcrumb></x-breadcrumb>

  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">{{ __('Transport') }} #{{ $transport->number }}</h5>
      @php
        $statuses = $transport->shipments->pluck('status')->filter()->unique();
        $badge = ['label' => __('N/A'), 'color' => 'secondary'];
        if ($statuses->isNotEmpty()) {
          if ($statuses->every(fn($s) => $s === \App\Enums\ShipmentStatusEnum::COMPLETED->value)) {
            $badge = ['label' => __('Completed'), 'color' => 'success'];
          } elseif ($statuses->contains(\App\Enums\ShipmentStatusEnum::IN_WAY->value)) {
            $badge = ['label' => __('In Way'), 'color' => 'primary'];
          } elseif ($statuses->contains(\App\Enums\ShipmentStatusEnum::PENDING->value)) {
            $badge = ['label' => __('Pending'), 'color' => 'warning'];
          }
        }
      @endphp
      <span class="badge bg-{{ $badge['color'] }}">{{ $badge['label'] }}</span>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-3">
          <small class="text-muted d-block">{{ __('Total Duration (min)') }}</small>
          <span>{{ $transport->total_duration }}</span>
        </div>
        <div class="col-md-3">
          <small class="text-muted d-block">{{ __('Created At') }}</small>
          <span>{{ $transport->created_at }}</span>
        </div>
        <div class="col-md-3">
          <small class="text-muted d-block">{{ __('Driver') }}</small>
          <span>{{ $transport->delivery?->user?->name ?? '-' }} ({{ $transport->delivery?->user?->phone ?? '-' }})</span>
        </div>
        <div class="col-md-3">
          <small class="text-muted d-block">{{ __('Driver Location') }}</small>
          <span>
            @if(($mapData['driver'] ?? null))
              {{ $mapData['driver']['lat'] }}, {{ $mapData['driver']['lng'] }}
            @else
              -
            @endif
          </span>
        </div>
      </div>
      <div class="row g-3 mt-2">
        <div class="col-md-3"><small class="text-muted d-block">{{ __('Total Shipments') }}</small><span>{{ $stats['total'] }}</span></div>
        <div class="col-md-3"><small class="text-muted d-block">{{ __('Completed') }}</small><span>{{ $stats['completed'] }}</span></div>
        <div class="col-md-3"><small class="text-muted d-block">{{ __('Pending') }}</small><span>{{ $stats['pending'] }}</span></div>
      </div>
    </div>
  </div>

  <div class="row mb-3 g-3">
    <div class="col-lg-8">
      <div class="card h-100">
        <div class="card-header"><h5 class="mb-0">{{ __('Map') }}</h5></div>
        <div class="card-body">
          <div id="transportMap"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">{{ __('Shipments') }}</h5>
        </div>
        <div class="card-body table-responsive">
          <table class="table table-sm table-hover mb-0">
            <thead>
              <tr>
                <th>{{ __('#') }}</th>
                <th>{{ __('Status') }}</th>
                <th>{{ __('Customer') }}</th>
                <th>{{ __('Pickup') }}</th>
                <th>{{ __('Address') }}</th>
              </tr>
            </thead>
            <tbody>
            @forelse($transport->shipments as $s)
              <tr>
                <td>{{ $s->number }}</td>
                <td>
                  @php($status = $s->status)
                  @if($status instanceof \App\Enums\ShipmentStatusEnum)
                    <span class="badge bg-{{ $status->color() }}">{{ $status->label() }}</span>
                  @else
                    <span class="badge bg-secondary">{{ $status }}</span>
                  @endif
                </td>
                <td>{{ $s->customer_name ?? '-' }}</td>
                <td>
                  {{ $s->store?->user?->name ?? $s->tardPoint?->user?->name ?? '-' }}
                </td>
                <td>{{ $s->address_details ?? '-' }}</td>
              </tr>
            @empty
              <tr><td colspan="5" class="text-center text-muted">{{ __('No shipments') }}</td></tr>
            @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function(){
    const map = L.map('transportMap');
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }).addTo(map);

    const data = @json($mapData);

    const statusColors = {
      PENDING: '#f59f00', READY_FOR_PICKUP: '#339af0', PICKUP: '#0d6efd', CANCELLED: '#6c757d',
      COLLECTED: '#212529', IN_WAY: '#0d6efd', IN_STOCK: '#f59f00', COMPLETED: '#198754', RETURN: '#6c757d', CLOSED: '#6c757d'
    };

    const markers = [];
    const bounds = [];

    // Driver marker if available
    if (data.driver) {
      const m = L.marker([data.driver.lat, data.driver.lng], { title: '{{ __('Driver') }}' }).addTo(map);

      // Build popup HTML for driver
      let popupHtml = '';
      if (data.driver.type === 'delivery') {
        popupHtml = `
          <div class="info-popup">
            <h6><a href="${data.driver.edit_url}">${data.driver.name || ''}</a></h6>
            <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Driver') }}</span></div>
            <div><span class="label">{{ __('Phone') }}</span><span class="value">${data.driver.phone || ''}</span></div>
            <div><span class="label">{{ __('Location') }}</span><span class="value">${data.driver.address || ''}</span></div>
            <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${data.driver.status || ''}</span></div>
          </div>`;
      } else {
        popupHtml = `<div class="popup"><h6>{{ __('Driver') }}</h6><div>${data.driver.name ?? ''} (${data.driver.phone ?? ''})</div></div>`;
      }

      m.bindPopup(popupHtml, { closeButton: true, minWidth: 220 });
      markers.push(m); bounds.push([data.driver.lat, data.driver.lng]);
    }

    // Shipments markers and polylines
    const routeCoords = [];
    if (data.driver) routeCoords.push([data.driver.lat, data.driver.lng]);

    (data.shipments || []).forEach(s => {
      if (s.pickup) {
        const color = statusColors[(s.status_label || '').toUpperCase()] || '#0d6efd';
        const mp = L.circleMarker([s.pickup.lat, s.pickup.lng], { radius: 6, color }).addTo(map);

        // Build popup HTML based on pickup type
        let pickupPopupHtml = '';
        if (s.pickup.type === 'store') {
          pickupPopupHtml = `
            <div class="info-popup">
              <h6><a href="${s.pickup.edit_url}">${s.pickup.name || ''}</a></h6>
              <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Store') }}</span></div>
              <div><span class="label">{{ __('Phone') }}</span><span class="value">${s.pickup.phone || ''}</span></div>
              <div><span class="label">{{ __('Address') }}</span><span class="value">${s.pickup.address || ''}</span></div>
              <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${s.pickup.status || ''}</span></div>
              <div class="mt-2"><span class="label">{{ __('Shipment') }}</span><span class="value">#${s.number}</span></div>
              <div><span class="label">{{ __('Customer') }}</span><span class="value">${s.customer || ''}</span></div>
            </div>`;
        } else if (s.pickup.type === 'tard_point') {
          pickupPopupHtml = `
            <div class="info-popup">
              <h6><a href="${s.pickup.edit_url}">${s.pickup.name || ''}</a></h6>
              <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Tard Point') }}</span></div>
              <div><span class="label">{{ __('Phone') }}</span><span class="value">${s.pickup.phone || ''}</span></div>
              <div><span class="label">{{ __('Address') }}</span><span class="value">${s.pickup.address || ''}</span></div>
              <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${s.pickup.status || ''}</span></div>
              <div class="mt-2"><span class="label">{{ __('Shipment') }}</span><span class="value">#${s.number}</span></div>
              <div><span class="label">{{ __('Customer') }}</span><span class="value">${s.customer || ''}</span></div>
            </div>`;
        } else {
          pickupPopupHtml = `<div class="popup"><h6>#${s.number}</h6><div>{{ __('Pickup') }}: ${s.pickup.name || ''}</div><div>{{ __('Status') }}: ${s.status_label}</div><div>{{ __('Customer') }}: ${s.customer}</div></div>`;
        }

        mp.bindPopup(pickupPopupHtml, { closeButton: true, minWidth: 220 });
        markers.push(mp); bounds.push([s.pickup.lat, s.pickup.lng]);
        routeCoords.push([s.pickup.lat, s.pickup.lng]);
      }
      if (s.delivery) {
        const color = statusColors[(s.status_label || '').toUpperCase()] || '#198754';
        const md = L.circleMarker([s.delivery.lat, s.delivery.lng], { radius: 6, color }).addTo(map);

        // Build popup HTML for delivery point
        let deliveryPopupHtml = '';
        if (s.delivery.type === 'customer') {
          deliveryPopupHtml = `
            <div class="info-popup">
              <h6>${s.delivery.name || '{{ __('Customer') }}'}</h6>
              <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Customer') }}</span></div>
              <div><span class="label">{{ __('Phone') }}</span><span class="value">${s.delivery.phone || ''}</span></div>
              <div><span class="label">{{ __('Address') }}</span><span class="value">${s.delivery.address || ''}</span></div>
              <div class="mt-2"><span class="label">{{ __('Shipment') }}</span><span class="value">#${s.number}</span></div>
              <div><span class="label">{{ __('Status') }}</span><span class="value">${s.status_label}</span></div>
            </div>`;
        } else {
          deliveryPopupHtml = `<div class="popup"><h6>#${s.number}</h6><div>{{ __('Delivery') }}</div><div>{{ __('Status') }}: ${s.status_label}</div><div>{{ __('Customer') }}: ${s.customer}</div></div>`;
        }

        md.bindPopup(deliveryPopupHtml, { closeButton: true, minWidth: 220 });
        markers.push(md); bounds.push([s.delivery.lat, s.delivery.lng]);
        routeCoords.push([s.delivery.lat, s.delivery.lng]);
      }
    });

    if (routeCoords.length >= 2) {
      L.polyline(routeCoords, { color: '#0d6efd', weight: 3 }).addTo(map);
    }

    if (bounds.length) map.fitBounds(bounds, { padding: [24, 24] }); else map.setView([24.7136, 46.6753], 10);
  });
</script>
@endsection