{% extends 'admin/base.html.twig' %}

{% block title %}{{ isNew ? 'Nouvelle méthode' : 'Modifier' }} - Livraison{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ path('admin_shop_dashboard', {siteId: site.id}) }}">Boutique</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ path('admin_shop_shipping', {siteId: site.id}) }}">Livraison</a>
                </li>
                <li class="breadcrumb-item active">{{ isNew ? 'Nouvelle méthode' : method.name }}</li>
            </ol>
        </nav>
        <h1 class="h3">
            <i class="fas fa-truck text-primary me-2"></i>
            {{ isNew ? 'Nouvelle méthode de livraison' : 'Modifier la méthode de livraison' }}
        </h1>
    </div>

    <form method="post" id="shipping-form">
        <div class="row">
            <div class="col-lg-8">
                <!-- General Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-info-circle me-2"></i>Informations générales
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="carrier" class="form-label">Transporteur <span class="text-danger">*</span></label>
                                <select class="form-select" id="carrier" name="carrier" required>
                                    <option value="colissimo" {{ method.carrier == 'colissimo' ? 'selected' : '' }}>Colissimo</option>
                                    <option value="mondial_relay" {{ method.carrier == 'mondial_relay' ? 'selected' : '' }}>Mondial Relay</option>
                                    <option value="other" {{ method.carrier == 'other' ? 'selected' : '' }}>Autre</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="delivery_type" class="form-label">Type de livraison <span class="text-danger">*</span></label>
                                <select class="form-select" id="delivery_type" name="delivery_type" required>
                                    <option value="home" {{ method.deliveryType == 'home' ? 'selected' : '' }}>Domicile</option>
                                    <option value="pickup_point" {{ method.deliveryType == 'pickup_point' ? 'selected' : '' }}>Point relais</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label for="name" class="form-label">Nom affiché <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name"
                                       value="{{ method.name }}" required placeholder="Ex: Colissimo Domicile">
                            </div>
                            <div class="col-12">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="2"
                                          placeholder="Ex: Livraison à domicile en 2-3 jours ouvrés">{{ method.description }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="estimated_delivery" class="form-label">Délai estimé</label>
                                <input type="text" class="form-control" id="estimated_delivery" name="estimated_delivery"
                                       value="{{ method.estimatedDelivery }}" placeholder="Ex: 2-3 jours ouvrés">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pricing -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-euro-sign me-2"></i>Tarification
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label for="base_price" class="form-label">Prix de base (€) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" class="form-control" id="base_price" name="base_price"
                                       value="{{ method.basePrice }}" required>
                                <div class="form-text">Prix utilisé si aucune tranche de poids ne correspond</div>
                            </div>
                            <div class="col-md-6">
                                <label for="free_shipping_threshold" class="form-label">Seuil livraison gratuite (€)</label>
                                <input type="number" step="0.01" min="0" class="form-control" id="free_shipping_threshold" name="free_shipping_threshold"
                                       value="{{ method.freeShippingThreshold }}" placeholder="Laisser vide pour désactiver">
                                <div class="form-text">Livraison offerte à partir de ce montant</div>
                            </div>
                        </div>

                        <h6 class="mb-3">Tarifs par tranche de poids</h6>
                        <div id="price-ranges">
                            <!-- Price ranges will be rendered here -->
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-price-range">
                            <i class="fas fa-plus me-1"></i> Ajouter une tranche
                        </button>
                    </div>
                </div>

                <!-- Zones -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-globe me-2"></i>Zones géographiques
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Définissez les zones où cette méthode de livraison est disponible et les éventuels suppléments.</p>
                        <div id="zones">
                            <!-- Zones will be rendered here -->
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-zone">
                            <i class="fas fa-plus me-1"></i> Ajouter une zone
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Status -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Statut</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="active" name="active"
                                   {{ method.active ? 'checked' : '' }}>
                            <label class="form-check-label" for="active">Méthode active</label>
                        </div>
                        <div class="form-text">Les méthodes inactives ne sont pas proposées au checkout</div>
                    </div>
                </div>

                <!-- Quick Fill -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Tarifs prédéfinis</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">Remplir automatiquement avec les tarifs standard</p>
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="fill-colissimo">
                                <img src="{{ asset('assets/img/shipping/colissimo.png') }}" alt="" style="height: 16px;" class="me-1" onerror="this.style.display='none'">
                                Tarifs Colissimo 2024
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="fill-mondial-relay">
                                <img src="{{ asset('assets/img/shipping/mondial-relay.png') }}" alt="" style="height: 16px;" class="me-1" onerror="this.style.display='none'">
                                Tarifs Mondial Relay 2024
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> {{ isNew ? 'Créer' : 'Enregistrer' }}
                            </button>
                            <a href="{{ path('admin_shop_shipping', {siteId: site.id}) }}" class="btn btn-outline-secondary">
                                Annuler
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hidden fields for JSON data -->
        <input type="hidden" name="price_ranges" id="price_ranges_input">
        <input type="hidden" name="zones" id="zones_input">
    </form>
</div>

<style>
.price-range-row, .zone-row {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.price-range-row .btn-remove, .zone-row .btn-remove {
    opacity: 0.5;
}
.price-range-row:hover .btn-remove, .zone-row:hover .btn-remove {
    opacity: 1;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initial data
    let priceRanges = {{ method.priceRanges|json_encode|raw }};
    let zones = {{ method.zones|json_encode|raw }};

    // Default data for quick fill
    const colissimoRates = [
        { min_weight: 0, max_weight: 250, price: 4.95 },
        { min_weight: 250, max_weight: 500, price: 6.35 },
        { min_weight: 500, max_weight: 750, price: 7.25 },
        { min_weight: 750, max_weight: 1000, price: 7.95 },
        { min_weight: 1000, max_weight: 2000, price: 8.95 },
        { min_weight: 2000, max_weight: 5000, price: 13.75 }
    ];

    const mondialRelayRates = [
        { min_weight: 0, max_weight: 500, price: 3.99 },
        { min_weight: 500, max_weight: 1000, price: 4.99 },
        { min_weight: 1000, max_weight: 3000, price: 5.99 },
        { min_weight: 3000, max_weight: 5000, price: 7.49 },
        { min_weight: 5000, max_weight: 10000, price: 9.99 }
    ];

    const defaultZones = [
        { code: 'FR', name: 'France métropolitaine', surcharge: 0 },
        { code: 'EU', name: 'Europe', surcharge: 8.00 }
    ];

    // Render price ranges
    function renderPriceRanges() {
        const container = document.getElementById('price-ranges');
        container.innerHTML = '';

        priceRanges.forEach((range, index) => {
            container.innerHTML += `
                <div class="price-range-row" data-index="${index}">
                    <div class="row g-2 align-items-end">
                        <div class="col">
                            <label class="form-label small">Poids min (g)</label>
                            <input type="number" class="form-control form-control-sm" value="${range.min_weight}"
                                   onchange="updatePriceRange(${index}, 'min_weight', this.value)">
                        </div>
                        <div class="col">
                            <label class="form-label small">Poids max (g)</label>
                            <input type="number" class="form-control form-control-sm" value="${range.max_weight}"
                                   onchange="updatePriceRange(${index}, 'max_weight', this.value)">
                        </div>
                        <div class="col">
                            <label class="form-label small">Prix (€)</label>
                            <input type="number" step="0.01" class="form-control form-control-sm" value="${range.price}"
                                   onchange="updatePriceRange(${index}, 'price', this.value)">
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-outline-danger btn-sm btn-remove"
                                    onclick="removePriceRange(${index})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });

        updateHiddenFields();
    }

    // Render zones
    function renderZones() {
        const container = document.getElementById('zones');
        container.innerHTML = '';

        zones.forEach((zone, index) => {
            container.innerHTML += `
                <div class="zone-row" data-index="${index}">
                    <div class="row g-2 align-items-end">
                        <div class="col">
                            <label class="form-label small">Code zone</label>
                            <select class="form-select form-select-sm" onchange="updateZone(${index}, 'code', this.value)">
                                <option value="FR" ${zone.code === 'FR' ? 'selected' : ''}>FR - France métropolitaine</option>
                                <option value="DOM" ${zone.code === 'DOM' ? 'selected' : ''}>DOM - DOM-TOM</option>
                                <option value="EU" ${zone.code === 'EU' ? 'selected' : ''}>EU - Europe</option>
                                <option value="WORLD" ${zone.code === 'WORLD' ? 'selected' : ''}>WORLD - International</option>
                            </select>
                        </div>
                        <div class="col">
                            <label class="form-label small">Nom affiché</label>
                            <input type="text" class="form-control form-control-sm" value="${zone.name}"
                                   onchange="updateZone(${index}, 'name', this.value)">
                        </div>
                        <div class="col">
                            <label class="form-label small">Supplément (€)</label>
                            <input type="number" step="0.01" class="form-control form-control-sm" value="${zone.surcharge}"
                                   onchange="updateZone(${index}, 'surcharge', this.value)">
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-outline-danger btn-sm btn-remove"
                                    onclick="removeZone(${index})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });

        updateHiddenFields();
    }

    // Update hidden fields
    function updateHiddenFields() {
        document.getElementById('price_ranges_input').value = JSON.stringify(priceRanges);
        document.getElementById('zones_input').value = JSON.stringify(zones);
    }

    // Global functions for inline handlers
    window.updatePriceRange = function(index, field, value) {
        priceRanges[index][field] = parseFloat(value) || 0;
        updateHiddenFields();
    };

    window.removePriceRange = function(index) {
        priceRanges.splice(index, 1);
        renderPriceRanges();
    };

    window.updateZone = function(index, field, value) {
        if (field === 'surcharge') {
            zones[index][field] = parseFloat(value) || 0;
        } else {
            zones[index][field] = value;
        }
        updateHiddenFields();
    };

    window.removeZone = function(index) {
        zones.splice(index, 1);
        renderZones();
    };

    // Add price range
    document.getElementById('add-price-range').addEventListener('click', function() {
        const lastRange = priceRanges[priceRanges.length - 1];
        priceRanges.push({
            min_weight: lastRange ? lastRange.max_weight : 0,
            max_weight: lastRange ? lastRange.max_weight + 1000 : 1000,
            price: lastRange ? lastRange.price + 2 : 5
        });
        renderPriceRanges();
    });

    // Add zone
    document.getElementById('add-zone').addEventListener('click', function() {
        zones.push({
            code: 'FR',
            name: 'Nouvelle zone',
            surcharge: 0
        });
        renderZones();
    });

    // Quick fill Colissimo
    document.getElementById('fill-colissimo').addEventListener('click', function() {
        document.getElementById('carrier').value = 'colissimo';
        document.getElementById('delivery_type').value = 'home';
        document.getElementById('name').value = 'Colissimo Domicile';
        document.getElementById('description').value = 'Livraison à domicile en 2-3 jours ouvrés';
        document.getElementById('estimated_delivery').value = '2-3 jours ouvrés';
        document.getElementById('base_price').value = '6.95';
        document.getElementById('free_shipping_threshold').value = '50.00';
        priceRanges = [...colissimoRates];
        zones = [...defaultZones];
        renderPriceRanges();
        renderZones();
    });

    // Quick fill Mondial Relay
    document.getElementById('fill-mondial-relay').addEventListener('click', function() {
        document.getElementById('carrier').value = 'mondial_relay';
        document.getElementById('delivery_type').value = 'pickup_point';
        document.getElementById('name').value = 'Mondial Relay';
        document.getElementById('description').value = 'Livraison en point relais en 3-5 jours ouvrés';
        document.getElementById('estimated_delivery').value = '3-5 jours ouvrés';
        document.getElementById('base_price').value = '4.99';
        document.getElementById('free_shipping_threshold').value = '50.00';
        priceRanges = [...mondialRelayRates];
        zones = [{ code: 'FR', name: 'France métropolitaine', surcharge: 0 }];
        renderPriceRanges();
        renderZones();
    });

    // Initial render
    renderPriceRanges();
    renderZones();
});
</script>
{% endblock %}