<style>
    :root {
        --unhcr-blue: #0072bc;
        --dark-text: #2c3e50;
        --light-gray: #f8f9fa;
        --border-color: #dee2e6;
    }

    body { background-color: #f1f3f5; color: var(--dark-text); font-family: 'Segoe UI', Roboto, sans-serif; }

    /* Header plus sobre */
    .dossier-header {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    /* Onglets Classiques & Propres */
    .nav-tabs { border-bottom: 2px solid var(--border-color); gap: 5px; }
    .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 600;
        padding: 12px 20px;
        border-radius: 8px 8px 0 0;
        transition: all 0.2s;
    }
    .nav-tabs .nav-link:hover { background-color: var(--light-gray); }
    .nav-tabs .nav-link.active {
        color: var(--unhcr-blue);
        background: transparent;
        border-bottom: 3px solid var(--unhcr-blue);
    }

    /* Cartes de contenu */
    .content-card {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 0 0 8px 8px;
        padding: 2rem;
        border-top: none;
    }

    /* Grille d'information type "Tableau" */
    .info-row {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #f1f1f1;
    }
    .info-label {
        width: 35%;
        font-weight: 600;
        color: #7f8c8d;
        font-size: 0.9rem;
    }
    .info-value {
        width: 65%;
        color: var(--dark-text);
        font-weight: 500;
    }

    /* Timeline simplifiée */
    .simple-timeline {
        padding: 1rem 0;
        border-left: 2px solid var(--border-color);
        margin-left: 1rem;
    }
    .timeline-item {
        position: relative;
        padding-left: 2rem;
        padding-bottom: 1.5rem;
    }
    .timeline-item::before {
        content: "";
        position: absolute;
        left: -9px;
        top: 4px;
        width: 16px;
        height: 16px;
        background: var(--unhcr-blue);
        border-radius: 50%;
    }

    /* Badges de statut carrés */
    .statut-badge {
        padding: 6px 16px;
        border-radius: 4px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
</style>
    <?php
if (!isset($_SESSION['user'])) {
    header("Location: index.php?p=login");
    exit;
}

$title = "Consultation du dossier";
require __DIR__ . '/../partials/header.php';



                            $photo = (!empty($dossier['photo_path']) && file_exists($dossier['photo_path']))
                                ? $dossier['photo_path']
                                : "assets/img/default-user.png";
                            

$role = $_SESSION['user']['role'];
    function safeValue($val) {
        return (!empty($val)) ? htmlspecialchars($val) : "<span class='text-muted'>—</span>";
    }

    $infos = [
        ['label' => 'Numéro de famille', 'value' => $dossier['numero_famille'] ?? null, 'icon' => '👨‍👩‍👧', 'col' => 'col-md-12'],
        ['label' => 'Nom', 'value' => $dossier['nom'] ?? null, 'icon' => '🪪', 'col' => 'col-md-4'],
        ['label' => 'Prénom', 'value' => $dossier['prenom'] ?? null, 'icon' => '🪪', 'col' => 'col-md-4'],
        ['label' => 'Sexe', 'value' => $dossier['sexe'] ?? null, 'icon' => '⚧️', 'col' => 'col-md-4'],
        ['label' => 'Date naissance', 'value' => $dossier['date_naissance'] ?? null, 'icon' => '🎂', 'col' => 'col-md-4'],
        ['label' => 'Lieu de naissance', 'value' => $dossier['lieu_naissance'] ?? null, 'icon' => '📍', 'col' => 'col-md-4'],
        ['label' => 'Nationalité', 'value' => $dossier['nationalite'] ?? null, 'icon' => '🌍', 'col' => 'col-md-4'],
        ['label' => 'Profession', 'value' => $dossier['profession'] ?? null, 'icon' => '💼', 'col' => 'col-md-4'],
        ['label' => 'Niveau d\'étude', 'value' => $dossier['niveau_etudes'] ?? null, 'icon' => '🎓', 'col' => 'col-md-4'],
        ['label' => 'Religion', 'value' => $dossier['religion'] ?? null, 'icon' => '🕌', 'col' => 'col-md-4'],
        ['label' => 'Ethnie', 'value' => $dossier['ethnie'] ?? null, 'icon' => '🧬', 'col' => 'col-md-4'],
        ['label' => 'Langues parlées', 'value' => $dossier['langues_parlees'] ?? null, 'icon' => '🗣️', 'col' => 'col-md-4'],
        ['label' => 'Téléphone', 'value' => $dossier['tel'] ?? null, 'icon' => '📞', 'col' => 'col-md-4'],
        ['label' => 'Email', 'value' => $dossier['email'] ?? null, 'icon' => '📧', 'col' => 'col-md-4'],
        ['label' => 'Date d\'arrivée en Guinée', 'value' => $dossier['date_arrivee'] ?? null, 'icon' => '🛬', 'col' => 'col-md-4'],
        ['label' => 'Lieu d\'hébergement', 'value' => $dossier['lieu_hebergement'] ?? null, 'icon' => '🏠', 'col' => 'col-md-6'],
        ['label' => 'Adresse dans le pays d’origine', 'value' => $dossier['adresse_origine'] ?? null, 'icon' => '📌', 'col' => 'col-md-6'],

        // Champs longs en grand bloc
        ['label' => 'Motif de fuite', 'value' => $dossier['motif_fuite'] ?? null, 'icon' => '⚠️', 'col' => 'col-md-12'],
        ['label' => 'Situation familiale', 'value' => $dossier['situation_familiale'] ?? null, 'icon' => '👪', 'col' => 'col-md-12'],
    ];
?>
<div class="container-fluid py-4 px-lg-5">

    <div class="dossier-header shadow-sm">
        <div class="row align-items-center">
            <div class="col-md-2 text-center">
                <img src="<?= htmlspecialchars($photo) ?>" class="rounded shadow-sm border" style="width:130px; height:150px; object-fit:cover;">
            </div>
            <div class="col-md-7">
                <span class="text-muted small">Référence : <?= htmlspecialchars($dossier['reference']) ?></span>
                <h2 class="fw-bold mb-1"><?= htmlspecialchars($dossier['prenom'].' '.$dossier['nom']) ?></h2>
                <p class="mb-2"><i class="bi bi-geo-alt"></i> <?= htmlspecialchars($dossier['nationalite']) ?> • <?= htmlspecialchars($dossier['sexe']) ?></p>
                <div class="d-flex gap-2">
                    <span class="statut-badge bg-<?= $color ?> text-white"><?= htmlspecialchars($dossier['status']) ?></span>
                    <span class="badge border text-muted">Créé le : <?= date('d/m/Y', strtotime($dossier['date_creation'])) ?></span>
                </div>
            </div>
            <div class="col-md-3 text-end">
                <div class="dropdown">
                    <button class="btn btn-dark dropdown-toggle w-100" data-bs-toggle="dropdown">Actions Dossier</button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Modifier</a></li>
                        <li><a class="dropdown-item" href="#">Imprimer Fiche</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="#">Refuser</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs" id="mainTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#infos">1. Identité</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#documents">2. Documents</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#famille">3. Dépendants</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#interview">4. Interview</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#decision">5. Décision</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#historique">6. Historique</button>
        </li>
    </ul>

    <div class="tab-content content-card shadow-sm mb-5">
        
        <div class="tab-pane fade show active" id="infos">
            <h5 class="fw-bold mb-4">Informations Civilies</h5>
            <div class="row">
                <div class="col-md-6 border-end px-4">
                    <div class="info-row"><div class="info-label">Numéro de Famille</div><div class="info-value"><?= safeValue($dossier['numero_famille']) ?></div></div>
                    <div class="info-row"><div class="info-label">Nom Complet</div><div class="info-value"><?= $dossier['nom'].' '.$dossier['prenom'] ?></div></div>
                    <div class="info-row"><div class="info-label">Né le</div><div class="info-value"><?= safeValue($dossier['date_naissance']) ?> à <?= safeValue($dossier['lieu_naissance']) ?></div></div>
                    <div class="info-row"><div class="info-label">Profession</div><div class="info-value"><?= safeValue($dossier['profession']) ?></div></div>
                </div>
                <div class="col-md-6 px-4">
                    <div class="info-row"><div class="info-label">Arrivée en Guinée</div><div class="info-value"><?= safeValue($dossier['date_arrivee']) ?></div></div>
                    <div class="info-row"><div class="info-label">Contact</div><div class="info-value"><?= safeValue($dossier['tel']) ?> / <?= safeValue($dossier['email']) ?></div></div>
                    <div class="info-row"><div class="info-label">Hébergement</div><div class="info-value"><?= safeValue($dossier['lieu_hebergement']) ?></div></div>
                </div>
                <div class="col-12 mt-4">
                    <label class="info-label mb-2">Motif de la demande</label>
                    <div class="p-3 bg-light rounded border"><?= nl2br(safeValue($dossier['motif_fuite'])) ?></div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="documents">
            <div class="d-flex justify-content-between mb-3">
                <h5 class="fw-bold">Pièces justificatives</h5>
                <button class="btn btn-outline-primary btn-sm">+ Ajouter un document</button>
            </div>
            <table class="table border">
                <thead class="table-light">
                    <tr><th>Type de document</th><th>Nom du fichier</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    <?php foreach ($documents as $doc): ?>
                    <tr>
                        <td><span class="badge bg-light text-dark border">OFFICIEL</span></td>
                        <td><?= htmlspecialchars($doc['name']) ?></td>
                        <td><a href="<?= $doc['path'] ?>" target="_blank" class="text-primary fw-bold">Ouvrir PDF</a></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="tab-pane fade" id="famille">
            <h5 class="fw-bold mb-4">Membres de la famille accompagnants</h5>
            <div class="row g-3">
                <?php foreach ($familyMembers as $membre): ?>
                <div class="col-md-4">
                    <div class="p-3 border rounded shadow-sm bg-light">
                        <div class="fw-bold text-primary"><?= $membre['dependant_prenom'].' '.$membre['dependant_nom'] ?></div>
                        <div class="small text-muted"><?= $membre['lien'] ?></div>
                        <div class="small mt-1">Né(e) le : <?= $membre['dependant_date_naissance'] ?></div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="tab-pane fade" id="interview">
            <div class="row">
                <div class="col-md-4 border-end">
                    <h6 class="fw-bold">Planification</h6>
                    <div class="info-row"><div class="info-label">Date</div><div class="info-value"><?= $interview['date_interview'] ?></div></div>
                    <div class="info-row"><div class="info-label">Lieu</div><div class="info-value"><?= $interview['lieu'] ?></div></div>
                    <div class="info-row"><div class="info-label">Juriste</div><div class="info-value"><?= $interview['juriste_name'] ?></div></div>
                </div>
                <div class="col-md-8 px-4">
                    <h6 class="fw-bold">Compte rendu d'entretien</h6>
                    <div class="p-4 bg-light border-start border-4 border-primary"><?= nl2br($interview['resume']??'') ?></div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="decision">
            <div class="text-center py-4">
                <?php if ($decisionFinale): ?>
                    <div class="mb-3">La décision finale a été rendue le <strong><?= $decisionFinale['decided_at'] ?></strong></div>
                    <h3 class="fw-bold text-<?= $decisionFinale['decision'] === 'ACCEPTE' ? 'success' : 'danger' ?>">
                        <?= $decisionFinale['decision'] ?>
                    </h3>
                    <div class="col-md-8 mx-auto mt-4 p-3 border rounded">
                        <strong>Motivation :</strong><br><?= nl2br($decisionFinale['motivation']?? '') ?>
                    </div>
                <?php else: ?>
                    <div class="alert alert-light border">En attente de délibération par la commission.</div>
                <?php endif; ?>
            </div>
        </div>

        <div class="tab-pane fade" id="historique">
            <div class="simple-timeline">
                <?php foreach ($history as $h): ?>
                <div class="timeline-item">
                    <div class="fw-bold small text-muted"><?= $h['created_at'] ?></div>
                    <div class="fw-bold"><?= $h['action'] ?></div>
                    <div class="small">Par : <?= $h['fullname'] ?></div>
                    <?php if($h['commentaire']): ?>
                        <div class="text-muted mt-1 italic small">"<?= $h['commentaire'] ?>"</div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

    </div>
</div>


<?php require __DIR__ . '/../partials/footer.php'; ?>
