@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <meta name="csrf-token" content="{!! csrf_token() !!}">
            <div class="row pt-4">
              <div class="col-md-12">
                <div class="title-section">
                  <p>Settings</p>
                </div>
              </div>
            </div>

            <div class="row pt-sm-4 pt-0">
                <div class="col-md-8">
                    <div class="title-section">
                      <p>Change password</p>
                    </div>
                    <div class="zone-box">
                        <h5 class="heading mb-3">You can update your password</h5>
                        <div class="row">
                            <div class="col-md-12">
                                <form  id="update_user_password" method="post" autocomplete="off" novalidate>
                                    @csrf
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">Old password</label>
                                        <input name="oldPassword" class="form-control" placeholder="" type="password" value="{{old('oldPassword')}}">
                                        <span id="oldPassword" style="display: none; color: red;"> </span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group custom-form-group" style="position: relative;">
                                        <label class="form-label" for="customer">New password</label>
                                        <input name="newPassword" id="newPass" type="password" class="form-control" placeholder="" type="text" value="{{old('newPassword')}}">
                                         <i class="fa fa-eye f-20 d-none" aria-hidden="true" style="cursor: pointer;position: absolute;right: 13px;top: 33px;" id="open_eye_id"
                                                            onclick="newPasswordShowHide(this)"></i>
                                            <i class="fa fa-eye-slash f-20" aria-hidden="true" style="cursor: pointer;position: absolute;right: 13px;top: 33px;" id="close_eye_id"
                                                            onclick="newPasswordShowHide(this)"></i>
                                        <span id="newPassword" style="display: none; color: red;"> </span> 
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group custom-form-group" style="position: relative;">
                                        <label class="form-label" for="customer">Confirm password</label>
                                        <input name="confirmPassword" id="confirmPass" type="password" class="form-control" placeholder="" type="text" value="{{old('confirmPassword')}}">
                                        <!-- <a href="#"><img src="{{asset('assets/images/eyeClosed.svg')}}" class="password-eye" alt="" style="cursor: pointer;position: absolute;right: 13px;top: 33px;"></a> -->
                                        <i class="fa fa-eye f-20 d-none" aria-hidden="true" style="cursor: pointer;position: absolute;right: 13px;top: 33px;" id="open_eye_id1"
                                                            onclick="passwordShowHide(this)"></i>
                                            <i class="fa fa-eye-slash f-20" aria-hidden="true" style="cursor: pointer;position: absolute;right: 13px;top: 33px;" id="close_eye_id1"
                                                            onclick="passwordShowHide(this)"></i>

                                            
                                        <span id="confirmPassword" style="display: none; color: red;">
                                        </span> 
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group custom-form-group">
                                      <label class="form-label" for="customer"></label>
                                      <button type="submit" class="btn btn-danger btn-block">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-md-8">
                    <div class="title-section">
                      <p>Change address</p>
                    </div>
        
                    <div class="zone-box">
                        <form  id="update_user_address" method="post" autocomplete="off" novalidate>
                            @csrf
                            <h5 class="heading mb-3">Enter new address to update</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">Address line1</label>
                                        <input name="address1" class="form-control" placeholder="" type="text" value="{{old('address1')}}"> 
                                        <span id="address1" style="display: none; color: red;"> </span> 
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group custom-form-group">

                                        <label class="form-label" for="customer">Country</label>
                                        <select class="form-control" name="country_id">
                                            <option value="">Select Country</option>
                                            @foreach($listData['countries'] as $country)
                                                <option value="{{$country['id']}}" {{ old('country_id') == $country['id'] ? 'selected': ''}}>{{$country['name']}}</option>
                                            @endforeach
                                        </select>
                                        <span id="country_id" style="display: none; color: red;"> </span> 

                                        <label class="form-label" for="customer">State</label>
                                        <select class="form-control" name="state_id">
                                            <option value="">Select State</option>
                                            @foreach($listData['state'] as $states)
                                                <option value="{{$states['id']}}" {{ old('state_id') == $states['id'] ? 'selected': ''}}>{{$states['name']}}</option>
                                            @endforeach
                                        </select>
                                        <span id="state_id" style="display: none; color: red;"> </span> 
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">Address line 2</label>
                                        <input name="address2" class="form-control" placeholder="" type="text" value="">
                                        <span id="address2" style="display: none; color: red;"> </span>  
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">City</label>
                                        <select id="city_id" class="form-control"  autocomplete="off" name="city_id" required>
                                            <option value="">Select City</option>
                                        </select>
                                        <span id="city" style="display: none; color: red;"> </span> 
                                    <label class="form-label" for="customer">State</label>
                                    <select class="form-control" name="state_id">
                                        <option value="">Select State</option>
                                        @foreach($listData['state'] as $states)
                                            <option value="{{$states['id']}}" {{ old('state_id') == $states['id'] ? 'selected': ''}}>{{$states['name']}}</option>
                                        @endforeach
                                    </select>
                                    <span id="state_id" style="display: none; color: red;">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="customer">Zip</label>
                                    <input name="pincode" class="form-control" placeholder="" type="text" value="">
                                    <span id="pincode" style="display: none; color: red;"> </span>  
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="customer">Country</label>
                                    <select class="form-control" name="country_id">
                                        <option value="">Select Country</option>
                                        @foreach($listData['countries'] as $country)
                                            <option value="{{$country['id']}}" {{ old('country_id') == $country['id'] ? 'selected': ''}}>{{$country['name']}}</option>
                                        @endforeach
                                    </select>
                                    <span id="country_id" style="display: none; color: red;"> </span>  
                                    <label class="form-label" for="customer">City</label>
                                    <select id="city_id" class="form-control"  autocomplete="off" name="city_id" required>
                                        <option value="">Select City</option>
                                    </select>
                                    <span id="city" style="display: none; color: red;"> </span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group custom-form-group mt-3">
                                  <button type="submit" class="btn btn-danger btn-block">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div> -->
            </div>
        </div>

        <!-- <div class="row pt-4 pt-sm-5">
            <div class="col-md-4">
                <div class="title-section">
                  <p>Update contact details</p>
                </div>
                <div class="zone-box">
                    <form  id="update_user_contact" method="post" autocomplete="off" novalidate>
                        @csrf
                        <h5 class="heading mb-3">Change contact number</h5>
                        <div class="row">
                            <div class="col-md-12">
                                @if(!$listData['mobile_number'])
                                    <input name="type" class="with-gap" name="group1" type="radio" id="number" checked value="added">
                                    <label for="number">Add new number</label> <br>
                                    <input name="type" class="with-gap" name="group1" type="radio" id="number1" value="edited">
                                    <label for="number1">Update old number</label>
                                @else
                                    <label for="number1">Update old number</label>
                                @endif
                            </div>

                            <div class="col-md-12">
                                <div class="form-group custom-form-group mt-2">
                                    <label class="form-label" for="customer">Add phone number 1</label>
                                    <input name ="mobile_number" class="form-control" placeholder="" type="text" value="{{$listData['mobile_number']}}">
                                    <span id="mobileNumber" style="display: none; color: red;"> </span> 
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group custom-form-group">
                                    <label class="form-label" for="customer">Add phone number 2</label>
                                    <input name="alternate_mobile_number" class="form-control" placeholder="" type="text" value="{{$listData['alternate_mobile_number']}}"> 
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group custom-form-group mt-2">
                                    <button type="submit" class="btn btn-danger btn-block">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> -->
