@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">
                    @if(Auth::user()->user_type == 'seller')
                        @include('frontend.inc.seller_side_nav')
                    @elseif(Auth::user()->user_type == 'customer')
                        @include('frontend.inc.customer_side_nav')
                    @endif
                </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 col-12">
                                    <h2 class="heading heading-6 text-capitalize strong-600 mb-0">
                                        {{ translate('Manage Profile') }}
                                    </h2>
                                </div>
                                <div class="col-md-6 col-12">
                                    <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('profile') }}">{{ translate('Manage Profile') }}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <form class="" action="{{ route('customer.profile.update') }}" method="POST"
                              enctype="multipart/form-data">
                            @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('Your Name') }} {{ auth()->id() }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text"
                                                   class="form-control mb-3 @error('name') is-invalid @enderror"
                                                   placeholder="{{ translate('Your Name') }}" name="name"
                                                   value="{{ old('name',auth()->user()->name) }}">
                                            @error('name')<small
                                                class="form-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Email') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input readonly type="text" class="form-control mb-3"
                                                   placeholder="{{ translate('Your Email') }}" name="email"
                                                   value="{{ Auth::user()->email }}">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Mobile No')}}</label>
                                        </div>
                                        <div class="col-md-10 form-group ">
                                            <input type="tel" class="@error('phone') is-invalid @enderror form-control"
                                                   value="{{ old('phone', auth()->user()->phone) }}"
                                                   placeholder="1234567890" name="phone" autocomplete="off"
                                                   maxlength="10" minlength="10">
                                            @error('phone')<small
                                                class="form-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <input type="hidden" name="country_code" value="91">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label for="photo">{{ translate('Photo (80x80)') }} </label>
                                        </div>
                                        <div class="col-md-10">
                                            <div class="custom-file mb-3">
                                                <input type="file" name="photo"
                                                       class="custom-file-input @error('photo') is-invalid @enderror"
                                                       id="photo" required>
                                                <label class="custom-file-label" for="photo">Choose avatar (80x80)...</label>
                                                @error('photo')<small
                                                    class="form-text text-danger">{{ $message }}</small>@enderror
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" name="editID" value="{{Auth()->user()->id}}">
                            <div class="text-right mt-4">
                                <button type="submit"
                                        class="btn btn-styled btn-base-1 ">{{ translate('Update Profile') }}</button>
                            </div>

                            <div class="form-box bg-white mt-4">
                                <div class="form-box-title px-3 py-2">
                                    {{ translate('Addresses') }}
                                </div>
                                <div class="form-box-content p-3">
                                    <div class="row gutters-10">
                                        @foreach (Auth::user()->addresses as $key => $address)
                                            <div class="col-lg-6">
                                                <div class="border p-3 pr-5 rounded mb-3 position-relative">
                                                    <div>
                                                        <span class="alpha-6">{{ translate('Name') }}:</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>
                                                    @if ($address->set_default)
                                                        <div class="position-absolute right-0 bottom-0 pr-2 pb-3">
                                                            <span
                                                                class="badge badge-primary bg-base-1">{{ translate('Default') }}</span>
                                                        </div>
                                                    @endif
                                                    <div class="dropdown position-absolute right-0 top-0">
                                                        <button class="btn bg-gray px-2" type="button"
                                                                data-toggle="dropdown">
                                                            <i class="la la-ellipsis-v"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-right"
                                                             aria-labelledby="dropdownMenuButton">
                                                            @if (!$address->set_default)
                                                                <a class="dropdown-item"
                                                                   href="{{ route('addresses.set_default', $address->id) }}">{{ translate('Make This Default') }}</a>
                                                            @endif
                                                            <a class="dropdown-item" href="javascript:void(0);"
                                                               onclick="ShowDetail('{{URL('/editaddress/'.$address->id)}}')">Edit</a>
                                                            <a class="dropdown-item"
                                                               href="{{ route('addresses.destroy', $address->id) }}">{{ translate('Delete') }}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        <div class="col-lg-6 mx-auto" onclick="add_new_address()">
                                            <div class="border p-3 rounded mb-3 c-pointer text-center bg-light">
                                                <i class="la la-plus la-2x"></i>
                                                <div class="alpha-7">{{ translate('Add New Address') }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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="address_form">
                    @csrf
                    <div class="modal-body">
                        <div class="p-3">
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('Name') }}</label>
                                </div>
                                <div class="col-md-10">
                                    <input type="text" name="name" class="form-control mb-3 input-lg"
                                           placeholder="{{ translate('Enter name')}}" value="" required="">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('Address') }}</label>
                                </div>
                                <div class="col-md-10">
                                    <textarea class="form-control textarea-autogrow mb-3"
                                              placeholder="{{ translate('Your Address') }}" rows="1" name="address"
                                              required></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('Country')}}</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 }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('State')}}</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"> </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('City')}}</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="" required=""
                                               data-provide="typeahead">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('Postal code')}}</label>
                                </div>
                                <div class="col-md-10">
                                    <input type="text" class="form-control mb-3"
                                           placeholder="{{ translate('Your Postal Code')}}" name="postal_code" value=""
                                           required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2">
                                    <label>{{ translate('Phone')}}</label>
                                </div>
                                <div class="col-md-10">
                                <!-- <input type="text" class="form-control mb-3" placeholder="{{ translate('Your phone number')}}" 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') }}" placeholder="" name="phone" autocomplete="off"
                                               maxlength="10" required>
                                    </div>

                                    <input type="hidden" name="country_code" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit address_form_save" class="btn btn-base-1">{{  translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('js/bs-custom-file-input.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            bsCustomFileInput.init()
        })
    </script>
    <style type="text/css">
        .error {
            color: red;
        }
    </style>
    <script type="text/javascript" src="{{asset('js/jquery.validate.min.js')}}"></script>
    <script type="text/javascript">
        function add_new_address() {
            $('#new-address-modal').modal('show');
        }

        $('.new-email-verification').on('click', function () {
            $(this).find('.loading').removeClass('d-none');
            $(this).find('.default').addClass('d-none');
            var email = $("input[name=email]").val();

            $.post('{{ route('user.new.verify') }}', {_token: '{{ csrf_token() }}', email: email}, function (data) {
                data = JSON.parse(data);
                $('.default').removeClass('d-none');
                $('.loading').addClass('d-none');
                if (data.status == 2)
                    showFrontendAlert('warning', data.message);
                else if (data.status == 1)
                    showFrontendAlert('success', data.message);
                else
                    showFrontendAlert('danger', data.message);
            });
        });
    </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 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();
            });
        }


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

        $(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="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,
                    minlength: 6,
                    maxlength: 6,
                    digits: true,
                    remote: {
                        url: '{{route("check.pincode") }}',
                        type: "post",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: $("#editID").val()
                        },
                        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) {
                $(".address_form_save").attr("disabled", true);
                form.submit();
            }
        });

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

                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: '{{route("check.email") }}',
                        type: "post",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: $("#editID").val()
                        },
                        dataFilter: function (data) {
                            var json = JSON.parse(data);
                            if (json.msg == "true") {
                                return "\"" + "Email already in use" + "\"";
                            } else {
                                return 'true';
                            }
                        }
                    }

                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10,
                    remote: {
                        url: '{{route("check.phone") }}',
                        type: "post",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: $("#editID").val()
                        },
                        dataFilter: function (data) {
                            var json = JSON.parse(data);
                            if (json.msg == "true") {
                                return "\"" + "Phone already in use" + "\"";
                            } else {
                                return 'true';
                            }
                        }
                    }
                },
                new_password: {
                    required: true,
                    minlength: 6,
                },
                confirm_password: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password_new"
                },

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

        var isPhoneShown = true,
            countryData = window.intlTelInputGlobals.getCountryData(),
            inputnew = document.querySelector("#phone-code-new");
        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;
            }
        });

        var iti = intlTelInput(inputnew, {
            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