@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Shipment</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.shipments.update', $shipment) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-6">
                                <h4>Basic Information</h4>
                                <div class="mb-3">
                                    <label for="tracking_id" class="form-label">Tracking ID</label>
                                    <input type="text" class="form-control" id="tracking_id" value="{{ $shipment->tracking_id }}" readonly>
                                    <div class="form-text">Tracking ID cannot be changed</div>
                                </div>
                                <div class="mb-3">
                                    <label for="status" class="form-label">Current Status</label>
                                    <input type="text" class="form-control" id="status" name="status" list="statusOptions" value="{{ $shipment->status }}" placeholder="Select status" required>
                                    <datalist id="statusOptions">
                                        @foreach($statusOptions as $option)
                                            <option value="{{ $option }}">
                                        @endforeach
                                    </datalist>
                                </div>
                                <div class="mb-3">
                                    <label for="current_location" class="form-label">Current Location</label>
                                    <input type="text" class="form-control" id="current_location" name="current_location" value="{{ $shipment->current_location }}" placeholder="Enter current location" required>
                                </div>
                                <div class="mb-3">
                                    <label for="origin" class="form-label">Origin</label>
                                    <input type="text" class="form-control" id="origin" name="origin" value="{{ $shipment->origin }}" placeholder="Enter origin location" required>
                                </div>
                                <div class="mb-3">
                                    <label for="destination" class="form-label">Destination</label>
                                    <input type="text" class="form-control" id="destination" name="destination" value="{{ $shipment->destination }}" placeholder="Enter destination location" required>
                                </div>
                                <div class="mb-3">
                                    <label for="estimated_delivery" class="form-label">Estimated Delivery</label>
                                    <input type="date" class="form-control" id="estimated_delivery" name="estimated_delivery" value="{{ $shipment->estimated_delivery }}" required>
                                </div>
                            </div>

                            <!-- Package Information -->
                            <div class="col-md-6">
                                <h4>Package Information</h4>
                                <div class="mb-3">
                                    <label for="package_image" class="form-label">Package Image</label>
                                    <input type="file" class="form-control" id="package_image" name="package_image" accept="image/*">
                                    @if($shipment->package_image)
                                        <div class="mt-2">
                                            <img src="{{ $shipment->package_image }}" alt="Package" class="img-thumbnail" style="max-width: 200px;">
                                            <div class="form-text">Current package image</div>
                                        </div>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label for="package_weight" class="form-label">Weight</label>
                                    <input type="text" class="form-control" id="package_weight" name="package_weight" value="{{ $shipment->package_details['weight'] }}" placeholder="Enter package weight" required>
                                </div>
                                <div class="mb-3">
                                    <label for="package_type" class="form-label">Package Type</label>
                                    <input type="text" class="form-control" id="package_type" name="package_type" value="{{ $shipment->package_details['type'] }}" placeholder="Enter package type" required>
                                </div>
                                <div class="mb-3">
                                    <label for="declared_value" class="form-label">Declared Value</label>
                                    <input type="text" class="form-control" id="declared_value" name="declared_value" value="{{ $shipment->package_details['declaredValue'] }}" placeholder="Enter declared value" required>
                                </div>
                                <div class="mb-3">
                                    <label for="special_handling" class="form-label">Special Handling</label>
                                    <input type="text" class="form-control" id="special_handling" name="special_handling" value="{{ $shipment->package_details['specialHandling'] }}" placeholder="Enter special handling instructions" required>
                                </div>
                                <div class="mb-3">
                                    <label for="items" class="form-label">Items</label>
                                    <input type="text" class="form-control" id="items" name="items" value="{{ $shipment->package_details['items'] }}" placeholder="Enter items description" required>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Sender Information -->
                            <div class="col-md-6">
                                <h4>Sender Information</h4>
                                <div class="mb-3">
                                    <label for="sender_name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="sender_name" name="sender_name" value="{{ $shipment->sender_details['name'] }}" placeholder="Enter sender name" required>
                                </div>
                                <div class="mb-3">
                                    <label for="sender_address" class="form-label">Address</label>
                                    <input type="text" class="form-control" id="sender_address" name="sender_address" value="{{ $shipment->sender_details['address'] }}" placeholder="Enter sender address" required>
                                </div>
                                <div class="mb-3">
                                    <label for="sender_phone" class="form-label">Phone</label>
                                    <input type="text" class="form-control" id="sender_phone" name="sender_phone" value="{{ $shipment->sender_details['phone'] }}" placeholder="Enter sender phone" required>
                                </div>
                                <div class="mb-3">
                                    <label for="sender_email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="sender_email" name="sender_email" value="{{ $shipment->sender_details['email'] }}" placeholder="Enter sender email" required>
                                </div>
                            </div>

                            <!-- Receiver Information -->
                            <div class="col-md-6">
                                <h4>Receiver Information</h4>
                                <div class="mb-3">
                                    <label for="receiver_name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="receiver_name" name="receiver_name" value="{{ $shipment->receiver_details['name'] }}" placeholder="Enter receiver name" required>
                                </div>
                                <div class="mb-3">
                                    <label for="receiver_address" class="form-label">Address</label>
                                    <input type="text" class="form-control" id="receiver_address" name="receiver_address" value="{{ $shipment->receiver_details['address'] }}" placeholder="Enter receiver address" required>
                                </div>
                                <div class="mb-3">
                                    <label for="receiver_phone" class="form-label">Phone</label>
                                    <input type="text" class="form-control" id="receiver_phone" name="receiver_phone" value="{{ $shipment->receiver_details['phone'] }}" placeholder="Enter receiver phone" required>
                                </div>
                                <div class="mb-3">
                                    <label for="receiver_email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="receiver_email" name="receiver_email" value="{{ $shipment->receiver_details['email'] }}" placeholder="Enter receiver email" required>
                                </div>
                            </div>
                        </div>

                        <!-- Timeline -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <h4>Tracking Timeline</h4>
                                <div id="timeline-container">
                                    @foreach($shipment->timeline as $index => $event)
                                    <div class="timeline-event mb-3">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <input type="date" class="form-control" name="timeline[{{ $index }}][date]" value="{{ $event['date'] }}" required>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" name="timeline[{{ $index }}][location]" value="{{ $event['location'] }}" placeholder="Enter location" required>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" name="timeline[{{ $index }}][status]" list="timelineStatusOptions" value="{{ $event['status'] }}" placeholder="Select status" required>
                                                <datalist id="timelineStatusOptions">
                                                    @foreach($statusOptions as $option)
                                                        <option value="{{ $option }}">
                                                    @endforeach
                                                </datalist>
                                            </div>
                                            <div class="col-md-2">
                                                <select class="form-control" name="timeline[{{ $index }}][icon]" required>
                                                    <option value="fa-box" {{ ($event['icon'] ?? 'fa-box') === 'fa-box' ? 'selected' : '' }}>Box</option>
                                                    <option value="fa-truck" {{ ($event['icon'] ?? '') === 'fa-truck' ? 'selected' : '' }}>Truck</option>
                                                    <option value="fa-plane" {{ ($event['icon'] ?? '') === 'fa-plane' ? 'selected' : '' }}>Plane</option>
                                                    <option value="fa-warehouse" {{ ($event['icon'] ?? '') === 'fa-warehouse' ? 'selected' : '' }}>Warehouse</option>
                                                    <option value="fa-check-circle" {{ ($event['icon'] ?? '') === 'fa-check-circle' ? 'selected' : '' }}>Check</option>
                                                    <option value="fa-exclamation-triangle" {{ ($event['icon'] ?? '') === 'fa-exclamation-triangle' ? 'selected' : '' }}>Warning</option>
                                                    <option value="fa-info-circle" {{ ($event['icon'] ?? '') === 'fa-info-circle' ? 'selected' : '' }}>Info</option>
                                                    <option value="fa-clock" {{ ($event['icon'] ?? '') === 'fa-clock' ? 'selected' : '' }}>Clock</option>
                                                    <option value="fa-map-marker-alt" {{ ($event['icon'] ?? '') === 'fa-map-marker-alt' ? 'selected' : '' }}>Location</option>
                                                    <option value="fa-user" {{ ($event['icon'] ?? '') === 'fa-user' ? 'selected' : '' }}>User</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" name="timeline[{{ $index }}][description]" value="{{ $event['description'] }}" placeholder="Enter description" required>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-timeline-event">Remove</button>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-secondary" id="add-timeline-event">Add Timeline Event</button>
                            </div>
                        </div>

                        <!-- Alerts -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <h4>Alerts</h4>
                                <div id="alerts-container">
                                    @foreach($shipment->alerts ?? [] as $index => $alert)
                                    <div class="alert-event mb-3">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <select class="form-control" name="alerts[{{ $index }}][type]" required>
                                                    <option value="warning" {{ $alert['type'] === 'warning' ? 'selected' : '' }}>Warning</option>
                                                    <option value="info" {{ $alert['type'] === 'info' ? 'selected' : '' }}>Info</option>
                                                    <option value="success" {{ $alert['type'] === 'success' ? 'selected' : '' }}>Success</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" class="form-control" name="alerts[{{ $index }}][message]" value="{{ $alert['message'] }}" placeholder="Enter alert message" required>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="datetime-local" class="form-control" name="alerts[{{ $index }}][timestamp]" value="{{ $alert['timestamp'] }}" required>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-alert">Remove</button>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-secondary" id="add-alert">Add Alert</button>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">Update Shipment</button>
                            <a href="{{ route('admin.shipments.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Timeline Event Management
    document.getElementById('add-timeline-event').addEventListener('click', function() {
        const container = document.getElementById('timeline-container');
        const index = container.children.length;
        const event = document.createElement('div');
        event.className = 'timeline-event mb-3';
        event.innerHTML = `
            <div class="row">
                <div class="col-md-2">
                    <input type="date" class="form-control" name="timeline[${index}][date]" required>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" name="timeline[${index}][location]" placeholder="Enter location" required>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" name="timeline[${index}][status]" list="timelineStatusOptions" placeholder="Select status" required>
                    <datalist id="timelineStatusOptions">
                        @foreach($statusOptions as $option)
                            <option value="{{ $option }}">
                        @endforeach
                    </datalist>
                </div>
                <div class="col-md-2">
                    <select class="form-control" name="timeline[${index}][icon]" required>
                        <option value="fa-box">Box</option>
                        <option value="fa-truck">Truck</option>
                        <option value="fa-plane">Plane</option>
                        <option value="fa-warehouse">Warehouse</option>
                        <option value="fa-check-circle">Check</option>
                        <option value="fa-exclamation-triangle">Warning</option>
                        <option value="fa-info-circle">Info</option>
                        <option value="fa-clock">Clock</option>
                        <option value="fa-map-marker-alt">Location</option>
                        <option value="fa-user">User</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" name="timeline[${index}][description]" placeholder="Enter description" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-timeline-event">Remove</button>
                </div>
            </div>
        `;
        container.appendChild(event);
    });

    // Alert Management
    document.getElementById('add-alert').addEventListener('click', function() {
        const container = document.getElementById('alerts-container');
        const index = container.children.length;
        const alert = document.createElement('div');
        alert.className = 'alert-event mb-3';
        alert.innerHTML = `
            <div class="row">
                <div class="col-md-2">
                    <select class="form-control" name="alerts[${index}][type]" required>
                        <option value="warning">Warning</option>
                        <option value="info">Info</option>
                        <option value="success">Success</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="alerts[${index}][message]" placeholder="Enter alert message" required>
                </div>
                <div class="col-md-2">
                    <input type="datetime-local" class="form-control" name="alerts[${index}][timestamp]" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-alert">Remove</button>
                </div>
            </div>
        `;
        container.appendChild(alert);
    });

    // Remove Timeline Event
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-timeline-event')) {
            e.target.closest('.timeline-event').remove();
        }
    });

    // Remove Alert
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-alert')) {
            e.target.closest('.alert-event').remove();
        }
    });
</script>
@endpush
@endsection