@extends('frontend.layouts.app')

@section('content')

    <!--    Banner  section manually added on 03-08-21 starts -->
    <section class="bg-white">
        <div class="container-fluid">
            <div class="row">
                                <div class="media-height d-none d-md-block">
                    <a href="javascript:void(0);" target="" tabindex="-1">
                        @if(!empty(@$web_imagePath))
                            <img class="d-block w-100 h-100 lazyload" src="{{ $web_imagePath }}"
                                 data-src="{{ $web_imagePath }}" alt="{{ env('APP_NAME')}} promo">
                        @endif
                    </a>
                </div>

                <div class="media-height d-block d-md-none">
                    <a href="javascript:void(0);" target="" tabindex="-1">
                        @if(!empty(@$web_imagePath))
                            <img class="d-block w-100 h-100 lazyload"
                                 src="{{ $web_imagePath }}"
                                 data-src="{{ $web_imagePath }}"
                                 alt="{{ env('APP_NAME')}} promo">
                        @endif
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!--    Section banner ends -->

    <section class="gry-bg py-4 profile">
        <div class="container">
            <div class="row cols-xs-space cols-sm-space cols-md-space">
                <div class="col-lg-9 mx-auto">
                    <div class="main-content">
                        <!-- Page title -->
                        <div class="page-title">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <h2 class="heading heading-6 text-capitalize strong-600 mb-0">
                                        {{ translate('Shop Information')}}
                                    </h2>
                                </div>
                                <div class="col-md-6">
                                    <div class="float-md-right">
                                        <ul class="breadcrumb">
                                            <li><a href="{{ route('home') }}">{{ translate('Home')}}</a></li>
                                            <li><a href="{{ route('dashboard') }}">{{ translate('Dashboard')}}</a></li>
                                            <li class="active"><a
                                                    href="{{ route('shops.create') }}">{{ translate('Create Shop')}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @livewire('multi-step-be-seller-form')
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('script')
    <style type="text/css">
        .error {
            color: red;
        }

        .close {
            display: none;
        }

        .vnd div.error {
            position: absolute;
            bottom: -12px;
        }

        .checkbox label::before {
            border: 1px solid #d0c9c9;
        }
    </style>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({changeMonth: true, changeYear: true, minDate: 0, maxDate: "+5Y +10D"});
        });
    </script>
    <script type="text/javascript" src="{{asset('public/js/jquery.validate.min.js')}}"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <script src="{{asset('public/bootstrap3-typeahead.min.js')}}"></script>
    <script src="{{asset('public/bootstrap3-typeahead.js')}}"></script>

    <script type="text/javascript">
        // making the CAPTCHA  a required field for form submission
        $(document).ready(function () {

            $(".certificate_file").change(function () {
                var ext = $('.certificate_file').val().split('.').pop().toLowerCase();
                if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'pdf']) == -1) {
                    alert('invalid extension!');
                }
            });

            $("#affiliate").change(function () {
                let selectValue = $(this).val();
                console.log($(this).val());
                if (selectValue === '1') {
                    $(".wrap").removeClass('close');
                    $(".product-type").removeClass('close');
                    $(".roles").attr('required', true);
                    $("input[name='certificate_no']").attr('required', true);
                    $("input[name='certificate_file']").attr('required', true);
                    $("input[name='product_cat[]']").attr('required', true);
                    $("input[name='validity']").attr('required', true);

                } else if (selectValue === '0') {
                    $(".wrap").addClass('close');
                    $(".product-type").removeClass('close');
                    $(".roles").attr('required', false);
                    $("input[name='certificate_no']").attr('required', false);
                    $("input[name='certificate_file']").attr('required', false);
                    $("input[name='product_cat[]']").attr('required', true);
                    $("input[name='validity']").attr('required', false);

                } else {
                    $(".wrap").addClass('close');
                    $(".product-type").addClass('close');
                    $(".roles").attr('required', false);
                    $("input[name='certificate_no']").attr('required', false);
                    $("input[name='certificate_file']").attr('required', false);
                    $("input[name='product_cat[]']").attr('required', false);
                    $("input[name='validity']").attr('required', false);
                }
            });

            $(".opt_regs").change(function () {
                if ($(this).prop('checked') == true) {
                    if ($(this).val() == 'Other') {
                        $(".opt_regs").not(this).attr('checked', false);
                    }
                }

                if ($(this).val() != 'Other') {
                    $("#others").attr('checked', false);
                }
            });


            $('#country_id').val('India').change();
            // alert('helloman');
            // $("#shop").on("submit", function(evt)
            // {
            //     var response = grecaptcha.getResponse();
            //     if(response.length == 0)
            //     {
            //     //reCaptcha not verified
            //         alert("please verify you are humann!");
            //         evt.preventDefault();
            //         return false;
            //     }
            //     //captcha verified
            //     //do the rest of your validations here
            //    // $("#reg-form").submit();
            // });
        });

        //CityTags Search Functionlity
        var cityroute = "{{ route('city.get_city_by_state') }}";
        var state = $('#state_id').val();
        $('#citytags').typeahead({
            source: function (term, process) {
                return $.post(cityroute, {term: term, "_token": "{{ csrf_token() }}", state: state}, function (data) {
                    return process(data);
                });
            }
        });

        function get_state_by_country_id() {
            var country_id = $('#country_id').val();
            $.post('{{ route('state.get_state_by_country_id') }}', {
                _token: '{{ csrf_token() }}',
                country_id: country_id
            }, function (data) {

                $('#state_id').html(null);
                for (var i = 0; i < data.length; i++) {
                    $('#state_id').append($('<option>', {
                        value: data[i].name,
                        text: data[i].name
                    }));

                }
                $("#state_id").prepend("<option value='' selected='selected'></option>");
                //get_city_by_state();
            });
        }


        $('#country_id').on('change', function () {
            get_state_by_country_id();
        });

        $.validator.addMethod("roles", function (value, elem, param) {
            return $(".roles:checkbox:checked").length > 0;
        }, "You must select at least one!");


        jQuery.validator.addMethod("panverify", function (value, element) {
            return this.optional(element) || /^([a-zA-z]{5}\d{4}[a-zA-Z]{1})+$/i.test(value);
        }, "Please enter valid PAN number");


        jQuery.validator.addMethod("gstverify", function (value, element) {
            return this.optional(element) || /^([0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1})+$/i.test(value);
        }, "Please enter valid GST number");

        jQuery.validator.addMethod("lettersonly", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
        }, "Letters only please");


        $('form[name="address_edit_form"]').validate({
            ignore: [],
            debug: false,
            rules: {
                email: {
                    required: true,
                    email: true,

                },
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 60,
                    lettersonly: true,
                },
                company_pan: {
                    required: true,
                    minlength: 2,
                    panverify: true,
                    maxlength: 20,
                },
                gst_no: {
                    gstverify: true,
                },

                password: {
                    required: true,
                    minlength: 6,
                },
                password_confirmation: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                },
                address: {
                    required: true,
                    minlength: 2,
                    maxlength: 400
                },
                city: {
                    required: true,
                    lettersonly: true,
                    minlength: 2,
                    maxlength: 60
                },

                state: {
                    required: true,
                },
                country: {
                    required: true,
                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                },

                registration_no: {
                    required: true,
                },


                postal_code: {
                    required: true,
                    minlength: 6,
                    maxlength: 6,
                    digits: true,
                    remote: {
                        url: '{{route("check.pincode") }}',
                        type: "post",
                        data: {"_token": "{{ csrf_token() }}"},
                        dataFilter: function (data) {
                            var json = JSON.parse(data);
                            if (json.msg == "false") {
                                return "\"" + "Pickup not available on this pincode" + "\"";
                            } else {
                                return 'true';
                            }
                        }
                    }
                },
            },

            errorPlacement: function (error, element) {
                if (element.is(":checkbox")) {
                    //error.appendTo( element.parents('.errrocontainer') );
                    error.insertAfter(element.parent().parent());
                    // error.insertAfter($(".errorplace"));
                } else { // This is the default behavior
                    error.insertAfter(element.closest('input'));
                }
            },


            messages: {
                postal_code: {
                    minlength: "Postal code should be in 6 digits only",
                    maxlength: "Postal code should be in 6 digits only",
                    digits: "Please enter only digits",
                },
                phone: {
                    minlength: "Phone number should be in 10 digits only",
                    maxlength: "Phone number should be in 10 digits only",
                    digits: "Please enter only digits",
                },
            },
            errorElement: 'div',
            errorLabelContainer: '.errorTxt',
            submitHandler: function (form) {
                $(".address_edit_form_save").attr("disabled", true);
                form.submit();
            }
        });


    </script>
@endsection