<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receipt #{{ $receipt->receipt_number }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }
        .header {
            text-align: center;
            border-bottom: 2px solid #333;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .hotel-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .receipt-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .receipt-number {
            font-size: 18px;
            color: #666;
        }
        .info-section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }
        .info-grid {
            display: flex;
            justify-content: space-between;
        }
        .info-column {
            width: 48%;
        }
        .info-row {
            margin-bottom: 8px;
        }
        .label {
            font-weight: bold;
            color: #666;
        }
        .value {
            margin-left: 10px;
        }
        .payment-details {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .payment-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .total-row {
            border-top: 1px solid #ddd;
            padding-top: 10px;
            margin-top: 10px;
            font-weight: bold;
        }
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-paid { background-color: #d4edda; color: #155724; }
        .status-partial { background-color: #fff3cd; color: #856404; }
        .status-pending { background-color: #f8d7da; color: #721c24; }
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            color: #666;
        }
        .additional-info {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 3px;
            margin-top: 15px;
        }
        .guests-list {
            margin-top: 10px;
        }
        .guest-item {
            margin-bottom: 5px;
            padding-left: 10px;
        }
        @media print {
            body { margin: 0; }
            .no-print { display: none; }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="hotel-name">Hotel Management System</div>
        <div class="receipt-title">RECEIPT</div>
        <div class="receipt-number">#{{ $receipt->receipt_number }}</div>
        <div style="margin-top: 10px;">
            <span class="status-badge status-{{ strtolower($receipt->status) }}">{{ $receipt->status }}</span>
        </div>
        <div style="margin-top: 5px; font-size: 12px; color: #666;">
            Issued: {{ $receipt->issued_at->format('M d, Y H:i') }}
        </div>
    </div>

    <div class="info-section">
        <div class="section-title">Customer & Booking Information</div>
        <div class="info-grid">
            <div class="info-column">
                @if($receipt->booking->primaryCustomer)
                    <div class="info-row">
                        <span class="label">Customer Name:</span>
                        <span class="value">{{ $receipt->booking->primaryCustomer->full_name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Document:</span>
                        <span class="value">{{ $receipt->booking->primaryCustomer->document_type }}: {{ $receipt->booking->primaryCustomer->document_number }}</span>
                    </div>
                    <div class="info-row">
                        <span class="label">Nationality:</span>
                        <span class="value">{{ $receipt->booking->primaryCustomer->nationality }}</span>
                    </div>
                    @if($receipt->booking->primaryCustomer->phone)
                    <div class="info-row">
                        <span class="label">Phone:</span>
                        <span class="value">{{ $receipt->booking->primaryCustomer->phone }}</span>
                    </div>
                    @endif
                    @if($receipt->booking->primaryCustomer->email)
                    <div class="info-row">
                        <span class="label">Email:</span>
                        <span class="value">{{ $receipt->booking->primaryCustomer->email }}</span>
                    </div>
                    @endif
                @else
                    <div class="info-row">
                        <span class="value">No customer information available</span>
                    </div>
                @endif
            </div>
            <div class="info-column">
                <div class="info-row">
                    <span class="label">Booking ID:</span>
                    <span class="value">#{{ $receipt->booking->booking_id }}</span>
                </div>
                <div class="info-row">
                    <span class="label">Room:</span>
                    <span class="value">{{ $receipt->booking->room->room_no }} ({{ $receipt->booking->room->roomType->room_type }})</span>
                </div>
                <div class="info-row">
                    <span class="label">Check-in:</span>
                    <span class="value">{{ \Carbon\Carbon::parse($receipt->booking->check_in)->format('M d, Y') }}</span>
                </div>
                <div class="info-row">
                    <span class="label">Check-out:</span>
                    <span class="value">{{ \Carbon\Carbon::parse($receipt->booking->check_out)->format('M d, Y') }}</span>
                </div>
                <div class="info-row">
                    <span class="label">Duration:</span>
                    <span class="value">{{ $receipt->booking->number_of_nights }} night(s)</span>
                </div>
                @if($receipt->booking->number_of_customers > 1)
                <div class="info-row">
                    <span class="label">Additional Guests:</span>
                    <span class="value">{{ $receipt->booking->number_of_customers - 1 }} person(s)</span>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="info-section">
        <div class="section-title">Payment Details</div>
        <div class="payment-details">
            <div class="payment-row">
                <span>Price per night:</span>
                <span>${{ number_format($receipt->booking->price_per_night, 2) }}</span>
            </div>
            <div class="payment-row">
                <span>Number of nights:</span>
                <span>{{ $receipt->booking->number_of_nights }}</span>
            </div>
            <div class="payment-row total-row">
                <span>Total amount:</span>
                <span>${{ number_format($receipt->total_amount, 2) }}</span>
            </div>
            <div class="payment-row">
                <span>Payment type:</span>
                <span>{{ $receipt->payment_method ?? 'Not specified' }}</span>
            </div>
            <div class="payment-row">
                <span>Transaction ID:</span>
                <span>{{ $receipt->transaction_id ?? 'N/A' }}</span>
            </div>
        </div>
    </div>

    @if($receipt->notes)
    <div class="info-section">
        <div class="section-title">Additional Information</div>
        <div class="additional-info">
            {{ $receipt->notes }}
        </div>
    </div>
    @endif

    @if($receipt->booking->number_of_customers > 1)
    <div class="info-section">
        <div class="section-title">Additional Guests</div>
        <div class="guests-list">
            @foreach($receipt->booking->bookingCustomers->skip(1) as $customer)
            <div class="guest-item">
                <strong>{{ $customer->first_name }} {{ $customer->last_name }}</strong> 
                ({{ $customer->document_type }}: {{ $customer->document_number }}) - {{ $customer->nationality }}
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <div class="footer">
        <p><strong>Thank you for choosing our hotel!</strong></p>
        <p style="font-size: 12px;">This is a computer generated receipt</p>
    </div>
</body>
</html>
