@extends('admin.layouts.master')

@section('title', 'Add Offline Booking')
@section('parent_title', 'Bookings')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2>Create New Offline Booking</h2>
            </div>
        </div>
        <div class="card-body">
            <form id="offline_booking_form" action="{{ route('admin.bookings.store') }}" method="POST">
                @csrf
                <div class="row">
                    <!-- Customer Details -->
                    <div class="col-md-6 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Customer Full Name</label>
                        <input type="text" name="full_name" class="form-control form-control-solid" placeholder="Enter Full Name" required />
                    </div>
                    <div class="col-md-6 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Email Address</label>
                        <input type="email" name="email" class="form-control form-control-solid" placeholder="Enter Email" required />
                    </div>
                    <div class="col-md-6 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Phone Number</label>
                        <input type="text" name="phone" class="form-control form-control-solid" placeholder="Enter Phone Number" required />
                    </div>
                    
                    <!-- Booking Details -->
                    <div class="col-md-6 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Select Room</label>
                        <select name="room_id" id="room_select" class="form-select form-select-solid" required>
                            <option value="">Select a Room</option>
                            @foreach($rooms as $room)
                                <option value="{{ $room->id }}" data-price="{{ $room->price_per_night }}">
                                    {{ $room->room_name }} (INR {{ number_format($room->price_per_night, 2) }}/night)
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Check-In Date</label>
                        <input type="date" name="check_in_date" id="check_in" class="form-control form-control-solid" min="{{ date('Y-m-d') }}" required />
                    </div>
                    <div class="col-md-4 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Check-Out Date</label>
                        <input type="date" name="check_out_date" id="check_out" class="form-control form-control-solid" min="{{ date('Y-m-d', strtotime('+1 day')) }}" required />
                    </div>
                    <div class="col-md-4 mb-7">
                        <label class="required fw-bold fs-6 mb-2">Total Guests</label>
                        <input type="number" name="total_guests" class="form-control form-control-solid" value="1" min="1" required />
                    </div>

                    <div class="col-md-12 mb-7">
                        <div class="bg-light-primary p-5 rounded">
                            <h4 class="text-primary mb-3">Billing Summary</h4>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Total Nights:</span>
                                <span id="display_nights" class="fw-bolder">0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Price Per Night:</span>
                                <span id="display_price" class="fw-bolder">INR 0.00</span>
                            </div>
                            <div class="d-flex justify-content-between py-3 border-top border-primary mt-3">
                                <span class="fs-4 fw-bolder">Total Amount:</span>
                                <span class="fs-4 fw-bolder text-primary">INR <span id="display_total">0.00</span></span>
                            </div>
                            <input type="hidden" name="total_amount" id="hidden_total" value="0">
                        </div>
                    </div>
                </div>

                <div class="text-center pt-10">
                    <a href="{{ route('admin.bookings.index') }}" class="btn btn-light me-3">Discard</a>
                    <button type="submit" class="btn btn-primary">
                        <span class="indicator-label">Confirm Offline Booking</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    @section('scripts')
        <script>
            $(document).ready(function() {
                function calculateTotal() {
                    const roomId = $('#room_select').val();
                    const checkIn = $('#check_in').val();
                    const checkOut = $('#check_out').val();
                    const pricePerNight = parseFloat($('#room_select option:selected').data('price')) || 0;

                    if (roomId && checkIn && checkOut) {
                        const date1 = new Date(checkIn);
                        const date2 = new Date(checkOut);
                        const diffTime = Math.abs(date2 - date1);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                        if (diffDays > 0) {
                            const total = diffDays * pricePerNight;
                            $('#display_nights').text(diffDays);
                            $('#display_price').text('INR ' + pricePerNight.toLocaleString('en-IN', {minimumFractionDigits: 2}));
                            $('#display_total').text(total.toLocaleString('en-IN', {minimumFractionDigits: 2}));
                            $('#hidden_total').val(total);
                        } else {
                            resetSummary();
                        }
                    } else {
                        resetSummary();
                    }
                }

                function resetSummary() {
                    $('#display_nights').text(0);
                    $('#display_price').text('INR 0.00');
                    $('#display_total').text('0.00');
                    $('#hidden_total').val(0);
                }

                $('#room_select, #check_in, #check_out').on('change', calculateTotal);
            });
        </script>
    @endsection
@endsection