@extends('frontend.layouts.app')

@section('content')

    <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-3 d-none d-lg-block">
                    @include('frontend.inc.seller_side_nav')
                </div>

                <div class="col-lg-9">
                    <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 Settings')}}
                                        <a href="{{ route('shop.visit', $shop->slug) }}" class="btn btn-link btn-sm"
                                           target="_blank">({{ translate('Visit Shop')}})<i class="la la-external-link"></i>)</a>
                                    </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.index') }}">{{ translate('Shop Settings')}}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <form class="" action="{{ route('shops.update', $shop->id) }}" method="POST" enctype="multipart/form-data"
                              name="shop_edit_form">
                            <input type="hidden" name="_method" value="PATCH">
                            @csrf
                            <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 Name')}} <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Shop Name')}}" name="name"
                                                   value="{{ $shop->name }}" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Registration No <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="Registration Number" name="registration_no"
                                                   required value="{{ $shop->registration_no }}">
                                        </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">
                                            <input type="text" class="form-control mb-3" placeholder="Company PAN" name="company_pan" required
                                                   value="{{ $shop->company_pan }}">
                                        </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">
                                            <input type="text" class="form-control mb-3" placeholder="GST No" name="gst_no"
                                                   value="{{ $shop->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">
                                            <input type="text" class="form-control mb-3" placeholder="Bank Account Name" name="bank_account_name"
                                                   required value="{{ $shop->bank_account_name }}">
                                        </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">
                                            <input type="text" class="form-control mb-3" placeholder="Bank Account No" name="bank_account" required
                                                   value="{{ $shop->bank_account_no }}">
                                        </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">
                                            <input type="text" class="form-control mb-3" placeholder="IFSC Code" name="ifsc" required
                                                   value="{{ $shop->ifsc }}">
                                        </div>
                                    </div>

                                    @if (\App\BusinessSetting::where('type', 'shipping_type')->first()->value == 'seller_wise_shipping')
                                        <div class="row">
                                            <div class="col-md-2">
                                                <label>{{ translate('Shipping Cost')}} <span class="required-star">*</span></label>
                                            </div>
                                            <div class="col-md-10">
                                                <input type="number" min="0" class="form-control mb-3" placeholder="{{ translate('Shipping Cost')}}"
                                                       name="shipping_cost" value="{{ $shop->shipping_cost }}" required>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- <div class="row mb-3">
                                        <div class="col-md-2">
                                            <label>{{ translate('Pickup Points')}} <span class="required-star"></span></label>
                                        </div>
                                        <div class="col-md-10">
                                            <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select Pickup Point') }}" id="pick_up_point" name="pick_up_point_id[]" multiple>
                                                @foreach (\App\PickupPoint::all() as $pick_up_point)
                                        @if (Auth::user()->shop->pick_up_point_id != null)
                                            <option value="{{ $pick_up_point->id }}" @if (in_array($pick_up_point->id, json_decode(Auth::user()->shop->pick_up_point_id)))
                                                selected

                                            @endif>{{ $pick_up_point->name }}</option>


                                        @else
                                            <option value="{{ $pick_up_point->id }}">{{ $pick_up_point->name }}</option>


                                        @endif
                                    @endforeach
                                    </select>
                                </div>
                            </div> -->
                                    <!-- <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Logo')}} <small>({{ translate('120x120')}})</small></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">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Address')}}" name="address"
                                                   value="{{ $shop->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">
                                            <div class="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 }}"
                                                        @if($shop->country == $country->name)
                                                            {{'selected'}}
                                                            @endif
                                                        >{{ $country->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </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">
                                            <div class="mb-3">
                                                <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select your state')}}"
                                                        name="state" required id="state_id">
                                                    @foreach (\App\State::where('status', 1)->get() as $key => $state)
                                                        <option value="{{$state->name}}" @if($shop->state ==  $state->name)
                                                            {{"Selected"}}
                                                            @else @endif> {{$state->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </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">
                                            <div class="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 mb-3 input-lg"
                                                       placeholder="{{ translate('Your City')}}" value="{{$shop->city}}" required=""
                                                       data-provide="typeahead">
                                            </div>
                                        </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">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Your Postal Code')}}"
                                                   name="postal_code" value="{{$shop->postal_code}}" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Meta Title')}} <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Meta Title')}}" name="meta_title"
                                                   value="{{ $shop->meta_title }}" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Meta Description')}} <span class="required-star">*</span></label>
                                        </div>
                                        <div class="col-md-10">
                                            <textarea name="meta_description" rows="6" class="form-control mb-3"
                                                      required>{{ $shop->meta_description }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right mt-4">
                                <button type="submit shop_edit_form_save" class="btn btn-styled btn-base-1">{{ translate('Save')}}</button>
                            </div>
                        </form>

                        {{-- <form class="" action="{{ route('shops.update', $shop->id) }}" method="POST" enctype="multipart/form-data">
                             <input type="hidden" name="_method" value="PATCH">
                             @csrf
                             <div class="form-box bg-white mt-4">
                                 <div class="form-box-title px-3 py-2">
                                     {{ translate('Slider Settings')}}
                                 </div>
                                 <div class="form-box-content p-3">
                                     <div id="shop-slider-images">
                                         <div class="row">
                                             <div class="col-md-2">
                                                 <label>{{ translate('Slider Images')}} <small>(1400x400)</small></label>
                                             </div>
                                             <div class="offset-2 offset-md-0 col-10 col-md-10">
                                                 <div class="row">
                                                     @if ($shop->sliders != null)
                                                         @foreach (json_decode($shop->sliders) as $key => $sliders)
                                                             <div class="col-md-6">
                                                                 <div class="img-upload-preview">
                                                                     <img loading="lazy"  src="{{ my_asset($sliders) }}" alt="" class="img-fluid">
                                                                     <input type="hidden" name="previous_sliders[]" value="{{ $sliders }}">
                                                                     <button type="button" class="btn btn-danger close-btn remove-files"><i class="fa fa-times"></i></button>
                                                                 </div>
                                                             </div>
                                                         @endforeach
                                                     @endif
                                                 </div>
                                                 <input type="file" name="sliders[]" id="slide-0" class="custom-input-file custom-input-file--4" data-multiple-caption="{count} files selected" multiple accept="image/*" />
                                                 <label for="slide-0" class="mw-100 mb-3">
                                                     <span></span>
                                                     <strong>
                                                         <i class="fa fa-upload"></i>
                                                         {{ translate('Choose image')}}
                                                     </strong>
                                                 </label>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="text-right">
                                         <button type="button" class="btn btn-info mb-3" onclick="add_more_slider_image()">{{  translate('Add More') }}</button>
                                     </div>
                                 </div>
                             </div>
                             <div class="text-right mt-4">
                                 <button type="submit" class="btn btn-styled btn-base-1">{{ translate('Save')}}</button>
                             </div>
                         </form> --}}

                        {{-- <form class="" action="{{ route('shops.update', $shop->id) }}" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="_method" value="PATCH">
                            @csrf
                            <div class="form-box bg-white mt-4">
                                <div class="form-box-title px-3 py-2">
                                    {{ translate('Social Media Link')}}
                                </div>
                                <div class="form-box-content p-3">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label ><i class="line-height-1_8 size-24 mr-2 fa fa-facebook bg-facebook c-white text-center"></i>{{ translate('Facebook')}} </label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Facebook')}}" name="facebook" value="{{ $shop->facebook }}">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label><i class="line-height-1_8 size-24 mr-2 fa fa-twitter bg-twitter c-white text-center"></i>{{ translate('Twitter')}} </label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Twitter')}}" name="twitter" value="{{ $shop->twitter }}">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label><i class="line-height-1_8 size-24 mr-2 fa fa-google bg-google c-white text-center"></i>{{ translate('Google')}} </label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Google')}}" name="google" value="{{ $shop->google }}">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label><i class="line-height-1_8 size-24 mr-2 fa fa-youtube bg-youtube c-white text-center"></i>{{ translate('Youtube')}} </label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Youtube')}}" name="youtube" value="{{ $shop->youtube }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right mt-4">
                                <button type="submit" class="btn btn-styled btn-base-1">{{ translate('Save')}}</button>
                            </div>
                        </form> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('script')
    <style type="text/css">
        .error {
            color: red;
        }
    </style>
    <script type="text/javascript" src="{{asset('js/jquery.validate.min.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <script src="{{asset('bootstrap3-typeahead.min.js')}}"></script>
    <script src="{{asset('bootstrap3-typeahead.js')}}"></script>

    <script>


        var slide_id = 1;

        function add_more_slider_image() {
            var shopSliderAdd = '<div class="row">';
            shopSliderAdd += '<div class="col-2">';
            shopSliderAdd += '<button type="button" onclick="delete_this_row(this)" class="btn btn-link btn-icon text-danger"><i class="fa fa-trash-o"></i></button>';
            shopSliderAdd += '</div>';
            shopSliderAdd += '<div class="col-10">';
            shopSliderAdd += '<input type="file" name="sliders[]" id="slide-' + slide_id + '" class="custom-input-file custom-input-file--4" data-multiple-caption="{count} files selected" multiple accept="image/*" />';
            shopSliderAdd += '<label for="slide-' + slide_id + '" class="mw-100 mb-3">';
            shopSliderAdd += '<span></span>';
            shopSliderAdd += '<strong>';
            shopSliderAdd += '<i class="fa fa-upload"></i>';
            shopSliderAdd += "{{ translate('Choose image')}}";
            shopSliderAdd += '</strong>';
            shopSliderAdd += '</label>';
            shopSliderAdd += '</div>';
            shopSliderAdd += '</div>';
            $('#shop-slider-images').append(shopSliderAdd);

            slide_id++;
            imageInputInitialize();
        }

        function delete_this_row(em) {
            $(em).closest('.row').remove();
        }


        $(document).ready(function () {
            $('#country_id').val('India').trigger('change');
            $('.remove-files').on('click', function () {
                $(this).parents(".col-md-6").remove();
            });
        });


        $(document).ready(function () {

            // 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
                    }));

                }

                //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("lettersonly", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
        }, "Letters only please");


        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");

        $('form[name="shop_edit_form"]').validate({
            ignore: [],
            debug: false,
            rules: {
                name: {
                    required: true,
                    // lettersonly:true,
                    minlength: 2,
                    maxlength: 200,

                },
                address: {
                    required: true,
                    minlength: 2,
                    maxlength: 400,
                },
                registration_no: {
                    required: true,
                    minlength: 2,
                    maxlength: 30,
                    // digits:true,
                },
                company_pan: {
                    required: true,
                    minlength: 2,
                    panverify: true,
                    maxlength: 20,
                },
                gst_no: {
                    gstverify: true,
                },


                bank_account_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 100,
                },
                bank_account: {
                    required: true,
                    minlength: 2,
                    maxlength: 100,
                },
                city: {
                    required: true,
                    lettersonly: true,
                    minlength: 2,
                    maxlength: 40,
                },

                state: {
                    required: true,
                },
                country: {
                    required: true,
                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                },
                postal_code: {
                    required: true,
                    digits: true,
                    minlength: 6,
                    maxlength: 6,
                    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';
                            }
                        }
                    }

                },
                meta_title: {
                    required: true,
                    lettersonly: true,
                    minlength: 2,
                    maxlength: 200
                },
                meta_description: {
                    required: true,
                    lettersonly: true,
                    minlength: 2,
                    maxlength: 200
                },

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


            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",
                },
            },

            submitHandler: function (form) {
                $(".shop_edit_form_save").attr("disabled", true);
                form.submit();
            }
        });
    </script>
@endsection