EVOLUTION-NINJA

Edit File: home.php

<?php echo view('includes/header');?>

<!-- <ol class="carousel-indicators">

</ol> -->

</div>

</div>

</div>
                    <div class="carousel-item">

</div>
                    <div class="carousel-item">

</div>

<!-- <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"

data-slide="prev">

<span class="sr-only">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"

data-slide="next">

</button> -->

</div>

</div>

</div>

</div>

<h5 class="wel">Welcome To</h5>

<h5 class="bin">Bindu Tours And Travels</h5>

<p class="abt-txt">your trusted companion in exploring the wonders of [Country/Region]. As

passionate travelers ourselves, we understand the allure of discovering the hidden gems within

our own borders. Our mission is to curate unforgettable domestic travel experiences, providing

you with the opportunity to delve into the rich tapestry of culture, history, and natural beauty

that our beloved [Country/Region] has to offer.</p>

<h6 class="stor">Our Story</h6>

<p class="abt-txt">Founded on the belief that every journey is a story waiting to be told, Bindu

tours and travels was born out of a desire to showcase the beauty and diversity of our homeland.

With a team of seasoned travel enthusiasts, we set out to create a platform that not only

simplifies your travel planning but also ensures that each trip becomes a cherished memory.</p>

</div>

<!-- <img src="assets/images/banner-arrow 1.png" style="background-attachment: right !important;" width="100%"

height="auto" alt="abt-right-img"> -->

</div>

</div> <br>

<h4 class="ser">Our Services</h4>

<h5 class="journ">Join Us on the Journey</h5>

<p class="txt-jou">Embark on a journey with Bindu tours and travels and rediscover the magic within

your own borders. Whether you're a solo adventurer, a couple seeking a romantic getaway, or a

family creating lifelong memories, we invite you to explore [Country/Region] with us.</p>

</div>

</div>

<h5 class="card-title">Customized Itineraries</h5>

<p class="card-text">From vibrant city escapades to serene countryside retreats, we

offer tailor-made itineraries to suit your preferences and schedule.</p>

</div>

</div>

<h5 class="card-title">Guided Tours</h5>

<p class="card-text">Our expert guides will lead you through the heart of each

destination, sharing captivating stories and providing in-depth knowledge.</p>

</div>

</div>

</div>

<h5 class="card-title">Travel Resources</h5>

<p class="card-text">Explore our blog and travel guides, offering valuable tips,

local insights, and inspiration to enhance your travel experience.</p>

</div>

</div>

</div>

<div class="home-demo mt-3">
        <h3 class="ourvehiclehead">Our vehicles</h3>

</div>
    <section class="dotback">
        
        <div class="container container-fluidCustm">

<article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Amaze / Etios / Dzire</h5>
                            <h5 class="card-title crs-size">4 Seater / Sedan</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/odt-honda-amaze-sedan-oneday-travel 1.png"
                                class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>
                
                <article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Maruthi Ertiga</h5>
                            <h5 class="card-title crs-size">6 / 7 Seater SUV</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/pngwing 2.png" class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>
                
                <article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Toyota innova crystal</h5>
                            <h5 class="card-title crs-size">6 / 7 Seater SUV</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/pngwing 3.png" class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>
                <article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Toyota innova</h5>
                            <h5 class="card-title crs-size">6/7 SEATER SUV</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/innova.png" class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>
                
                <article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Tempo/ force travellers</h5>
                            <h5 class="card-title crs-size">12 seater</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/pngwing 5.png" class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>
                
                <article class="thumbnail item">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title crs-name">Mini Bus</h5>
                            <h5 class="card-title crs-size">12/22 seater</h5>
                        </div>
                        <div class="ing-bg">
                            <img src="public/assets/images/bus.png" class="card-img-bottom" alt="...">
                        </div>
                    </div>
                </article>

</div>
        </div>
        <div class="img_Corner">
            <img src="./images/Car-Rental-Mysore_2_09 1.png" alt="">
        </div>
    </section>

<h6>MOST POPULAR TOURS</h6>

<p>There are many variations of passages available, but the majority have suffered

alteration in some form, by injected humour, or randomised words which don't look even slightly

believable.</p>

</div>

<h5 class="card-title ">Mysore To Wayanad</h5>

<button class="viewdet" type="button"><a
                                    href="<?php echo base_url('our-package?place=Wayanad');?>">View Details
                                    >>></a></button>

</div>

<button type="button" class="more-pakages"><b class="more-pakages1"><a href="<?php echo base_url('our-package'); ?>">View More Packages</a></b></button>

</div>

<h5 class="card-title">Mysore to Ooty</h5>

<button class="viewdet " type="button"><a class="view-anch"
                                            href="<?php echo base_url('our-package?place=Ooty');?>">View Details
                                            >>></a></button>

</div>

<h5 class="card-title">Mysore to Coorg</h5>

<button class="viewdet " type="button"><a class="view-anch"
                                            href="<?php echo base_url('our-package?place=Coorg');?>">View Details
                                            >>></a></button>

</div>

</div>

