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

{% set isEdit = isEdit ?? false %}

{% block title %}{{ isEdit ? 'Modifier' : 'Creer' }} un devis - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold heading-page">{{ isEdit ? 'Modifier' : 'Creer' }} un devis</h1>
        <a href="{{ path('app_admin_clients_show', {id: customerId, tab: 'devis'}) }}" class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-widest hover:bg-gray-900 hover:text-white transition-all">Retour</a>
    </div>

    <form method="post" action="" class="flex flex-col gap-6" id="devis-form">
        <section class="glass p-6">
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Informations</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="numOrder" class="block text-xs font-bold uppercase tracking-wider mb-2">Numero de devis</label>
                    <input type="text" id="numOrder" name="numOrder" value="{{ numOrder }}" readonly
                           class="w-full px-4 py-3 input-glass text-sm font-mono font-bold bg-gray-50 cursor-not-allowed">
                    <p class="text-[10px] text-gray-400 mt-1">Genere automatiquement</p>
                </div>
                <div>
                    <label for="devisDate" class="block text-xs font-bold uppercase tracking-wider mb-2">Date</label>
                    <input type="date" id="devisDate" name="devisDate" value="{{ today|date('Y-m-d') }}"
                           class="w-full px-4 py-3 input-glass text-sm font-medium">
                </div>
            </div>
        </section>

        <section class="glass p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-bold uppercase tracking-wider">Lignes du devis</h2>
                <button type="button" id="add-line-btn"
                        class="px-4 py-2 glass-dark text-white font-bold uppercase text-[10px] tracking-widest hover:bg-[#fabf04] hover:text-gray-900 transition-all">
                    + Ajouter une ligne
                </button>
            </div>

            <div class="mb-4 pb-4 border-b border-white/30">
                <p class="text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-2">Prestations rapides</p>
                <div class="flex flex-wrap gap-2">
                    {% for type, p in quickPrices %}
                        <button type="button"
                                class="quick-price-btn px-3 py-2 glass text-xs font-bold hover:bg-[#fabf04] hover:text-gray-900 transition-all"
                                data-title="{{ p.title }}"
                                data-description="{{ p.description }}"
                                data-price="{{ p.priceHt }}"
                                data-line-type="{{ p.lineType|default('') }}"
                                title="{{ p.priceHt }} EUR HT">
                            {{ p.title }}
                            <span class="text-[9px] text-gray-400 ml-1">{{ p.priceHt }}&nbsp;€</span>
                        </button>
                    {% endfor %}
                </div>
            </div>

            <div id="lines-container" class="flex flex-col gap-3"
                 {% if isEdit and devis is defined %}
                 data-initial-lines='{{ devis.lines|map(l => {title: l.title, description: l.description, priceHt: l.priceHt, pos: l.pos, type: l.type, serviceId: l.serviceId})|json_encode|e('html_attr') }}'
                 {% endif %}></div>

            <div class="mt-6 pt-4 border-t border-white/30 flex justify-end">
                <div class="text-right">
                    <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">Total HT</div>
                    <div id="total-ht" class="text-2xl font-bold text-gray-900">0.00 EUR</div>
                </div>
            </div>
        </section>

        <div class="flex justify-end gap-3">
            <a href="{{ path('app_admin_clients_show', {id: customerId, tab: 'devis'}) }}"
               class="px-6 py-3 glass font-bold uppercase text-[10px] tracking-widest hover:bg-gray-900 hover:text-white transition-all">Annuler</a>
            <button type="submit"
                    class="px-6 py-3 glass-dark text-white font-bold uppercase text-[10px] tracking-widest hover:bg-[#fabf04] hover:text-gray-900 transition-all">
                {{ isEdit ? 'Mettre a jour le devis' : 'Enregistrer le devis' }}
            </button>
        </div>
    </form>
</div>

<template id="line-template">
    <div class="line-row glass p-4 flex flex-col gap-3" data-index="__INDEX__" draggable="true">
        <div class="flex items-center gap-3">
            <button type="button" class="drag-handle cursor-grab active:cursor-grabbing px-2 py-2 text-gray-400 hover:text-gray-700 hover:bg-white/50" title="Glisser pour reordonner">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a1 1 0 100 2h6a1 1 0 100-2H7zM7 8a1 1 0 100 2h6a1 1 0 100-2H7zM7 14a1 1 0 100 2h6a1 1 0 100-2H7z"/></svg>
            </button>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-400 w-8 line-pos">#1</span>
            <input type="text" name="lines[__INDEX__][title]" placeholder="Titre *" required
                   class="flex-1 px-3 py-2 input-glass text-sm font-bold">
            <div class="flex items-center gap-1">
                <input type="number" step="0.01" min="0" name="lines[__INDEX__][priceHt]" placeholder="0.00" value="0.00" required
                       class="w-28 px-3 py-2 input-glass text-sm font-mono text-right line-price">
                <span class="text-xs font-bold text-gray-400">EUR HT</span>
            </div>
            <button type="button" class="remove-line-btn px-3 py-2 text-red-600 hover:bg-red-50 font-bold text-lg leading-none" title="Supprimer">&times;</button>
        </div>
        <div class="flex items-center gap-3">
            <div class="flex-1">
                <select name="lines[__INDEX__][type]" class="line-type w-full px-3 py-2 glass text-xs font-bold"
                        data-services-url="{{ path('app_admin_devis_services', {customerId: customerId, type: '__TYPE__'}) }}">
                    <option value="">— Type de service —</option>
                    <option value="ndd">Nom de domaine</option>
                    <option value="website">Site internet</option>
                    <option value="esymail">Email (EsyMail)</option>
                    <option value="hosting">Hebergement</option>
                    <option value="maintenance">Maintenance</option>
                    <option value="other">Autre</option>
                </select>
            </div>
            <div class="flex-1">
                <select name="lines[__INDEX__][serviceId]" class="line-service-id w-full px-3 py-2 glass text-xs font-bold" disabled>
                    <option value="">— Selectionner le service —</option>
                </select>
            </div>
        </div>
        <textarea name="lines[__INDEX__][description]" placeholder="Description detaillee (texte long supporte)" rows="5"
                  class="w-full px-3 py-2 input-glass text-xs font-medium resize-y min-h-24"></textarea>
        <input type="hidden" name="lines[__INDEX__][pos]" class="line-pos-input" value="0">
    </div>
</template>

{% endblock %}
