@extends('layouts.print')

@section('title', 'Guest Folio — ' . $reservation->booking_no)

@section('content')
@php
    $catLabels = [
        'food_beverage' => 'Food & Bev.',
        'laundry'       => 'Laundry',
        'telephone'     => 'Telephone',
        'minibar'       => 'Minibar',
        'damage'        => 'Damage',
        'other'         => 'Misc.',
    ];
    $vatRate           = (float) ($settings['vat_rate'] ?? 12);
    $vatDivisor        = 1 + ($vatRate / 100);
    $totalExtras       = $charges->sum('amount');
    $totalChargesGross = (float) $reservation->amount + $totalExtras;
    $subtotalPreVat    = $totalChargesGross / $vatDivisor;
    $vatAmount         = $totalChargesGross - $subtotalPreVat;
    $totalPaid         = $payments->sum('amount');
    $balance           = max(0, $totalChargesGross - $totalPaid);

    $statusLabel = [
        'pending'     => 'Pending',
        'confirmed'   => 'Confirmed',
        'checked_in'  => 'Checked In',
        'checked_out' => 'Checked Out',
        'cancelled'   => 'Cancelled',
        'no_show'     => 'No Show',
    ];
@endphp

<div class="max-w-2xl mx-auto my-8 bg-white shadow-sm rounded-xl overflow-hidden border border-gray-200 print:shadow-none print:border-0 print:rounded-none print:my-0 print:max-w-none">

    {{-- Screen-only: toolbar --}}
    <div class="no-print px-8 pt-6 flex items-center justify-between">
        <a href="{{ route('reservations.show', $reservation->id) }}"
           class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Reservation
        </a>
        <button onclick="window.print()"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
            </svg>
            Print Folio
        </button>
    </div>

    {{-- ===== LETTERHEAD ===== --}}
    <div class="px-8 pt-8 pb-6">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h1 class="text-xl font-black text-gray-900 leading-tight">
                    {{ $settings['property_name'] ?? config('app.name', 'Hotel') }}
                </h1>
                @if(!empty($settings['property_address']))
                <p class="text-gray-500 text-sm mt-1">{{ $settings['property_address'] }}</p>
                @endif
                @if(!empty($settings['property_city']))
                <p class="text-gray-500 text-sm">{{ $settings['property_city'] }}</p>
                @endif
                @if(!empty($settings['property_phone']))
                <p class="text-gray-400 text-sm mt-1">Tel: {{ $settings['property_phone'] }}</p>
                @endif
                @if(!empty($settings['property_email']))
                <p class="text-gray-400 text-sm">{{ $settings['property_email'] }}</p>
                @endif
            </div>
            <div class="text-right flex-shrink-0">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Guest Folio</p>
                <p class="text-2xl font-black text-gray-900 font-mono mt-1">{{ $reservation->booking_no }}</p>
                <p class="text-gray-400 text-xs mt-2">Printed: {{ now()->format('M j, Y g:i A') }}</p>
                @if(!empty($settings['bir_tin']))
                <p class="text-gray-400 text-xs">TIN: {{ $settings['bir_tin'] }}</p>
                @endif
            </div>
        </div>
    </div>

    <div class="h-px bg-gray-200 mx-8"></div>

    {{-- ===== GUEST & STAY INFO ===== --}}
    <div class="px-8 py-5">
        <div class="grid grid-cols-2 gap-x-8 gap-y-3 text-sm">
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Guest</p>
                <p class="text-gray-800 font-semibold mt-0.5">{{ $reservation->guest_name }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Contact</p>
                <p class="text-gray-700 mt-0.5">{{ $reservation->guest_phone }}</p>
                @if($reservation->guest_email)
                <p class="text-gray-400 text-xs">{{ $reservation->guest_email }}</p>
                @endif
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Room</p>
                <p class="text-gray-800 mt-0.5">{{ $reservation->room_no }} — {{ $reservation->room_type }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Status</p>
                <p class="text-gray-700 mt-0.5">{{ $statusLabel[$reservation->status] ?? $reservation->status }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Check-in</p>
                <p class="text-gray-800 mt-0.5">{{ $reservation->check_in->format('l, F j, Y') }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Check-out</p>
                <p class="text-gray-800 mt-0.5">{{ $reservation->check_out->format('l, F j, Y') }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Duration</p>
                <p class="text-gray-800 mt-0.5">{{ $reservation->nights }} Night{{ $reservation->nights > 1 ? 's' : '' }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] font-semibold uppercase tracking-wider">Guests</p>
                <p class="text-gray-800 mt-0.5">{{ $reservation->pax }} Pax</p>
            </div>
        </div>
    </div>

    <div class="h-px bg-gray-200 mx-8"></div>

    {{-- ===== CHARGES TABLE ===== --}}
    <div class="px-8 py-5">
        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-4">Charges</p>
        <table class="w-full text-sm">
            <thead>
                <tr>
                    <th class="text-left pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200 w-20">Date</th>
                    <th class="text-left pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200 pl-3">Description</th>
                    <th class="text-right pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200">Amount</th>
                </tr>
            </thead>
            <tbody>
                {{-- Room charge --}}
                <tr class="border-b border-gray-100">
                    <td class="py-3 text-gray-500 text-xs align-top">{{ $reservation->check_in->format('M j') }}</td>
                    <td class="py-3 pl-3 align-top">
                        <p class="text-gray-800 font-medium">Room {{ $reservation->room_no }} — Accommodation</p>
                        <p class="text-gray-400 text-xs mt-0.5">
                            {{ $reservation->nights }} night{{ $reservation->nights > 1 ? 's' : '' }}
                            @ &#8369;{{ number_format($reservation->rate, 0) }}/night
                            · {{ $reservation->room_type }}
                        </p>
                    </td>
                    <td class="py-3 text-right text-gray-700 font-semibold align-top">&#8369;{{ number_format($reservation->amount, 2) }}</td>
                </tr>

                {{-- Extra charges --}}
                @foreach($charges as $ch)
                <tr class="{{ $loop->last ? '' : 'border-b border-gray-100' }}">
                    <td class="py-3 text-gray-500 text-xs align-top">{{ $ch->charge_date->format('M j') }}</td>
                    <td class="py-3 pl-3 align-top">
                        <p class="text-gray-800 font-medium">
                            {{ $ch->description }}
                            @if($ch->fromPos())
                            <span class="no-print ml-1.5 inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold bg-blue-50 text-blue-600 border-[0.5px] border-blue-200 rounded">
                                POS #{{ $ch->pos_transaction_id }}
                            </span>
                            @endif
                        </p>
                        <p class="text-gray-400 text-xs mt-0.5">
                            {{ $catLabels[$ch->category] ?? $ch->category }}
                            @if($ch->quantity > 1) · Qty {{ $ch->quantity }} @endif
                        </p>
                    </td>
                    <td class="py-3 text-right text-gray-700 font-semibold align-top">&#8369;{{ number_format($ch->amount, 2) }}</td>
                </tr>
                @endforeach

                @if($charges->isEmpty())
                <tr>
                    <td colspan="3" class="py-3 text-gray-300 text-xs italic pl-3">No extra charges.</td>
                </tr>
                @endif
            </tbody>
            <tfoot>
                <tr class="border-t border-gray-200">
                    <td colspan="2" class="pt-3 pb-1.5 pr-4 text-right text-xs text-gray-400">Subtotal (excl. VAT {{ $vatRate }}%)</td>
                    <td class="pt-3 pb-1.5 text-right text-gray-600 text-sm">&#8369;{{ number_format($subtotalPreVat, 2) }}</td>
                </tr>
                <tr>
                    <td colspan="2" class="pb-1.5 pr-4 text-right text-xs text-gray-400">VAT ({{ $vatRate }}%)</td>
                    <td class="pb-1.5 text-right text-gray-600 text-sm">&#8369;{{ number_format($vatAmount, 2) }}</td>
                </tr>
                <tr class="border-t-2 border-gray-900">
                    <td colspan="2" class="pt-3 pr-4 text-right text-sm font-bold text-gray-900">Total</td>
                    <td class="pt-3 text-right font-black text-gray-900 text-base">&#8369;{{ number_format($totalChargesGross, 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="h-px bg-gray-200 mx-8"></div>

    {{-- ===== PAYMENTS TABLE ===== --}}
    <div class="px-8 py-5">
        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-4">Payments</p>
        @if($payments->isNotEmpty())
        <table class="w-full text-sm">
            <thead>
                <tr>
                    <th class="text-left pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200 w-24">Date</th>
                    <th class="text-left pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200 pl-3">Method</th>
                    <th class="text-left pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200 pl-3">Reference</th>
                    <th class="text-right pb-2.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-200">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($payments as $pmt)
                <tr class="{{ $loop->last ? '' : 'border-b border-gray-100' }}">
                    <td class="py-2.5 text-gray-500 text-xs">{{ $pmt->payment_date->format('M j, Y') }}</td>
                    <td class="py-2.5 pl-3 text-gray-700">{{ $pmt->method }}</td>
                    <td class="py-2.5 pl-3 text-gray-400 font-mono text-xs">{{ $pmt->reference ?? '—' }}</td>
                    <td class="py-2.5 text-right text-gray-700 font-semibold">&#8369;{{ number_format($pmt->amount, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="border-t border-gray-200">
                    <td colspan="3" class="pt-2.5 pr-4 text-right text-sm font-semibold text-gray-700">Total Paid</td>
                    <td class="pt-2.5 text-right font-bold text-teal-700">&#8369;{{ number_format($totalPaid, 2) }}</td>
                </tr>
            </tfoot>
        </table>
        @else
        <p class="text-gray-300 text-sm italic">No payments recorded.</p>
        @endif
    </div>

    <div class="h-px bg-gray-200 mx-8"></div>

    {{-- ===== BALANCE DUE ===== --}}
    <div class="px-8 py-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-lg font-black {{ $balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                    {{ $balance > 0 ? 'Balance Due' : 'Account Settled' }}
                </p>
                @if($balance <= 0)
                <p class="text-gray-400 text-sm mt-0.5">Thank you — payment received in full.</p>
                @else
                <p class="text-gray-400 text-sm mt-0.5">Amount remaining to be collected.</p>
                @endif
            </div>
            <p class="text-4xl font-black {{ $balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                &#8369;{{ number_format($balance, 2) }}
            </p>
        </div>
    </div>

    <div class="h-px bg-gray-200 mx-8"></div>

    {{-- ===== SIGNATURE BLOCK ===== --}}
    <div class="px-8 py-8">
        <div class="grid grid-cols-2 gap-16">
            <div>
                <div class="mt-14 pt-2 border-t border-gray-400">
                    <p class="text-gray-500 text-xs">Guest Signature / Date</p>
                    <p class="text-gray-700 font-medium text-sm mt-0.5">{{ $reservation->guest_name }}</p>
                </div>
            </div>
            <div>
                <div class="mt-14 pt-2 border-t border-gray-400">
                    <p class="text-gray-500 text-xs">Authorized Signatory / Date</p>
                    <p class="text-gray-700 font-medium text-sm mt-0.5">
                        {{ $settings['property_name'] ?? '' }}
                    </p>
                </div>
            </div>
        </div>

        <p class="text-center text-gray-300 text-xs mt-8">
            {{ $settings['bir_name'] ?? ($settings['property_name'] ?? '') }}
            @if(!empty($settings['bir_tin'])) &mdash; TIN {{ $settings['bir_tin'] }} @endif
            @if(!empty($settings['bir_or_prefix'])) &mdash; OR Prefix: {{ $settings['bir_or_prefix'] }} @endif
        </p>
        <p class="text-center text-gray-300 text-xs mt-1">
            NXT-ePMS &mdash; This is not an official receipt unless stamped and signed.
        </p>
    </div>

</div>
@endsection