@extends('layouts.app')
@section('title', 'Détail commande Hôtel')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Header -->
            <div class="text-center mb-4">
                <h1 class="fw-bold" style="color: #020548;">
                    <i class="fas fa-hotel me-2"></i>Détails de la Réservation d'Hôtel
                </h1>
                <p class="text-muted">Informations complètes sur votre réservation hôtelière</p>
            </div>

            <!-- Carte principale -->
            <div class="card border-0 shadow-lg">
                <div class="card-header py-3 text-white" style="background-color: #020548; border-bottom: 4px solid #ff6b6b;">
                    <h4 class="mb-0">
                        <i class="fas fa-receipt me-2"></i>Réservation: {{ $hotelorder->hotel_name ?? 'N/A' }}
                    </h4>
                </div>

                <div class="card-body p-4">
                    <!-- Section Image -->
                    <div class="row mb-4">
                        <div class="col-md-6 mx-auto">
                            <div class="image-container text-center">
                                @if($hotelorder->hotel_image)
                                    <img src="{{ asset('storage/' . $hotelorder->hotel_image) }}"
                                         alt="Image de {{ $hotelorder->hotel_name }}"
                                         class="img-fluid rounded shadow"
                                         style="max-height: 300px; object-fit: cover;">
                                @else
                                    <div class="bg-light d-flex align-items-center justify-content-center rounded"
                                         style="height: 250px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
                                        <i class="fas fa-hotel fa-4x" style="color: #020548; opacity: 0.5;"></i>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Informations divisées en deux colonnes -->
                    <div class="row">
                        <!-- Colonne gauche - Informations de l'hôtel -->
                        <div class="col-md-6">
                            <div class="section-title mb-3" style="color: #020548;">
                                <i class="fas fa-info-circle me-2"></i>Informations de l'Hôtel
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-hotel me-2"></i>Nom de l'hôtel
                                </div>
                                <div class="info-value">{{ $hotelorder->hotel_name ?? 'N/A' }}</div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-city me-2"></i>Ville
                                </div>
                                <div class="info-value">{{ $hotelorder->city ?? 'N/A' }}</div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-star me-2"></i>Classe
                                </div>
                                <div class="info-value">{{ $hotelorder->classe ?? 'N/A' }}</div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548; ">
                                    <i class="fas fa-calendar-alt me-2" style="color: white;"></i>Période de réservation
                                </div>
                                <div class="info-value">{{ $hotelorder->reservation_period ?? 'N/A' }}</div>
                            </div>

                            @if($hotelorder->driver_name)
                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-user-tie me-2"></i>Chauffeur
                                </div>
                                <div class="info-value">{{ $hotelorder->driver_name }}</div>
                            </div>
                            @endif
                        </div>

                        <!-- Colonne droite - Informations financières -->
                        <div class="col-md-6">
                            <div class="section-title mb-3" style="color: #020548;">
                                <i class="fas fa-money-bill-wave me-2"></i>Informations Financières
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-tag me-2"></i>Prix unitaire
                                </div>
                                <div class="info-value">{{ number_format($hotelorder->price ?? 0, 0, ',', ' ') }} FCFA</div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-receipt me-2"></i>Prix total
                                </div>
                                <div class="info-value fw-bold" style="color: #020548;">
                                    {{ number_format($hotelorder->total_price ?? 0, 0, ',', ' ') }} FCFA
                                </div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-credit-card me-2"></i>Montant payé
                                </div>
                                <div class="info-value">{{ number_format($hotelorder->amount_paid ?? 0, 0, ',', ' ') }} FCFA</div>
                            </div>

                            <div class="info-item mb-3">
                                <div class="info-label" style="color: #020548;">
                                    <i class="fas fa-file-invoice me-2"></i>Numéro de facture
                                </div>
                                <div class="info-value">{{ $hotelorder->invoice_number ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Informations client -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="section-title mb-3" style="color: #020548;">
                                <i class="fas fa-user me-2"></i>Informations Client
                            </div>

                            <div class="info-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-left: 4px solid #020548;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <div class="info-label" style="color: #020548;">
                                                <i class="fas fa-user-circle me-2"></i>Nom du client
                                            </div>
                                            <div class="info-value">{{ $hotelorder->username ?? 'N/A' }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <div class="info-label" style="color: #020548;">
                                                <i class="fas fa-phone me-2"></i>Téléphone
                                            </div>
                                            <div class="info-value">{{ $hotelorder->phone ?? 'N/A' }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Statut de la commande -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="section-title mb-3" style="color: #020548;">
                                <i class="fas fa-info-circle me-2"></i>Statut de la Réservation
                            </div>

                            <div class="info-card text-center">
                                @if($hotelorder->is_viewed)
                                <span class="badge bg-success px-3 py-2">
                                    <i class="fas fa-check-circle me-2"></i>Consultée
                                </span>
                                @else
                                <span class="badge bg-warning text-dark px-3 py-2">
                                    <i class="fas fa-clock me-2"></i>Non consultée
                                </span>
                                @endif

                                <p class="mt-2 mb-0 text-muted">
                                    <small>Réservation créée le: {{ $hotelorder->created_at->format('d/m/Y à H:i') }}</small>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Bouton de retour -->
                    <div class="text-center mt-5">
                        <a href="{{ route('dashboard') }}" class="btn btn-primary px-4 py-2" style="background-color: #020548; border-color: #020548;">
                            <i class="fas fa-arrow-left me-2"></i>Retour au tableau de bord
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.info-item {
    padding: 12px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e9ecef;
}

.info-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.info-value {
    font-size: 1rem;
    color: #495057;
}

.section-title {
    font-weight: 600;
    font-size: 1.1rem;
    padding-bottom: 8px;
    border-bottom: 2px solid #020548;
}

.info-card {
    padding: 20px;
    border-radius: 10px;
    background: white;
}

.image-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(2, 5, 72, 0.1);
}

.card {
    border-radius: 12px;
    overflow: hidden;
}

.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #040a8c !important;
    border-color: #040a8c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 5, 72, 0.2);
}

.badge {
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 25px;
}
</style>
@endsection
