@extends('layouts.master')
@section('body_id', 'booking_page')
@section('content')
    <style>
        .personal_info_area .hotel_booking {
            background: #313a45 !important;
            padding: 26px 10px !important;
        }
        .personal_info_area .hotel_booking_area input,
        .personal_info_area .hotel_booking_area textarea {
            /*background: transparent !important;*/
            /*border: none !important;*/
            /*color: #aab8ca !important;*/
            /*min-height: unset !important;*/
            /*margin-bottom: 0 !important;*/
            /*box-shadow: none !important;*/
        }
        .personal_info_area .hotel_booking_area textarea {
            border-bottom: 1px solid #475362 !important;
            height: auto !important;
        }
        .personal_info_area .hotel_booking_area ::-webkit-input-placeholder { color: #aab8ca !important; }
        .personal_info_area .hotel_booking_area ::-moz-placeholder { color: #aab8ca !important; opacity: 1; }
        .personal_info_area .form-group.icon_arrow:after { display: none !important; }
        .error-msg { color: #ff5e5e; font-size: 12px; display: none; margin-top: 5px; }
        
        /* QR Code Layout Framework */
        .qr-holder-box { background: #fdfdfd; border: 2px dashed #cbd5e1; padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 25px; }
        .qr-holder-box img { max-width: 220px; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-bottom: 12px; }
        .phonepe-color-banner { background: #5f259f; color: white; padding: 8px; border-radius: 6px; font-weight: bold; font-size: 14px; display: inline-block; margin-bottom: 15px; }
        .invoice-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); padding: 25px; color: #334155; }
        .invoice-header { border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 20px; }
        .invoice-title { font-size: 22px; font-weight: 800; color: #1e293b; text-transform: uppercase; letter-spacing: 1px; }
        .invoice-meta-item { font-size: 13px; color: #64748b; margin-bottom: 4px; }
        .invoice-table-summary { width: 100%; margin-top: 15px; margin-bottom: 20px; }
        .invoice-table-summary th { background: #f8fafc; padding: 10px; font-size: 12px; color: #64748b; text-transform: uppercase; text-align: left; }
        .invoice-table-summary td { padding: 12px 10px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
        .invoice-badge-status { background: #fef3c7; color: #d97706; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; display: inline-block; text-transform: uppercase; }
    </style>

    <section class="breadcrumb_main_area margin-bottom-80">
        <div class="container-fluid">
            <div class="row">
                <div class="breadcrumb_main nice_title">
                    <h2>Booking</h2>
                    <div class="special_offer_main">
                        <div class="container">
                            <div class="special_offer_sub">
                                <img src="{{ asset('assets/img/special-offer-yellow-main.png') }}" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="booking_area">
        <div class="container">
            <div class="booking">
                <div role="tabpanel">
                    <ul class="nav nav-tabs nav-justified" role="tablist" id="bookingTabs">
                        <li role="presentation" id="tab_header_info" class="active">
                            <a href="#booking_info" aria-controls="booking_info" role="tab" data-toggle="tab"><i>1</i><span>booking info</span></a>
                        </li>
                        <li role="presentation" id="tab_header_personal" class="disabled">
                            <a href="#personal_info" aria-controls="personal_info" role="tab" data-toggle="tab"><i>2</i><span>personal info</span></a>
                        </li>
                        <li role="presentation" id="tab_header_payment" class="disabled">
                            <a href="#booking_payment" aria-controls="booking_payment" role="tab" data-toggle="tab"><i>3</i><span>Scan & Pay</span></a>
                        </li>
                        <li role="presentation" id="tab_header_done" class="disabled">
                            <a href="#booking_done" aria-controls="booking_done" role="tab" data-toggle="tab"><i>4</i><span>booking done</span></a>
                        </li>
                    </ul>

                    <form id="booking_main_form" action="{{ route('booking.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="tab-content">
                            
                            <div role="tabpanel" class="tab-pane active" id="booking_info">
                                <div class="booking_info_area">
                                    <div class="facilities_name clearfix margin-bottom-150 margin-top-70">
                                        <div class="row">
                                            <div class="hotel_booking margin-top-45">
                                                <div class="row">
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12">
                                                        <label style="color:#fff;">Check In (Date & Time)</label>
                                                        <input class="form-control s1-validate" id="datepicker" name="check_in_date" type="datetime-local" min="{{ \Carbon\Carbon::now()->format('Y-m-d\TH:i') }}" value="{{ old('check_in_date', request('check_in_date')) }}" required />
                                                    </div>
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12">
                                                        <label style="color:#fff;">Check Out (Date & Time)</label>
                                                        <input class="form-control s1-validate" id="datepicker1" name="check_out_date" type="datetime-local" min="{{ \Carbon\Carbon::now()->format('Y-m-d\TH:i') }}" value="{{ old('check_out_date', request('check_out_date')) }}" required />
                                                    </div>
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12 icon_arrow">
                                                        <label style="color:#fff;">State</label>
                                                        <select class="form-control dynamic-state s1-validate" name="state_id" id="booking_state" required>
                                                            <option value="" disabled selected>State</option>
                                                            @foreach($states as $state)
                                                                <option value="{{ $state->id }}" {{ old('state_id', request('state_id')) == $state->id ? 'selected' : '' }}>{{ $state->state_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12 icon_arrow">
                                                        <label style="color:#fff;">City</label>
                                                        <select class="form-control dynamic-city s1-validate" name="city_id" id="booking_city" required disabled>
                                                            <option value="" disabled selected>City</option>
                                                        </select>
                                                    </div>
                                                </div> 
                                                <div class="row margin-top-15"> 
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12 icon_arrow">
                                                        <label style="color:#fff;">Hotel</label>
                                                        <select class="form-control dynamic-hotel s1-validate" name="hotel_id" id="booking_hotel" required disabled>
                                                            <option value="" disabled selected>Select Hotel</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-3 col-md-4 col-sm-12 icon_arrow">
                                                        <label style="color:#fff;">Room</label>
                                                        <select class="form-control dynamic-room s1-validate" name="room_id" id="room_id" required disabled>
                                                            <option value="" disabled selected>Select Room</option>
                                                        </select>
                                                    </div>
                                                </div> 
                                            </div>
                                        </div> 

                                        <div class="row">
                                            <div class="about_booking_room clearfix margin-top-30">
                                                <div class="col-lg-7 col-md-7 col-sm-6">
                                                    <div class="booking_room_details">
                                                        <h2>Book Your Perfect Stay</h2>
                                                        <h4>Experience Comfort, Convenience, and Hospitality</h4>
                                                        <p>Welcome to Disha Vishram Sthan, where comfort meets exceptional service. We offer clean, spacious, and well-maintained accommodations designed to provide a relaxing and memorable stay for every guest.</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-5 col-md-5 col-sm-6">
                                                    <div class="room_cost">
                                                        <div class="table-responsive">
                                                            <div id="availability_error" class="alert alert-danger" style="display: none; padding: 10px; font-size: 13px; margin-bottom: 10px;"></div>
                                                            <table class="table table-bordered">
                                                                <tbody>
                                                                    <tr class="room_table">
                                                                        <td>
                                                                            <span class="imp_table_text" id="summary_room_qty">1 Room</span> <br>
                                                                            <span id="summary_room_type">No Room Selected</span>
                                                                        </td>
                                                                        <td><span class="imp_table_text" id="summary_room_rate">Rs. 0</span> <br> rate</td>
                                                                        <td><span class="imp_table_text" id="summary_nights">0</span> <br> night</td>
                                                                        <td><span class="imp_table_text" id="summary_subtotal">Rs. 0</span></td>
                                                                    </tr>
                                                                    <tr class="tax_table">
                                                                        <td><span class="imp_table_text">tax</span> <br> 10% on booking value</td>
                                                                        <td colspan="3"><span class="imp_table_text" id="summary_tax">Rs. 0</span></td>
                                                                    </tr>
                                                                    <tr class="total_table">
                                                                        <td><span class="imp_table_text">total</span></td>
                                                                        <td colspan="3">
                                                                            <span class="imp_table_text" id="live_grandtotal">Rs. 0</span>
                                                                            <input type="hidden" name="total_amount" id="hidden_total_amount" value="0">
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="booking_next_btn padding-top-30 clearfix border-top-whitesmoke">
                                                    <button type="button" id="btn_goto_step2" class="btn btn-warning btn-sm floatright">Next</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="personal_info">
                                <div class="personal_info_area">
                                    <div class="hotel_booking_area">
                                        <div class="hotel_booking margin-top-70 margin-bottom-125">
                                            <div class="row">
                                                <div class="form-group col-lg-4 col-md-4 col-sm-4">
                                                    <div class="input-group ">
                                                        <label style="color:#fff;">FullName</label>
                                                        <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Full Name">
                                                    </div>
                                                    <span class="error-msg" id="err_full_name">Full Name likhna compulsory hai.</span>
                                                </div>
                                                <div class="form-group col-lg-4 col-md-4 col-sm-4">
                                                    <div class="input-group border-bottom-dark-2">
                                                        <label style="color:#fff;">Email ID</label>
                                                        <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
                                                    </div>
                                                    <span class="error-msg" id="err_email">Sahi Email ID dalein.</span>
                                                </div>
                                                <div class="form-group col-lg-4 col-md-4 col-sm-4">
                                                    <div class="input-group border-bottom-dark-2">
                                                        <label style="color:#fff;">Phone Number</label>
                                                        <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="Phone Number">
                                                    </div>
                                                    <span class="error-msg" id="err_phone_number">Mobile number dalein.</span>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-lg-4 col-md-4 col-sm-4">
                                                    <div class="input-group border-bottom-dark-2">
                                                        <label style="color:#fff;">Password</label>
                                                        <input type="password" class="form-control" id="password" name="password" placeholder="Create Password">
                                                    </div>
                                                    <span class="error-msg" id="err_password">Password kam se kam 6 character ka hona chahiye.</span>
                                                </div>
                                                <div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12">
                                                    <label style="color:#fff;">Description</label>
                                                    <textarea class="form-control" rows="5" name="special_requests" id="comment" placeholder="Any Specific request / Description"></textarea>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="booking_next_btn padding-top-30 margin-top-50 clearfix border-top-whitesmoke">
                                                        <button type="button" class="btn btn-info btn-sm floatleft prev-step-to-1">Back</button>
                                                        <button type="button" id="btn_goto_step3" class="btn btn-warning btn-sm floatright">Confirm & Proceed to Pay</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="booking_payment">
                                <div class="personal_info_area">
                                    <div class="hotel_booking_area">
                                        <div class="hotel_booking margin-top-70 margin-bottom-125" style="background:#fff !important; color:#333 !important; padding:40px 20px !important; border-radius:12px;">
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="qr-holder-box">
                                                        <div class="phonepe-color-banner">PhonePe Payment QR</div>
                                                        <br>
                                                        <img src="{{ asset('assets/img/phone_pay_qr/phonepe-qr.png') }}" onerror="this.src='https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=phonepe://pay';" alt="PhonePe QR Code">
                                                        <h3 style="color:#2d3748; font-weight:700; margin-top:10px;">Disha Vishram Sthan</h3>
                                                        <p style="font-size:16px; color:#4a5568;">Amount to Scan: <strong style="color:#5f259f; font-size:20px;" id="qr_payable_amount">Rs. 0</strong></p>
                                                        <p style="font-size:12px; color:#718096; line-height:1.4;">QR Code scan karke payment karein aur screenshot niche diye gaye form me upload karein.</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12" style="border-left: 1px solid #e2e8f0; padding-left:30px;">
                                                    <h3 style="font-weight:700; color:#1a202c; margin-bottom:15px;">Upload Payment Details</h3>
                                                    <hr style="margin-bottom:20px;">
                                                    
                                                    <div class="form-group" style="margin-bottom:20px;">
                                                        <label style="font-weight:700; display:block; margin-bottom:8px;">UTR / Transaction ID (Optional)</label>
                                                        <input type="text" class="form-control" name="transaction_reference_id" id="transaction_reference_id" placeholder="e.g. 4123XXXXXXXX" style="background:#f7fafc !important; border:1px solid #cbd5e1 !important; color:#2d3748 !important; border-radius:6px !important; padding:10px !important;">
                                                    </div>

                                                    <div class="form-group">
                                                        <label style="font-weight:700; display:block; margin-bottom:8px;">Payment Screenshot <span style="color:red;">*</span></label>
                                                        <input type="file" class="form-control" name="payment_screenshot" id="payment_screenshot" accept="image/*" style="background:#f7fafc !important; border:1px solid #cbd5e1 !important; color:#2d3748 !important; border-radius:6px !important; padding:8px !important;">
                                                        <span class="error-msg" id="err_screenshot" style="display:none;">Payment ki recipt ka screenshot upload karna compulsory hai.</span>
                                                    </div>

                                                    <div class="booking_next_btn padding-top-30 margin-top-60 clearfix border-top-whitesmoke">
                                                        <button type="button" class="btn btn-info btn-sm floatleft prev-step-to-2">Back</button>
                                                        <button type="button" id="btn_final_submit" class="btn btn-success btn-sm floatright" style="background:#28a745 !important; border-color:#28a745 !important;">Submit Payment & Book</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="booking_done">
                                <div class="booking_done_area margin-top-65 margin-bottom-70">
                                    <div class="row">
                                        <div class="col-lg-12 text-center" style="margin-bottom:40px;">
                                            <i class="fa fa-check-circle" style="font-size:65px; color:#28a745; margin-bottom:15px;"></i>
                                            <h2 style="font-weight:800; color:#1e293b;">Thank You!</h2>
                                            <p style="font-size:16px; color:#64748b; max-width:600px; margin:0 auto;">Aapka room safaltapurvak book ho gaya hai aur aapka account bhi auto-create kar diya gaya hai.</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
                                            <div class="invoice-card" id="invoice_print_area">
                                                <div class="invoice-header clearfix">
                                                    <div class="pull-left">
                                                        <div class="invoice-title">Disha Vishram Sthan</div>
                                                        <div style="font-size:13px; color:#64748b;">Invoice / Booking Slip</div>
                                                    </div>
                                                    <div class="pull-right text-right">
                                                        <div style="font-size:16px; font-weight:700; color:#0f172a;" id="inv_id">BK-XXXXX</div>
                                                        <div class="invoice-meta-item" id="inv_date">Date: --/--/----</div>
                                                    </div>
                                                </div>
                                                
                                                <div class="row" style="margin-bottom:25px;">
                                                    <div class="col-sm-6">
                                                        <div style="font-size:11px; text-transform:uppercase; color:#94a3b8; font-weight:700; letter-spacing:0.5px;">Customer Info</div>
                                                        <div style="font-weight:700; color:#334155; font-size:15px;" id="inv_cust_name">--</div>
                                                        <div style="font-size:13px; color:#64748b;" id="inv_cust_email">--</div>
                                                        <div style="font-size:13px; color:#64748b;" id="inv_cust_phone">--</div>
                                                    </div>
                                                    <div class="col-sm-6 text-right">
                                                        <div style="font-size:11px; text-transform:uppercase; color:#94a3b8; font-weight:700; letter-spacing:0.5px;">Payment Details</div>
                                                        <div style="font-weight:700; color:#5f259f; font-size:14px;">PhonePe Scan</div>
                                                        <div class="invoice-meta-item">Txn ID: <span id="inv_txn_id" style="font-weight:600; color:#334155;">--</span></div>
                                                        <div style="margin-top:5px;"><span class="invoice-badge-status">Under Review</span></div>
                                                    </div>
                                                </div>

                                                <table class="invoice-table-summary">
                                                    <thead>
                                                        <tr>
                                                            <th>Description</th>
                                                            <th class="text-center">Nights</th>
                                                            <th class="text-right">Total</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <strong id="inv_hotel" style="color:#1e293b; display:block;">--</strong>
                                                                <span id="inv_room" style="color:#64748b; font-size:13px;">--</span> <br>
                                                                <small style="color:#94a3b8;" id="inv_dates">--</small>
                                                            </td>
                                                            <td class="text-center" id="inv_nights" style="vertical-align:middle;">0</td>
                                                            <td class="text-right" id="inv_final_bill" style="font-weight:700; color:#0f172a; vertical-align:middle;">Rs. 0</td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                                <div class="text-right" style="margin-top:30px; border-top:1px solid #f1f5f9; padding-top:15px;">
                                                    <button type="button" class="btn btn-default btn-sm" onclick="window.print();"><i class="fa fa-print"></i> Print Slip</button>
                                                    <a href="{{ route('user.dashboard') }}" class="btn btn-warning btn-sm">Dashboard</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
// Prevent manual navigation
$('#bookingTabs a').click(function(e) {
    if($(this).closest('li').hasClass('disabled')) {
        e.preventDefault();
        return false;
    }
});

/* Backward Navigation Controls */
$('.prev-step-to-1').click(function() {
    $('#bookingTabs a[href="#booking_info"]').tab('show');
});
$('.prev-step-to-2').click(function() {
    $('#bookingTabs a[href="#personal_info"]').tab('show');
});

/* Step 1 Validation Trigger */
$('#btn_goto_step2').click(function() {
    let isValid = true;
    $('.s1-validate').each(function() {
        if (!this.checkValidity()) {
            this.reportValidity();
            isValid = false;
            return false;
        }
    });

    if(isValid && (parseFloat($('#hidden_total_amount').val()) <= 0)) {
        alert('Please select a valid Room and Hotel options.');
        isValid = false;
    }

    if(isValid) {
        $('#tab_header_personal').removeClass('disabled');
        $('#bookingTabs a[href="#personal_info"]').tab('show');
    }
});

/* Step 2 Validation Trigger */
$('#btn_goto_step3').click(function() {
    let isStep2Valid = true;
    $('.error-msg').hide();

    if($.trim($('#full_name').val()) === "") {
        $('#err_full_name').show();
        isStep2Valid = false;
    }

    let emailPattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    let emailVal = $('#email').val();
    if($.trim(emailVal) === "" || !emailPattern.test(emailVal)) {
        $('#err_email').show();
        isStep2Valid = false;
    }

    if($.trim($('#phone_number').val()) === "" || isNaN($('#phone_number').val())) {
        $('#err_phone_number').show();
        isStep2Valid = false;
    }

    if($('#password').val().length < 6) {
        $('#err_password').show();
        isStep2Valid = false;
    }

    if(isStep2Valid) {
        let targetAmountText = $('#live_grandtotal').text();
        $('#qr_payable_amount').text(targetAmountText);
        
        $('#tab_header_payment').removeClass('disabled');
        $('#bookingTabs a[href="#booking_payment"]').tab('show');
    }
});

/* Dynamic AJAX Multipart Form Submission Engine */
$('#btn_final_submit').click(function(e) {
    e.preventDefault();
    $('#err_screenshot').hide();

    let screenshotInput = $('#payment_screenshot')[0];
    if (screenshotInput.files.length === 0) {
        $('#err_screenshot').show();
        return false;
    }

    let form = $('#booking_main_form')[0];
    let formData = new FormData(form);

    let submitBtn = $(this);
    submitBtn.prop('disabled', true).text('Uploading Receipt Document...');

    $.ajax({
        url: $(form).attr('action'),
        type: 'POST',
        data: formData,
        contentType: false, 
        processData: false, 
        success: function(response) {
            if(response.status === 'success') {
                // Populate Printable Invoice Blueprint
                $('#inv_id').text(response.booking_number);
                $('#inv_date').text('Date: ' + response.created_at);
                $('#inv_cust_name').text(response.full_name);
                $('#inv_cust_email').text(response.email);
                $('#inv_cust_phone').text(response.phone);
                $('#inv_hotel').text(response.hotel_name);
                $('#inv_room').text(response.room_type);
                $('#inv_dates').text(response.check_in + ' to ' + response.check_out);
                $('#inv_nights').text(response.nights);
                $('#inv_final_bill').text('Rs. ' + response.grand_total);
                $('#inv_txn_id').text(response.tx_id);

                // Switch dynamically to target execution block
                $('#tab_header_done').removeClass('disabled');
                $('#bookingTabs a[href="#booking_done"]').tab('show');
                window.scrollTo({top: 0, behavior: 'smooth'});
            } else {
                alert(response.message || 'Error occurred.');
                submitBtn.prop('disabled', false).text('Submit Payment & Book');
            }
        },
        error: function(xhr) {
            submitBtn.prop('disabled', false).text('Submit Payment & Book');
            if(xhr.status === 422) {
                let errorMessages = xhr.responseJSON.errors;
                let errorStr = Object.values(errorMessages).flat().join('\n');
                alert('Validation Errors:\n' + errorStr);
            } else {
                alert('An error occurred during submission.');
            }
        }
    });
});

/* Pricing System */
function triggerPriceCalculation() {
    let roomId = $('#room_id').val();
    let checkIn = $('#datepicker').val();
    let checkOut = $('#datepicker1').val();

    if(roomId && checkIn && checkOut) {
        $.ajax({
            url: "{{ route('booking.calculate') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                room_id: roomId,
                check_in_date: checkIn,
                check_out_date: checkOut
            },
            success: function(response) {
                if(response.status === 'success') {
                    $('#availability_error').hide();
                    
                    $('#summary_room_qty').text('1 Room');
                    $('#summary_room_type').text(response.room_type);
                    $('#summary_room_rate').text('Rs. ' + parseFloat(response.room_rate).toLocaleString('en-IN'));
                    $('#summary_nights').text(response.total_nights);
                    $('#summary_subtotal').text('Rs. ' + parseFloat(response.sub_total).toLocaleString('en-IN'));
                    $('#summary_tax').text('Rs. ' + parseFloat(response.tax).toLocaleString('en-IN'));
                    
                    $('#live_grandtotal').text('Rs. ' + parseFloat(response.grand_total).toLocaleString('en-IN'));
                    $('#hidden_total_amount').val(response.grand_total);
                } else {
                    $('#availability_error').text(response.message).show();
                    resetCalculatorTable();
                }
            },
            error: function() {
                resetCalculatorTable();
            }
        });
    }
}

function resetCalculatorTable() {
    $('#summary_room_qty').text('1 Room');
    $('#summary_room_type').text('No Room Selected');
    $('#summary_room_rate').text('Rs. 0');
    $('#summary_nights').text('0');
    $('#summary_subtotal').text('Rs. 0');
    $('#summary_tax').text('Rs. 0');
    $('#live_grandtotal').text('Rs. 0');
    $('#hidden_total_amount').val(0);
}

$('#datepicker, #datepicker1').on('change', function() {
    triggerPriceCalculation();
});

// Cascades Engine Options Mapping Hooks
$('#booking_state').on('change', function() {
    let stateId = $(this).val();
    let cityDropdown = $('#booking_city');
    cityDropdown.html('<option value="" disabled selected>Loading Cities...</option>').prop('disabled', false);
    $('#booking_hotel').html('<option value="" disabled selected>Select Hotel</option>').prop('disabled', true);
    $('#room_id').html('<option value="" disabled selected>Select Room</option>').prop('disabled', true);

    $.ajax({
        url: '{{ url("/get-cities") }}/' + stateId,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            cityDropdown.html('<option value="" disabled selected>City</option>');
            if(data && data.length > 0) {
                $.each(data, function(key, city) {
                    let cityName = city.city_name ? city.city_name : (city.name ? city.name : 'Unknown City');
                    cityDropdown.append('<option value="'+ city.id +'">'+ cityName +'</option>');
                });
            }
            
            let targetCity = "{{ old('city_id', request('city_id')) }}";
            if(targetCity) {
                cityDropdown.val(targetCity).trigger('change');
            }
        }
    });
});

$('#booking_city').on('change', function() {
    let cityId = $(this).val();
    let hotelDropdown = $('#booking_hotel');
    hotelDropdown.html('<option value="" disabled selected>Loading Hotels...</option>').prop('disabled', false);
    $('#room_id').html('<option value="" disabled selected>Select Room</option>').prop('disabled', true);

    $.ajax({
        url: '{{ url("/get-hotels") }}/' + cityId,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            hotelDropdown.html('<option value="" disabled selected>Select Hotel</option>');
            if(data && data.length > 0) {
                $.each(data, function(key, hotel) {
                    let hotelName = hotel.hotel_name ? hotel.hotel_name : (hotel.name ? hotel.name : 'Unknown Hotel');
                    hotelDropdown.append('<option value="'+ hotel.id +'">'+ hotelName +'</option>');
                });
            }
            
            let targetHotel = "{{ old('hotel_id', request('hotel_id')) }}";
            if(targetHotel) {
                hotelDropdown.val(targetHotel).trigger('change');
            }
        }
    });
});

$('#booking_hotel').on('change', function() {
    let hotelId = $(this).val();
    let roomDropdown = $('#room_id');
    roomDropdown.html('<option value="" disabled selected>Loading Rooms...</option>').prop('disabled', false);

    $.ajax({
        url: '{{ url("/get-rooms") }}/' + hotelId,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            roomDropdown.html('<option value="" disabled selected>Select Room</option>');
            if(data && data.length > 0) {
                $.each(data, function(key, room) {
                    roomDropdown.append('<option value="'+ room.id +'">'+ room.room_type +' (Rs. '+ room.price_per_night +'/night)</option>');
                });
            }
            
            let targetRoom = "{{ old('room_id', request('room_id')) }}";
            if(targetRoom) {
                roomDropdown.val(targetRoom).trigger('change');
            }
        }
    });
});

$('#room_id').on('change', function() {
    triggerPriceCalculation();
});

$(document).ready(function() {
    let targetState = "{{ old('state_id', request('state_id')) }}";
    if(targetState) {
        $('#booking_state').val(targetState).trigger('change');
    }
});
</script>
@endpush