<div class="page-title">
    <div class="container">
        <div class="banner-full-wrap">
            <div class="row g-0">
                <div class="col-md-4">
                    <div class="text-center banner-right-wrap">
                        <h1 class="main-title">Contact Us </h1>
                    </div>
                </div>
                <div class="col-md-8">
                    <img src="<?php echo base_url(); ?>assets/user/img/contact-banner.webp" alt="shop" class="w-100">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- page-title end -->

<!-- location start -->
<div class="location">
    <div class="container">
        <div class="row justify-content-center">
            <!-- <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-md-5 mb-4">
                    <h2 class="main-title"> Get In Touch With Us </h2>
                </div>
            </div> -->
            <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                <div class="ms-md-4 ms-4 mt-md-5 mt-4">
                    <div class="location-inner">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="woodland">
                                    <img src="<?php echo base_url(); ?>assets/user/img/contact-phone.webp" alt="location icon">
                                    <div>
                                        <h3>Call Us: </h3>
                                        <a href="tel:6565562429">+65 6556 2429</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="woodland">
                                    <img src="<?php echo base_url(); ?>assets/user/img/contact-fax.webp" alt="location icon">
                                    <div>
                                        <h3>Fax Us: </h3>
                                        <a href="tel:6568427578">+65 6842 7578</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="woodland">
                                    <img src="<?php echo base_url(); ?>assets/user/img/contact-email.webp" alt="phone icon">
                                    <div>
                                        <h3>Email Us: </h3>
                                        <a href="mailto:enquiry@lecolefood.com">enquiry@lecolefood.com</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="woodland">
                                    <img src="<?php echo base_url(); ?>assets/user/img/contact-map.webp" alt="mail icon">
                                    <div>
                                        <h3>Locate Us: </h3>
                                        <p class="d-inline">
                                            26 Sin Ming Lane <br>
                                            #02-113 MidView City<br>
                                            Singapore 573971</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12 col-12 ps-md-0">
                <div class="map-full">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.696094870746!2d103.83115072371658!3d1.3589745115490606!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da172bcbcfba55%3A0xc1d54d1a92c09720!2sMidview%20City!5e0!3m2!1sen!2sin!4v1703940992008!5m2!1sen!2sin" width="100%" height="650" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- location end -->
<!-- contact start -->
<div class="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-success alert-dismissible" role="alert" <?php if ($this->session->flashdata('message') == '') { ?> style="display:none" <?php } ?>>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    <?php echo $this->session->flashdata('message'); ?>
                </div>
                <div class="alert alert-danger alert-dismissible" role="alert" <?php if ($this->session->flashdata('emessage') == '') { ?> style="display:none" <?php } ?>>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    <?php echo $this->session->flashdata('emessage'); ?>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-11 col-12">
                <h3 class="heading-title text-center"> Any Questions? </h3>
                <form id="mycontactUsForm" action="<?php echo base_url('front/contactUs'); ?>" method="post" enctype="multipart/form-data" class="pt-md-5 pt-4">
                    <div class="row g-md-5 g-3">
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="">First Name</label>
                                <input type="text" class="form-control" name="first_name">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="">Last Name</label>
                                <input type="text" class="form-control" name="last_name">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="">Email</label>
                                <input type="text" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="">Phone Number</label>
                                <input type="text" class="form-control" name="phone">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="">Message</label>
                                <textarea rows="5" class="form-control" placeholder="Write your message.." name="message"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group mb-3">
                                <div class="g-recaptcha" data-sitekey="6LfHqIAqAAAAAJAEA6PuaLFO3Q3uyDoQWjiaNYqg"></div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group text-center pt-3">
                                <button type="submit" class="btn btn-secondary"> <span> Submit <div><img src="<?php echo base_url(); ?>assets/user/img/btn-right.png" class="img" alt="right"> </div> </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- contact end -->

<script>
    $("#mounth").each(function() {
        var $this = $(this),
            numberOfOptions = $(this).children("option").length;

        $this.addClass("select-hidden");
        $this.wrap('<div class="select"></div>');
        $this.after('<div class="select-styled"></div>');

        var $styledSelect = $this.next("div.select-styled");
        $styledSelect.text($this.children("option").eq(0).text());

        var $list = $("<ul />", {
            class: "select-options"
        }).insertAfter($styledSelect);

        for (var i = 0; i < numberOfOptions; i++) {
            $("<li />", {
                text: $this.children("option").eq(i).text(),
                rel: $this.children("option").eq(i).val()
            }).appendTo($list);

        }

        var $listItems = $list.children("li");

        $styledSelect.click(function(e) {
            e.stopPropagation();
            $("div.select-styled.active")
                .not(this)
                .each(function() {
                    $(this).removeClass("active").next("ul.select-options").hide();
                });
            $(this).toggleClass("active").next("ul.select-options").toggle();
        });

        $listItems.click(function(e) {
            e.stopPropagation();
            $styledSelect.text($(this).text()).removeClass("active");
            $this.val($(this).attr("rel"));
            $list.hide();

        });

        $(document).click(function() {
            $styledSelect.removeClass("active");
            $list.hide();
        });
    });
</script>