@extends('layouts.app')
@section('title', 'New Booking')
@section('page-title', 'New Booking')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span><a href="{{ route('hotel.bookings.index') }}">Bookings</a><span>/</span>New</div>
        <h1>Create New Booking</h1>
        <p>Fill in guest details below. New guest will be created automatically.</p>
    </div>
</div>

<div style="max-width:800px;">
<div class="card">
    <div class="card-header"><span class="card-title">Booking & Guest Details</span></div>
    <div class="card-body">
        <form method="POST" action="{{ route('hotel.bookings.store') }}">
            @csrf

            <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px;margin-bottom:20px;">
                <div style="font-weight:bold;margin-bottom:8px;"><i class="fas fa-user-plus"></i> Guest Information</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">First Name <span class="required">*</span></label>
                        <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" value="{{ old('first_name') }}" required>
                        @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Last Name <span class="required">*</span></label>
                        <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" value="{{ old('last_name') }}" required>
                        @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Phone Number</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="For WhatsApp receipt">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <input type="text" name="address" class="form-control" value="{{ old('address') }}">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">ID Type</label>
                        <select name="id_type" class="form-control">
                            <option value="">-- Select --</option>
                            <option value="NIN">NIN</option>
                            <option value="passport">Passport</option>
                            <option value="drivers_license">Driver's License</option>
                            <option value="voters_card">Voter's Card</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">ID Number</label>
                        <input type="text" name="id_number" class="form-control" value="{{ old('id_number') }}">
                    </div>
                </div>
            </div>

            <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:20px;">
                <div style="font-weight:bold;margin-bottom:8px;"><i class="fas fa-bed"></i> Room & Stay Details</div>
                <div class="form-group">
                    <label class="form-label">Room <span class="required">*</span></label>
                    <select name="room_id" class="form-control @error('room_id') is-invalid @enderror" required id="roomSelect" onchange="updatePrice()">
                        <option value="">-- Select available room --</option>
                        @foreach($rooms as $room)
                            <option value="{{ $room->id }}" data-price="{{ $room->roomType->base_price }}" {{ old('room_id') == $room->id ? 'selected' : '' }}>
                                Room {{ $room->room_number }} - {{ $room->roomType->name }}
                                @if($room->floor) (Floor {{ $room->floor }}) @endif
                                - ₦{{ number_format($room->roomType->base_price, 0) }}/night
                            </option>
                        @endforeach
                    </select>
                    @error('room_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Check-in Date <span class="required">*</span></label>
                        <input type="date" name="check_in_date" class="form-control @error('check_in_date') is-invalid @enderror"
                            value="{{ old('check_in_date', date('Y-m-d')) }}" min="{{ date('Y-m-d') }}" required onchange="calcNights()">
                        @error('check_in_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Check-out Date <span class="required">*</span></label>
                        <input type="date" name="check_out_date" class="form-control @error('check_out_date') is-invalid @enderror"
                            value="{{ old('check_out_date', date('Y-m-d', strtotime('+1 day'))) }}" required onchange="calcNights()">
                        @error('check_out_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div id="pricePreview" style="background:#e8f0fe;border-radius:8px;padding:12px;margin-bottom:16px;display:none;">
                    <i class="fas fa-info-circle" style="color:#1a56db;"></i>
                    <span id="nightsText"></span> &nbsp;|&nbsp; <strong>Room Total: <span id="totalPrice">--</span></strong>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Adults <span class="required">*</span></label>
                        <input type="number" name="adults" class="form-control" value="{{ old('adults', 1) }}" min="1" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Children</label>
                        <input type="number" name="children" class="form-control" value="{{ old('children', 0) }}" min="0">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Booking Source <span class="required">*</span></label>
                    <select name="source" class="form-control" required>
                        <option value="walk_in" {{ old('source')==='walk_in'?'selected':'' }}>Walk-in</option>
                        <option value="phone" {{ old('source')==='phone'?'selected':'' }}>Phone</option>
                        <option value="online" {{ old('source')==='online'?'selected':'' }}>Online</option>
                        <option value="OTA" {{ old('source')==='OTA'?'selected':'' }}>OTA (Booking.com, etc.)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">Special Requests</label>
                    <textarea name="special_requests" class="form-control" rows="2" placeholder="Any special requests from the guest...">{{ old('special_requests') }}</textarea>
                </div>
            </div>

            <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:8px;">
                <a href="{{ route('hotel.bookings.index') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-calendar-plus"></i> Create Booking</button>
            </div>
        </form>
    </div>
</div>
</div>

@push('scripts')
<script>
function calcNights() {
    const inDate  = document.querySelector('[name=check_in_date]').value;
    const outDate = document.querySelector('[name=check_out_date]').value;
    if (inDate && outDate) {
        const diff = (new Date(outDate) - new Date(inDate)) / 86400000;
        if (diff > 0) {
            document.getElementById('nightsText').innerHTML = '<i class="fas fa-moon"></i> ' + diff + ' night' + (diff > 1 ? 's' : '');
            updatePrice(diff);
            document.getElementById('pricePreview').style.display = 'block';
        }
    }
}
function updatePrice(nights) {
    const sel = document.getElementById('roomSelect');
    const price = parseFloat(sel.options[sel.selectedIndex]?.dataset.price || 0);
    nights = nights || parseInt(document.getElementById('nightsText').innerText) || 0;
    if (price && nights) {
        document.getElementById('totalPrice').innerHTML = '₦' + (price * nights).toLocaleString();
    }
}
calcNights();
</script>
@endpush
@endsection