@extends('dashboard-layout.master')
@section('content')


  <div class="container" style="background:white;">

    <div class="margin" style="margin-top: 100px;"></div>

    <form method="post" enctype="multipart/form-data" autocomplete="off" id="editprofile-form" action="{{ route('update_profile') }}">
    @csrf
      <div class="row d-flex m-1 formrow">

        <div class="col-md-12">

          <div class="row">


            <div class="col-md-12 d-flex flex-column align-items-center">
    <br><br>

              <div class="avatar-upload">

                <div class="avatar-edit">
                  <input type='file' name="pic" id="imageUpload" accept=".png, .jpg, .jpeg" />
                  <label for="imageUpload"></label>
                </div>

                <div class="avatar-preview customheight">
                  <div id="imagePreview" style="background-image: url(/assets/uploads/{{$user->image}});">
                  </div>
                </div>
              </div>


              <h5 style="margin-top: 12px; color:  #f1363c;">{{$user->name}}</h5>
              <span style="color:#3E396A; font-size: 16px;">Account No: <span>{{$user->iflex_ID}}</span> </span>


              <!--<span style="color:#3E396A;  font-size: 16px;">Balance: <span>200</span> <span>USD</span></span>-->
            </div>

            <div class="col-md-12 mt-4">



           


                <div class="container p-0">

                  <div class="row tophoneform1" id="registerform1">

                    <div class="col-md-6 col-lg-4">
                      <div class="myusernamediv">
                        <input onkeydown="return alphaOnly(event);" value="{{$user->name}}" type="text" name="name" id="Cfname"
                          class="form-control rounded rounded-3 py-2 username Cfname ">
                        <span class="idspan1 input-valid">Name</span>
                        <label class="hide" id="CnameError">Please Fill this Field</label>
                      </div>
                    </div>


                    <!--<div class="col-md-6 col-lg-4">-->
                    <!--  <div class="myusernamediv">-->
                    <!--    <input onkeydown="return alphaOnly(event);" type="text" name="" id="CRlname"-->
                    <!--      class="form-control rounded rounded-3 py-2 username CRlname">-->
                    <!--    <span class="idspan input-valid">Last Name</span>-->
                    <!--    <label class="hide" id="ClnameError">Please Fill this Field</label>-->
                    <!--  </div>-->
                    <!--</div>-->




                    <div class="col-md-6 col-lg-4">
                      <div class="myusernamediv">
                        <input type="text" name="email" value="{{$user->email}}" id="CEmail"
                          class="form-control rounded rounded-3 py-2 username CRmail">
                        <span class="idspan input-valid">Email</span>
                        <label class="hide" id="CemailError">Please enter valid Email</label>
                      </div>
                    </div>


                    <div class="col-md-6 col-lg-4">

                      <div class="countrypicker" style="margin-bottom: 20px;">
                        <select class="countries1 form-control border border-1" name="country" id="country1"
                            data-live-search="true">

                          <option value="{{$user->country}}">{{$user->country}}</option>
                        </select>
                        <label class="hide" id="CcountryError">Please Fill this Field</label>
                      </div>
                    </div>



                    <div class="col-md-6 col-lg-4">


                      <div class="selectState" style="margin-bottom: 20px;">
                        <select class="states1  form-control border border-1" name="state" id="state1"
                            data-live-search="true">

                         <option value="{{$user->state}}">{{$user->state}}</option>
                        </select>
                        <label class="hide" id="CstateError">Please Fill this Field</label>
                      </div>

                    </div>


                    <div class="col-md-6 col-lg-4">


                      <div class="selectCity" style="margin-bottom: 20px;">
                        <select class="cities1  form-control border border-1" name="city" id="city1"
                            data-live-search="true">

                          <option value="{{$user->city}}">{{$user->city}}</option>
                        </select>
                        <label class="hide" id="CcityError">Please FIll this Field</label>
                      </div>
                    </div>





                    <div class="col-md-6 col-lg-4 position-relative">

                    

                      <div class="myusernamediv">
                        <input type="password" name="password" id="Cconfirmpassword"
                          class="form-control rounded rounded-3 py-2 username Cpass ">
                        <span class="idspan">Please Enter Password</span>
                        <label class="hide" id="CcpemptyError">Please FIll this Field</label>
                      </div>

                      <div class="Ceyeicon">

                        <i style="font-size: 20px;" class="fi-rs-eye text-muted Cshowpassword hide"></i>
                        <i style="font-size: 20px;" class="fi-rs-eye-crossed text-muted Chidepassword"></i>

                        <i class=""></i>

                      </div>
                    </div>




                    <div class="col-md-6 justify-content-center d-flex justify-content-sm-start mb-4">

                      <a class="mb-3 text-danger" href="/changephone" style="cursor:pointer; text-decoration:underline; font-size:14px !important;" >Edit Phone Number</a>
                     
                    </div>

                    <div class="col-md-6 justify-content-center d-flex justify-content-sm-end mb-4">

                      <a class="btn btn-primary customregbtn mb-3 ancorcolor" id="EditProfile">Submit</a>
                     
                    </div>
                    
                    

                  </div>







                </div>

         



            </div>


          </div>

        </div>
     </form>
    
  </div>
  
  </div>




  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
          $('#imagePreview').hide();
          $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }



    $("#imageUpload").change(function () {
      readURL(this);
    });
  </script>


  <script>
    $(document).ready(function () {




      $("input").on("keyup", function () {

        if ($(this).val() != "") {
          $(this).siblings("span").addClass("input-valid");
          $(this).siblings("label").slideUp();

        } else {
          $(this).siblings("span").removeClass("input-valid");
          $(this).siblings("label").slideDown();

        }
      })


      function isEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
      }

      function alphaOnly(event) {
        var key = event.keyCode;
        return ((key >= 65 && key <= 90) || key == 8 || key == 32);
      };





      $(".Chidepassword").click(function () {
        $(".Chidepassword").addClass('hide')
        $(".Cshowpassword").removeClass('hide')
        $('.Cpass').attr({
          type: "text"
        });


      })



      $(".Cshowpassword").click(function () {

        $(".Cshowpassword").addClass('hide')
        $(".Chidepassword").removeClass('hide')
        $('.Cpass').attr({
          type: "password"
        });
      })



      $("#EditProfile").click(function () {


        var status = true;

        if ($(".Cfname").val() == "") {
          $("#CnameError").slideDown();
          status = false;

        } else {
          $("#CnameError").slideUp();

        }

        if ($(".CRlname").val() == "") {
          $("#ClnameError").slideDown();
          status = false;

        } else {
          $("#ClnameError").slideUp();
        }

        if ($(".CRmail").val() == "") {
          $("#CemailError").slideDown();
          status = false;

        } else {

          var mail = $("#CEmail").val();

          if (isEmail(mail)) {
            $("#CemailError").slideUp();

          } else {
            $("#CemailError").slideDown();
            status = false;

          }
        }

        if ($("#country1").val() == "null") {
          $("#CcountryError").slideDown();
          status = false;

        } else {
          $("#CcountryError").slideUp();
        }



        if ($("#state1").val() == "null") {
          $("#CstateError").slideDown();
          status = false;

        } else {
          $("#CstateError").slideUp();
        }

    
        if ($("#city1").val() == "null") {
          $("#CcityError").slideDown();
          status = false;

        } else {
          $("#CcityError").slideUp();
        }



        if ($("#Cconfirmpassword").val() == "") {
            $("#CcpemptyError").text("Please fill this field");
          $("#CcpemptyError").slideDown();
          status = false;

        } else {
          $("#CcpemptyError").slideUp();

        }

        if (status) {
          $("#EditProfile").text("Wait...");
          var pass=$("#Cconfirmpassword").val();
          $(document).ready(function() {

          $.ajax({
              url: '/checkpassword',
              type: 'get',
              data: {
                password: pass
                    },
              success: function(data) {
                 
                  if(data=="0"){
                      $("#CcpemptyError").text("Wrong Password");
                      $("#CcpemptyError").slideDown();
                      $("#EditProfile").text("Submit");
                      
                      
                  }else if(data=="1"){
                      
                      document.getElementById("editprofile-form").submit();      
                     
                  }
                
                    }
                });
            });
          
          
        }


      })
    })
  </script>
