@extends('frontend_layouts.main')
@section('main-container')

@php
    //phpinfo()
@endphp

    <section class="py-sm-5 py-4" id="weight-calculator">
        <div class="container">
            <div class="volumetric-calculatorbox">
                <div class="row mt-sm-5 mt-3">
                    <div class="col-md-7 mb-3 mb-sm-0">
                        <div class="section-head section-headwhite">
                            <h2>Pincode Serviceability</h2>
                            <h6>Enter your Pincode and check pinocde is serviceable</h6>
                        </div>

                       <!--  <div class="row mt-sm-5 mt-3">
                            <div class="col-md-3 col-6">
                                <select class="form-control length-input fw-medium" style="pointer-events: none;appearance:none">
                                    <option>cm</option>
                                </select>
                            </div>
                        </div> -->

                        <div class="row mt-sm-4 mt-3">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <input type="text" name="from_pincode" class="form-control length-input" placeholder="From Pincode" id="from_pincode">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <input type="text" name="to_pincode" class="form-control length-input" placeholder="To Pincode" id="to_pincode">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                     <select class="form-control length-input fw-medium" name="payment_type" id="payment_type">
                                        <option value="prepaid">Prepaid</option>
                                        <option value="cod">COD</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-sm-3 mt-2 align-items-center">
                                <div class="col-md-3">
                                    <button type="button" class="btn features-btn" id="calculateVolume" onclick="checkServicibility()">Check</button>
                                </div>
                                <div class="col-md-3">
                                    <!-- <h6 style="margin-bottom: 0px;" id="">Total Kg: <span id="cft">0</span></h6> -->
                                </div>
                            </div>
                    </div>
                    <div class="col-md-5">
                        <!-- <img src="{{asset('assets/frontend/images/CalculatorGraphic.png')}}" alt=""> -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="chat-bot">
        <a href="https://web.whatsapp.com/send?phone=7042004334" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
            <!-- <img src="{{asset('assets/frontend/images/what-new.png')}}" alt=""> -->
        </div>

<script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/jquery-3.4.1.min.js')}}"></script>
<script src="{{asset('assets/js/jquery-ui.min.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/sweetalert.css') }}">
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script>
    function checkServicibility() {

        let pickupPincode = $('#from_pincode').val();
        let deliveryPincode = $('#to_pincode').val();
        let paymentType = $('#payment_type').val();

        $body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

        //console.log(pickupPincode,deliveryPincode,weight);

         //$('#custum-loader').removeClass('hidden');

        if (pickupPincode && deliveryPincode && paymentType) {

            jQuery.ajax({
                url: "{{ route('website-serviceable-pincode') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    from_pincode: pickupPincode,
                    to_pincode: deliveryPincode,
                    paymentType: paymentType
                },
                //dataType : "json",
                success: function(data) {

                if(data?.success == true) {
                    swal({
                        icon: 'success',
                        title: "Alert",
                        text: 'Pincode is serviceable.',
                        type: "success",

                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    });

                }else {


                     swal({
                        icon: 'error',
                        title: "Alert",
                        text: 'Pincode is not serviceable.',
                        type: "error",

                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    });

                }

                    
                }
            });

        } else {

            swal({
                icon: 'error',
                title: "Alert",
                text: 'Please enter all the fields.',
                type: "error",

                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            });
            //$('#custum-loader').addClass('hidden');

            return;

        }
    }

    $(".AllowNumeric").on("keypress keyup blur", function(event) {
        $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });

    $('.AllowNumericDecimal').on("keypress keyup blur", function(event) {
        var inputValue = $(this).val();
        var sanitizedValue = inputValue.replace(/[^0-9.]/g, ""); // Allow digits and decimal point
        // Remove multiple decimal points and leading zeros
        sanitizedValue = sanitizedValue.replace(/(\..*)\./g, '$1');
        sanitizedValue = sanitizedValue.replace(/^0+(?=\d)/, '');
        $(this).val(sanitizedValue);
    });
</script>
@endsection