@extends('layouts/layoutMaster')

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

@section('vendor-style')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css"
        crossorigin="" />

    <style>
        #shipmentMap {
            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>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.min.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">{{ __('Shipment') }} #{{ $shipment->number }}</h5>
            <span class="badge bg-{{ $shipment->status->color() }}">{{ $shipment->status->label() }}</span>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('OTP') }}</small>
                    <span>{{ $shipment->otp ?? '-' }}</span>
                </div>
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('SKU') }}</small>
                    <span>{{ $shipment->sku ?? '-' }}</span>
                </div>
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('Type') }}</small>
                    <span>{{ App\Enums\ShipmentTypeEnum::from($shipment->type)->label() ?? '-' }}</span>
                </div>
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('Dimensions (W x L)') }}</small>
                    <span>{{ $shipment->width }} x {{ $shipment->length }}</span>
                </div>
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('Weight') }}</small>
                    <span>{{ $shipment->weight }}</span>
                </div>
                <div class="col-md-3">
                    <small class="text-muted d-block">{{ __('Order Details') }}</small>
                    <span>{{ $shipment->details ?? '-' }}</span>
                </div>
                <div class="col-md-12">
                    <h6 class="mb-2 d-flex justify-content-between align-items-center">
                        <span>{{ __('Customer Information') }}</span>
                        {{-- Add dashboard customer edit link here if customers are managed as a dashboard entity --}}
                    </h6>
                </div>

                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Customer') }}</small>
                    <span>{{ $shipment->customer_name ?? '-' }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Phone') }}</small>
                    <span>{{ $shipment->customer_phone ?? '-' }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Address') }}</small>
                    <span>{{ $shipment->address_details ?? '-' }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Customer Coordinates') }}</small>
                    <span>{{ $shipment->latitude }}, {{ $shipment->longitude }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Target Delivery Date') }}</small>
                    <span>{{ $shipment->target_delivery_date ?? '-' }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Driver Delivery Date') }}</small>
                    <span>{{ $shipment->driver_delivery_date ?? '-' }}</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="shipmentMap"></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">{{ __('QR Code') }}</h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center qr-box">
                    @php
                        $qrUrl = $shipment->getFirstMediaUrl('qrcode');
                    @endphp
                    @if ($qrUrl)
                        <img src="{{ $qrUrl }}" alt="QR" />
                    @else
                        <span class="text-muted">{{ __('No QR available') }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @if ($shipment->transport?->delivery)



        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ __('Driver Information') }}</h5>
                @if ($shipment->transport?->delivery)
                    <a class="btn btn-sm btn-outline-primary"
                        href="{{ route('dashboard.deliveries.edit', $shipment->transport->delivery) }}">{{ __('Edit') }}</a>
                @endif
            </div>
            <div class="card-body row g-3">
                @if ($shipment->transport?->delivery?->user)
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Driver') }}</small>
                        <span>{{ $shipment->transport->delivery->user->name }}
                            ({{ $shipment->transport->delivery->user->phone }})</span>
                    </div>
                @endif
                @if ($shipment->transport?->delivery?->category)
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Delivery Category') }}</small>
                        <span>{{ $shipment->transport->delivery->category->name ?? '-' }}</span>
                    </div>
                @endif
                @if ($shipment->transport?->delivery?->team)
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Team') }}</small>
                        <span>{{ $shipment->transport->delivery->team->name ?? '-' }}</span>
                    </div>
                @endif
            </div>
        </div>

    @endif

    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ __('Store Information') }}</h5>
            @if ($shipment->store)
                <a class="btn btn-sm btn-outline-primary"
                    href="{{ route('dashboard.stores.edit', $shipment->store) }}">{{ __('Edit') }}</a>
            @endif
        </div>
        <div class="card-body row g-3">
            @if ($shipment->store?->user)
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Store') }}</small>
                    <span>{{ $shipment->store->user->name }} ({{ $shipment->store->user->phone }})</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Category') }}</small>
                    <span>{{ $shipment->store->category->name ?? '-' }}</span>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">{{ __('Delivery Team') }}</small>
                    <span>{{ $shipment->store->deliveryTeam->name ?? '-' }}</span>
                </div>
            @endif
        </div>
    </div>

    @if ($shipment->tardPoint)
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ __('Delivery Point Information') }}</h5>
                <a class="btn btn-sm btn-outline-primary"
                    href="{{ route('dashboard.tard-points.edit', $shipment->tardPoint) }}">{{ __('Edit') }}</a>
            </div>
            <div class="card-body row g-3">
                @if ($shipment->tardPoint?->user)
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Delivery Point') }}</small>
                        <span>{{ $shipment->tardPoint->user->name }} ({{ $shipment->tardPoint->user->phone }})</span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Address') }}</small>
                        <span>{{ $shipment->tardPoint->user->address_details ?? '-' }}</span>
                    </div>
                @endif
                @if ($shipment->tardPoint?->category)
                    <div class="col-md-4">
                        <small class="text-muted d-block">{{ __('Category') }}</small>
                        <span>{{ $shipment->tardPoint->category->name ?? '-' }}</span>
                    </div>
                @endif
            </div>
        </div>
    @endif



    @if ($shipment->status === \App\Enums\ShipmentStatusEnum::CANCELLED)
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">{{ __('Cancellation Details') }}</h5>
            </div>
            <div class="card-body row g-3">
                <div class="col-md-6">
                    <small class="text-muted d-block">{{ __('Reason') }}</small>
                    <span>{{ $shipment->cancelledComment->content ?? '-' }}</span>
                </div>
                <div class="col-md-6">
                    <small class="text-muted d-block">{{ __('Cancelled By') }}</small>
                    @php
                        $cancelledByType = $shipment->cancelled_by_type
                            ? class_basename($shipment->cancelled_by_type)
                            : null;
                        $cancelUser = $shipment->cancelledBy?->user;
                    @endphp
                    <span>{{ $cancelledByType ?? '-' }}
                        @if ($cancelUser)
                            - {{ $cancelUser->name }} ({{ $cancelUser->phone }})
                        @endif
                    </span>

                </div>
            </div>
        </div>
    @endif
