@extends('admin.layouts.app')
@section('title', 'Walk-in Check-in')
@section('page-title', 'Walk-in Check-in')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-navy">Walk-in Guest Check-in</h2>
            <a href="{{ route('reception.index') }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>

        <form action="{{ route('reception.walkin') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="border-b pb-6">
                    <h3 class="font-semibold text-navy mb-4">Guest Information</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Guest Name *</label>
                            <input type="text" name="guest_name" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
                            <input type="text" name="guest_phone" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">ID Type</label>
                            <select name="guest_id_type" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                                <option value="">Select...</option>
                                <option value="National ID">National ID</option>
                                <option value="Passport">Passport</option>
                                <option value="Driver License">Driver License</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">ID Number</label>
                            <input type="text" name="guest_id_number" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                        </div>
                    </div>
                </div>

                <div class="border-b pb-6">
                    <h3 class="font-semibold text-navy mb-4">Room & Stay Details</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Select Room *</label>
                            <select name="room_id" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                                <option value="">Select Available Room...</option>
                                @foreach($availableRooms as $room)
                                    <option value="{{ $room->id }}">{{ $room->room_number }} - {{ $room->roomType?->name }} (₦ {{ number_format($room->roomType?->base_price ?? 0, 0) }}/night)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Check-in *</label>
                                <input type="date" name="check_in_date" value="{{ date('Y-m-d') }}" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Check-out *</label>
                                <input type="date" name="check_out_date" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Adults *</label>
                                <select name="adults" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                                    @for($i = 1; $i <= 4; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Children</label>
                                <select name="children" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                                    @for($i = 0; $i <= 3; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-b pb-6">
                <h3 class="font-semibold text-navy mb-4">Payment Method</h3>
                <div class="grid grid-cols-5 gap-4">
                    @foreach(['cash' => 'Cash', 'transfer' => 'Transfer', 'pos' => 'POS', 'card' => 'Card'] as $value => $label)
                    <label class="flex items-center justify-center p-4 border rounded-lg cursor-pointer hover:bg-gray-50 {{ old('payment_method') == $value ? 'border-gold bg-gold/5' : '' }}">
                        <input type="radio" name="payment_method" value="{{ $value }}" required class="mr-2">
                        {{ $label }}
                    </label>
                    @endforeach
                </div>
            </div>

            <div class="flex justify-end gap-4">
                <a href="{{ route('reception.index') }}" class="px-6 py-2 border rounded-lg hover:bg-gray-50">Cancel</a>
                <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                    <i class="fas fa-user-check mr-2"></i>Check In Guest
                </button>
            </div>
        </form>
    </div>
</div>
@endsection