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

{% block title %}Livraison - {{ site.name }}{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-shipping-fast text-primary me-2"></i>
                Méthodes de livraison
            </h1>
            <p class="text-muted mb-0">Configurez les options de livraison pour votre boutique</p>
        </div>
        <div class="d-flex gap-2">
            {% if methods|length == 0 %}
                <form action="{{ path('admin_shop_shipping_create_defaults', {siteId: site.id}) }}" method="post" class="d-inline">
                    <button type="submit" class="btn btn-outline-primary">
                        <i class="fas fa-magic me-1"></i> Créer les méthodes par défaut
                    </button>
                </form>
            {% endif %}
            <a href="{{ path('admin_shop_shipping_new', {siteId: site.id}) }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i> Nouvelle méthode
            </a>
        </div>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    {% for message in app.flashes('warning') %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    {% if methods|length == 0 %}
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-truck fa-4x text-muted mb-3"></i>
                <h5>Aucune méthode de livraison configurée</h5>
                <p class="text-muted mb-4">Ajoutez des méthodes de livraison pour permettre à vos clients de choisir leur mode de livraison.</p>
                <form action="{{ path('admin_shop_shipping_create_defaults', {siteId: site.id}) }}" method="post" class="d-inline">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-magic me-1"></i> Créer Colissimo et Mondial Relay
                    </button>
                </form>
            </div>
        </div>
    {% else %}
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 40px;"></th>
                                <th>Transporteur</th>
                                <th>Nom</th>
                                <th>Type</th>
                                <th>Prix de base</th>
                                <th>Livraison gratuite</th>
                                <th>Délai</th>
                                <th>Statut</th>
                                <th style="width: 120px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="shipping-methods-list">
                            {% for method in methods %}
                                <tr data-id="{{ method.id }}">
                                    <td>
                                        <div class="drag-handle" style="cursor: grab;">
                                            <i class="fas fa-grip-vertical text-muted"></i>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            {% if method.carrier == 'colissimo' %}
                                                <img src="{{ asset('assets/img/shipping/colissimo.png') }}" alt="Colissimo" style="height: 24px;" class="me-2" onerror="this.style.display='none'">
                                            {% elseif method.carrier == 'mondial_relay' %}
                                                <img src="{{ asset('assets/img/shipping/mondial-relay.png') }}" alt="Mondial Relay" style="height: 24px;" class="me-2" onerror="this.style.display='none'">
                                            {% endif %}
                                            <span class="badge bg-secondary">{{ method.carrierName }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <strong>{{ method.name }}</strong>
                                        {% if method.description %}
                                            <br><small class="text-muted">{{ method.description|length > 50 ? method.description|slice(0, 50) ~ '...' : method.description }}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if method.deliveryType == 'home' %}
                                            <span class="badge bg-info"><i class="fas fa-home me-1"></i> Domicile</span>
                                        {% else %}
                                            <span class="badge bg-warning text-dark"><i class="fas fa-map-marker-alt me-1"></i> Point relais</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ method.basePrice|number_format(2, ',', ' ') }} €</td>
                                    <td>
                                        {% if method.freeShippingThreshold %}
                                            <span class="text-success">
                                                <i class="fas fa-gift me-1"></i>
                                                dès {{ method.freeShippingThreshold|number_format(2, ',', ' ') }} €
                                            </span>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if method.estimatedDelivery %}
                                            <i class="fas fa-clock text-muted me-1"></i>
                                            {{ method.estimatedDelivery }}
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input toggle-active" type="checkbox"
                                                   data-id="{{ method.id }}"
                                                   {{ method.active ? 'checked' : '' }}>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="{{ path('admin_shop_shipping_edit', {siteId: site.id, id: method.id}) }}"
                                               class="btn btn-sm btn-outline-primary" title="Modifier">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-delete"
                                                    data-id="{{ method.id }}"
                                                    data-name="{{ method.name }}"
                                                    title="Supprimer">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="mt-4">
        <a href="{{ path('admin_shop_dashboard', {siteId: site.id}) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> Retour à la boutique
        </a>
    </div>
</div>

<!-- Delete confirmation modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer la méthode de livraison <strong id="delete-method-name"></strong> ?</p>
                <p class="text-muted mb-0">Cette action est irréversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form id="delete-form" method="post" class="d-inline">
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const siteId = {{ site.id }};

    // Initialize Sortable for drag & drop reordering
    const list = document.getElementById('shipping-methods-list');
    if (list) {
        new Sortable(list, {
            animation: 150,
            handle: '.drag-handle',
            onEnd: async function(evt) {
                const rows = list.querySelectorAll('tr');
                const order = Array.from(rows).map(row => parseInt(row.dataset.id));

                await fetch(`/admin/site/${siteId}/shop/shipping/reorder`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ order })
                });
            }
        });
    }

    // Toggle active status
    document.querySelectorAll('.toggle-active').forEach(toggle => {
        toggle.addEventListener('change', async function() {
            const id = this.dataset.id;
            await fetch(`/admin/site/${siteId}/shop/shipping/${id}/toggle`, {
                method: 'POST'
            });
        });
    });

    // Delete confirmation
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    document.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('delete-method-name').textContent = name;
            document.getElementById('delete-form').action = `/admin/site/${siteId}/shop/shipping/${id}/delete`;
            deleteModal.show();
        });
    });
});
</script>
{% endblock %}