{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Back to Dashboard -->
            <div class="mb-4">
                <a href="{% url 'dashboard' %}" class="btn btn-link text-decoration-none text-muted ps-0">
                    <i class="bi {% if LANGUAGE_BIDI %}bi-arrow-right{% else %}bi-arrow-left{% endif %} me-2"></i>{% trans "Back to Dashboard" %}
                </a>
            </div>

            <div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
                <h2 class="mb-4 text-center">{% trans "Request a Shipment" %}</h2>
                
                {% if not google_maps_api_key %}
                <div class="alert alert-warning">
                    {% trans "Map integration is disabled (API Key missing). Distance must be entered manually or functionality is limited." %}
                </div>
                {% endif %}

                <form method="POST" id="shipmentForm">
                    {% csrf_token %}
                    
                    <!-- Hidden Fields -->
                    {{ form.pickup_lat }}
                    {{ form.pickup_lng }}
                    {{ form.delivery_lat }}
                    {{ form.delivery_lng }}
                    {{ form.distance_km }}
                    {{ form.platform_fee }}
                    {{ form.driver_amount }}
                    {{ form.platform_fee_percentage }}

                    <!-- General Info Section -->
                    <div class="card bg-light border-0 mb-4">
                        <div class="card-body">
                            <h5 class="card-title text-secondary mb-3">{% trans "Shipment Information" %}</h5>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-bold" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                                    {{ form.description }}
                                    {% if form.description.errors %}
                                    <div class="text-danger small">{{ form.description.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" for="{{ form.weight.id_for_label }}">{{ form.weight.label }}</label>
                                    {{ form.weight }}
                                    {% if form.weight.errors %}
                                    <div class="text-danger small">{{ form.weight.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold" for="{{ form.price.id_for_label }}">{{ form.price.label }}</label>
                                    {{ form.price }}
                                    <small class="text-muted">{% trans "Calculated automatically based on distance and weight." %}</small>
                                    {% if form.price.errors %}
                                    <div class="text-danger small">{{ form.price.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Pickup Container -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border shadow-sm">
                                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 text-primary">
                                        <i class="bi bi-box-seam me-2"></i>{% trans "Pickup Details" %}
                                    </h5>
                                    {% if google_maps_api_key %}
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="openMap('pickup')">
                                        <i class="bi bi-geo-alt-fill"></i> {% trans "Map" %}
                                    </button>
                                    {% endif %}
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.pickup_country.id_for_label }}">{{ form.pickup_country.label }}</label>
                                            {{ form.pickup_country }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.pickup_governate.id_for_label }}">{{ form.pickup_governate.label }}</label>
                                            {{ form.pickup_governate }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.pickup_city.id_for_label }}">{{ form.pickup_city.label }}</label>
                                            {{ form.pickup_city }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.pickup_address.id_for_label }}">{{ form.pickup_address.label }}</label>
                                            {{ form.pickup_address }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Delivery Container -->
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 border shadow-sm">
                                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 text-success">
                                        <i class="bi bi-geo-alt me-2"></i>{% trans "Delivery Details" %}
                                    </h5>
                                    {% if google_maps_api_key %}
                                    <button type="button" class="btn btn-sm btn-outline-success" onclick="openMap('delivery')">
                                        <i class="bi bi-geo-alt-fill"></i> {% trans "Map" %}
                                    </button>
                                    {% endif %}
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.delivery_country.id_for_label }}">{{ form.delivery_country.label }}</label>
                                            {{ form.delivery_country }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.delivery_governate.id_for_label }}">{{ form.delivery_governate.label }}</label>
                                            {{ form.delivery_governate }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.delivery_city.id_for_label }}">{{ form.delivery_city.label }}</label>
                                            {{ form.delivery_city }}
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label" for="{{ form.delivery_address.id_for_label }}">{{ form.delivery_address.label }}</label>
                                            {{ form.delivery_address }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Receiver Details -->
                    <div class="card border mb-4">
                        <div class="card-header bg-white py-3">
                             <h5 class="mb-0 text-secondary">{% trans "Receiver Details" %}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label" for="{{ form.receiver_name.id_for_label }}">{{ form.receiver_name.label }}</label>
                                    {{ form.receiver_name }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="{{ form.receiver_phone.id_for_label }}">{{ form.receiver_phone.label }}</label>
                                    <div class="d-flex gap-2">
                                        <div class="flex-shrink-0" style="width: 140px;">
                                             {{ form.receiver_phone_code }}
                                        </div>
                                        <div class="flex-grow-1">
                                             {{ form.receiver_phone }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-3 justify-content-end">
                         <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary px-5 py-2">{% trans "Cancel" %}</a>
                        <button type="submit" class="btn btn-masarx-primary px-5 py-2">{% trans "Submit Request" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Choose Location" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 position-relative">
                <div id="mapError" class="alert alert-danger m-3 d-none"></div>
                <div id="map" style="height: 450px; width: 100%;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
                <button type="button" class="btn btn-primary" onclick="confirmLocation()">{% trans "Confirm Location" %}</button>
            </div>
        </div>
    </div>
</div>

{% if google_maps_api_key %}
<script>
    // Global Auth Failure Handler (must be defined before script load)
    window.gm_authFailure = function() {
        const errorDiv = document.getElementById('mapError');
        if (errorDiv) {
            errorDiv.innerHTML = `
                <strong>Google Maps Error:</strong> Authentication failed. 
                <br>Please check your API Key and enable <strong>Billing</strong> in Google Cloud Console.
                <br>Also ensure <strong>Maps JavaScript API</strong> and <strong>Geocoding API</strong> are enabled.
            `;
            errorDiv.classList.remove('d-none');
        }
        console.error("Google Maps Auth Failure");
    }

    let map;
    let marker;
    let currentMode = 'pickup'; // 'pickup' or 'delivery'
    let mapModal;
    let mapInitialized = false;

    // This function is called by the Google Maps script when loaded
    function initMap() {
        console.log("Google Maps API loaded.");
    }

    function initializeMapInstance() {
        if (mapInitialized && map) return;
        
        console.log("Initializing Map Instance...");

        const defaultLocation = { lat: 23.5880, lng: 58.3829 }; // Muscat, Oman
        
        const mapElement = document.getElementById("map");
        if (!mapElement) {
            console.error("Map element not found!");
            return;
        }

        try {
            map = new google.maps.Map(mapElement, {
                zoom: 12,
                center: defaultLocation,
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
            });

            map.addListener("click", (e) => {
                placeMarkerAndPanTo(e.latLng, map);
            });
            
            mapInitialized = true;
        } catch (e) {
            console.error("Error creating map:", e);
            const errorDiv = document.getElementById('mapError');
            if (errorDiv) {
                errorDiv.innerText = "Error initializing map: " + e.message;
                errorDiv.classList.remove('d-none');
            }
        }
    }

    function placeMarkerAndPanTo(latLng, map) {
        marker.setPosition(latLng);
        map.panTo(latLng);
    }

    function getSelectedText(elementId) {
        const el = document.getElementById(elementId);
        if (el && el.selectedIndex !== -1 && el.options[el.selectedIndex].value) {
            return el.options[el.selectedIndex].text;
        }
        return '';
    }

    function openMap(mode) {
        currentMode = mode;
        const modalEl = document.getElementById('mapModal');
        
        // Hide previous errors
        const errorDiv = document.getElementById('mapError');
        if (errorDiv) errorDiv.classList.add('d-none');

        mapModal = new bootstrap.Modal(modalEl);
        mapModal.show();
        
        // Ensure map is initialized and resized when modal is fully shown
        modalEl.addEventListener('shown.bs.modal', function () {
            initializeMapInstance();
            
            if (map) {
                google.maps.event.trigger(map, "resize");
                
                // 1. Check if lat/lng are already set (editing existing parcel or re-opening map)
                let latField = document.getElementById(`id_${mode}_lat`);
                let lngField = document.getElementById(`id_${mode}_lng`);
                
                if (latField.value && lngField.value) {
                    let loc = { lat: parseFloat(latField.value), lng: parseFloat(lngField.value) };
                    marker.setPosition(loc);
                    map.setCenter(loc);
                    map.setZoom(15);
                } else {
                    // 2. If no lat/lng, try to find the selected City/Governate/Country
                    const city = getSelectedText(`id_${mode}_city`);
                    const governate = getSelectedText(`id_${mode}_governate`);
                    const country = getSelectedText(`id_${mode}_country`);
                    
                    if (city) {
                        let addressQuery = city;
                        if (governate) addressQuery += `, ${governate}`;
                        if (country) addressQuery += `, ${country}`;
                        
                        console.log(`Geocoding selected location: ${addressQuery}`);
                        
                        const geocoder = new google.maps.Geocoder();
                        geocoder.geocode({ address: addressQuery }, (results, status) => {
                            if (status === "OK" && results[0]) {
                                const location = results[0].geometry.location;
                                map.setCenter(location);
                                map.setZoom(14);
                                // Optional: place marker at city center
                                marker.setPosition(location);
                            } else {
                                console.warn("Could not geocode city: " + status);
                            }
                        });
                    }
                }
            }
        }, { once: true });
    }

    function confirmLocation() {
        if (!marker || !marker.getPosition()) return;
        
        const lat = marker.getPosition().lat();
        const lng = marker.getPosition().lng();
        
        document.getElementById(`id_${currentMode}_lat`).value = lat;
        document.getElementById(`id_${currentMode}_lng`).value = lng;
        
        // Try reverse geocoding to fill address
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({ location: { lat: lat, lng: lng } }, (results, status) => {
            if (status === "OK" && results[0]) {
                const addrField = document.getElementById(`id_${currentMode}_address`);
                // Only overwrite address if it's empty or user confirms? 
                // Currently existing behavior is to overwrite.
                addrField.value = results[0].formatted_address;
            } else {
                console.warn("Geocoder failed due to: " + status);
            }
        });

        // Close modal
        const modalEl = document.getElementById('mapModal');
        const modal = bootstrap.Modal.getInstance(modalEl);
        modal.hide();

        // Trigger Price Calculation
        calculatePrice();
    }

    function calculatePrice() {
        const pickupLat = document.getElementById('id_pickup_lat').value;
        const pickupLng = document.getElementById('id_pickup_lng').value;
        const deliveryLat = document.getElementById('id_delivery_lat').value;
        const deliveryLng = document.getElementById('id_delivery_lng').value;
        const weight = document.getElementById('id_weight').value;

        if (pickupLat && pickupLng && deliveryLat && deliveryLng && weight) {
            fetch('{% url "api_calculate_price" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({
                    pickup_lat: pickupLat,
                    pickup_lng: pickupLng,
                    delivery_lat: deliveryLat,
                    delivery_lng: deliveryLng,
                    weight: weight
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    console.error(data.error);
                } else {
                    document.getElementById('id_price').value = data.price;
                    document.getElementById('id_distance_km').value = data.distance_km;
                    document.getElementById('id_platform_fee').value = data.platform_fee;
                    document.getElementById('id_driver_amount').value = data.driver_amount;
                    document.getElementById('id_platform_fee_percentage').value = data.platform_fee_percentage;
                }
            })
            .catch(error => console.error('Error:', error));
        }
    }
    
    // Attach listener to weight
    const weightInput = document.getElementById('id_weight');
    if (weightInput) {
        weightInput.addEventListener('change', calculatePrice);
        weightInput.addEventListener('keyup', calculatePrice);
    }

    window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&loading=async&callback=initMap" async defer></script>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    function setupDependentDropdowns(countryId, governateId, cityId) {
        const countrySelect = document.getElementById(countryId);
        const governateSelect = document.getElementById(governateId);
        const citySelect = document.getElementById(cityId);

        if (!countrySelect || !governateSelect || !citySelect) return;

        countrySelect.addEventListener('change', function() {
            const val = this.value;
            governateSelect.innerHTML = '<option value="">{% trans "Select Governate" %}</option>';
            citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
            
            if (val) {
                fetch(`{% url 'get_governates' %}?country_id=${val}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(item => {
                            const option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            governateSelect.appendChild(option);
                        });
                    });
            }
        });

        governateSelect.addEventListener('change', function() {
            const val = this.value;
            citySelect.innerHTML = '<option value="">{% trans "Select City" %}</option>';
            
            if (val) {
                fetch(`{% url 'get_cities' %}?governate_id=${val}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(item => {
                            const option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            citySelect.appendChild(option);
                        });
                    });
            }
        });
    }

    setupDependentDropdowns('id_pickup_country', 'id_pickup_governate', 'id_pickup_city');
    setupDependentDropdowns('id_delivery_country', 'id_delivery_governate', 'id_delivery_city');
});
</script>
{% endblock %}
