{% extends "base.html" %}
{% load static %}

{% block title %}Détail de la Facture #{{ invoice.invoice_number }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/billing/invoice_detail.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- En-tête de la Page -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2 mb-0">Détail de la Facture</h1>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" onclick="downloadPDF()" id="downloadBtn">
                <i class="fas fa-file-pdf me-2"></i>
                Télécharger en PDF
            </button>
            <button class="btn btn-primary" onclick="printInvoice()" id="printBtn">
                <i class="fas fa-print me-2"></i>
                Imprimer
            </button>
        </div>
    </div>

    <!-- Carte Principale de la Facture -->
    <div class="card shadow-sm" id="invoiceContent">
        <div class="card-body p-5">
            
            <!-- En-tête de la Facture -->
            <div class="row mb-5">
                <!-- Colonne Gauche - Informations de l'Entreprise -->
                <div class="col-md-6">
                    <div class="mb-3">
                        <h3 class="text-primary fw-bold mb-2">{{ site_config.company_name }}</h3>
                        <div class="text-muted">
                            <i class="fas fa-map-marker-alt me-2"></i>
                            {{ site_config.address|linebreaks }}
                        </div>
                    </div>
                </div>

                <!-- Colonne Droite - Détails de la Facture -->
                <div class="col-md-6 text-end">
                    <h2 class="text-uppercase fw-bold text-primary mb-3">FACTURE</h2>
                    <div class="invoice-details">
                        <div class="mb-2">
                            <strong>Numéro :</strong> 
                            <span class="text-primary">#{{ invoice.invoice_number }}</span>
                        </div>
                        <div class="mb-2">
                            <strong>Date de création :</strong> 
                            <span>{{ invoice.created_at|date:"d/m/Y" }}</span>
                        </div>
                        <div class="mb-2">
                            <strong>Date d'échéance :</strong> 
                            <span class="text-warning">{{ invoice.due_date|date:"d/m/Y" }}</span>
                        </div>
                        <div class="mb-2">
                            <strong>Statut :</strong>
                            <span class="badge bg-{% if invoice.status == 'PAID' %}success{% elif invoice.status == 'PENDING' %}warning{% else %}danger{% endif %} ms-2">
                                {{ invoice.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            <!-- Section des Adresses -->
            <div class="row mb-5">
                <!-- Informations du Client -->
                <div class="col-md-6">
                    <div class="client-info">
                        <h5 class="text-uppercase text-muted mb-3">
                            <i class="fas fa-user me-2"></i>
                            FACTURÉ À
                        </h5>
                        <div class="client-details p-3 bg-light rounded">
                            <div class="fw-bold mb-2">{{ invoice.order.client.get_full_name }}</div>
                            <div class="text-muted">
                                <i class="fas fa-envelope me-2"></i>
                                {{ invoice.order.client.email }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informations de Paiement (optionnel) -->
                <div class="col-md-6">
                    <div class="payment-info">
                        <h5 class="text-uppercase text-muted mb-3">
                            <i class="fas fa-credit-card me-2"></i>
                            INFORMATIONS DE PAIEMENT
                        </h5>
                        <div class="payment-details p-3 bg-light rounded">
                            <div class="mb-2">
                                <strong>Méthode :</strong> 
                                <span>{{ invoice.payment_method|default:"À définir" }}</span>
                            </div>
                            <div class="mb-2">
                                <strong>Conditions :</strong> 
                                <span>Paiement à réception</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tableau des Lignes de Facturation -->
            <div class="table-responsive mb-4">
                <table class="table table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col">Description</th>
                            <th scope="col" class="text-center">Quantité</th>
                            <th scope="col" class="text-end">Prix Unitaire</th>
                            <th scope="col" class="text-end">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="fw-bold">Projet : {{ invoice.order.project_details.project_name }}</div>
                                <small class="text-muted">{{ invoice.order.project_details.description|truncatewords:15 }}</small>
                            </td>
                            <td class="text-center">1</td>
                            <td class="text-end">{{ invoice.amount|floatformat:2 }}€</td>
                            <td class="text-end fw-bold">{{ invoice.amount|floatformat:2 }}€</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Section des Totaux -->
            <div class="row justify-content-end">
                <div class="col-md-4">
                    <div class="totals-section">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Sous-total :</span>
                            <span>{{ invoice.amount|floatformat:2 }}€</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>TVA (0%) :</span>
                            <span>0,00€</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold fs-5 text-primary">
                            <span>TOTAL À PAYER :</span>
                            <span>{{ invoice.amount|floatformat:2 }}€</span>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            <!-- Pied de Page de la Facture -->
            <div class="row">
                <div class="col-12">
                    <div class="invoice-footer">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="text-primary mb-3">Notes et Conditions :</h6>
                                <div class="text-muted">
                                    <p class="mb-2">
                                        <i class="fas fa-info-circle me-2"></i>
                                        Merci pour votre confiance en choisissant iMagin.K pour vos projets.
                                    </p>
                                    <p class="mb-2">
                                        <i class="fas fa-clock me-2"></i>
                                        Paiement à réception de cette facture.
                                    </p>
                                    <p class="mb-0">
                                        <i class="fas fa-question-circle me-2"></i>
                                        Pour toute question, n'hésitez pas à nous contacter.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="contact-info text-muted">
                                    <h6 class="text-primary mb-2">Contact :</h6>
                                    <div class="mb-1">
                                        <i class="fas fa-envelope me-2"></i>
                                        {{ site_config.contact_email|default:"contact@imaginK.com" }}
                                    </div>
                                    <div class="mb-1">
                                        <i class="fas fa-phone me-2"></i>
                                        {{ site_config.phone|default:"01 23 45 67 89" }}
                                    </div>
                                    <div>
                                        <i class="fas fa-globe me-2"></i>
                                        {{ site_config.website|default:"www.imaginK.com" }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Signature numérique ou tampon (optionnel) -->
            <div class="row mt-4">
                <div class="col-12 text-center">
                    <div class="digital-signature text-muted">
                        <small>
                            <i class="fas fa-certificate me-2"></i>
                            Document généré automatiquement par le système iMagin.K le {{ invoice.created_at|date:"d/m/Y à H:i" }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions supplémentaires -->
    <div class="text-center mt-4">
        <a href="{% url 'billing:invoice_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>
            Retour à la liste des factures
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="{% static 'js/billing/invoice_detail.js' %}"></script>
{% endblock %}