@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" name="profile_update">
                            @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') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control mb-3" placeholder="{{ translate('Your Name') }}" name="name" value="{{ Auth::user()->name }}">
                                        </div>
                                    </div>

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

                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Mobile No')}}</label>
                                        </div>
                                        <div class="col-md-10 form-group phone-form-group mb-1">
                                           <input type="tel" id="" class="h-auto w-100 form-control-lg form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}" value="{{ Auth::user()->phone }}" placeholder="1234567890" name="phone" autocomplete="off" maxlength="10" required>
                                        </div>


                                    <input type="hidden" name="country_code" value="">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Photo') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="file" name="photo" id="file-3" class="custom-input-file custom-input-file--4" data-multiple-caption="{count} files selected" accept="image/png, image/jpeg" />
                                            <label for="file-3" 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('Your Password') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="password" class="form-control mb-3" placeholder="{{ translate('Old Password') }}" name="old_password" id="old_password">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('New Password') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="password" class="form-control mb-3" placeholder="{{ translate('New Password') }}" name="new_password" id="password_new" onkeyup="checkPasswordStrength();" >
                                            <div id="password-strength-status" style="color: red"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Confirm Password') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="password" class="form-control mb-3" placeholder="{{ translate('Confirm Password') }}" name="confirm_password">
                                        </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 profile_update_save">{{ 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>

                        <!-- <form action="{{ route('user.change.email') }}" method="POST">
                            @csrf
                            <div class="form-box bg-white mt-4">
                                <div class="form-box-title px-3 py-2">
                                    {{ translate('Change your email') }}
                                </div>
                                <div class="form-box-content p-3">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>{{ translate('Your Email') }}</label>
                                        </div>
                                        <div class="col-md-10">
                                            <div class="input-group mb-3">
                                              <input
                                                  type="email"
                                                  class="form-control"
                                                  placeholder="{{ translate('Your Email')}}"
                                                  name="email"
                                                  value=
                                                  "{{ Auth::user()->email }}"
                                              />
                                              <div class="input-group-append">
                                                 <button type="button" class="btn btn-outline-secondary new-email-verification">
                                                     <span class="d-none loading">
                                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                         Sending Email...
                                                     </span>
                                                     <span class="default">Verify</span>
                                                 </button>
                                              </div>
                                            </div>
                                            <button class="btn btn-styled btn-base-1" type="submit">Update Email</button>
                                        </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')
<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';
                  }
              }
            }
        },
        // photo: {
        //     image:'jpeg,jpg,png|max:10000', // max 10000kb
        // },
        new_password: {
            // required: true,
            minlength:8,
        },
        confirm_password: {
           // required: true,
           minlength: 8,
           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;
        }
    });

function checkPasswordStrength() {
    var number = /([0-9])/;
    var alphabets = /([a-zA-Z])/;
    var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
    var password = $('#password_new').val().trim();
    if (password.length < 8) {
        $('#password-strength-status').removeClass();
        $('#password-strength-status').addClass('weak-password');
        $('#password-strength-status').html("Weak (should be atleast 8 characters.)");
    } else {
        if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
            $('#password-strength-status').removeClass();
            $('#password-strength-status').addClass('strong-password');
            $('#password-strength-status').html("Strong");
        }
        else {
            $('#password-strength-status').removeClass();
            $('#password-strength-status').addClass('medium-password');
            $('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
            $('#password_new').val('');
        }
    }
}
</script>
@endsection