@extends('backend.layouts.app')

@section('title')
    Receipt #{{ $receipt->receipt_number }} - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-home mr-2"></i>
                <a href="{{ route('receipts.index') }}" class="hover:text-blue-600">All Receipts</a>
                <span class="mx-2">/</span>
                <span>Receipt #{{ $receipt->receipt_number }}</span>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('receipts.download', $receipt) }}" 
                   class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-download mr-2"></i>Download PDF
                </a>
                <a href="{{ route('receipts.print', $receipt) }}" 
                   target="_blank"
                   class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-print mr-2"></i>Print
                </a>
                <a href="{{ route('receipts.thermal', $receipt) }}" 
                   target="_blank"
                   class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-receipt mr-2"></i>Thermal Print
                </a>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        <!-- Receipt Card -->
        <div class="bg-white rounded-lg shadow-md max-w-4xl mx-auto">
            <!-- Receipt Header -->
            <div class="border-b border-gray-200 px-8 py-6">
                <div class="flex justify-between items-start">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">RECEIPT</h1>
                        <p class="text-gray-600 mt-1">Hotel Management System</p>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-900">#{{ $receipt->receipt_number }}</div>
                        <div class="text-sm text-gray-600 mt-1">
                            Issued: {{ $receipt->issued_at->format('M d, Y H:i') }}
                        </div>
                        <div class="mt-2">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $receipt->getStatusBadgeColor() }}">
                                {{ $receipt->status }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Receipt Body -->
            <div class="px-8 py-6">
                <!-- Customer Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Customer Information</h3>
                        @if($receipt->booking->primaryCustomer)
                            <div class="space-y-2">
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Name:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->primaryCustomer->full_name }}</span>
                                </div>
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Document:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->primaryCustomer->document_type }}: {{ $receipt->booking->primaryCustomer->document_number }}</span>
                                </div>
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Nationality:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->primaryCustomer->nationality }}</span>
                                </div>
                                @if($receipt->booking->primaryCustomer->phone)
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Phone:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->primaryCustomer->phone }}</span>
                                </div>
                                @endif
                                @if($receipt->booking->primaryCustomer->email)
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Email:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->primaryCustomer->email }}</span>
                                </div>
                                @endif
                                @if($receipt->booking->number_of_customers > 1)
                                <div>
                                    <span class="text-sm font-medium text-gray-600">Additional Guests:</span>
                                    <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->number_of_customers - 1 }} person(s)</span>
                                </div>
                                @endif
                            </div>
                        @else
                            <p class="text-gray-500">No customer information available</p>
                        @endif
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Booking Information</h3>
                        <div class="space-y-2">
                            <div>
                                <span class="text-sm font-medium text-gray-600">Booking ID:</span>
                                <span class="text-sm text-gray-900 ml-2">#{{ $receipt->booking->booking_id }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600">Room:</span>
                                <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->room->room_no }} ({{ $receipt->booking->room->roomType->room_type }})</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600">Check-in:</span>
                                <span class="text-sm text-gray-900 ml-2">{{ \Carbon\Carbon::parse($receipt->booking->check_in)->format('M d, Y') }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600">Check-out:</span>
                                <span class="text-sm text-gray-900 ml-2">{{ \Carbon\Carbon::parse($receipt->booking->check_out)->format('M d, Y') }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600">Duration:</span>
                                <span class="text-sm text-gray-900 ml-2">{{ $receipt->booking->number_of_nights }} night(s)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Details -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Payment Details</h3>
                    
                    <div class="bg-gray-50 rounded-lg p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Price per night:</span>
                                    <span class="text-sm text-gray-900">${{ number_format($receipt->booking->price_per_night, 2) }}</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Number of nights:</span>
                                    <span class="text-sm text-gray-900">{{ $receipt->booking->number_of_nights }}</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Total amount:</span>
                                    <span class="text-sm font-semibold text-gray-900">${{ number_format($receipt->total_amount, 2) }}</span>
                                </div>
                            </div>
                            
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Total Amount:</span>
                                    <span class="text-sm text-green-600">${{ number_format($receipt->advance_payment, 2) }}</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Payment method:</span>
                                    <span class="text-sm text-gray-900">{{ $receipt->payment_method ?? 'Not specified' }}</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-600">Transaction ID:</span>
                                    <span class="text-sm text-gray-900">{{ $receipt->transaction_id ?? 'N/A' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Information -->
                @if($receipt->notes)
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Additional Information</h3>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-sm text-gray-700">{{ $receipt->notes }}</p>
                    </div>
                </div>
                @endif

                <!-- Additional Customers -->
                @if($receipt->booking->number_of_customers > 1)
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Additional Guests</h3>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="space-y-3">
                            @foreach($receipt->booking->bookingCustomers->skip(1) as $customer)
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-sm font-medium text-gray-900">{{ $customer->first_name }} {{ $customer->last_name }}</span>
                                    <span class="text-sm text-gray-600 ml-2">({{ $customer->document_type }}: {{ $customer->document_number }})</span>
                                </div>
                                <span class="text-sm text-gray-600">{{ $customer->nationality }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Receipt Footer -->
            <div class="border-t border-gray-200 px-8 py-6 bg-gray-50">
                <div class="text-center">
                    <p class="text-sm text-gray-600">Thank you for choosing our hotel!</p>
                    <p class="text-xs text-gray-500 mt-1">This is a computer generated receipt</p>
                </div>
            </div>
        </div>
    </div>
@endsection
