<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fiche de Commande - {{ $discoveryorder->site_name }}</title>
    <style>
        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 12px;
            color: #333;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #020548;
            padding-bottom: 10px;
        }
        .header h1 {
            color: #020548;
            margin: 0;
            font-size: 24px;
        }
        .section {
            margin-bottom: 15px;
        }
        .section-title {
            background-color: #020548;
            color: white;
            padding: 5px 10px;
            font-weight: bold;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        .info-grid {
            display: table;
            width: 100%;
            margin-bottom: 10px;
        }
        .info-row {
            display: table-row;
        }
        .info-label {
            display: table-cell;
            font-weight: bold;
            padding: 5px;
            width: 30%;
            vertical-align: top;
        }
        .info-value {
            display: table-cell;
            padding: 5px;
            vertical-align: top;
        }
        .image-container {
            text-align: center;
            margin: 15px 0;
        }
        .site-image {
            max-width: 300px;
            max-height: 200px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .price-box {
            border: 1px solid #020548;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
            background-color: #f8f9fa;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            font-size: 10px;
            color: #666;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }
        .badge {
            background-color: #28a745;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Facture de la commande du site</h1>
        <p>Date de génération : {{ now()->format('d/m/Y H:i') }}</p>
    </div>

    <!-- Image principale -->
    @if($imagePath)
    <div class="image-container">
        <img src="{{ $imagePath }}" class="site-image" alt="{{ $discoveryorder->site_name }}">
    </div>
    @endif

    <!-- Informations de la commande -->
    <div class="section">
        <div class="section-title">Informations de la Commande</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Nom du site:</div>
                <div class="info-value">{{ $discoveryorder->site_name }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Classe:</div>
                <div class="info-value">{{ $discoveryorder->classe }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Lieu de rassemblement:</div>
                <div class="info-value">{{ $discoveryorder->lieu_de_rassemblement }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Période de réservation:</div>
                <div class="info-value">{{ $discoveryorder->reservation_period }}</div>
            </div>
        </div>
    </div>

    <!-- Informations financières -->
    <div class="section">
        <div class="section-title">Informations Financières</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Prix:</div>
                <div class="info-value">{{ number_format($discoveryorder->price, 0, ',', ' ') }} FCFA</div>
            </div>
            <div class="info-row">
                <div class="info-label">Prix Total:</div>
                <div class="info-value">{{ number_format($discoveryorder->total_price, 0, ',', ' ') }} FCFA</div>
            </div>
            <div class="info-row">
                <div class="info-label">Montant Payé:</div>
                <div class="info-value">{{ number_format($discoveryorder->amount_paid, 0, ',', ' ') }} FCFA</div>
            </div>
            <div class="info-row">
                <div class="info-label">Numéro de Facture:</div>
                <div class="info-value">{{ $discoveryorder->invoice_number }}</div>
            </div>
        </div>
    </div>

    <!-- Informations client -->
    <div class="section">
        <div class="section-title">Informations Client</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Nom du client:</div>
                <div class="info-value">{{ $discoveryorder->username }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Téléphone:</div>
                <div class="info-value">{{ $discoveryorder->phone }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">ID Utilisateur:</div>
                <div class="info-value">{{ $discoveryorder->user_id }}</div>
            </div>
        </div>
    </div>

    <!-- Informations supplémentaires -->
    <div class="section">
        <div class="section-title">Détails Techniques</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">ID de la commande:</div>
                <div class="info-value">{{ $discoveryorder->id }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Date de création:</div>
                <div class="info-value">{{ $discoveryorder->created_at->format('d/m/Y H:i') }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Statut de visualisation:</div>
                <div class="info-value">
                    <span class="badge">
                        {{ $discoveryorder->is_viewed ? 'VU' : 'NON VU' }}
                    </span>
                </div>
            </div>
            <div class="info-row">
                <div class="info-label">Image disponible:</div>
                <div class="info-value">
                    {{ $discoveryorder->discovery_image ? 'OUI' : 'NON' }}
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>© {{ date('Y') }} VoyageDifiant - Tous droits réservés</p>
        <p>Document généré automatiquement - Ne pas utiliser à des fins commerciales</p>
    </div>
</body>
</html>