</section>

<script type="text/javascript">


    function passwordShowHide(e) {

            if (e.getAttribute('id') == 'close_eye_id1') {
                $('#close_eye_id1').addClass('d-none');
                $('#open_eye_id1').removeClass('d-none');
                $('#confirmPass').prop("type", "text");
            } else {
                $('#close_eye_id1').removeClass('d-none');
                $('#open_eye_id1').addClass('d-none');
                $('#confirmPass').prop("type", "password");
            }

        }

        function newPasswordShowHide(e) {

            if (e.getAttribute('id') == 'close_eye_id') {
                $('#close_eye_id').addClass('d-none');
                $('#open_eye_id').removeClass('d-none');
                $('#newPass').prop("type", "text");
            } else {
                $('#close_eye_id').removeClass('d-none');
                $('#open_eye_id').addClass('d-none');
                $('#newPass').prop("type", "password");
            }

        }

    document.addEventListener('DOMContentLoaded', function() {
            const passwordInput = document.getElementById('newPass');
            const toggleButton = document.getElementById('togglePassword');

            toggleButton.addEventListener('click', function() {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    toggleButton.textContent = 'Hide Password';
                } else {
                    passwordInput.type = 'password';
                    toggleButton.textContent = 'Show Password';
                }
            });
        });

$(document).ready(function(){


    // togglePassword.addEventListener('click', function (e) {
    // // toggle the type attribute
    // const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    // password.setAttribute('type', type);
    // // toggle the eye / eye slash icon
    // this.classList.toggle('bi-eye');
//});

//Update User Password

$("#update_user_password").on('submit',function(e)
{
  e.preventDefault();

  var form = $(this);

   swal({
                icon: 'warning',
                title: 'Are you sure?',
                text: "Want to update password?",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, proceed!',
                closeOnConfirm: true,
                closeOnCancel: true
            },function(isConfirm){
                console.log(isConfirm);
                if (isConfirm === true){
                      $.ajax({
    method:'POST',
    url:"{{url('settings/update-password')}}",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }, 
    data:form.serialize(),
    success:function(data)
    {  

      if(data.success == true){

        swal({
          title: "Success",
          text: data.message,
          type: "success",

          closeOnConfirm: false,
          showLoaderOnConfirm: true,
        },
        function(){
          window.location.href='{{url("/settings")}}'
        });

      }

    },
    error: function(data){
      var errors = $.parseJSON(data.responseText);

      $.each(errors, function(index, value) {

        if (value.oldPassword) {

          $("#oldPassword").show();
          $("#oldPassword").html(value.oldPassword.toString());

        }else {

          $("#oldPassword").hide();

        }

        if (value.newPassword) {

          $("#newPassword").show();
          $("#newPassword").html(value.newPassword.toString());

        }else {

          $("#newPassword").hide();

        }

        if (value.confirmPassword) {

          $("#confirmPassword").show();
          $("#confirmPassword").html(value.confirmPassword.toString());

        }else {
         $("#confirmPassword").hide();
       }

     });

    }
  });

                }
                //  else if(isConfirm === false) {
                //     e.preventDefault();
                // }
            })

});

//Update User Address

$("#update_user_address").on('submit',function(e)
{
  e.preventDefault();

  var form = $(this);

  $.ajax({
    method:'POST',
    url:"{{url('settings/change-address')}}",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }, 
    data:form.serialize(),
    success:function(data)
    {  

      if(data.success == true){

        swal({
          title: "Success",
          text: data.message,
          type: "success",

          closeOnConfirm: false,
          showLoaderOnConfirm: true,
        },
        function(){
          window.location.href='{{url("/settings")}}'
        });

      }

    },
    error: function(data){
      var errors = $.parseJSON(data.responseText);

      $.each(errors, function(index, value) {

        if (value.address1) {

          $("#address1").show();
          $("#address1").html(value.address1.toString());

        }else {

          $("#address1").hide();

        }

        if (value.address2) {

          $("#address2").show();
          $("#address2").html(value.address2.toString());

        }else {

          $("#address2").hide();

        }

        if (value.country_id) {

          $("#country_id").show();
          $("#country_id").html(value.country_id.toString());

        }else {

          $("#country_id").hide();

        }

        if (value.city_id) {

          $("#city").show();
          $("#city").html(value.city_id.toString());

        }else {

          $("#city").hide();

        } 

        if (value.state_id) {

          $("#state_id").show();
          $("#state_id").html(value.state_id.toString());

        }else {

          $("#state_id").hide();

        } 

        if (value.pincode) {

          $("#pincode").show();
          $("#pincode").html(value.pincode.toString());

        }else {

          $("#pincode").hide();

        }

      });

    }
  });
});


