{% extends 'base_print.html' %}
{% load static %}

{% block title %}PV n°{{ pv.numero|default:"" }} - Impression{% endblock %}

{% block content %}
<style>
    /* Styles spécifiques à l'impression */
    @media print {
        @page {
            size: A4;
            margin: 2cm 1.5cm;
            @top-center {
                content: "PROCÈS-VERBAL DE CONTRÔLE TECHNIQUE";
                font-size: 9pt;
                color: #666;
            }
            @bottom-center {
                content: "Page " counter(page) " sur " counter(pages);
                font-size: 8pt;
                color: #666;
            }
        }
        
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.4;
            color: #000;
            background: #fff;
        }
        
        .no-print {
            display: none !important;
        }
        
        .print-only {
            display: block !important;
        }
        
        .page-break {
            page-break-after: always;
        }
        
        .page-break-before {
            page-break-before: always;
        }
        
        .keep-together {
            page-break-inside: avoid;
        }
        
        table {
            page-break-inside: auto;
        }
        
        tr {
            page-break-inside: avoid;
            page-break-after: auto;
        }
        
        thead {
            display: table-header-group;
        }
        
        tfoot {
            display: table-footer-group;
        }
        
        h1, h2, h3, h4, h5 {
            page-break-after: avoid;
        }
        
        img {
            max-width: 100% !important;
        }
    }
    
    /* Styles généraux pour le PDF */
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 20px;
        color: #333;
    }
    
    .header {
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid #003366;
        padding-bottom: 15px;
    }
    
    .header h1 {
        color: #003366;
        font-size: 24px;
        margin: 10px 0 5px;
        text-transform: uppercase;
    }
    
    .header h2 {
        color: #666;
        font-size: 18px;
        margin: 5px 0;
        font-weight: normal;
    }
    
    .badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .badge-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .badge-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }
    
    .badge-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .badge-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    
    .info-box {
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #f8f9fa;
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .info-item {
        margin-bottom: 10px;
    }
    
    .info-label {
        font-weight: bold;
        color: #003366;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
    
    .info-value {
        font-size: 14px;
        color: #333;
        border-bottom: 1px dotted #ccc;
        padding-bottom: 3px;
    }
    
    .section-title {
        color: #003366;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 2px solid #003366;
        padding-bottom: 5px;
        margin: 25px 0 15px;
    }
    
    .section-title i {
        margin-right: 8px;
    }
    
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        font-size: 12px;
    }
    
    .table th {
        background-color: #003366;
        color: white;
        font-weight: bold;
        padding: 8px;
        text-align: left;
        font-size: 12px;
    }
    
    .table td {
        padding: 8px;
        border: 1px solid #dee2e6;
        vertical-align: top;
    }
    
    .table-striped tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .etat-conforme {
        color: #28a745;
        font-weight: bold;
    }
    
    .etat-non-conforme {
        color: #dc3545;
        font-weight: bold;
    }
    
    .etat-reserve {
        color: #ffc107;
        font-weight: bold;
    }
    
    .signature-box {
        border: 1px solid #dee2e6;
        padding: 15px;
        margin-top: 30px;
        border-radius: 5px;
        background-color: #fff;
    }
    
    .signature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 20px;
    }
    
    .signature-item {
        text-align: center;
    }
    
    .signature-image {
        max-height: 80px;
        margin: 10px 0;
        border: 1px solid #dee2e6;
        padding: 10px;
        background-color: #fff;
    }
    
    .signature-line {
        border-top: 1px solid #000;
        width: 80%;
        margin: 5px auto;
        padding-top: 5px;
    }
    
    .footer {
        margin-top: 40px;
        text-align: center;
        font-size: 10px;
        color: #666;
        border-top: 1px solid #dee2e6;
        padding-top: 15px;
    }
    
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 15px 0;
    }
    
    .photo-item {
        border: 1px solid #dee2e6;
        padding: 5px;
        border-radius: 3px;
        page-break-inside: avoid;
    }
    
    .photo-item img {
        width: 100%;
        height: 80px;
        object-fit: cover;
        border-radius: 3px;
    }
    
    .photo-caption {
        font-size: 9px;
        text-align: center;
        margin-top: 5px;
        color: #666;
    }
    
    .recommandation-item {
        border-left: 3px solid #003366;
        padding: 10px 15px;
        margin-bottom: 10px;
        background-color: #f8f9fa;
        page-break-inside: avoid;
    }
    
    .recommandation-ordre {
        display: inline-block;
        background-color: #003366;
        color: white;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 11px;
        margin-right: 10px;
    }
    
    .watermark {
        position: fixed;
        bottom: 20px;
        right: 20px;
        opacity: 0.1;
        font-size: 60px;
        color: #003366;
        transform: rotate(-15deg);
        z-index: -1;
    }
    
    .print-controls {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
    }
    
    .print-controls button {
        padding: 10px 20px;
        margin-left: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }
    
    .btn-print {
        background-color: #003366;
        color: white;
    }
    
    .btn-pdf {
        background-color: #dc3545;
        color: white;
    }
    
    .qr-code {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 80px;
        height: 80px;
    }
