@extends('layouts.app')

@section('title', 'Détail de l\'envoi')

@section('content')
<div class="container mt-5">
    <!-- Styles CSS intégrés -->
    <style>
        /* Titre principal */
        h1.display-2 {
            font-size: 3.5rem;
            font-weight: bold;
            color: #0056b3;
            text-transform: uppercase;
            margin-bottom: 2rem;
            letter-spacing: 2px;
            text-align: center;
        }

        /* Table stylisée */
        .table-bordered {
            border: 2px solid #dee2e6;
        }

        .table-bordered th,
        .table-bordered td {
            border: 1px solid #dee2e6;
            padding: 1rem;
            vertical-align: middle;
            font-size: 1rem;
        }

        /* Alternance des couleurs */
        .table-light {
            background-color: #f8f9fa;
        }

        .table-secondary {
            background-color: #e9ecef;
        }

        /* Boutons stylisés */
        .btn-primary {
            background-color: #007bff;
            border-color: #0056b3;
            color: #fff;
            font-size: 1.2rem;
            padding: 0.75rem 2rem;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #003f88;
        }

        .btn-outline-secondary {
            border-color: #6c757d;
            color: #6c757d;
            font-size: 1.2rem;
            padding: 0.75rem 2rem;
            transition: all 0.3s ease;
        }

        .btn-outline-secondary:hover {
            background-color: #6c757d;
            color: #fff;
        }

        /* Espacement entre le tableau et les boutons */
        .buttons-container {
            margin-top: 3rem;
        }
    </style>

    <!-- Titre principal -->
    <h1 class="display-2">Détail de l'envoi #{{ $envoi->id }}</h1>

    <!-- Tableau stylisé -->
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">Informations détaillées</h3>
        </div>
        <div class="card-body p-4">
            <table class="table table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th class="text-center">Intitulé</th>
                        <th class="text-center">Valeur</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-light">
                        <th>Date d'envoi</th>
                        <td>{{ $envoi->date_envoi }}</td>
                    </tr>
                    <tr class="table-secondary">
                        <th>Type d'envoi</th>
                        <td>{{ $envoi->type_envoi }}</td>
                    </tr>
                    <tr class="table-light">
                        <th>Commentaire</th>
                        <td>{{ $envoi->commentaire_envoi }}</td>
                    </tr>
                    @if($envoi->quantite)
                        <tr class="table-secondary">
                            <th>Quantité</th>
                            <td>{{ $envoi->quantite }}</td>
                        </tr>
                    @endif
                    @if($envoi->type_box)
                        <tr class="table-light">
                            <th>Type de BOX</th>
                            <td>{{ $envoi->type_box }}</td>
                        </tr>
                    @endif
                    <tr class="table-secondary">
                        <th>Priorité</th>
                        <td>{{ $envoi->priorite ?? 'Aucune' }}</td>
                    </tr>
                    <tr class="table-light">
                        <th>Nom du compte</th>
                        <td>{{ $envoi->nom_compte }}</td>
                    </tr>
                    @if($envoi->fonction)
                        <tr class="table-secondary">
                            <th>Fonction</th>
                            <td>{{ $envoi->fonction }}</td>
                        </tr>
                    @endif
                    @if($envoi->nom || $envoi->prenom)
                        <tr class="table-light">
                            <th>Nom / Prénom</th>
                            <td>{{ trim($envoi->nom . ' ' . $envoi->prenom) }}</td>
                        </tr>
                    @endif
                    <tr class="table-secondary">
                        <th>Adresse de livraison</th>
                        <td>{{ $envoi->adresse_livraison }}</td>
                    </tr>
                    <tr class="table-light">
                        <th>Téléphone</th>
                        <td>{{ $envoi->telephone }}</td>
                    </tr>
                    <tr class="table-secondary">
                        <th>Email Laravel</th>
                        <td>{{ $envoi->email_laravel }}</td>
                    </tr>
                    @if($envoi->mdp_laravel)
                        <tr class="table-light">
                            <th>Mot de passe (Laravel)</th>
                            <td>{{ $envoi->mdp_laravel }}</td>
                        </tr>
                    @endif
                    @if($envoi->android_id)
                        <tr class="table-secondary">
                            <th>Android ID</th>
                            <td>{{ $envoi->android_id }}</td>
                        </tr>
                    @endif
                    <tr class="table-light">
                        <th>Numéro de colis</th>
                        <td>{{ $envoi->numero_colis }}</td>
                    </tr>
                    <tr class="table-secondary">
                        <th>Statut</th>
                        <td>
                            @if($envoi->statut === 'EN_ATTENTE')
                                <span class="badge bg-warning text-dark">En attente</span>
                            @elseif($envoi->statut === 'ENVOYE')
                                <span class="badge bg-success">Envoyé</span>
                            @else
                                <span class="badge bg-secondary">{{ $envoi->statut }}</span>
                            @endif
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- Boutons stylisés -->
            <div class="buttons-container d-flex justify-content-center">
                <a href="{{ route('envois.index') }}" class="btn btn-lg btn-outline-secondary me-3 px-5 py-3">
                    <i class="bi bi-arrow-left"></i> Retour à la liste
                </a>
                <a href="{{ route('envois.edit', $envoi->id) }}" class="btn btn-lg btn-primary px-5 py-3">
                    <i class="bi bi-pencil"></i> Éditer
                </a>
            </div>
        </div>
    </div>
</div>
@endsection