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

{% block title %}Devis {{ devis.orderNumber.numOrder }} - SARL SITECONSEIL{% endblock %}

{% block body %}
<main class="max-w-3xl mx-auto px-4 py-10">
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-4 p-4 glass font-medium text-sm rounded-xl {{ type == 'success' ? 'border-green-300 text-green-800' : 'border-red-300 text-red-800' }}">{{ message }}</div>
        {% endfor %}
    {% endfor %}

    <div class="glass p-8 mb-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Devis</p>
                <h1 class="text-2xl font-bold heading-page font-mono">{{ devis.orderNumber.numOrder }}</h1>
                <p class="text-xs text-gray-500 mt-1">Date : {{ devis.createdAt|date('d/m/Y') }}</p>
            </div>
            <div class="text-right">
                {% if devis.state == 'accepted' %}
                    <span class="px-3 py-1 bg-green-500/20 text-green-700 font-bold uppercase text-xs rounded-lg">Signe</span>
                {% elseif devis.state == 'refused' %}
                    <span class="px-3 py-1 bg-red-500/20 text-red-700 font-bold uppercase text-xs rounded-lg">Refuse</span>
                {% elseif devis.state == 'cancel' %}
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 font-bold uppercase text-xs rounded-lg">Annule</span>
                {% else %}
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-800 font-bold uppercase text-xs rounded-lg">En attente de signature</span>
                {% endif %}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
            <div class="glass p-4">
                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">Emetteur</p>
                <p class="text-sm font-bold">SARL SITECONSEIL</p>
                <p class="text-xs text-gray-500 mt-1">
                    27 rue Le Sérurier<br>
                    02100 Saint-Quentin, France<br>
                    SIREN 943121517
                </p>
            </div>
            <div class="glass p-4">
                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">Client</p>
                <p class="text-sm font-bold">{{ customer.fullName }}</p>
                <p class="text-xs text-gray-500 mt-1">
                    {% if customer.address %}{{ customer.address }}<br>{% endif %}
                    {% if customer.zipCode or customer.city %}{{ customer.zipCode }} {{ customer.city }}<br>{% endif %}
                    {% if customer.email %}{{ customer.email }}{% endif %}
                </p>
            </div>
        </div>

        <h2 class="text-sm font-bold uppercase tracking-wider mb-3">Detail des prestations</h2>
        <div class="glass overflow-hidden mb-6">
            <table class="w-full text-sm">
                <thead>
                    <tr class="glass-dark text-white">
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">#</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Prestation</th>
                        <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Prix HT</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in devis.lines %}
                        <tr class="border-b border-white/20">
                            <td class="px-4 py-3 text-gray-400 text-xs">{{ loop.index }}</td>
                            <td class="px-4 py-3">
                                <div class="font-bold">{{ line.title }}</div>
                                {% if line.description %}
                                    <div class="text-xs text-gray-500 whitespace-pre-wrap mt-1">{{ line.description }}</div>
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-right font-mono">{{ line.priceHt }} &euro;</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="flex justify-end">
            <div class="w-full max-w-xs glass p-4">
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span class="font-bold uppercase tracking-widest">Total HT</span>
                    <span class="font-mono">{{ devis.totalHt }} &euro;</span>
                </div>
                <div class="flex justify-between text-xs text-gray-500 mb-2">
                    <span class="font-bold uppercase tracking-widest">TVA 20%</span>
                    <span class="font-mono">{{ devis.totalTva }} &euro;</span>
                </div>
                <div class="flex justify-between text-base font-bold border-t border-white/30 pt-2">
                    <span class="uppercase tracking-widest">Total TTC</span>
                    <span class="font-mono">{{ devis.totalTtc }} &euro;</span>
                </div>
            </div>
        </div>
    </div>

    {% if devis.state == 'send' %}
        <div class="glass p-6">
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Votre decision</h2>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="{{ path('app_devis_process_sign', {id: devis.id, hmac: devis.hmac}) }}"
                   class="flex-1 px-6 py-4 bg-green-500 text-white font-bold uppercase text-xs tracking-widest text-center hover:bg-green-600 transition-all rounded-lg">
                    Signer le devis
                </a>
                <button type="button" id="refuse-toggle-btn"
                        class="flex-1 px-6 py-4 bg-red-500/20 text-red-700 font-bold uppercase text-xs tracking-widest hover:bg-red-500 hover:text-white transition-all rounded-lg">
                    Refuser le devis
                </button>
            </div>

            <form id="refuse-form" method="post" action="{{ path('app_devis_process_refuse', {id: devis.id, hmac: devis.hmac}) }}" class="hidden mt-4">
                <label for="reason" class="block text-xs font-bold uppercase tracking-wider mb-2">Motif du refus (optionnel)</label>
                <textarea id="reason" name="reason" rows="3" class="w-full px-4 py-3 input-glass text-sm font-medium mb-3"></textarea>
                <button type="submit" class="px-6 py-3 bg-red-600 text-white font-bold uppercase text-xs tracking-widest hover:bg-red-700 transition-all rounded-lg">Confirmer le refus</button>
            </form>
        </div>
    {% endif %}
</main>
{% endblock %}