@extends('layouts.app')

@section('content')
<style>
    /* Custom CSS for a premium, elegant feel */
    body {
        background-color: #f0f2f5;
        font-family: 'Poppins', sans-serif;
    }
    .hero-header {
        height: 350px;
        background-image: url('{{ $booking->hotel_image ?? 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80' }}');
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(240, 242, 245, 1), rgba(240, 242, 245, 0) 50%);
    }
    .booking-card {
        margin-top: -150px;
        position: relative;
        z-index: 10;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }
    .content-box {
        padding: 2rem;
        border-bottom: 1px solid #e0e0e0;
    }
    .content-box:last-child {
        border-bottom: none;
    }
    .section-title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        color: #1a2a3a;
        margin-bottom: 1.5rem;
    }
    .info-item {
        margin-bottom: 1.5rem;
    }
    .info-label {
        font-size: 0.85rem;
        color: #777;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.25rem;
    }
    .info-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }
    .progress-status {
        position: relative;
        height: 10px;
        background-color: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
    }
    .progress-status-bar {
        height: 100%;
        width: 100%;
        background-color: #28a745;
        transition: width 0.5s ease-in-out;
    }
    .status-text {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .fixed-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
        padding: 1.5rem 0;
        z-index: 1000;
    }
    .btn-custom {
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.75rem 2rem;
    }
    @media print {
    /* Hide header wrapper during printing */
    #kt_app_header,#actions {
        display: none !important;
    }

    /* Optional: adjust margins/paddings for print */
    body {
        margin: 0;
        padding: 0;
    }
}
</style>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins:wght@400;600;700&display=swap">

<div class="hero-header">
    <div class="hero-overlay"></div>
</div>

<div class="container mb-5 pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="booking-card">
                
                <div class="content-box text-center">
                    <h1 class="display-5 section-title mb-3">
                    @if($booking->status == 'cancelled')
                        Booking Cancelled
                    @else
                        Booking Confirmed
                    @endif
                </h1>

                    <p class="text-muted mb-4">Your reservation at {{ $booking->hotel_name }} is @if($booking->status == 'cancelled')
                         Cancelled.
                    @else
                         Confirmed.
                    @endif</p>
                    <div class="progress-status">
                        <div class="progress-status-bar 
                            {{ $booking->status == 'CONFIRMED' ? 'bg-success' : 
                            ($booking->status == 'cancelled' ? 'bg-danger' : 'bg-error') }}"
                            style="width: {{ $booking->status == 'CONFIRMED' ? '100%' : 
                                            ($booking->status == 'PENDING' ? '50%' : '100%') }}">
                        </div>

                    </div>
                    <p class="mt-2 status-text {{ $booking->status == 'CONFIRMED' ? 'text-success' : ($booking->status == 'cancelled' ? 'text-danger' : 'text-error') }}">{{ strtoupper($booking->status) }}</p>
                </div>

                <div class="content-box">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <h5 class="section-title">Trip Details</h5>
                            <div class="info-item">
                                <p class="info-label">  D</p>
                                <p class="info-value">{{ $booking->booking_reference }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Booking Date</p>
                                <p class="info-value">{{ $booking->booking_date }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="section-title">Stay Information</h5>
                            <div class="info-item">
                                <p class="info-label">Check-in</p>
                                <p class="info-value">{{ $booking->checkin }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Check-out</p>
                                <p class="info-value">{{ $booking->checkout }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-box">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <h5 class="section-title">Guest Details</h5>
                            <div class="info-item">
                                <p class="info-label">Guest Name</p>
                                <p class="info-value">{{ $booking->holder_title }} {{ $booking->holder_name }} {{ $booking->holder_surname }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Contact</p>
                                <p class="info-value">{{ $booking->holder_email }}</p>
                                <p class="info-value">{{ $booking->holder_phone }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="section-title">Hotel Details</h5>
                            <div class="info-item">
                                <p class="info-label">Hotel Name</p>
                                <p class="info-value">{{ $booking->hotel_name }}</p>
                            </div>
                            <div class="info-item">
                                <p class="info-label">Address</p>
                                <p class="info-value">{{ $booking->hotel_address }}</p>
                                <p class="info-value">{{ $booking->city_name }}, {{ $booking->country_name }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-box">
                    <h5 class="section-title">Price Summary</h5>
                    <table class="table table-borderless">
                        <tbody>
                            @foreach($booking->price_breakdown['breakdown'] ?? [] as $item)
                            <tr>
                                <td class="text-muted">{{ $item['description'] }}</td>
                                <td class="text-end fw-semibold">{{ $item['amount'] }} {{ $booking->currency }}</td>
                            </tr>
                            @endforeach
                            <tr class="fw-bold fs-5 border-top border-2">
                                <td>Total Amount Paid</td>
                                <td class="text-end">{{ $booking->total_price }} {{ $booking->currency }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="fixed-actions">
    <div class="container">
        <div class="d-flex justify-content-center justify-content-md-end gap-3 flex-wrap" id="actions">
            <a  @if(Auth::user()->agency_id !="") href="{{ route('employeebooking.show') }}" @else href="{{ route('booking.show') }}" @endif class="btn btn-secondary btn-custom">
                <i class="bi bi-list-ul me-2"></i> Booking List
            </a>
            <a href="javascript:window.print()" class="btn btn-outline-dark btn-custom">
                <i class="bi bi-printer me-2"></i> Print
            </a>
            <form method="POST">
                @csrf
                <button type="submit" class="btn btn-primary btn-custom">
                    <i class="bi bi-envelope-fill me-2"></i> Email
                </button>
            </form>
            <form action="{{ route('Marketing.send') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-success btn-custom">
                    <i class="bi bi-whatsapp me-2"></i> WhatsApp
                </button>
            </form>
        </div>
    </div>
</div>


<script>
   $(document).ready(function () {
       $('#kt_app_sidebar_toggle').trigger('click');
   }); 
</script>   
@endsection