@extends('layouts.auth')

@section('title') Edit Profile @endsection


@section('content')

@push('page_style')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush

<section class="changedPassword userProfile_">
    <div class="container">
        <div class="row">
            <h6 class="pageSubhead_">
                Home >>
                <span class="activepageSubhead_">Profile</span>
                @if(auth()->user()->isCompanySeller())
                @if (empty($userObject->checkRequestStatus()))
                  
                 <a class="becomeverify" data-bs-toggle="modal" href="#verificationModal"><img src="{{asset('frontend/img/verifyedit.png')}}"><span>Become a Verified
                    Seller</span></a>
                
                 @else 
                 <a class="becomeverify"><img src="{{asset('frontend/img/verifyedit.png')}}"><span> {{$userObject->checkRequestStatus()}}
                   </span></a>
                
                @endif
                @endif
                
                 
               
            </h6>
        </div>
        <div class="userProfileContaniners_">
            <h3 class="loginSubheading_">Edit Profile</h3>
           

            <div class="row">
                <div class="form-group edit_profileimg mb-2 col-sm-12 col-md-12 col-lg-5 col-xl-3">
                    <a class="profile_img" href="javascript:void(0);">
                        <img src="{{ !empty($userObject->profile_image) ? $userObject->profile_image : asset('frontend/img/editProfile.svg') }}" alt="profile" id="profileImagePreview" class="img-fluid"></a>
                    <div class="d-flex align-items-center profile_btn">
                        <form  method="POST" id="upload-profile" action="{{  route('user.uploadProfile') }}" enctype="multipart/form-data">
                            @csrf

                        <input type="file" id="file" name="file" class="form-control inputfile custom-file-input d-none" onchange="uploadFile(this)" >
 
                        <label for="file">
                        <span id="file-name" class="file-box d-none">Choose File</span>
                        @if ($errors->has('file'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('file') }}</strong>
                        </span>
                    @endif
                    </form>

                        <span class="file-button upload">
                        Upload
                        </span>
                        </label>
                        <a href="{{route('user.removeProfile')}}" class="discard">Remove</a>
                    </div>
                </div>

              
                <div class="mb-2 col-sm-12  col-md-12 col-lg-7 col-xl-9">
                    <form class="form_Loginhorizontal" role="form" method="POST" action="{{  route('user.updateBuyerProfile') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <h5 class="profileSubheading_">Basic Info</h5>
                    <p style="color: #667085; margin-bottom: 1rem;"><span class="text-danger asteric-sign">&#42;</span> indicates to required or mandatory field</p>
                            <div class="form-group mb-4 col-md-6">
                                <label class="loginLabel_txt" for="inputFirstName">First Name<span class="text-danger asteric-sign">&#42;</span></label>
                                <input class="form-control {{ $errors->has('first_name') ? ' is-invalid' : '' }}" type="text" 
                                name="first_name" autocomplete="current-firstName" value="{{ (old('first_name')) ? (old('first_name')) : ($userObject->first_name) }}">
                                @if ($errors->has('first_name'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('first_name') }}</strong>
                                </span>
                            @endif
                            
                            </div>

                             
                            <div class="form-group mb-4 col-md-6">
                                <label class="loginLabel_txt" for="inputLastName">Last Name<span class="text-danger asteric-sign">&#42;</span></label>
                                <input id="inputLastName" type="text" class="form-control {{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" value="{{ (old('last_name')) ? (old('last_name')) : ($userObject->last_name) }}" placeholder="Last Name">
                                @if ($errors->has('last_name'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('last_name') }}</strong>
                                </span>
                            @endif
                            </div>

                            
                            <div class="form-group mb-4 col-md-6">
                                <label class="loginLabel_txt" for="inputEmail">Email<span class="text-danger asteric-sign">&#42;</span></label>
                                <input id="inputEmail" type="email" class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ (old('email')) ? (old('email')) : ($userObject->email) }}" placeholder="Enter Email">
                                @if ($errors->has('email'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                               @endif
                            </div>

                            <div class="form-group mb-4 col-md-6">

                                    <label class="loginLabel_txt" for="phone_number">Phone Number <span class="text-danger asteric-sign">&#42;</span></label><br>
                                    <input type="hidden" name="phone_code" id="phone_code" value="{{ (old('phone_code')) ? (old('phone_code')) : ($userObject->phone_code) }}"/>
                                    <input type="hidden" name="iso_code" id="iso_code" value="{{ (old('iso_code')) ? (old('iso_code')) : ($userObject->iso_code) }}"/>

                                    <input id="phone_number" type="text" class="form-control {{ $errors->has('phone_number') || $errors->has('phone_code') || $errors->has('iso_code') ? ' is-invalid' : '' }}" name="phone_number" value="{{ (old('phone_number')) ? (old('phone_number')) : ($userObject->phone_number) }}">
                                    @if ($errors->has('phone_number'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('phone_number') }}</strong>
                                        </span>
                                    @elseif($errors->has('phone_code'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('phone_code') }}</strong>
                                        </span>
                                    @elseif($errors->has('iso_code'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('iso_code') }}</strong>
                                        </span>
                                    @endif

                                
                            </div>
                          
                            <div class="form-group mb-4 col-md-6">
                                    <label class="loginLabel_txt" for="country">Country <span class="text-danger asteric-sign">&#42;</span></label>
                                    <select class="form-control {{ $errors->has('country_id') ? ' is-invalid' : '' }}" id="country" name="country_id">
                                        <option value="">Select Country</option>
                                        @foreach(getAllCountry() as $key => $countryObj) 
                                            <option value="{{$countryObj->id}}" {{$userObject->country_id == $countryObj->id ? "selected": ""}}>{{ $countryObj->name }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('country_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('country_id') }}</strong>
                                        </span>
                                    @endif
                            </div>
                        </div>
                        <div class="row">
                            <h5 class="profileSubheading_">Basic Info</h5>
                           @if (auth()->user()->isCompanySeller())
                            <div class="form-group mb-4 col-md-12">
                                <label class="loginLabel_txt" for="company_name">Company</label>
                                <input id="company_name" type="text" class="form-control {{ $errors->has('company_name') ? ' is-invalid' : '' }}" name="company_name" value="{{ (old('company_name')) ? (old('company_name')) : ($userObject->company_name) }}" placeholder="Company Name">
                                @if ($errors->has('company_name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('company_name') }}</strong>
                                    </span>
                                @endif
                            
                                </div> 
                           @endif
                           
                      

                            <div class="form-group mb-4 col-md-6">
                                    <label class="loginLabel_txt" for="city">City </label>
                                    <select class="form-control {{ $errors->has('city_id') ? ' is-invalid' : '' }}" id="city-dropdown" name="city_id">
                                        <option value="">-- Select City --</option>
                                    </select>
                                    @if ($errors->has('city_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('city_id') }}</strong>
                                        </span>
                                    @endif
                                    </div>
                         

                            <div class="form-group mb-4 col-md-6">
                                
                                    <label class="loginLabel_txt" for="post_code">Post Code</label>
                                    <input id="post_code" type="text" class="form-control {{ $errors->has('post_code') ? ' is-invalid' : '' }}" name="post_code" value="{{ (old('post_code')) ? (old('post_code')) : ($userObject->post_code) }}" placeholder="Post Code">
                                    @if ($errors->has('post_code'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('post_code') }}</strong>
                                        </span>
                                    @endif
                             
                                
                            </div>
                           
                            <div class="form-group mb-4 col-md-12">
                                    <label class="loginLabel_txt" for="address">Address</label>
                                    <input id="address" type="text" class="form-control {{ $errors->has('address') ? ' is-invalid' : '' }}" name="address" value="{{ (old('address')) ? (old('address')) : ($userObject->address) }}" placeholder="Enter Address">
                                    @if ($errors->has('address'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('address') }}</strong>
                                        </span>
                                    @endif
                                
                            </div>
                        </div>
                        <div class="row">
                            <div class="d-flex align-items-center saveProfile_btn">
                                <input type="Submit" class="primary_btn 
language{{getDefaultTargetLanguage()}}" value="Save Changes"/> 
                                <a href="javascript:void(0);" class="userLink_"  onClick="window.location.reload();">Discard</a>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

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

 


  <!----Start Modal become verify seller---->
  <div class="modal modalCustom   fade" id="verificationModal" aria-labelledby="becomeprofileLabel"
  tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
          <div class="modal-header">
              <img src="{{asset('frontend/img/headverify.png')}}" alt="cryptoC-icon" class="modal_head_titleIcon">
              <div class="modal_head_title">
                  <p>Become a Verified Seller</p>
                  <span>Please fill all the details below to become the verified seller. </span>
              </div>
              <button type="button" class="btn-close" data-bs-dismiss="modal"
                  aria-label="Close"></button>
          </div>

          <div class="modal-body">
                 <form class="form_Sellerprofile" role="form"  id="verifySellerForm" role="form" method="POST" enctype="multipart/form-data">
@csrf
                  <div class="row">
                       

                      <div class="form-group mb-4 col-md-6">
                        <label class="editLabel_txt" for="inputPassword">Company Owner  <span class="text-danger asteric-sign">&#42;</span></label>
                        <input class="form-control upload_detail"  placeholder="Company Owner"
                            name="owner">
                        <span class="text-danger customError error-text owner_err"></span>
                    </div>
                    <div class="form-group mb-4 col-md-6">
                        <label class="editLabel_txt" for="inputPassword">Phone Number  <span class="text-danger asteric-sign">&#42;</span></label>
                        <input class="form-control upload_detail" placeholder="Phone Number"
                            name="phone_number">
                            <span class="text-danger customError error-text phone_number_err"></span>

                        </div> 
                      <div class="form-group mb-4 col-md-12">
                        <label class="editLabel_txt" for="inputPassword">Company Address  <span class="text-danger asteric-sign">&#42;</span></label>
                        <input class="form-control upload_detail" placeholder="Compan Address"
                            name="address">
                            <span class="text-danger customError error-text address_err"></span>

                    </div> 
                      <div class="form-group mb-4 col-md-12">
                        <label class="loginLabel_txt" for="inputPassword">Detailed information for
                            Company Activity  <span class="text-danger asteric-sign">&#42;</span></label>
                        <textarea class="form-control upload_detail" placeholder="Type here"
                            name="activity" rows="4" cols="50"></textarea>
                        <span class="text-danger customError error-text activity_err"></span>
    
                    </div>
                      <div class="form-group mb-4 col-md-12">
                                <label class="editLabel_txt" for="inputPassword">Upload Company BR  <span class="text-danger asteric-sign">&#42;</span></label>
                                <input type="file" id="file_br" class="form-control d-none"
                                onchange="uploadFile(this)" name="br_file">
                        <label class="uploadFile" for="file_br">
                            <div id="afterUpload">  
                                <span id="file-name" class="file-box d-none">Choose File</span>
                                <img src="{{asset('frontend/img/uploadsel.png')}}" />
                                <p class="uploadcontent">Upload file. Format in jpg, Png, word or pdf up
                                    to 10MB. <span>Browse</span></p>
                            </div>
                        </label>
                      </div>

                      <div class="form-group mb-4 col-md-12">
                          <label class="editLabel_txt" for="inputPassword">Note: </label>
                          <div class="notecontent">
                              <p>The name of the company sending the payment must be the same name as
                                  the profile.
                                  Only company payments are accepted.
                              <p>Payments made by private individuals or ineligible will be returned.
                              </p>
                              </p>
                          </div>
                          <p class="verification">Company verification will be valid for 1 year.</p>
                          </textarea>
                      </div>
                  </div>
              </form>

          </div>
          <div class="modal-footer justify-content-start">
               
              <a class="disable_btn"  id="verifyButton">Verify</a>

              <a href="javascript:void(0);" class="userLink_"  data-bs-dismiss="modal">Discard</a>
            </div>
      </div>
  </div>
</div>
<!----End Modal become verify seller---->


    <!----Start modal Pay and Submit Verify Request-->
    <div class="modal modalCustom fd  fade" id="submitrequest" aria-labelledby="submitrequestLabel"
    tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal_head_title">
                    <p>Pay and Submit Verify Request</p>
                </div>
                <img src="{{asset('frontend/img/paysera.png')}}" class="payseraimg">
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form class="form_verifyrequest" role="form" method="POST" action="">
                    <div class="row">
                        <div class="form-group mb-3 col-md-12">
                            <label class="loginLabel_txt" for="inputPassword">Select Country <span class="astric">*</span></label>
                            <div class="listContainer">
                                <div class="selectBtn_ form-control">
                                    <span class="selectBtnTxt">Germany</span>
                                    <img src="{{asset('frontend/img/downarrow.svg')}}" class="img-fluid">
                                </div>
                                <ul class="listContainerMenus">
                                    <li class="">
                                        Audi
                                    </li>
                                    <li class="">
                                        Tesla
                                    </li>
                                    <li class="">
                                        Ferrari
                                    </li>
                                    <li class="">
                                        Lamborghini
                                    </li>
                                    <li class="">
                                        Mercedes-Benz
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group mb-3 col-md-12">
                            <label class="loginLabel_txt" for="inputPhoneNumber">Select Bank
                            </label>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="cardBoxdetail_bank">
                                        <input type="radio" class="hide-input" id="colorBox"
                                            name="radio-group1">
                                        <label for="colorBox" class="cardBox_">
                                            <img class="bankImage" src="{{asset('frontend/img/bank1.svg')}}">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="cardBoxdetail_bank">
                                        <input type="radio" class="hide-input" id="colorBoxOne"
                                            name="radio-group1">
                                        <label for="colorBoxOne" class="cardBox_">
                                            <img class="bankImage" src="{{asset('frontend/img/bank2.svg')}}">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="cardBoxdetail_bank">
                                        <input type="radio" class="hide-input" id="colorBoxTwo"
                                            name="radio-group1">
                                        <label for="colorBoxTwo" class="cardBox_">
                                            <img class="bankImage" src="{{asset('frontend/img/bank3.svg')}}">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3 col-md-12">
                            <div class="listContainer">
                                <div class="selectBtn_ form-control">
                                    <span class="selectBtnTxt">Other bank</span>
                                    <img src="{{asset('frontend/img/downarrow.svg')}}" class="img-fluid">
                                </div>
                                <ul class="listContainerMenus">
                                    <li class="">
                                        Audi
                                    </li>
                                    <li class="">
                                        Tesla
                                    </li>
                                    <li class="">
                                        Ferrari
                                    </li>
                                    <li class="">
                                        Lamborghini
                                    </li>
                                    <li class="">
                                        Mercedes-Benz
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group mb-3 col-md-12">
                            <div class="company_detail-top">
                                <strong>Marchent Name (Company)</strong>
                                <span>Ambayo Limited</span>
                            </div>
                            <div class="company_details">
                                <small>Payment To</small>
                                <span>Bulgaria/LEV <br> IBAN: BG1234567899990 <br> SWITT:1234567890</span>
                            </div>
                            <hr>
                        </div>
                        <div class="form-group mb-3 col-md-12">
                            <p class="company_detail">
                                <span>{{__("words."Verified Seller"  1 year   10 usd")}}</span>
                                <strong>$10.00</strong>
                            </p>
                        </div>
                        <div class="form-group refrence_  col-md-12">
                            <p class="company_detail">
                                <span>Payment Reference Number</span>
                                <span>VS102345671528</span>
                            </p>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="primary_btn" data-bs-toggle="modal"
                data-bs-target="#sucesspopup">Ok</button>
            </div>
        </div>
    </div>
</div>
<!----End modal Pay and Submit Verify Request-->

 <!----Start successful popup-->
 <div class="modal modalCustom-sucess fade" id="sucesspopup" aria-labelledby="exampleModalToggleLabel">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            
                <div class="modal-body">
                    <img src="{{asset('frontend/img/sucessthumb.png')}}" class="img-fluid">
                    <p>Your Verified Seller Request
                        Submitted Successfully</p>
                    <button class="primary_btn" id="block-button" data-bs-dismiss="modal">
                      Ok
                    </button>
                    <a href="#" class="cancel-model" data-bs-dismiss="modal"> 
                        <img src="{{asset('frontend/img/Cancel.svg')}}" class="img-fluid"></a>
                </div>
        </div>
    </div>
</div>
<!----End sucessful popup-->

@push('page_script')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <!-- bs-custom-file-input -->
    <script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
    <script src="{{ asset('js/pages/users/verify.js') }}"></script>

   <script>

        var isoCode = ($("#iso_code").val()) ? ($("#iso_code").val()) : ('US');
        //  phone 1 input
        var phoneInput = document.querySelector("#phone_number");
        var phoneInstance = window.intlTelInput(phoneInput, {
            autoPlaceholder: "off",
            separateDialCode: true,
            initialCountry: isoCode
            // utilsScript: '{{URL::asset("frontend/build/js/utils.js")}}',
        });


        $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
        $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
        phoneInput.addEventListener("countrychange",function() {
            $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
            $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
        });

        $(function () {
            bsCustomFileInput.init();
        });

        $(document).on('change', "#file", function(event){
           var extArr = ['jpeg','jpg','png','gif'];
            var ext = $('#file').val().split('.').pop().toLowerCase();

          if($.inArray(ext,extArr) != '-1'){
            if(this.files[0]){
                let fileSize = this.files[0].size;
                let fileSizeInKb = fileSize / 1024;
                let fileSizeLimit = 500; // In KB

                if (fileSizeInKb > fileSizeLimit) {
                    $(this).val('');
                    toastr.error("File may not be greater than 500 KB.", 'Error!', {closeButton: true, tapToDismiss: false});
                    $('#profileImagePreview').attr('src', '');
                    $('#profileImagePreview').addClass('d-none');
                    return false;
                } else {
                    let imgSrc = URL.createObjectURL(event.target.files[0]);
                    $('#profileImagePreview').attr('src', imgSrc);
                    $('#profileImagePreview').removeClass('d-none');
                     setInterval(function () {
                         $('#upload-profile').submit();  
                     }, 500); 
                   
                }
            }
            else {
                $(this).val('');
                $('#profileImagePreview').attr('src', '');
                $('#profileImagePreview').addClass('d-none');
            }
          }else{
            alert("Image file should be in jpeg,jpg,png,gif. ");
          }
            
                
        });

   

        $(document).on('change', "#country", function(event){
            var idCountry = this.value;
                $("#state-dropdown").html('');
                $.ajax({
                    url: "{{route('user.fetch-states')}}",
                    type: "POST",
                    data: { 
                        country_id: idCountry, 
                        _token: '{{csrf_token()}}' 
                    }, 
                    dataType: 'json', 
                    success: function (result) { 
                        $('#state-dropdown').html('<option value="">-- Select State --</option>');

                        $.each(result.states, function (key, value) { 
                            $("#state-dropdown").append('<option value="' + value 
                                .id + '">' + value.name + '</option>'); 
                        }); 
                        $('#city-dropdown').html('<option value="">-- Select City --</option>');

                    }

                });

        });

        $(document).on('change', "#state-dropdown", function(event){
            var idState = this.value;

            $("#city-dropdown").html('');

            $.ajax({
                url: "{{route('user.fetch-city')}}",
                type: "POST",
                data: { 
                    state_id: idState, 
                    _token: '{{csrf_token()}}'
                }, 
                dataType: 'json', 
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');

                    }); 
                } 
            });
        });


        
    </script>
@endpush

@endsection