@extends('admin.layouts.app')

@section('title', 'Folio Receipt - ' . $booking->booking_id)

@section('content')
<style>
    .receipt-container {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        min-height: 100vh;
        padding: 2rem;
    }
    .receipt-card {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        max-width: 420px;
        margin: 0 auto;
    }
    .receipt-header {
        background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }
    .receipt-header h2 {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    .receipt-body {
        padding: 1.5rem;
    }
    .receipt-info {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    .receipt-info-row {
        display: flex;
        justify-content: space-between;
        padding: 0.35rem 0;
        border-bottom: 1px dashed #dee2e6;
    }
    .receipt-info-row:last-child {
        border-bottom: none;
    }
    .receipt-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
    .receipt-table th {
        background: #1a1a2e;
        color: white;
        padding: 0.75rem;
        text-align: left;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .receipt-table th:nth-child(2) {
        text-align: right;
    }
    .receipt-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #f1f1f1;
    }
    .receipt-table td:nth-child(2) {
        text-align: right;
        font-family: 'Courier New', monospace;
    }
    .receipt-table tbody tr:hover {
        background: #fafafa;
    }
    .receipt-totals {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    .receipt-total-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
    }
    .receipt-total-row.grand-total {
        border-top: 2px solid #1a1a2e;
        margin-top: 0.5rem;
        padding-top: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a1a2e;
    }
    .receipt-footer {
        text-align: center;
        padding: 1.5rem;
        background: #f8f9fa;
        border-top: 1px dashed #dee2e6;
    }
    .receipt-footer p {
        margin: 0.25rem 0;
        color: #6c757d;
        font-size: 0.875rem;
    }
    .receipt-footer .thank-you {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 0.5rem;
    }
    .btn-print {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: white;
        border: none;
        padding: 0.875rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .btn-print:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(26, 26, 46, 0.3);
    }
    .btn-back {
        background: transparent;
        color: #6c757d;
        border: 2px solid #dee2e6;
        padding: 0.875rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .btn-back:hover {
        border-color: #1a1a2e;
        color: #1a1a2e;
    }
    .section-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    @media print {
        .receipt-container { padding: 0; background: white; }
        .receipt-card { box-shadow: none; max-width: 100%; }
        .btn-print, .btn-back, .no-print { display: none !important; }
        .receipt-header { background: #1a1a2e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .receipt-table th { background: #1a1a2e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
</style>

<div class="receipt-container">
    <div class="receipt-card">
        <div class="receipt-header">
            <h2><i class="fas fa-hotel me-2"></i>{{ $hotelName }}</h2>
            <p class="mb-0 opacity-75">Guest Folio</p>
        </div>
        
        <div class="receipt-body">
            <div class="text-center mb-4">
                <h4 class="mb-1">STATEMENT</h4>
                <span class="badge bg-dark">{{ $booking->booking_number }}</span>
            </div>

            <div class="receipt-info">
                <div class="receipt-info-row">
                    <span class="text-muted"><i class="fas fa-user me-2"></i>Guest</span>
                    <span class="fw-semibold">{{ $booking->guest_name }}</span>
                </div>
                <div class="receipt-info-row">
                    <span class="text-muted"><i class="fas fa-bed me-2"></i>Room</span>
                    <span class="fw-semibold">{{ $booking->room?->room_number ?? 'N/A' }} ({{ $booking->roomType?->name }})</span>
                </div>
                <div class="receipt-info-row">
                    <span class="text-muted"><i class="far fa-calendar me-2"></i>Check-in</span>
                    <span class="fw-semibold">{{ $booking->check_in_date?->format('M d, Y') ?? 'N/A' }}</span>
                </div>
                <div class="receipt-info-row">
                    <span class="text-muted"><i class="far fa-calendar me-2"></i>Check-out</span>
                    <span class="fw-semibold">{{ $booking->check_out_date?->format('M d, Y') ?? 'N/A' }}</span>
                </div>
            </div>

            @php
            $roomCharges = $charges->where('charge_type', 'room')->sum('amount');
            $otherCharges = $charges->where('charge_type', '!=', 'room')->sum('amount');
            $totalCharges = $roomCharges + $otherCharges;
            @endphp

            @if($roomCharges > 0)
            <div class="section-title">Room Charges</div>
            <table class="receipt-table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($charges->where('charge_type', 'room') as $charge)
                    <tr>
                        <td>
                            {{ $charge->description }}
                            <div class="text-muted small">{{ $charge->created_at->format('M d, H:i') }}</div>
                        </td>
                        <td>₦{{ number_format($charge->amount, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif

            @if($otherCharges > 0)
            <div class="section-title">Other Charges</div>
            <table class="receipt-table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($charges->where('charge_type', '!=', 'room') as $charge)
                    <tr>
                        <td>
                            {{ $charge->description }}
                            <div class="text-muted small">{{ $charge->created_at->format('M d, H:i') }}</div>
                        </td>
                        <td>₦{{ number_format($charge->amount, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif

            @if($payments->count() > 0)
            <div class="section-title">Payments</div>
            <table class="receipt-table">
                <thead>
                    <tr>
                        <th>Method</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payments as $payment)
                    <tr>
                        <td>
                            {{ ucfirst($payment->payment_method) }}
                            <div class="text-muted small">{{ $payment->created_at->format('M d, H:i') }}</div>
                        </td>
                        <td>₦{{ number_format($payment->amount, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif

            <div class="receipt-totals">
                <div class="receipt-total-row">
                    <span>Total Charges</span>
                    <span>₦{{ number_format($totalCharges, 2) }}</span>
                </div>
                <div class="receipt-total-row">
                    <span>Total Payments</span>
                    <span class="text-success">-₦{{ number_format($payments->sum('amount'), 2) }}</span>
                </div>
                <div class="receipt-total-row grand-total">
                    <span>Balance Due</span>
                    <span>₦{{ number_format($totalCharges - $payments->sum('amount'), 2) }}</span>
                </div>
            </div>

            <div class="text-center no-print">
                <a href="{{ route('reception.folio', $booking->id) }}" class="btn btn-back me-2">
                    <i class="fas fa-arrow-left me-2"></i>Back
                </a>
                <button onclick="window.print()" class="btn btn-print">
                    <i class="fas fa-print me-2"></i>Print
                </button>
            </div>
        </div>

        <div class="receipt-footer">
            <p class="thank-you">Thank you for staying with us!</p>
            <p>{{ $hotelName }}</p>
        </div>
    </div>
</div>
@endsection