<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking Confirmation - {{ $booking->booking_reference }}</title>
    <style>
        body {
            font-family: 'Inter', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e5e5e5;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #3B82F6;
            margin-bottom: 10px;
        }
        .booking-info {
            background-color: #f0f9ff;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #3B82F6;
        }
        .package-info {
            background-color: #f9fafb;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .price {
            font-size: 24px;
            font-weight: bold;
            color: #10B981;
            margin: 15px 0;
        }
        .status {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            margin: 10px 0;
        }
        .status.pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status.confirmed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .payment-info {
            background-color: #fef2f2;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #ef4444;
        }
        .button {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
            color: #ffffff;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            margin: 20px 0;
            transition: all 0.3s ease;
        }
        .button:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            transform: translateY(-2px);
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e5e5;
            font-size: 14px;
            color: #666;
        }
        .two-column {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        .column {
            flex: 1;
        }
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 20px;
            }
            .button {
                display: block;
                text-align: center;
                margin: 15px 0;
            }
            .two-column {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">🌟 {{ {{ $siteName }} }}</div>
            <h1>Booking Confirmation</h1>
        </div>

        <div class="booking-info">
            <h2>📋 Booking Details</h2>
            <div class="two-column">
                <div class="column">
                    <p><strong>Reference:</strong> {{ $booking->booking_reference }}</p>
                    <p><strong>Status:</strong> <span class="status {{ $booking->status }}">{{ ucfirst($booking->status) }}</span></p>
                    <p><strong>Payment Status:</strong> <span class="status {{ $booking->payment_status }}">{{ ucfirst($booking->payment_status) }}</span></p>
                </div>
                <div class="column">
                    <p><strong>Travel Date:</strong> {{ $booking->travel_date->format('d M Y') }}</p>
                    <p><strong>Number of People:</strong> {{ $booking->number_of_people }}</p>
                    <p><strong>Booked on:</strong> {{ $booking->created_at->format('d M Y, H:i') }}</p>
                </div>
            </div>
        </div>

        <div class="package-info">
            <h2>📦 Package Information</h2>
            <h3>{{ $package->title }}</h3>
            <p><strong>Destination:</strong> {{ $package->destination }}</p>
            <p><strong>Duration:</strong> {{ $package->duration_days }} days</p>
            <p><strong>Category:</strong> {{ ucfirst($package->category) }}</p>
            <p><strong>Difficulty:</strong> {{ ucfirst($package->difficulty_level) }}</p>
            
            <div class="price">
                Total Price: {{ $booking->formatted_total_price }}
            </div>
        </div>

        <div class="payment-info">
            <h2>💳 Payment Information</h2>
            <p><strong>Payment Method:</strong> {{ ucfirst($booking->payment_method) }}</p>
            <p><strong>Payment Reference:</strong> {{ $booking->payment->payment_reference ?? 'Pending' }}</p>
            
            @if($booking->payment_status === 'pending')
                <p><strong>⚠️ Action Required:</strong> Please complete your payment via WhatsApp to confirm your booking.</p>
                <p>Our team will contact you shortly with payment instructions.</p>
            @endif
        </div>

        <div class="content">
            <h2>👤 Traveler Information</h2>
            <div class="two-column">
                <div class="column">
                    <p><strong>Name:</strong> {{ $booking->full_name }}</p>
                    <p><strong>Email:</strong> {{ $booking->email }}</p>
                    <p><strong>Phone:</strong> {{ $booking->phone }}</p>
                </div>
                <div class="column">
                    <p><strong>Country:</strong> {{ $booking->country }}</p>
                    @if($booking->special_requests)
                        <p><strong>Special Requests:</strong> {{ $booking->special_requests }}</p>
                    @endif
                </div>
            </div>

            @if($package->inclusions)
                <h2>✅ What's Included</h2>
                <ul>
                    @foreach($package->inclusions as $inclusion)
                        <li>{{ $inclusion }}</li>
                    @endforeach
                </ul>
            @endif

            @if($package->exclusions)
                <h2>❌ What's Not Included</h2>
                <ul>
                    @foreach($package->exclusions as $exclusion)
                        <li>{{ $exclusion }}</li>
                    @endforeach
                </ul>
            @endif

            @if($package->what_to_bring)
                <h2>🎒 What to Bring</h2>
                <p>{{ $package->what_to_bring }}</p>
            @endif

            @if($package->meeting_point)
                <h2>📍 Meeting Point</h2>
                <p>{{ $package->meeting_point }}</p>
            @endif
        </div>

        <div style="text-align: center;">
            <a href="{{ route('user.bookings') }}" class="button">View Your Bookings</a>
        </div>

        <div class="footer">
            <p>Thank you for choosing {{ {{ $siteName }} }} for your travel adventure!</p>
            <p>If you have any questions, please contact our support team.</p>
            <p>&copy; {{ date('Y') }} {{ {{ $siteName }} }}. All rights reserved.</p>
        </div>
    </div>
</body>
</html>