</style>

<!-- Contrôles d'impression (n'apparaissent pas à l'impression) -->
<div class="print-controls no-print">
    <button class="btn-print" onclick="window.print()">
        <i class="icon-base bx bx-printer"></i> Imprimer
    </button>
    <button class="btn-pdf" onclick="generatePDF()">
        <i class="icon-base bx bxs-file-pdf"></i> Générer PDF
    </button>
</div>

<!-- Filigrane -->
<div class="watermark">CONTRÔLE TECHNIQUE</div>

<!-- En-tête du document -->
<div class="header">
    {% if entreprise.logo %}
    <img src="{{ entreprise.logo.url }}" alt="Logo" style="max-height: 80px; margin-bottom: 10px;">
    {% endif %}
    <h1>PROCÈS-VERBAL DE CONTRÔLE TECHNIQUE</h1>
    <h2>N° {{ pv.numero|default:"En cours de génération" }}</h2>
    {% if pv.version %}
    <div style="color: #666; font-size: 11px;">Version {{ pv.version }}</div>
    {% endif %}
</div>

<!-- Informations générales -->
<div class="info-box keep-together">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3 style="margin: 0; color: #003366;">INFORMATIONS GÉNÉRALES</h3>
        <span class="badge 
            {% if pv.statut == 'finalise' %}badge-success
            {% elif pv.statut == 'brouillon' %}badge-warning
            {% elif pv.statut == 'archive' %}badge-info
            {% else %}badge-secondary{% endif %}">
            {{ pv.get_statut_display|upper }}
        </span>
    </div>
    
    <div class="info-grid">
        <div class="info-item">
            <div class="info-label">Type de PV</div>
            <div class="info-value">{{ pv.get_type_pv_display|default:"Non spécifié" }}</div>
        </div>
        <div class="info-item">
            <div class="info-label">Date de visite</div>
            <div class="info-value">{{ pv.date_visite|date:"d/m/Y"|default:"Non spécifiée" }}</div>
        </div>
        <div class="info-item">
            <div class="info-label">Client</div>
            <div class="info-value">
                {{ pv.client.nom|default:"Non spécifié" }}
                {% if pv.client.siret %}<br><small>SIRET: {{ pv.client.siret }}</small>{% endif %}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">Lieu d'intervention</div>
            <div class="info-value">{{ pv.lieu|default:"Non spécifié" }}</div>
        </div>
        <div class="info-item">
            <div class="info-label">Inspecteur</div>
            <div class="info-value">
                {{ pv.inspecteur.get_full_name|default:pv.inspecteur.username }}
                {% if pv.inspecteur.fonction %}<br><small>{{ pv.inspecteur.fonction }}</small>{% endif %}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">Date d'émission</div>
            <div class="info-value">{{ pv.date_creation|date:"d/m/Y" }} à {{ pv.date_creation|time:"H:i" }}</div>
        </div>
        {% if pv.date_validite %}
        <div class="info-item">
            <div class="info-label">Date de validité</div>
            <div class="info-value">{{ pv.date_validite|date:"d/m/Y" }}</div>
        </div>
        {% endif %}
        {% if pv.reference_dossier %}
        <div class="info-item">
            <div class="info-label">Référence dossier</div>
            <div class="info-value">{{ pv.reference_dossier }}</div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Objet du contrôle -->
{% if pv.objet_controle %}
<div class="keep-together">
    <h3 class="section-title">
        <i class="icon-base bx bx-target-lock"></i> OBJET DU CONTRÔLE
    </h3>
    <div style="margin: 10px 0 20px; line-height: 1.6;">
        {{ pv.objet_controle.nom_projet|linebreaks }}
    </div>
</div>
{% endif %}

<!-- Observations générales -->
{% if pv.observations_generales %}
<div class="keep-together">
    <h3 class="section-title">
        <i class="icon-base bx bx-message"></i> OBSERVATIONS GÉNÉRALES
    </h3>
    <div style="margin: 10px 0 20px; line-height: 1.6; background-color: #f8f9fa; padding: 15px; border-left: 4px solid #003366;">
        {{ pv.observations_generales|linebreaks }}
    </div>
</div>
{% endif %}

<!-- Points de contrôle -->
<h3 class="section-title">
    <i class="icon-base bx bx-list-check"></i> POINTS DE CONTRÔLE
    <span style="float: right; font-size: 14px; background: #003366; color: white; padding: 3px 10px; border-radius: 15px;">
        Total: {{ elements_controle|length }}
    </span>
</h3>

