@extends('frontend.layouts.app')

@section('content')

    <div id="page-content">
        <section class="slice-xs sct-color-2 border-bottom">
            <div class="container container-sm">
                <div class="row cols-delimited justify-content-center">
                    <div class="col">

                        <div class="icon-block icon-block--style-1-v5 text-center">
                            <div class="block-icon c-gray-light mb-0">
                                <i class="la la-shopping-cart"></i>
                            </div>
                            <div class="block-content d-none d-md-block">
                                <h3 class="heading heading-sm strong-300 c-gray-light text-capitalize">{{ translate('1. My Cart')}}</h3>
                            </div>
                        </div>

                    </div>

                    <div class="col">

                        <div class="icon-block icon-block--style-1-v5 text-center active">
                            <div class="block-icon mb-0">
                                <i class="la la-map-o"></i>
                            </div>
                            <div class="block-content d-none d-md-block">
                                <h3 class="heading heading-sm strong-300 c-gray-light text-capitalize">{{ translate('2. Shipping info')}}</h3>
                            </div>
                        </div>
                    </div>

                    <div class="col">

                        <div class="icon-block icon-block--style-1-v5 text-center">
                            <div class="block-icon mb-0 c-gray-light">
                                <i class="la la-truck"></i>
                            </div>
                            <div class="block-content d-none d-md-block">
                                <h3 class="heading heading-sm strong-300 c-gray-light text-capitalize">{{ translate('3. Billing info')}}</h3>
                            </div>
                        </div>

                    </div>

                    <div class="col">

                        <div class="icon-block icon-block--style-1-v5 text-center">
                            <div class="block-icon c-gray-light mb-0">
                                <i class="la la-credit-card"></i>
                            </div>
                            <div class="block-content d-none d-md-block">
                                <h3 class="heading heading-sm strong-300 c-gray-light text-capitalize">{{ translate('4. Payment')}}</h3>
                            </div>
                        </div>

                    </div>

                    <div class="col">

                        <div class="icon-block icon-block--style-1-v5 text-center">
                            <div class="block-icon c-gray-light mb-0">
                                <i class="la la-check-circle"></i>
                            </div>
                            <div class="block-content d-none d-md-block">
                                <h3 class="heading heading-sm strong-300 c-gray-light text-capitalize">{{ translate('5. Confirmation')}}</h3>
                            </div>
                        </div>

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

        <section class="py-4 gry-bg">
            <h5 style="text-align: center;">{{translate('Please select or add shipping address')}}</h5>
            <div class="container">
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-8">
                        <form class="form-default" data-toggle="validator" action="{{ route('checkout.store_shipping_infostore') }}" role="form" method="POST"
                              name="guest_shipping_form">
                            @csrf
                            @if(Auth::check())
                                <div class="row gutters-5">
                                    @foreach (Auth::user()->addresses as $key => $address)
                                        <div class="col-md-6">
                                            <label class="aiz-megabox d-block bg-white">
                                                <input type="radio" name="address_id" value="{{ $address->id }}" @if ($address->set_default)
                                                    checked
                                                       @endif required>
                                                <span class="d-flex p-3 aiz-megabox-elem">
                                                        <span class="aiz-rounded-check flex-shrink-0 mt-1"></span>
                                                        <span class="flex-grow-1 pl-3">

                                                            <div>
                                                                <span class="alpha-6">{{ translate('Address') }}:</span>
                                                                <span class="strong-600 ml-2">
                                                                    @if(!empty($address->name))
                                                                        {{ $address->name }}
                                                                    @else
                                                                        {{Auth::user()->name}}
                                                                    @endif
                                                                </span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('Address') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->address }}</span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('Postal Code') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->postal_code }}</span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('City') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->city }}</span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('State') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->state }}</span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('Country') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->country }}</span>
                                                            </div>
                                                            <div>
                                                                <span class="alpha-6">{{ translate('Phone') }}:</span>
                                                                <span class="strong-600 ml-2">{{ $address->phone }}</span>
                                                            </div>
                                                        </span>
                                                    </span>
                                            </label>
                                        </div>
                                    @endforeach
                                    <input type="hidden" name="checkout_type" value="logged">
                                    <div class="col-md-6 mx-auto" onclick="add_new_address()">
                                        <div class="border p-3 rounded mb-3 c-pointer text-center bg-white">
                                            <i class="la la-plus la-2x"></i>
                                            <div class="alpha-7">{{ translate('Add New Address') }}</div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ translate('Name')}}</label>
                                                    <input type="text" class="form-control" name="name" placeholder="{{ translate('Name')}}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ translate('Email')}}</label>
                                                    <input type="text" class="form-control" name="email" placeholder="{{ translate('Email')}}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ translate('Address')}}</label>
                                                    <input type="text" class="form-control" name="address" placeholder="{{ translate('Address')}}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ translate('Select your country')}}</label>
                                                    <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select your country')}}" name="country"
                                                            required id="country_id_guest">
                                                        @foreach (\App\Country::where('status', 1)->get() as $key => $country)
                                                            <option value="{{ $country->name }}">{{ $country->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ translate('Select your State')}}</label>
                                                    <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select your state')}}" name="state"
                                                            required id="state_id_guest">
                                                        @foreach (\App\State::where('status', 1)->get() as $key => $state)
                                                            <option value="{{ $state->name }}">{{ $state->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group has-feedback">
                                                    <label class="control-label">{{ translate('City')}}</label>
                                                    <input type="text" class="form-control" placeholder="{{ translate('City')}}" name="city" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group has-feedback">
                                                    <label class="control-label">{{ translate('Postal code')}}</label>
                                                    <input type="text" class="form-control" placeholder="{{ translate('Postal code')}}" name="postal_code" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group has-feedback">
                                                    <label class="control-label">{{ translate('Phone')}}</label>
                                                    <div class="form-group phone-form-group mb-1">
                                                        <input type="tel" id="phone-code"
                                                               class="h-auto w-100 form-control-lg form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                                                               value="{{ old('phone') }}" placeholder="" name="phone" autocomplete="off" pattern="[6-9][0-9]{9}"
                                                               minlength="10" maxlength="10" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="checkout_type" value="guest">
                                    </div>
                                </div>
                            @endif
                            <div class="row align-items-center pt-4">
                                <div class="col-md-6">
                                    <a href="{{ route('home') }}" class="link link--style-3">
                                        <i class="ion-android-arrow-back"></i>
                                        {{ translate('Return to shop')}}
                                    </a>
                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="submit" class="btn btn-styled btn-base-1 guest_shipping_form_save">{{ translate('Continue to billing Info')}}</a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="col-lg-4 ml-lg-auto">
                        @include('frontend.partials.cart_summary')
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="new-address-modal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-zoom" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">{{ translate('New Address')}}</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form-default" role="form" action="{{ route('addresses.store') }}" method="POST" name="shipping_address_form" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="p-3">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('Name')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control mb-3" placeholder="{{ translate('Enter Name')}}" name="name" value="" required
                                           autocomplete="new-name">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('Address')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <textarea class="form-control textarea-autogrow mb-3" placeholder="{{ translate('Your Address')}}" rows="1" name="address" required
                                              autocomplete="new-address"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('Country')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <div class="mb-3">
                                        <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select your country')}}" name="country" required
                                                id="country_id" autocomplete="new-country">
                                            @foreach (\App\Country::where('status', 1)->get() as $key => $country)
                                                <option value="{{ $country->name }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('State')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <div class="mb-3">
                                        <select class="form-control mb-3 selectpicker" data-placeholder="{{ translate('Select your state')}}" name="state" required
                                                id="state_id" autocomplete="new-state"> </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('City')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <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="" required="" data-provide="typeahead" autocomplete="new-city">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('Postal code')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control mb-3" placeholder="{{ translate('Your Postal Code')}}" name="postal_code" value="" required
                                           autocomplete="new-postal_code">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>{{ translate('Phone')}}</label>
                                </div>
                                <div class="col-md-9">
                                    <!--   <input type="text" class="form-control mb-3" placeholder="{{ translate('')}}" name="phone" value="" required> -->
                                    <div class="form-group phone-form-group mb-1">
                                        <input
                                            type="tel" id="phone-code"
                                            class="h-auto w-100 form-control-lg form-control{{ $errors->has('phone') ? ' is-invalid' : ''  }}"
                                            value="{{ old('phone')  }}" name="phone" autocomplete="new-phone" pattern="[6-9][0-9]{9}" minlength="10"
                                            maxlength="10" required>
                                    </div>

                                    <input type="hidden" name="country_code" value="">
                                    <input type="hidden" name="address_type" value="shipping_address">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <label>Set as default</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="checkbox" class="" name="default_address" value="1" style="font-size: 1px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit shipping_address_save" class="btn btn-base-1">{{  translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')

    <style type="text/css">
        .error {
            color: red;
        }
    </style>
    <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" src="{{asset('public/js/jquery.validate.min.js')}}"></script>
    <script type="text/javascript">

        //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 add_new_address() {

            if ($('#new-address-modal').modal('show')) {
                $('#country_id').val('India').trigger('change');
            }
        }

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

        // function get_city_by_state(){
        //     var state = $('#state_id').val();
        //     $.post('{{ route('city.get_city_by_state') }}',{_token:'{{ csrf_token() }}', state:state}, function(data){
        //      $('#city_id').html(null);
        //         for (var i = 0; i < data.length; i++) {

        //             $('#city_id').append($('<option>', {
        //                 value: data[i].name,
        //                 text: data[i].name
        //             }));

        //         }

        //     });
        // }

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


        $(document).ready(function () {
            $.validator.setDefaults({
                ignore: ''
            });
        });

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

        $('form[name="shipping_address_form"]').validate({
            ignore: [],
            debug: false,
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 50,
                    lettersonly: true
                },
                address: {
                    required: true,
                    minlength: 2,
                    maxlength: 400
                },
                email: {
                    required: true,
                    email: true,

                },
                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);
                            console.log(json);
                            if (json.msg == "false") {
                                return "\"" + "Delivery not available on this pincode" + "\"";
                            } else {
                                return 'true';
                            }
                        }
                    }

                },
            },
            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) {
                $(".shipping_address_save").attr("disabled", true);
                form.submit();
            }
        });

        $('form[name="guest_shipping_form"]').validate({
            ignore: [],
            debug: false,
            rules: {

                address: {
                    required: true,
                    minlength: 2,
                    maxlength: 400
                },
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 40,
                    lettersonly: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                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 "\"" + "Delivery not available on this pincode" + "\"";
                            } else {
                                return 'true';
                            }
                        }
                    }

                },
            },
            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) {
                $(".guest_shipping_form_save").attr("disabled", true);
                form.submit();
            }
        });

        var isPhoneShown = true,
            countryData = window.intlTelInputGlobals.getCountryData(),
            input = document.querySelector("#phone-code");

        for (var i = 0; i < countryData.length; i++) {
            var country = countryData[i];
            if (country.iso2 == 'bd') {
                country.dialCode = '88';
            }
        }

        var iti = intlTelInput(input, {
            separateDialCode: true,
            utilsScript: "{{ asset('frontend/js/intlTelutils.js') }}?1590403638580",
            initialCountry: "IN",
            onlyCountries: @php echo json_encode(\App\Country::where('status', 1)->pluck('code')->toArray()) @endphp,
            customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
                if (selectedCountryData.iso2 == 'bd') {
                    return "01xxxxxxxxx";
                }
                return selectedCountryPlaceholder;
            }

        });
    </script>
@endsection