@extends('layouts.app')
@section('title', 'Tracking Detail '.$shipment->resi_number)

@push('styles')
<style>
    @media (max-width: 768px) {
        .tracking-info-card {
            margin-bottom: 20px;
        }
        .qr-code-container {
            margin-top: 10px;
        }
        .timeline-item {
            padding-right: 10px;
        }
    }
</style>
@endpush

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-10 offset-md-1 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="card-title mb-0">{{ __('shipment_page.shipment_tracking_details') }}</h4>
                        <a href="{{ route('shipments.trackingForm') }}" class="btn btn-outline-primary btn-sm">
                            <i class="mdi mdi-arrow-left"></i> Back to Tracking
                        </a>
                    </div>

                    @include('layouts.partials.flash')

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="tracking-info-card bg-info p-3 text-white rounded">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5>{{ __('shipment_page.shipment_information') }}</h5>
                                        <p class="mb-1"><strong>{{ __('common.resi_number') }}</strong> {{ $shipment->resi_number }}</p>
                                        <p class="mb-1"><strong>Status:</strong>
                                            <span class="badge badge-light">
                                                {{ ucfirst(str_replace('_', ' ', $shipment->status)) }}
                                            </span>
                                        </p>
                                        <p class="mb-1"><strong>{{ __('shipment_page.customer') }}:</strong> {{ $shipment->customer->full_name }}</p>
                                        <p class="mb-0"><strong>{{ __('shipment_page.total_weight_kg') }}:</strong> {{ number_format($shipment->weight_kg, 2) }} KG</p>
                                    </div>
                                    <div class="col-md-4 text-center">
                                        <div class="qr-code-container bg-white p-2 rounded">
                                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ url('track/' . $shipment->resi_number) }}" alt="QR Code" class="img-fluid">
                                        </div>
                                        <p class="small mt-2 mb-0">Scan for public tracking</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="tracking-info-card bg-success p-3 text-white rounded">
                                <h5>{{ __('shipment_page.timeline_information') }}</h5>
                                <p class="mb-1"><strong>{{ __('common.date_received') }}</strong> {{ $shipment->getFormattedDateReceived() }}</p>
                                <p class="mb-1"><strong>{{ __('common.date_loaded') }}</strong> {{ $shipment->getFormattedDateLoaded() }}</p>
                                <p class="mb-1"><strong>{{ __('common.date_departure') }}</strong> {{ $shipment->getFormattedDateDeparture() }}</p>
                                <p class="mb-0"><strong>{{ __('common.estimated_arrival') }}</strong> {{ $shipment->getFormattedEstimatedArrival() }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Tracking Timeline -->
                    <div class="row mb-5">
                        <div class="col-12">
                            <h5 class="mb-3">{{ __('shipment_page.tracking_progress') }}</h5>
                            <div class="tracking-timeline">
                                <div class="tracking-progress">
                                    @php
                                        $statuses = ['In Warehouse', __("messages.loading") . " Delay"];
                                        $currentStatusIndex = array_search($shipment->status, $statuses);
                                    @endphp

                                    @foreach($statuses as $index => $status)
                                        <div class="tracking-step {{ $index <= $currentStatusIndex ? 'completed' : '' }}">
                                            <div class="step-icon">
                                                @if($index <= $currentStatusIndex)
                                                    <i class="mdi mdi-check"></i>
                                                @else
                                                    <i class="mdi mdi-circle-outline"></i>
                                                @endif
                                            </div>
                                            <div class="step-label">
                                                {{ ucfirst(str_replace('_', ' ', $status)) }}
                                            </div>
                                        </div>

                                        @if($index < count($statuses) - 1)
                                            <div class="step-connector {{ $index < $currentStatusIndex ? 'completed' : '' }}"></div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Shipment Items -->
                    <div class="row">
                        <div class="col-12">
                            <h5 class="mb-3">Shipment Items</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('shipment_page.description') }}</th>
                                            <th>Dimensions (cm)</th>
                                            <th>Volume (CBM)</th>
                                            <th>Weight (KG)</th>
                                            <th>{{ __('shipment_page.quantity') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($shipment->items as $index => $item)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $item->description }}</td>
                                                <td>{{ $item->length_m }} × {{ $item->width_m }} × {{ $item->height_m }}</td>
                                                <td>{{ number_format($item->volume_cbm, 4) }}</td>
                                                <td>{{ number_format($item->weight_kg, 2) }}</td>
                                                <td>{{ $item->quantity }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Tracking Events -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">{{ __('shipment_page.tracking_history') }}</h5>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addEventModal">
                                    <i class="mdi mdi-plus"></i> Add Event
                                </button>
                            </div>

                            @if($shipment->trackingEvents && $shipment->trackingEvents->count() > 0)
                                <div class="timeline mt-3">
                                    @foreach($shipment->trackingEvents as $event)
                                        <div class="timeline-item border-left border-primary pl-3 pb-3">
                                            <div class="d-flex justify-content-between">
                                                <h6>{{ ucfirst(str_replace('_', ' ', $event->status)) }}</h6>
                                                <div>
                                                    <span class="text-muted small mr-2">
                                                        {{ $event->getFormattedEventDate('d M Y H:i') }}
                                                    </span>
                                                    <a href="{{ route('shipments.editTrackingEvent', $event->id) }}" class="btn btn-xs btn-outline-primary">
                                                        <i class="mdi mdi-pencil"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <p class="mb-1">{{ $event->description }}</p>
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    @if($event->location)
                                                        <p class="text-muted small mb-0">
                                                            <i class="mdi mdi-map-marker"></i> {{ $event->location }}
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="text-muted small">
                                                    <em>Added by: {{ $event->creator ? $event->creator->name : 'System' }}</em>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="mdi mdi-information-outline mr-2"></i>
                                    No tracking events recorded. Add events to help customers track their shipment progress.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Event Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1" role="dialog" aria-labelledby="addEventModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEventModalLabel">Add Tracking Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('shipments.addTrackingEvent', $shipment->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                            <option value="">-- Select Status --</option>
                            <option value="In Warehouse">In Warehouse</option>
                            <option value="Loading">Loading</option>
                            <option value="Delay">Delay</option>
                            <option value="Delivered">Delivered</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="event_date">Event Date</label>
                        <input type="datetime-local" class="form-control @error('event_date') is-invalid @enderror" id="event_date" name="event_date" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                        @error('event_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description">{{ __('shipment_page.description') }}</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3" required></textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="location">Location (Optional)</label>
                        <input type="text" class="form-control @error('location') is-invalid @enderror" id="location" name="location">
                        @error('location')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('buttons.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('shipment_page.add_event') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('css')
<style>
    .tracking-progress {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 40px 0;
        position: relative;
    }

    .tracking-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }

    .step-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        border: 2px solid #ddd;
    }

    .tracking-step.completed .step-icon {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .step-label {
        font-size: 14px;
        font-weight: 500;
    }

    .step-connector {
        flex-grow: 1;
        height: 4px;
        background-color: #ddd;
        z-index: 0;
    }

    .step-connector.completed {
        background-color: #4CAF50;
    }

    .tracking-info-card {
        height: 100%;
    }
</style>
@endsection