//Update user contact

$("#update_user_contact").on('submit',function(e)
{
  e.preventDefault();

  var form = $(this);

  $.ajax({
    method:'POST',
    url:"{{url('settings/update-contact')}}",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }, 
    data:form.serialize(),
    success:function(data)
    {  

      if(data.success == true){

        swal({
          title: "Success",
          text: data.message,
          type: "success",

          closeOnConfirm: false,
          showLoaderOnConfirm: true,
        },
        function(){
          window.location.href='{{url("/settings")}}'
        });

      }

    },
    error: function(data){
      var errors = $.parseJSON(data.responseText);

      $.each(errors, function(index, value) {

        if (value.mobile_number) {

          $("#mobileNumber").show();
          $("#mobileNumber").html(value.mobile_number.toString());

        }else {

          $("#mobileNumber").hide();

        }

     });

    }
  });
});



jQuery('select[name="state_id"]').on('change',function(){

            $('#custum-loader').removeClass('hidden');

             var state_id = jQuery(this).val();

                 if(state_id)
                 {
                  jQuery.ajax({
                   url : "{{route('cities-list')}}",
                   type : "POST",
                   data: {  _token: "{{csrf_token()}}",state_id:state_id },
                     //dataType : "json",
                     success:function(data)
                     {
                        jQuery('select[name="city_id"]').empty();
                        localStorage.setItem("city_id", JSON.stringify(data));
                         $('select[name="city_id"]').append('<option value="'+ '' +'">'+ 'Select City' +'</option>');
                        jQuery.each(data.cities, function(key,value){

                         $('select[name="city_id"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                     });

                      $('#custum-loader').addClass('hidden');
                    }
                });
             
             
          }
      });

});


</script>

@endsection