</div>

<section>
        
        <div class="row enqu">
            <div class="col-sm-6 enq-img1">
                <img src='public/assets/images/img 2.png' height="auto" class='d-block' width="100%" alt="...">
            </div>

<div class="col-sm-4 form-back">
                <h2 class="enq-h">Enquiry Form</h2>
                <form action='<?= site_url("submit-enquiry"); ?>' method="post">
                    <div>
                        <label class="label-in" for="name">Name</label><br>
                        <input type="text" id="enq-in" class="form-control" name="name" placeholder="Enter Your Name" required>
                    </div>
                    <div class="number">
                        <label class="label-in" for="phNo">Mobile</label><br>
                        <input class="form-control" type="tel" name="number" id="phone1" placeholder="Enter Your Mobile Number" required>
                        
                    </div>
                    <div>
                        <label class="label-in" for="email">Email</label><br>
                        <input class="form-control" type="email" id="enq-in" name="email" placeholder="Enter Your Email" >
                    </div>
                    <div class="submit">
                        <button type="submit" class="btn btn-dark">Submit</button>
                    </div>
                </form>
            </div>

</div>

<?php echo view('includes/footer');?>   

<div id="myModal" class="modal">
    <div class="modal-content model-mob">
        
        <h2>Enquiry Form</h2>
        <form id="subscribeForm">
            <div>
                <label class="label-in label-in1" for="name">Name</label><br>
                <input type="text" id="enq-in" class="form-control" name="name" placeholder="Enter Your Name" required>
            </div>
            <div class="number">
                <label class="label-in label-in1" for="phNo">Mobile</label><br>
                <input class="form-control" type="tel" name="number" id="phone1" placeholder="Enter Your Mobile Number" required>
                
            </div>
            <div>
                <label class="label-in label-in1 " for="email">Email</label><br>
                <input class="form-control" type="email" id="enq-in" name="email" placeholder="Enter Your Email">
            </div>
            <div class="submit">
                <button type="submit" class="btn btn-dark">Submit</button>
                <button type="button" id="cancelBtn" class="btn btn-danger">Cancel</button>
        </form>
    </div>
</div>
<Script>
    function adboutUs() {
        window.location.href = "<?php echo base_url('about-us');?>";
    }
</Script>

<script>
    jQuery(document).ready(function ($) {
        var owl = $("#owl-demo-2");
        owl.owlCarousel({
            autoplay: true,
            autoplayTimeout: 1000,
            autoplayHoverPause: true,
            items: 3,
            loop: true,
            center: false,
            rewind: false,
            mouseDrag: true,
            touchDrag: true,
            pullDrag: true,
            freeDrag: false,
            margin: 0,
            stagePadding: 0,
            merge: false,
            mergeFit: true,
            autoWidth: false,
            startPosition: 0,
            rtl: false,
            smartSpeed: 600,
            fluidSpeed: false,
            dragEndSpeed: false,
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                480: {
                    items: 1,
                    nav: false
                },
                768: {
                    items: 2,
                    nav: true,
                    loop: false
                },
                992: {
                    items: 3,
                    nav: true,
                    loop: false
                }

},
            responsiveRefreshRate: 200,
            responsiveBaseElement: window,
            fallbackEasing: "swing",
            info: false,
            nestedItemSelector: false,
            itemElement: "div",
            stageElement: "div",
            refreshClass: "owl-refresh",
            loadedClass: "owl-loaded",
            loadingClass: "owl-loading",
            rtlClass: "owl-rtl",
            responsiveClass: "owl-responsive",
            dragClass: "owl-drag",
            itemClass: "owl-item",
            stageClass: "owl-stage",
            stageOuterClass: "owl-stage-outer",
            grabClass: "owl-grab",
            autoHeight: false,
            lazyLoad: false
        });

$(".next").click(function () {
            owl.trigger("owl.next");
        });
        $(".prev").click(function () {
            owl.trigger("owl.prev");
        });
    });</script>

// When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
        scrollFunction();
    };

function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            scrollToTopBtn.style.display = "block";
        } else {
            scrollToTopBtn.style.display = "none";
        }
    }

// When the user clicks on the button, scroll to the top of the document smoothly
    scrollToTopBtn.addEventListener("click", function () {
        scrollToTop();
    });

function scrollToTop() {
        var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;

if (currentPosition > 0) {
            window.requestAnimationFrame(scrollToTop);
            window.scrollTo(0, currentPosition - currentPosition / 10); // Adjust the speed here by changing the divisor (8)
        }
    }

</script>


<!-- <script>
    const input1 = document.querySelector("#phone1");
    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

const iti1 = window.intlTelInput(input1, {
        initialCountry: "us",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
    });

