<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            color: #333;
        }
        .header {
            text-align: center;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .header h1 {
            color: #2c3e50;
            margin: 0;
        }
        .info-section {
            margin-bottom: 20px;
        }
        .info-section h3 {
            color: #34495e;
            border-bottom: 1px solid #bdc3c7;
            padding-bottom: 5px;
        }
        .info-row {
            display: flex;
            margin-bottom: 8px;
        }
        .info-label {
            font-weight: bold;
            width: 150px;
            color: #7f8c8d;
        }
        .info-value {
            flex: 1;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
        }
        .status-waiting { background-color: #f39c12; color: white; }
        .status-review { background-color: #3498db; color: white; }
        .status-success { background-color: #27ae60; color: white; }
        .status-rejected { background-color: #e74c3c; color: white; }
        .status-cancelled { background-color: #95a5a6; color: white; }
        .status-completed { background-color: #8e44ad; color: white; }
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #7f8c8d;
            border-top: 1px solid #ecf0f1;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>MidHouse</h1>
        <h2>Booking Receipt</h2>
        <p>Generated on: {{ now()->format('d/m/Y H:i:s') }}</p>
    </div>

    <div class="info-section">
        <h3>Booking Information</h3>
        <div class="info-row">
            <div class="info-label">Invoice ID:</div>
            <div class="info-value">{{ $booking->invoice_id }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Status:</div>
            <div class="info-value">
                <span class="status status-{{ $booking->status }}">{{ $booking->status }}</span>
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">Check-in Date:</div>
            <div class="info-value">{{ $booking->checkin ? date('d/m/Y', strtotime($booking->checkin)) : 'Not set' }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Start Date:</div>
            <div class="info-value">{{ $booking->start_date ? date('d/m/Y', strtotime($booking->start_date)) : '-' }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">End Date:</div>
            <div class="info-value">{{ $booking->end_date ? date('d/m/Y', strtotime($booking->end_date)) : '-' }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Quantity:</div>
            <div class="info-value">{{ $booking->quantity }} Bulan</div>
        </div>
        <div class="info-row">
            <div class="info-label">Total Harga:</div>
            <div class="info-value">Rp {{ number_format($booking->total_price, 0, ',', '.') }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Created At:</div>
            <div class="info-value">{{ $booking->created_at->format('d/m/Y H:i:s') }}</div>
        </div>
    </div>

    <div class="info-section">
        <h3>Customer Information</h3>
        <div class="info-row">
            <div class="info-label">Name:</div>
            <div class="info-value">{{ $booking->user ? $booking->user->name : 'Unknown' }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Email:</div>
            <div class="info-value">{{ $booking->user ? $booking->user->email : 'Unknown' }}</div>
        </div>
    </div>

    <div class="info-section">
        <h3>Room Information</h3>
        <div class="info-row">
            <div class="info-label">Room Name:</div>
            <div class="info-value">{{ $booking->room ? $booking->room->kode_kamar : 'Unknown' }}</div>
        </div>
        <div class="info-row">
            <div class="info-label">Property:</div>
            <div class="info-value" style="text-transform: capitalize;">
                @if($booking->room && $booking->room->propertyType && $booking->room->propertyType->property)
                    {{ $booking->room->propertyType->property->prop_name }}
                @else
                    Unknown
                @endif
            </div>
        </div>
    </div>

    <div class="footer">
        <p>This document was generated automatically by MidHouse Universe System</p>
        <p>For any questions, please contact our support team</p>
    </div>
</body>
</html>
