@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">Create New Shipment</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.shipments.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <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" name="tracking_id" value="{{ $defaultTrackingId }}" readonly>
                                    <div class="form-text">Tracking ID is automatically generated</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" 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" required>
                                </div>
                                <div class="mb-3">
                                    <label for="origin" class="form-label">Origin</label>
                                    <input type="text" class="form-control" id="origin" name="origin" required>
                                </div>
                                <div class="mb-3">
                                    <label for="destination" class="form-label">Destination</label>
                                    <input type="text" class="form-control" id="destination" name="destination" 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" 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/*">
                                    <div class="form-text">Accepted formats: JPEG, PNG, JPG, GIF. Max size: 2MB</div>
                                    <div id="image-preview" class="mt-2" style="display: none;">
                                        <img src="" alt="Package Preview" class="img-thumbnail" style="max-width: 200px;">
                                        <div class="form-text">Image preview</div>
                                    </div>
                                </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" 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" 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" 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" required>
                                </div>
                                <div class="mb-3">
                                    <label for="items" class="form-label">Items</label>
                                    <input type="text" class="form-control" id="items" name="items" 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" 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" 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" 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" 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" 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" 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" 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" required>
                                </div>
                            </div>
                        </div>

                        <!-- Timeline -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <h4>Tracking Timeline</h4>
                                <div id="timeline-container">
                                    <div class="timeline-event mb-3">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <input type="date" class="form-control" name="timeline[0][date]" required>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" name="timeline[0][location]" placeholder="Location" required>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" name="timeline[0][status]" list="timelineStatusOptions" placeholder="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[0][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[0][description]" placeholder="Description" required>
                                            </div>
                                        </div>
                                    </div>
                                </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">
                                    <!-- Initial alert will be added by JavaScript -->
                                </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">Create 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="Location" required>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" name="timeline[${index}][status]" list="timelineStatusOptions" placeholder="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="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="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();
        }
    });

    // Add initial alert on page load
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('alerts-container');
        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[0][type]" required>
                        <option value="info">Info</option>
                        <option value="warning">Warning</option>
                        <option value="success">Success</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="alerts[0][message]" placeholder="Message" required>
                </div>
                <div class="col-md-2">
                    <input type="datetime-local" class="form-control" name="alerts[0][timestamp]" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-alert">Remove</button>
                </div>
            </div>
        `;
        container.appendChild(alert);
    });

    // Image Preview
    document.getElementById('package_image').addEventListener('change', function(e) {
        const preview = document.getElementById('image-preview');
        const img = preview.querySelector('img');
        
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(this.files[0]);
        } else {
            preview.style.display = 'none';
        }
    });
</script>
@endpush
@endsection