<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thermal Receipt - {{ $receipt->receipt_number }}</title>
    <style>
        /* Reset and base styles for thermal printing */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 15px;
            line-height: 1.2;
            margin: 80;
            padding: 5px;
            background: white;
            color: black;
            width: 80mm;
            max-width: 80mm;
            min-height: 100vh;
        }
        
        .receipt {
            width: 100%;
            max-width: 70mm;
            margin: 0 auto;
        }
        
        /* Header section */
        .header {
            text-align: center;
            border-bottom: 1px dashed #000;
            padding-bottom: 8px;
            margin-bottom: 8px;
        }
        
        .hotel-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 3px;
            text-transform: uppercase;
        }
        
        .receipt-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 3px;
            text-transform: uppercase;
        }
        
        .receipt-number {
            font-weight: bold;
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        .date-time {
            font-weight: bold;
            font-size: 11px;
            margin-bottom: 3px;
        }
        
        /* Section styling */
        .section {
            margin-bottom: 10px;
        }
        
        .section-title {
            font-weight: bold;
            border-bottom: 1px solid #000;
            margin-bottom: 6px;
            padding-bottom: 2px;
            text-transform: uppercase;
            font-size: 13px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
            align-items: flex-start;
        }
        
        .label {
            font-weight: bold;
            min-width: 75px;
            text-transform: uppercase;
            font-size: 13px;
        }
        
        .value {
            font-weight: bold;
            text-align: right;
            flex: 1;
            font-size: 13px;
            word-wrap: break-word;
        }
        
        /* Divider lines */
        .divider {
            border-top: 1px dashed #000;
            margin: 8px 0;
        }
        
        .divider-solid {
            border-top: 1px solid #000;
            margin: 8px 0;
        }
        
        /* Total section */
        .total-section {
            border-top: 2px solid #000;
            padding-top: 6px;
            margin-top: 6px;
        }
        
        .total-row {
            font-weight: bold;
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        /* Footer */
        .footer {
            font-weight: bold;
            text-align: center;
            margin-top: 15px;
            border-top: 1px dashed #000;
            padding-top: 8px;
        }
        
        .thank-you {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        
        .wifi-info {
            font-weight: bold;
            font-size: 10px;
            margin-bottom: 3px;
        }
        
        .staff-info {
            font-weight: bold;
            font-size: 10px;
            margin-bottom: 3px;
        }
        
        .computer-generated {
            font-weight: bold;
            font-size: 10px;
            margin-top: 5px;
            opacity: 0.7;
        }
        
        /* Print button (hidden when printing) */
        .print-button {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            z-index: 1000;
        }
        
        .print-button:hover {
            background: #0056b3;
        }
        
        /* Print media queries */
        @media print {
            .print-button {
                display: none;
            }
            body {
                width: 80mm;
                max-width: 80mm;
                padding: 0;
                margin: 0;
            }
            .receipt {
                width: 100%;
                max-width: none;
            }
        }
        
        /* Additional thermal-specific styles */
        .important-info {
            font-weight: bold;
            font-size: 11px;
        }
        
        .small-text {
            font-size: 9px;
        }
        
        .center-text {
            text-align: center;
        }
    </style>
</head>
<body>
    <button class="print-button" onclick="window.print()">🖨️ Print Receipt</button>
    
    <div class="receipt">
        <!-- Header -->
        <div class="header">
            @php
                $hotelName = App\Models\SiteSetting::first();
            @endphp
            <div class="hotel-name">{{ @$hotelName->site_name }}</div>
            <div class="receipt-title">RECEIPT</div>
            <div class="receipt-number">#{{ $receipt->receipt_number }}</div>
            <div class="date-time">{{ $receipt->issued_at->format('d/m/Y H:i') }}</div>
        </div>

        <!-- Customer Information -->
        <div class="section">
            <div class="section-title">CUSTOMER INFO</div>
            @if($receipt->booking->primaryCustomer)
                <div class="info-row">
                    <span class="label">NAME:</span>
                    <span class="value">{{ strtoupper($receipt->booking->primaryCustomer->full_name) }}</span>
                </div>
                <div class="info-row">
                    <span class="label">ID/passport:</span>
                    <span class="value">{{ $receipt->booking->primaryCustomer->document_number }}</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->nationality)
                <div class="info-row">
                    <span class="label">NATIONALITY:</span>
                    <span class="value">{{ strtoupper($receipt->booking->primaryCustomer->nationality) }}</span>
                </div>
                @endif
            @endif
        </div>

        <!-- Room Information -->
        <div class="section">
            <div class="section-title">ROOM INFO</div>
            <div class="info-row">
                <span class="label">ROOM:</span>
                <span class="value">{{ strtoupper($receipt->booking->room->room_no) }}</span>
            </div>
            <div class="info-row">
                <span class="label">TYPE:</span>
                <span class="value">{{ strtoupper($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('d/m/Y') }}</span>
            </div>
            <div class="info-row">
                <span class="label">CHECK-OUT:</span>
                <span class="value">{{ \Carbon\Carbon::parse($receipt->booking->check_out)->format('d/m/Y') }}</span>
            </div>
            <div class="info-row">
                <span class="label">NIGHTS:</span>
                <span class="value">{{ $receipt->booking->number_of_nights }}</span>
            </div>
        </div>

        <!-- Payment Details -->
        <div class="section">
            <div class="section-title">PAYMENT DETAILS</div>
            <div class="info-row">
                <span class="label">PRICE/NIGHT:</span>
                <span class="value">KES {{ number_format($receipt->booking->price_per_night, 2) }}</span>
            </div>
            <div class="divider"></div>
            <div class="info-row total-row">
                <span class="label">TOTAL:</span>
                <span class="value">KES {{ number_format($receipt->total_amount, 2) }}</span>
            </div>
            <div class="info-row">
                <span class="label">Paid:</span>
                <span class="value">KES {{ number_format($receipt->total_amount, 2) }}</span>
            </div>
            <div class="info-row">
                <span class="label">DUE:</span>
                <span class="value">KES {{ number_format($receipt->due_amount, 2) }}</span>
            </div>
            @if($receipt->payment_method)
            <div class="info-row">
                <span class="label">MODE:</span>
                <span class="value">{{ strtoupper($receipt->payment_method) }}</span>
            </div>
            @endif
            @if($receipt->card_type)
            <div class="info-row">
                <span class="label">TRANSACTION ID:</span>
                <span class="value">{{ strtoupper($receipt->transaction_id) }}</span>
            </div>
            @endif
        </div>

        <!-- Additional Guests -->
        @if($receipt->booking->number_of_customers > 1)
        <div class="section">
            <div class="section-title">ADDITIONAL GUESTS</div>
            @foreach($receipt->booking->bookingCustomers->skip(1) as $customer)
            <div class="info-row">
                <span class="label">GUEST:</span>
                <span class="value">{{ strtoupper($customer->first_name) }} {{ strtoupper($customer->last_name) }}</span>
            </div>
            @endforeach
        </div>
        @endif

        <!-- Additional Information -->
        @if($receipt->notes)
        <div class="section">
            <div class="section-title">NOTES</div>
            <div class="center-text" style="margin-bottom: 5px;">{{ $receipt->notes }}</div>
        </div>
        @endif

        <!-- Footer -->
        <div class="footer">
            <div class="wifi-info">wifi password: newurban</div>
            <div class="staff-info">RECEPTIONIST: {{ strtoupper(auth()->user()->name ?? 'STAFF') }}</div>
            <div class="divider"></div>
            <div class="thank-you">THANK YOU!</div>
            <div class="computer-generated">Crafted by NURV Technoligies</div>
        </div>
    </div>

    <script>
        // Auto-print when page loads (optional - uncomment if needed)
        // window.onload = function() {
        //     setTimeout(function() {
        //         window.print();
        //     }, 500);
        // }
    </script>
</body>
</html>