{% if elements_controle %}
<table class="table table-striped">
    <thead>
        <tr>
            <th width="5%">#</th>
            <th width="25%">Élément contrôlé</th>
            <th width="15%">État</th>
            <th width="35%">Commentaires / Observations</th>
            <th width="20%">Recommandations</th>
        </tr>
    </thead>
    <tbody>
        {% for element in elements_controle %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>
                <strong>{{ element.element.nom|default:element.element }}</strong>
                {% if element.element.reference %}
                <br><small>Réf: {{ element.element.reference }}</small>
                {% endif %}
            </td>
            <td>
                {% if element.etat == 'conforme' %}
                <span class="etat-conforme">✓ CONFORME</span>
                {% elif element.etat == 'non_conforme' %}
                <span class="etat-non-conforme">✗ NON CONFORME</span>
                {% elif element.etat == 'reserve' %}
                <span class="etat-reserve">⚠ AVEC RÉSERVE</span>
                {% elif element.etat == 'non_applicable' %}
                <span class="etat-info">○ NON APPLICABLE</span>
                {% else %}
                {{ element.get_etat_display|upper }}
                {% endif %}
            </td>
            <td>{{ element.commentaire|default:"-"|linebreaks }}</td>
            <td>{{ element.recommandation|default:"-"|linebreaks }}</td>
        </tr>
        {% if element.photos.all %}
        <tr>
            <td colspan="5" style="background-color: #f9f9f9;">
                <div style="font-size: 11px; color: #666; margin-bottom: 5px;">
                    <strong>Photos jointes:</strong>
                </div>
                <div class="photo-gallery">
                    {% for photo in element.photos.all %}
                    <div class="photo-item">
                        <img src="{{ photo.image.url }}" alt="{{ photo.legende }}">
                        {% if photo.legende %}
                        <div class="photo-caption">{{ photo.legende|truncatechars:30 }}</div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>
{% else %}
<div style="text-align: center; padding: 30px; border: 1px solid #dee2e6; background-color: #f8f9fa; margin-bottom: 20px;">
    <p style="color: #666;">Aucun point de contrôle enregistré.</p>
</div>
{% endif %}

<!-- Recommandations générales -->
{% if recommandations %}
<h3 class="section-title">
    <i class="icon-base bx bx-message-rounded-dots"></i> RECOMMANDATIONS GÉNÉRALES
</h3>
<div class="keep-together">
    {% for rec in recommandations %}
    <div class="recommandation-item">
        <span class="recommandation-ordre">{{ rec.ordre }}</span>
        {{ rec.texte|linebreaks }}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Participants et signatures -->
<h3 class="section-title">
    <i class="icon-base bx bx-group"></i> PARTICIPANTS ET SIGNATURES
</h3>

<div class="signature-box keep-together">
    {% if participants %}
    <div class="signature-grid">
        {% for participant in participants %}
        <div class="signature-item">
            <div style="font-weight: bold;">{{ participant.participant.nom|default:participant.participant }}</div>
            <div style="font-size: 11px; color: #666;">{{ participant.participant.fonction|default:"Participant" }}</div>
            
            {% if participant.signature %}
            <div class="signature-image">
                <img src="{{ participant.signature.url }}" alt="Signature" style="max-width: 100%; max-height: 60px;">
            </div>
            {% else %}
            <div style="margin: 15px 0; font-style: italic; color: #999;">Non signé</div>
            {% endif %}
            
            <div class="signature-line"></div>
            <div style="font-size: 10px; color: #666;">Signature</div>
            {% if participant.date_signature %}
            <div style="font-size: 9px; color: #999;">le {{ participant.date_signature|date:"d/m/Y" }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    
    <div style="margin-top: 30px; font-size: 11px; color: #666; text-align: center;">
        <p>Fait à {{ pv.lieu|default:"[Lieu]" }}, le {{ pv.date_visite|date:"d/m/Y" }}</p>
    </div>
    {% else %}
    <div style="text-align: center; padding: 20px;">
        <p style="color: #666;">Aucun participant enregistré.</p>
    </div>
    {% endif %}
</div>

<!-- Mentions légales et cachet -->
<div class="footer">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <div style="text-align: left;">
            <strong>{{ entreprise.nom|default:"Contrôle Technique" }}</strong><br>
            {{ entreprise.adresse|default:"" }}<br>
            SIRET: {{ entreprise.siret|default:"" }} | APE: {{ entreprise.ape|default:"" }}
        </div>
        <div style="text-align: right;">
            {% if entreprise.cachet %}
            <img src="{{ entreprise.cachet.url }}" alt="Cachet" style="max-height: 60px;">
            {% endif %}
        </div>
    </div>
    <div style="margin-top: 15px; border-top: 1px solid #dee2e6; padding-top: 10px;">
        <p style="font-size: 9px;">
            Document électronique valable sans signature. Conformément à la réglementation en vigueur,
            ce procès-verbal est délivré pour attester des opérations de contrôle technique effectuées.
            Toute reproduction ou modification non autorisée est interdite.
        </p>
        <p style="font-size: 8px; color: #999;">
            Généré le {% now "d/m/Y" %} à {% now "H:i" %} • Document n° {{ pv.numero|default:"Non attribué" }}
        </p>
    </div>
</div>

<script>
function generatePDF() {
    // Rediriger vers la vue de génération PDF
    window.location.href = "{% url 'controle:exporter_pv_pdf' pv.id %}";
}

// Auto-print si demandé
{% if auto_print %}
window.onload = function() {
    window.print();
};
{% endif %}
</script>

{% endblock %}