</body>

</html>




<script type="text/javascript">
function ajaxCall() {
    this.send = function(data, url, method, success, type) {
        type = type||'json';
        var successRes = function(data) {
            success(data);
        }

        var errorRes = function(e) {
            console.log(e);
            //alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
            //jQuery('#loader').modal('hide');
        }
        jQuery.ajax({
            url: url,
            type: method,
            data: data,
            success: successRes,
            error: errorRes,
            dataType: type,
            timeout: 60000
        });

    }

}

function locationInfo() {
    var rootUrl = "//geodata.solutions/api/api.php";
    //set default values
    var username = 'demo';
    var ordering = 'name';
    //now check for set values
    var addParams = '';
    if(jQuery("#gds_appid").length > 0) {
        addParams += '&appid=' + jQuery("#gds_appid").val();
    }
    if(jQuery("#gds_hash").length > 0) {
        addParams += '&hash=' + jQuery("#gds_hash").val();
    }

    var call = new ajaxCall();

    this.confCity = function(id) {
     //   console.log(id);
     //   console.log('started');
        var url = rootUrl+'?type=confCity&countryId='+ jQuery('#country1 option:selected').attr('country1') +'&stateId=' + jQuery('#state1 option:selected').attr('state1') + '&cityId=' + id;
        var method = "post";
        var data = {};
        call.send(data, url, method, function(data) {
            if(data){
                //    alert(data);
            }
            else{
                //   alert('No data');
            }
        });
    };


    this.getCities = function(id) {
        jQuery(".cities1 option:gt(0)").remove();
        //get additional fields
        var stateClasses = jQuery('#city1').attr('class');

        var cC = stateClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }
        var url = rootUrl+'?type=getCities&countryId='+ jQuery('#country1 option:selected').attr('countryId') +'&stateId=' + id + addParams + addClasses;
        var method = "post";
        var data = {};
        jQuery('.cities1').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.cities1').find("option:eq(0)").html("Select City");
            jQuery('.cities1').find("option:eq(0)").val("null");
            if(data.tp == 1){
                if(data.hits > 1000)
                {
                    //alert('Free usage far exceeded. Please subscribe at geodata.solutions.');
                    console.log('Daily geodata.solutions request limit exceeded count:' + data.hits + ' of 1000');
                }
                else
                {
                    console.log('Daily geodata.solutions request count:' + data.hits + ' of 1000')
                }

                var listlen = Object.keys(data['result']).length;

                if(listlen > 0)
                {
                    jQuery.each(data['result'], function(key, val) {

                        var option = jQuery('<option />');
                        option.attr('value', val).text(val);
                        jQuery('.cities1').append(option);
                    });
                }
                else
                {
                    var usestate = jQuery('#state1 option:selected').val();
                    var option = jQuery('<option />');
                    option.attr('value', usestate).text(usestate);
                    option.attr('selected', 'selected');
                    jQuery('.cities1').append(option);
                }

                jQuery(".cities1").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };

    this.getStates = function(id) {
        jQuery(".states1 option:gt(0)").remove();
        jQuery(".cities1 option:gt(0)").remove();
        //get additional fields
        var stateClasses = jQuery('#state1').attr('class');

        var cC = stateClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }
        var url = rootUrl+'?type=getStates&countryId=' + id + addParams  + addClasses;
        var method = "post";
        var data = {};
        jQuery('.states1').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.states1').find("option:eq(0)").html("Select State");
            jQuery('.states1').find("option:eq(0)").val("null");
            jQuery('.cities1').find("option:eq(0)").html("Select City");
            jQuery('.cities1').find("option:eq(0)").val("null");
            
            if(data.tp == 1){
                if(data.hits > 1000)
                {
                    //alert('Free usage far exceeded. Please subscribe at geodata.solutions.');
                    console.log('Daily geodata.solutions request limit exceeded:' + data.hits + ' of 1000');
                }
                else
                {
                    console.log('Daily geodata.solutions request count:' + data.hits + ' of 1000')
                }
                jQuery.each(data['result'], function(key, val) {
                    var option = jQuery('<option />');
                    option.attr('value', val).text(val);
                    option.attr('stateid', key);
                    jQuery('.states1').append(option);
                });
                jQuery(".states1").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };

    this.getCountries = function() {
        //get additional fields
        var countryClasses = jQuery('#country1').attr('class');

        var cC = countryClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }

        var presel = false;
        var iip = 'N';
        jQuery.each(cC, function( index, value ) {
            if (value.match("^presel-")) {
                presel = value.substring(7);

            }
            if(value.match("^presel-byi"))
            {
                var iip = 'Y';
            }
        });


        var url = rootUrl+'?type=getCountries' + addParams + addClasses;
        var method = "post";
        var data = {};
        jQuery('.countries1').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.countries1').find("option:eq(0)").html("{{$user->country}}");

            

            if(data.tp == 1){
                if(data.hits > 1000)
                {
                    //alert('Free usage far exceeded. Please subscribe at geodata.solutions.');
                    console.log('Daily geodata.solutions request limit exceeded:' + data.hits + ' of 1000');
                }
                else
                {
                    console.log('Daily geodata.solutions request count:' + data.hits + ' of 1000')
                }
                if(presel == 'byip')
                {
                    presel = data['presel'];
                    console.log('2 presel is set as ' + presel);
                }


                if(jQuery.inArray("group-continents",cC) > -1)
                {
                    var $select = jQuery('.countries1');
                    console.log(data['result']);
                    jQuery.each(data['result'], function(i, optgroups) {
                        var $optgroup = jQuery("<optgroup>", {label: i});
                        if(optgroups.length > 0)
                        {
                            $optgroup.appendTo($select);
                        }

                        jQuery.each(optgroups, function(groupName, options) {
                            var coption = jQuery('<option />');
                            coption.attr('value', options.name).text(options.name);
                            coption.attr('countryid', options.id);
                            if(presel) {
                                if (presel.toUpperCase() == options.id) {
                                    coption.attr('selected', 'selected');
                                }
                            }
                            coption.appendTo($optgroup);
                        });
                    });
                }
                else
                {
                    jQuery.each(data['result'], function(key, val) {
                        var option = jQuery('<option />');
                        option.attr('value', val).text(val);
                        option.attr('countryid', key);
                        if(presel)
                        {
                            if(presel.toUpperCase() ==  key)
                            {
                                option.attr('selected', 'selected');
                            }
                        }
                        jQuery('.countries1').append(option);
                    });
                }
                if(presel)
                {
                    jQuery('.countries1').trigger('change');
                }
                // jQuery(".countries1").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };

}

jQuery(function() {
    var loc = new locationInfo();
    loc.getCountries();
    jQuery(".countries1").on("change", function(ev) {
        var countryId = jQuery("option:selected", this).attr('countryid');
        if(countryId != ''){
            loc.getStates(countryId);
        }
        else{
            jQuery(".states1 option:gt(0)").remove();
        }
    });
    jQuery(".states1").on("change", function(ev) {
        var stateId = jQuery("option:selected", this).attr('stateid');
        if(stateId != ''){
            loc.getCities(stateId);
        }
        else{
            jQuery(".cities1 option:gt(0)").remove();
        }
    });

    jQuery(".cities1").on("change", function(ev) {
        var cityId = jQuery("option:selected", this).val();
        if(cityId != ''){
            loc.confCity(cityId);
        }
    });
});



</script>
@endsection