<!doctype html>
<html lang="en">

<head>
    <meta name="googlebot" CONTENT="NOINDEX, NOFOLLOW">
    <meta name="Yahoobot" CONTENT="NOINDEX, NOFOLLOW">
    <meta name="MSNbot" CONTENT="NOINDEX, NOFOLLOW">
    <meta name="robots" CONTENT="NOINDEX, NOFOLLOW">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Abu Sidra Mall</title>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

    <link rel="icon" type="icon" href="<?php echo e(asset('website/images/favicon.ico')); ?>">

    <link href="<?php echo e(asset('website/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('website/css/style.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('website/css/media.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('website/css/sweetalert2.min.css')); ?>" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body>
    <!-- -HEADER ~ STARTS- -->
    <header>
    </header>
    <!-- -HEADER ~ ENDS- -->
    <!-- -MAIN ~ STARTS- -->
    <main>
        <section class="banner">
            <img src="<?php echo e(asset('website/images/plain-banner.jpg')); ?>" class="img-fluid" alt="banner">
        </section>
        <section class="form-section position-relative d-flex justify-content-center">
            <div class="container-fluid px-0 px-md-4 d-flex justify-content-center align-items-center">
                <form class="custom-form" id="form" action="<?php echo e(route('form.submit')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="location_status" id="location_status" value=""/>
                    <div class="mb-3">
                        <label class="form-label">Full name*</label>
                        <input type="text" name="name" id="name" class="form-control" placeholder="Your name"
                            value="<?php echo e(old('name')); ?>" required>
                        <?php if($errors->has('name')): ?>
                            <span class="text-danger"><?php echo e($errors->first('name')); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone number*</label>
                        <input type="number" name="phone" id="phone" class="form-control"
                            placeholder="Phone number" value="<?php echo e(old('phone')); ?>" required>
                        <?php if($errors->has('phone')): ?>
                            <span class="text-danger"><?php echo e($errors->first('phone')); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">QID*</label>
                        <input type="text" name="q_id" id="q_id" class="form-control" placeholder="QID"
                            value="<?php echo e(old('q_id')); ?>" required>
                        <?php if($errors->has('q_id')): ?>
                            <span class="text-danger"><?php echo e($errors->first('q_id')); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email address <span>(optional)</span></label>
                        <input type="email" name="email" id="email" class="form-control"
                            aria-describedby="Email address" value="<?php echo e(old('email')); ?>">
                    </div>
                    <button type="submit" class="btn btn-custom mx-auto d-block submit-btn" disabled>Submit</button>
                </form>
            </div>
        </section>
    </main>
    <!-- -- MAIN ~ ENDS- -->
    <!-- -FOOTER ~ STARTS- -->
    <footer class="">
    </footer>
    <!-- -FOOTER ~ ENDS- -->

    <script src="<?php echo e(asset('website/js/bootstrap.bundle.min.js')); ?>"></script>
    <script src="<?php echo e(asset('website/js/jquery.min.js')); ?>"></script>

    <script>
        $(document).ready(function() {
            getUserLocation();
        });

        function getUserLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(sendPositionToServer, showError);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function sendPositionToServer(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            fetch('/check-location', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        latitude: latitude,
                        longitude: longitude
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // console.log('Success:', data);
                    if (data.status == "success"){
                        $("#location_status").val(data.data);
                        $('.submit-btn').attr("disabled", false);
                    }
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
    <script type="text/javascript" src="<?php echo e(asset('/js/jquery.validate.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/js/additional-methods.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/website/js/sweetalert2.min.js')); ?>"></script>
    <script>
        $(".submit-btn").click(function(e) {
            if ($('#form').valid()) {
                e.preventdefault();
                return false;
            }
            return true;
        });
        $.validator.addMethod("customemail", function(value, element) {
                return /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
            },
            "Please enter a valid email"
        );

        $("#form").validate({
            rules: {

                name: {
                    required: true,
                    maxlength: 150
                },
                phone: {
                    required: true,
                    maxlength: 8,
                    minlength: 8,
                    number: true
                },
                q_id: {
                    required: true,
                    maxlength: 11
                },
                // email: {
                //     required: false,
                //     customemail: true,
                //     maxlength: 200
                // },
            }

        });

        $('#phone').on('keydown keyup change', function() {
            $(this).val($(this).val().substr(0, 8));
        });

        $('#q_id').on('keydown keyup change', function() {
            $(this).val($(this).val().substr(0, 11));
        });

        var s_message = "<?php echo e(session('success')); ?>";
        var e_message = "<?php echo e(session('error')); ?>";

        $(document).ready(function() {

            if (s_message)
                Swal.fire({
                    text: s_message,
                    type: 'success',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "#F4C202"

                });
            if (e_message)
                Swal.fire({
                    text: e_message,
                    type: 'error',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "#F4C202"

                });


        });
    </script>

</body>

</html>
<?php /**PATH /home/staging/public_html/abusidramall-draw/resources/views/index.blade.php ENDPATH**/ ?>