@extends('admin.layouts.app')
@section('title', 'Guest Folio')
@section('page-title', 'Guest Folio - ' . $booking->booking_number)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Guest Info -->
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-navy">{{ $booking->guest_name }}</h2>
                    <p class="text-gray-500">{{ $booking->booking_number }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('reception.folio.receipt', $booking->id) }}" target="_blank" class="btn btn-primary btn-sm">
                        <i class="fas fa-print mr-1"></i>Print Receipt
                    </a>
                    <div class="text-right">
                        <p class="text-sm text-gray-500">Room</p>
                        <p class="text-xl font-bold">{{ $booking->room?->room_number ?? 'Not Assigned' }}</p>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-4 text-sm">
                <div>
                    <p class="text-gray-500">Check-in</p>
                    <p class="font-semibold">{{ $booking->check_in_date->format('M d, Y') }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Check-out</p>
                    <p class="font-semibold">{{ $booking->check_out_date->format('M d, Y') }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Nights</p>
                    <p class="font-semibold">{{ $booking->nights }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Guests</p>
                    <p class="font-semibold">{{ $booking->adults + $booking->children }}</p>
                </div>
            </div>
        </div>

        <!-- Charges -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">Charges</h3>
                @if($booking->booking_status === 'checked_in')
                <button onclick="$('#add-charge-form').toggle()" class="px-4 py-2 bg-navy text-white rounded-lg text-sm hover:bg-navy-light">
                    <i class="fas fa-plus mr-1"></i>Add Charge
                </button>
                @endif
            </div>

            <div id="add-charge-form" class="hidden mb-6 p-4 bg-gray-50 rounded-lg">
                <form action="{{ route('reception.folio.charge', $booking) }}" method="POST" class="grid grid-cols-4 gap-4">
                    @csrf
                    <div>
                        <label class="text-xs text-gray-500">Description</label>
                        <input type="text" name="description" required class="w-full border rounded px-3 py-2">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Amount</label>
                        <input type="number" name="amount" required step="0.01" class="w-full border rounded px-3 py-2">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Type</label>
                        <select name="charge_type" class="w-full border rounded px-3 py-2">
                            <option value="extra">Extra</option>
                            <option value="food">Food</option>
                            <option value="beverage">Beverage</option>
                            <option value="laundry">Laundry</option>
                            <option value="minimart">Mini Mart</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-gold text-white py-2 rounded hover:bg-gold-dark">Add</button>
                    </div>
                </form>
            </div>

            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-gray-500 border-b">
                        <th class="pb-3">Description</th>
                        <th class="pb-3">Type</th>
                        <th class="pb-3 text-right">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($charges ?? [] as $charge)
                    <tr class="border-b border-gray-50">
                        <td class="py-3">{{ $charge->description }}</td>
                        <td class="py-3"><span class="capitalize">{{ $charge->charge_type }}</span></td>
                        <td class="py-3 text-right">₦ {{ number_format($charge->amount, 0) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="py-3 text-center text-gray-500">No charges yet</td>
                    </tr>
                    @endforelse
                </tbody>
                <tfoot class="font-bold">
                    <tr>
                        <td colspan="2" class="pt-4">Total Charges</td>
                        <td class="pt-4 text-right">₦ {{ number_format($charges->sum('amount') ?? 0, 0) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Payments -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">Payments</h3>
                @if($booking->booking_status === 'checked_in')
                <button onclick="$('#add-payment-form').toggle()" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
                    <i class="fas fa-plus mr-1"></i>Add Payment
                </button>
                @endif
            </div>

            <div id="add-payment-form" class="hidden mb-6 p-4 bg-green-50 rounded-lg">
                <form action="{{ route('reception.folio.payment', $booking) }}" method="POST" class="grid grid-cols-4 gap-4">
                    @csrf
                    <div>
                        <label class="text-xs text-gray-500">Amount</label>
                        <input type="number" name="amount" required step="0.01" class="w-full border rounded px-3 py-2">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Method</label>
                        <select name="payment_method" class="w-full border rounded px-3 py-2">
                            <option value="cash">Cash</option>
                            <option value="transfer">Transfer</option>
                            <option value="pos">POS</option>
                            <option value="card">Card</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Reference</label>
                        <input type="text" name="transaction_ref" class="w-full border rounded px-3 py-2">
                    </div>
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">Record</button>
                    </div>
                </form>
            </div>

            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-gray-500 border-b">
                        <th class="pb-3">Date</th>
                        <th class="pb-3">Method</th>
                        <th class="pb-3">Reference</th>
                        <th class="pb-3 text-right">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments ?? [] as $payment)
                    <tr class="border-b border-gray-50">
                        <td class="py-3">{{ $payment->created_at->format('M d, Y H:i') }}</td>
                        <td class="py-3 capitalize">{{ $payment->payment_method }}</td>
                        <td class="py-3">{{ $payment->transaction_ref ?? '-' }}</td>
                        <td class="py-3 text-right text-green-600">₦ {{ number_format($payment->amount, 0) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="py-4 text-center text-gray-500">No payments recorded</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Summary -->
    <div class="space-y-6">
        @php
            $roomCharges = $charges->where('charge_type', 'room')->sum('amount');
            $otherCharges = $charges->where('charge_type', '!=', 'room')->sum('amount');
            $totalCharges = $roomCharges + $otherCharges;
            $totalPayments = $payments->sum('amount') ?? 0;
            $balance = $totalCharges - $totalPayments;
        @endphp
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-bold text-lg mb-4">Folio Summary</h3>
            
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600">Room Charges</span>
                    <span>₦ {{ number_format($roomCharges, 0) }}</span>
                </div>
                @if($otherCharges > 0)
                <div class="flex justify-between">
                    <span class="text-gray-600">Other Charges</span>
                    <span>₦ {{ number_format($otherCharges, 0) }}</span>
                </div>
                @endif
                <div class="border-t pt-3 flex justify-between font-bold">
                    <span>Total Charges</span>
                    <span class="text-navy">₦ {{ number_format($totalCharges, 0) }}</span>
                </div>
                <div class="flex justify-between text-green-600">
                    <span>Payments</span>
                    <span>- ₦ {{ number_format($totalPayments, 0) }}</span>
                </div>
                <div class="border-t pt-3 flex justify-between text-xl font-bold">
                    <span>Balance</span>
                    <span class="{{ $balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                        ₦ {{ number_format($balance, 0) }}
                    </span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-bold text-lg mb-4">Actions</h3>
            <div class="space-y-3">
                @if($booking->booking_status === 'confirmed')
                <a href="{{ route('reception.checkin', $booking) }}" class="block w-full bg-green-500 text-white py-3 rounded-lg text-center hover:bg-green-600">
                    <i class="fas fa-sign-in-alt mr-2"></i>Check In Guest
                </a>
                @elseif($booking->booking_status === 'checked_in')
                <a href="{{ route('reception.checkout', $booking) }}" class="block w-full bg-red-500 text-white py-3 rounded-lg text-center hover:bg-red-600">
                    <i class="fas fa-sign-out-alt mr-2"></i>Check Out Guest
                </a>
                <form action="{{ route('reception.extend', $booking) }}" method="POST" class="space-y-2">
                    @csrf
                    <label class="block text-sm text-gray-600">Extend Stay</label>
                    <input type="date" name="new_check_out_date" min="{{ $booking->check_out_date->addDay()->format('Y-m-d') }}" required class="w-full border rounded px-3 py-2 mb-2">
                    <button type="submit" class="w-full bg-navy text-white py-2 rounded-lg hover:bg-navy-light">
                        Extend
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection