@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 Informations')}}
                                    </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>
                        <form id="shop" class="" action="{{ route('shops.store') }}" method="POST"
                              enctype="multipart/form-data" name="address_edit_form">
                            @csrf
                            @if (!Auth::check())
                                <div class="form-box bg-white mt-4">
                                    <div class="form-box-title px-3 py-2">
                                        {{ translate('User Info')}}
                                    </div>
                                    <div class="form-box-content p-3">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                <!-- <label>{{  translate('Name') }}</label> -->
                                                    <div class="">
                                                        <input type="text"
                                                               class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                                               value="{{ old('name') }}"
                                                               placeholder="{{  translate('Name') }}" name="name"
                                                               required="">
                                                        @error('name')
                                                        <small class="help-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                <!-- <label>{{  translate('Name') }}</label> -->
                                                    <div class="">
                                                        <input type="text"
                                                               class="form-control{{ $errors->has('mobile') ? ' is-invalid' : '' }}"
                                                               value="{{ old('mobile') }}" placeholder="Mobile Number"
                                                               name="mobile" autocomplete="off" required="">
                                                        @error('mobile')
                                                        <small class="help-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                <!-- <label>{{  translate('Email') }}</label> -->
                                                    <div class="">
                                                        <input type="email"
                                                               class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                                               value="{{ old('email') }}"
                                                               placeholder="{{  translate('Email') }}" name="email"
                                                               required="">
                                                        @error('email')
                                                        <small class="help-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                <!-- <label>{{  translate('Password') }}</label> -->
                                                    <div class="">
                                                        <input type="password"
                                                               class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                                               placeholder="{{  translate('Password') }}"
                                                               name="password" required="" id="password">
                                                        <!--   <span class="input-group-addon">
                                                              <i class="text-md la la-lock"></i>
                                                          </span> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                <!-- <label>{{  translate('Confirm Password') }}</label> -->
                                                    <div class="">
                                                        <input type="password" class="form-control"
                                                               placeholder="{{  translate('Confirm Password') }}"
                                                               name="password_confirmation" required="">
                                                        <!--  <span class="input-group-addon">
                                                             <i class="text-md la la-lock"></i>
                                                         </span> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                </div>
                            @endif
                            <div class="form-box bg-white mt-4">
                                <div class="form-box-title px-3 py-2">
                                    {{ translate('Basic Info')}}
                                </div>
                                <div class="form-box-content p-3">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Shop/Company Name')}} <span
                                                    class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control"
                                                   placeholder="{{ translate('Shop Name')}}" name="name" required>
                                        </div>
                                    </div>


                                    <!-- New Fields -->

                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <label>{{ translate('Are you affiliated / licensed with KVIC/KVIB, PMEGP/REGP, SFURTI')}}
                                                <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <select class="form-control"
                                                    data-placeholder="{{ translate('Select Option')}}" name="affiliate"
                                                    required id="affiliate">
                                                <option value="">Select Option</option>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row wrap close mb-3">
                                        <div class="col-md-12">

                                            @forelse(\App\SellerRegistrationOption::whereNotNull('vendor_type')->get() as $key => $option)
                                                <div class="checkbox pad-btm text-left vnd">
                                                    <input class="magic-checkbox roles" type="checkbox"
                                                           name="vendor_type[]" value="{{$option->vendor_type}}"
                                                           id="@if($option->category == 'Others'){{"others"}}@endif">
                                                    <label for="">{{$option->vendor_type}}</label>
                                                </div>
                                            @empty
                                            @endforelse

                                        </div>
                                    </div>


                                    <div class="row wrap close mt-1">
                                        <div class="col-md-12">
                                            <label>{{  translate('Certificate Number') }} <span
                                                    class="required-star">*</span></label>
                                            <input type="text"
                                                   class="form-control {{ $errors->has('certificate_no') ? ' is-invalid' : '' }}"
                                                   placeholder="{{  translate('Certificate Number') }}"
                                                   name="certificate_no">
                                        </div>
                                    </div>
                                    <div class="row wrap close mt-2">

                                        <div class="col-md-12">
                                            <label>{{ translate('Validity Date')}} <span class="required-star">*</span></label>

                                            <input type="text" name="validity" id="datepicker"
                                                   class="form-control input-lg"
                                                   placeholder="{{ translate('Your validity date')}}" value=""
                                            >

                                        </div>
                                    </div>

                                    <div class="row wrap close mt-4">
                                        <div class="col-md-12">
                                            <label>{{ translate('Please upload KVIC/KVIB/PMEGP/REGP/SFURTI Certificate (Whichever is applicable)')}}
                                                <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <div class="mb-3">
                                                <input type="file" name="certificate_file"
                                                       class="form-control certificate_file"
                                                       placeholder="Upload file option  (pdf, png, jpg, jpeg)">

                                            </div>
                                        </div>
                                    </div>




                                    <div class="row close product-type mb-3">
                                        <div class="col-md-12">
                                            <label>{{ translate('Type of products category you are into')}} <span
                                                    class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-12">

                                            @forelse(\App\SellerRegistrationOption::all() as $key => $option)
                                                <div class="checkbox pad-btm text-left vnd">
                                                    <input class="magic-checkbox opt_regs" type="checkbox"
                                                           name="product_cat[]" value="{{$option->category}}"
                                                           id="@if($option->category == 'Other'){{"others"}}@endif">
                                                    <label for="">{{$option->category}}</label>
                                                </div>
                                            @empty
                                            @endforelse
                                        </div>

                                        <div class="errorplace col-md-12"></div>

                                    </div>

                                    <br>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Registration No <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="Registration Number"
                                                   name="registration_no" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Company PAN <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="Company PAN"
                                                   name="company_pan" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>GST No <span class="required-star"></span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="GST No" name="gst_no">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Bank Account Name <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="Bank Account Name"
                                                   name="bank_account_name" required autocomplete="false">
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Bank Account No <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="Bank Account No"
                                                   name="bank_account" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>IFSC Code<span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control" placeholder="Ifsc code"
                                                   name="ifsc" id="ifsc" required>
                                        </div>
                                    </div>


                                <!--   <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Logo')}}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="file" name="logo" id="file-2" class="custom-input-file custom-input-file--4" data-multiple-caption="{count} files selected" accept="image/*" />
                                            <label for="file-2" class="mw-100 mb-3">
                                                <span></span>
                                                <strong>
                                                    <i class="fa fa-upload"></i>
                                                    {{ translate('Choose image')}}
                                    </strong>
                                </label>
                            </div>
                        </div> -->
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Address')}} <span
                                                    class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control"
                                                   placeholder="{{ translate('Address')}}" name="address" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Country')}} <span
                                                    class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">

                                            <select class="form-control mb-3 selectpicker"
                                                    data-placeholder="{{ translate('Select your Country')}}"
                                                    name="country" required id="country_id">
                                                @foreach (\App\Country::where('status', 1)->get() as $key => $country)
                                                    <option value="{{ $country->name }}">{{ $country->name }}</option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('State')}} <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">

                                            <select class="form-control selectpicker"
                                                    data-placeholder="{{ translate('Select your State')}}" name="state"
                                                    required id="state_id"> </select>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('City')}} <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                        <!--  <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Your City')}}" name="city" required id="city_id"> </select> -->
                                            <input type="text" name="city" id="citytags"
                                                   class="form-control typeahead input-lg"
                                                   placeholder="{{ translate('Your City')}}" value="" required=""
                                                   data-provide="typeahead">

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Postal code')}} <span
                                                    class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10 mb-3">
                                            <input type="text" class="form-control"
                                                   placeholder="{{ translate('Your Postal Code')}}" name="postal_code"
                                                   value="" required>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            @if(\App\BusinessSetting::where('type', 'google_recaptcha')->first()->value == 1)
                                <div class="form-group mt-2 mx-auto row">
                                    <div class="g-recaptcha" data-sitekey="{{ env('CAPTCHA_KEY') }}"></div>
                                </div>
                            @endif

                            <div class="text-right mt-4">
                                <button type="submit"
                                        class="btn btn-styled btn-base-1 address_edit_form_save">{{ translate('Save')}}</button>
                            </div>
                        </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