  <!-- Page Header Area Start !-->
  <div class="page-header-area style-1">
    <div class=" page-breadcrumb-sec">
        <div class="breadcrumb-shape" style="background-image: url(images/Pattern.png)"></div>
        <div class="swiper_overlay"></div>
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-wrapper">
                    <div class="page-heading">
                        <h1>My Bookings</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page Header Area End !-->

<div class="faq-area about-us-area project-filter-area style-1 tabular-section theme-bg-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
            <div class="post-comments-form bg-gray py-30 px-30">
                <nav class="price-card-switch text-sm-end">
                    <ul class="nav-tab tabs-list">
                        <li class="active item">All</li>
                        <li class="item">Past</li>
                        <li class="item">Upcoming</li>
                    </ul>
                </nav>
                <div class="tabs-content">
                    <div class="content all">
                        <div class="team-slider">
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>                    
                        </div>
                    </div>
                    
                    <div class="content all">
                        <div class="team-slider">
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>                    
                        </div>
                    </div>

                    <div class="content all">
                        <div class="team-slider">
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="team-member-card style-two">
                                <div class="comment-respond booking-wrapper">
                                    <div class="booking-details flex-wrap">
                                        <h6>Package Title</h6>
                                        <div class="start-date">
                                            12 Sep 2025 to 15 Sep 2025
                                        </div>
                                        <div class="person">
                                            2 Adults
                                        </div>
                                        <div class="package-amount">
                                            <h6>₹124500</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>                    
                        </div>
                    </div>

                </div>
            </div>

        </div>
      </div>
    </div>
  </div>



<div class="faq-area style-1 theme-bg-gray mt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="post-comments-form">
                    <div id="enq-form-wrapper" class="faq-area style-1 theme-bg-gray">
                        <div class="post-comments-form">
                            <div class="comment-respond">
                                <div class="post-comments-title">
                                    <h4>Booking Details</h4>
                                    <p><strong>Note:</strong> First, fill out the form, then complete the payment, and finally, submit the application.</p>
                                    <div class="text-center text-success pb-20" id="formmessage">
                                        <?php if($fcObj->session->getFlashdata('action_status')){ ?>
                                            <h5 id="formmessage" class="mb-3"><?=$fcObj->session->getFlashdata('action_status')?></h5>
                                        <?php } ?>
                                    </div>
                                </div>
                                <?=form_open('',['id'=>"enquiry_form_modal",'class'=>'comment-form'])?>
                                    <div class="row">
                                        <div class="col-lg-8 col-sm-12 col-12">
                                            <div class="row">
                                                <div class="col-lg-12 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="name">Full Name</label>
                                                            <input type="text" name="name" id="name"value="<?=set_value('name')?>" >
                                                            <?=$validation->showError('name')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="phone">Phone / Mobile</label>
                                                            <input type="tel" name="phone" id="phone"value="<?=set_value('phone')?>" >
                                                            <?=$validation->showError('phone')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="email_id">Email ID</label>
                                                            <input type="email" name="email_id" id="email_id" value="<?=set_value('email_id')?>" >
                                                            <?=$validation->showError('email_id')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="city">City</label>
                                                            <input type="text" name="city" id="city" value="<?=set_value('city')?>" >
                                                            <?=$validation->showError('city')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="no_persons">Total Persons</label>
                                                            <input type="text" name="no_persons" id="no_persons" value="<?=set_value('no_persons')?>" oninput="generateQrCode()">
                                                            <?=$validation->showError('no_persons')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-sm-6 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="total_amount">Amount to Pay</label>
                                                            <input type="number" step="0.01" readonly name="total_amount" id="total_amount" value="<?=set_value('total_amount',$amount ?? 0)?>" >
                                                            <?=$validation->showError('total_amount')?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-sm-12 col-12">
                                                    <div class="form-item">
                                                        <div class="single-input-field">
                                                            <label for="message">Any Meassage or Question</label>
                                                            <textarea type="text" name="message" id="message"><?=set_value('message')?></textarea>
                                                            <?=$validation->showError('message')?>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-12 col-12 text-center">
                                            <div id="qr-code-container" class="text-center">
                                                <h6>Scan this QR Code or use UPI ID to Pay</h6>
                                                <h2 class="text-primary" id="total_amount2"></h2>
                                                <p class="bg-white p-1 mb-3"><small><strong>UPI ID :</strong> <?=$company_dtl['upi_id']?></small></p>
                                                <img class="px-5 pb-3" id="qr-code" src="" alt="QR Code">
                                                
                                            </div>
                                            <div class="form-item">
                                                <div class="single-input-field">
                                                    <input type="text" name="transaction_id" id="transaction_id" placeholder="Add Transaction ID (UTR)" value="<?=set_value('transaction_id')?>" >
                                                    <?=$validation->showError('transaction_id')?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-sm-12 col-12 text-center">
                                            <button class="theme-btn image-card-btn px-5" type="submit">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
            generateQrCode();
        });
    // Function to generate QR Code based on the entered amount
    function generateQrCode() {
        var total=0;
        var persons = document.getElementById('no_persons').value;
        var amount = '<?=$amount?>';
        total = persons * amount;
        if (total) {
            document.getElementById('total_amount').value = total.toFixed(2);
            document.getElementById('total_amount2').innerHTML = '₹ ' + total.toFixed(2);
        }else{
            document.getElementById('total_amount').value = amount;
            document.getElementById('total_amount2').innerHTML = '₹ ' + amount;
            
        }
        console.log(total);

        if (amount && !isNaN(amount)) {
           // Fetch the QR code image
            var qrCodeImg = '<?=base_url('booking/generateQrCode?amount=')?>'+total;
            
            document.getElementById('qr-code').src = qrCodeImg;
            // console.log(qrCodeImg);
            
            // Display the QR code container
            document.getElementById('qr-code-container').style.display = 'block';
        }
    }
</script>