@endsection

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

            const points = @json($mapPoints);

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

            function addPoint(p, options) {
                if (!p) return;
                const marker = L.marker([p.lat, p.lng], options || {}).addTo(map);

                // Build popup HTML based on point type
                let popupHtml = '';

                if (p.type === 'store') {
                    popupHtml = `
                        <div class="info-popup">
                            <h6><a href="${p.edit_url}">${p.name || ''}</a></h6>
                            <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Store') }}</span></div>
                            <div><span class="label">{{ __('Phone') }}</span><span class="value">${p.phone || ''}</span></div>
                            <div><span class="label">{{ __('Address') }}</span><span class="value">${p.address || ''}</span></div>
                            <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${p.status || ''}</span></div>
                        </div>`;
                } else if (p.type === 'delivery') {
                    popupHtml = `
                        <div class="info-popup">
                            <h6><a href="${p.edit_url}">${p.name || ''}</a></h6>
                            <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Driver') }}</span></div>
                            <div><span class="label">{{ __('Phone') }}</span><span class="value">${p.phone || ''}</span></div>
                            <div><span class="label">{{ __('Location') }}</span><span class="value">${p.address || ''}</span></div>
                            <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${p.status || ''}</span></div>
                        </div>`;
                } else if (p.type === 'tard_point') {
                    popupHtml = `
                        <div class="info-popup">
                            <h6><a href="${p.edit_url}">${p.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">${p.phone || ''}</span></div>
                            <div><span class="label">{{ __('Address') }}</span><span class="value">${p.address || ''}</span></div>
                            <div><span class="label">{{ __('Status') }}</span><span class="value text-capitalize">${p.status || ''}</span></div>
                        </div>`;
                } else if (p.type === 'customer') {
                    popupHtml = `
                        <div class="info-popup">
                            <h6>${p.name || '{{ __('Customer') }}'}</h6>
                            <div><span class="label">{{ __('Type') }}</span><span class="value">{{ __('Customer') }}</span></div>
                            <div><span class="label">{{ __('Phone') }}</span><span class="value">${p.phone || ''}</span></div>
                            <div><span class="label">{{ __('Address') }}</span><span class="value">${p.address || ''}</span></div>
                        </div>`;
                } else {
                    // Fallback for any other type
                    popupHtml = `<div class="info-popup"><strong>${p.label || ''}</strong></div>`;
                }

                marker.bindPopup(popupHtml, {
                    closeButton: true,
                    minWidth: 220
                });
                markers.push(marker);
                bounds.push([p.lat, p.lng]);
                return marker;
            }

            const pickupMarker = addPoint(points.pickup, {
                title: 'Pickup'
            });
            const deliveryMarker = addPoint(points.delivery, {
                title: 'Delivery'
            });
            const driverMarker = addPoint(points.driver, {
                title: 'Driver'
            });

            // Draw polylines between available points
            const lineCoords = [];
            if (points.pickup) lineCoords.push([points.pickup.lat, points.pickup.lng]);
            if (points.driver) lineCoords.push([points.driver.lat, points.driver.lng]);
            // Draw realistic route between pickup and final delivery (if both exist)
            if (points.pickup && points.delivery && L.Routing && L.Routing.control) {
                try {
                    const routingControl = L.Routing.control({
                        waypoints: [
                            L.latLng(points.pickup.lat, points.pickup.lng),
                            L.latLng(points.delivery.lat, points.delivery.lng)
                        ],
                        addWaypoints: false,
                        draggableWaypoints: false,
                        routeWhileDragging: false,
                        show: false,
                        fitSelectedRoutes: false,
                        lineOptions: {
                            styles: [{
                                    color: '#198754',
                                    opacity: 0.9,
                                    weight: 5
                                }, // main route
                                {
                                    color: '#ffffff',
                                    opacity: 0.8,
                                    weight: 2
                                } // outline
                            ]
                        }
                    }).addTo(map);

                    // Ensure markers/bounds still considered after route renders
                    routingControl.on('routesfound', function(e) {
                        if (bounds.length) {
                            map.fitBounds(bounds, {
                                padding: [20, 20]
                            });
                        }
                    });
                } catch (e) {
                    console.warn('Routing init failed:', e);
                }
            }

            if (points.delivery) lineCoords.push([points.delivery.lat, points.delivery.lng]);

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

            if (bounds.length) {
                map.fitBounds(bounds, {
                    padding: [20, 20]
                });
            } else if (points.delivery) {
                map.setView([points.delivery.lat, points.delivery.lng], 12);
            } else {
                map.setView([24.7136, 46.6753], 10);
            }
        });
    </script>
@endsection