$(document).ready(function () {
        $('form').submit(function (event) {
            event.preventDefault();

$('.error-message').remove();
            let isValid = true;

const name = $('input[name="name"]').val();
            if (!name.trim()) {
                isValid = false;
                $('input[name="name"]').after('<div class="error-message">Please enter your name</div>');
            }

const email = $('input[name="email"]').val();
            if (!isValidEmail(email)) {
                isValid = false;
                $('input[name="email"]').after('<div class="error-message">Please enter a valid email address</div>');
            }

const phoneNumber = $('input[name="number"]').val();
            if (!isValidPhoneNumber(phoneNumber)) {
                isValid = false;
                $('input[name="number"]').after('<div class="error-message">Please enter a valid 10-digit phone number</div>');
            }

if (isValid) {
                var formData = $(this).serialize();

$.ajax({
                    type: 'POST',
                    url: '<?= site_url("submit-enquiry"); ?>',
                    data: formData,
                    success: function (response) {
                        console.log(response);
                        alert('Enquiry submitted successfully!');
                    },
                    error: function (xhr, status, error) {
                        alert('Error submitting enquiry. Please try again later.');
                    }
                });
            }
        });
    });

function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

function isValidPhoneNumber(phoneNumber) {
        const numericPhoneNumber = phoneNumber.replace(/\D/g, '');
        return numericPhoneNumber.length === 12;
    }
</script>

// Get the <span> element that closes the modal
    const span = document.getElementsByClassName('close')[0];

// Get the cancel button
    const cancelBtn = document.getElementById('cancelBtn');

// When the page loads, show the modal
    window.onload = function () {
        modal.style.display = 'block';
    }

// When the user clicks on <span> (x) or cancel button, close the modal
    span.onclick = cancelBtn.onclick = function () {
        modal.style.display = 'none';
    }

// When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    }

// Handle form submission
    const form = document.getElementById('subscribeForm');
    form.addEventListener('submit', function (event) {
        event.preventDefault();

// Get form data
        const name = form.querySelector('input[name="name"]').value;
        console.log('Name:', name);
        const phno = form.querySelector('input[name="number"]').value;
        console.log('Mobile No:', phno);
        const email = form.querySelector('input[name="email"]').value;
        console.log('Email submitted:', email);

// Add your logic to process the form data here (e.g., send it to a server)

// Close the modal
        modal.style.display = 'none';

});

</script> -->

$(document).ready(function(){
        $('form').submit(function(event){
            event.preventDefault();

$('.error-message').remove();
            let isValid = true;

// const name = $('input[name="name"]').val();
            // if (!name.trim()) {
            //     isValid = false;
            //     $('input[name="name"]').after('<div class="error-message">Please enter your name</div>');
            // }

// const email = $('input[name="email"]').val();
            // if (!isValidEmail(email)) {
            //     isValid = false;
            //     $('input[name="email"]').after('<div class="error-message">Please enter a valid email address</div>');
            // }

// const phoneNumber = $('input[name="number"]').val();
            // if (!isValidPhoneNumber(phoneNumber)) {
            //     isValid = false;
            //     $('input[name="number"]').after('<div class="error-message">Please enter a valid 10-digit phone number</div>');
            // }

if (isValid) {
                var formData = $(this).serialize();

$.ajax({
                    type: 'POST',
                    url: '<?= site_url("submit-enquiry"); ?>', 
                    data: formData,
                    success: function(response){
                        console.log(response);
                        toastr.success('Enquiry submitted successfully!');
                        
                    },
                    error: function(xhr, status, error){
                        toastr.error('Error submitting enquiry. Please try again later.');
                    }
                });
            }
        });
    });

function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

function isValidPhoneNumber(phoneNumber) {
        const numericPhoneNumber = phoneNumber.replace(/\D/g, '');
        return numericPhoneNumber.length === 10;
    }
</script>

// Get the cancel button
    const cancelBtn = document.getElementById('cancelBtn');

// When the page loads, show the modal
    window.onload = function () {
        modal.style.display = 'block';
    }

// When the user clicks on cancel button, close the modal
    cancelBtn.onclick = function () {
        modal.style.display = 'none';
    }

// When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    }

// Handle form submission
    const form = document.getElementById('subscribeForm');
    form.addEventListener('submit', function (event) {
        event.preventDefault();

// AJAX request
        const xhr = new XMLHttpRequest();
        xhr.open('POST', form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function () {
            if (xhr.status === 200) {
                // If AJAX request successful, close the modal
                modal.style.display = 'none';
                toastr.success('Form submitted successfully');
            } else {
                console.error('Form submission failed');
                toastr.error('Form submission failed');
            }
        };
        xhr.onerror = function () {
            console.error('Error occurred during form submission');
            toastr.error('Error occurred during form submission');
        };
        xhr.send(`name=${encodeURIComponent(name)}&number=${encodeURIComponent(phno)}&email=${encodeURIComponent(email)}`);
    });
</script>

.modal-content {
        background-color: #e4e4e4;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 35%;
        max-width: 600px;
        margin-top: 12px;
    }

.btn-danger {
        color: #fff;
        background-color: #c6081a;
        border-color: #dc3545;
    }

.btn-dark {
        color: #fff;
        background-color: #e9a01b;
        border-color: #343a40;
    }

.close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

.close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Form Styles */
    form {
        display: flex;
        flex-direction: column;
    }
</style>