@extends('theme.default')
@section('title')
   My Profile
@endsection

@section('canonical')
   <link rel="canonical" href="https://www.surveybakery.com/profile">
@endsection

@section('content')

   @php
   use App\Helpers\Transaction;
   $user = Auth::user();
   $verified = $user->email_verified_at;
   $transaction = Transaction::Transaction($user->id);
   $class=  session('class');
   @endphp
   <section class="contact pad-btm pad-top ">
      <div class="container">
         @if (is_null($verified))
            <form id="resend" method="post" action="{{ route('verification.resend') }}">
               @csrf
               <div class="row pad-btm">
                  <div class="col-md-12 text-center top-mess">
                     <h1>Welcome to Survey Bakery Pakistan!</h1>
                     <p>To complete registration, please check your email or spam folder and follow the instructions to activate your account.</p>
                     <div>
                        <h2>Your account is not yet activated</h2>
                     </div>
                     <p>Not received your email? <a onclick="submit('resend')" type="submit" href="#">Resend the activation email</a></p>
                  </div>
               </div>
            </form>
         @endif
         <div class="row" @if(is_null($verified )) readonly @endif>
            <div class="col-md-7">
               <div class="constes m3-h  wow fadeInUp">
                  <h2>My Profile</h2>
               </div>
               <div class="prof m4-h">
                  <form id="" method="post" action="{{ route('profile_update',$user->id)}}" enctype="multipart/form-data">
                     @method('PUT')
                     @csrf
                     <div class="proimg">

                        <div class="avatar-upload">
                           <div class="avatar-edit">
                              <input type='file' name="file" id="imageUpload" accept=".png, .jpg, .jpeg" />
                              <label for="imageUpload"></label>
                           </div>
                           <div class="avatar-preview">
                              @php
                              if(!empty($user->images_path))
                              {
                              $image = asset('images/user/'.$user->images_path);

                              }else{
                              $image ='assets/images/profile.png';
                              }
                              @endphp
                              <div id="imagePreview" style="background-image: url({{$image}});"></div>
                           </div>
                           <br>
                           <input type="submit"  class="btn-e" href="#" role="button" value="Update Image">
                        </div>

                     </div>
                  </form>

                  <div class="procont">
                     <h2>{{ $user->first_name.' '.$user->last_name }}</h2>
                     <div class="sta">
                        @if (!is_null($verified))
                           <h5>Your account is verified</h5>
                        @endif
                        <img src="{!! asset('images/webpi/staps.webp') !!}" alt="">
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-5">
               <div class="addserbv p5 m4-h  wow fadeInUp">
                  <div class="cpx disnone">
                     <div class="cpshead cpsheadss">
                        <p>Checklist Progress</p>
                     </div>
                     <div class="cheklsi">

                        <div class="prges">
                           <div class="card">
                              <div class="percent">
                                 <svg>
                                    <circle cx="105" cy="105" r="100"></circle>
                                    <circle cx="105" cy="105" r="100" style="--percent: {{ $percentage }}"></circle>
                                 </svg>
                                 <div class="number">
                                    <h3>{{ $percentage }}<span>%</span></h3>
                                 </div>
                              </div>
                           </div>
                           <!-- <div class="progress blue">
                              <span class="progress-left">
                              <span class="progress-bar"></span>
                              </span>
                              <span class="progress-right">
                                 <span  class="progress-bar"></span>
                              </span>
                              <div class="progress-value">{{ $percentage }}%</div>
                        </div> -->
                        </div>

                        <div class="preges_contect">
                           <div class="brn">
                              <h1>NEXT:</h1>
                              <!-- <a name="" id="" class="btn-e" href="#" role="button"> Next:</a> -->
                           </div>
                           <div class="has">
                              <h6>{{ $next }}</h6>
                              <h5>Total: {{$transaction['amount']}}$</h5>
                           </div>
                           <div class="brn">
                              <a name="" id="" class="btn-e" href="{{ route('checklist') }}" role="button"><i class="fa-sharp fa-regular fa-circle-check"></i> Complete Item</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="col-md-3">
               <div class="menbut wow fadeInDown">
                  <ul class="tab-img-bo">
                     <li data-targetit="box-1" class="current">
                        <div class="tab-bo">
                           <h5>Profile</h5>
                        </div>
                     </li>
                     <li data-targetit="box-2">
                        <div class="tab-bo">
                           <h5>Edit Profile</h5>
                        </div>
                     </li>
                     <!-- <li class="verification" data-targetit="box-3">
                        <div class="tab-bo">
                           <h5>Verification</h5>
                        </div>
                     </li> -->
                     <li data-targetit="box-4">
                        <div class="tab-bo">
                           <h5>Password & Security</h5>
                        </div>
                     </li>
                     <li data-targetit="box-5">
                        <div class="tab-bo">
                           <h5>Account Close</h5>
                           <!-- <a onclick="deactive({{Auth::user()->id}})" ><h5> DeActive</h5></a> -->
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
            <div class="col-md-9 m4-h">
               <div class="box-1 showfirst  wow fadeInUp">
                  <form id="" method="post" action="{{ route('profile_update',$user->id)}}">
                     @method('PUT')
                     @csrf
                     <div class="container">
                        <div class="row">

                           <div class="col-md-6">
                              <div class="proeide">
                                 <h2>Profile</h2>
                              </div>
                              <div class="diovss">
                                 <div class="frsr">
                                    <label for="">First Name</label>
                                    <input type="text" name="first_name" disabled value="{{ $user->first_name }}" class="form-control_profiledef" placeholder="mobina">
                                 </div>
                                 <div class="lastss">
                                    <label for="">Last Name</label>
                                    <input type="text" name="last_name" disabled value="{{ $user->last_name }}" class="form-control_profiledef" placeholder="Mir">
                                 </div>
                              </div>
                              <div class="diovss">
                                 <div class="frsr">
                                    <label for="">Year birth</label>
                                    <input name="years_birth" disabled type="text" value="{{ $user->years_birth }}" class="form-control_profiledef" placeholder="">
                                 </div>
                                 <div class="lastss">
                                    <label for="">Gender</label>
                                    <select name="gender" id="gender" disabled class="form-control_profiledef">
                                       <option @if($user->gender==1) selected @endif value="1">Male</option>
                                       <option @if($user->gender==2) selected @endif value="2">Female</option>
                                    </select>
                                 </div>
                              </div>
                              <label for="">Postal code</label>
                              <input type="text" name="postal_code" disabled value="{{ $user->postal_code }}" class="form-control_profiledef"  placeholder="0000">


                              <label for="">Address</label>
                              <input name="address" disabled value="{{ $user->address }}" type="text" value="" class="form-control_profiledef" placeholder="Type here">
                           </div>




                           <div class="col-md-6">
                              <div class="proeide">
                                 <h2>Contact</h2>
                              </div>

                              <div>
                                 <label for="">Email</label>
                                 <input value="{{ $user->email }}" disabled type="email" class="form-control_profiledef" placeholder="Email address" disabled >
                              </div>

                              <div>
                                 <label for="">Phone Number</label>
                                 <div class="phsb">
                                    <input type="phone" disabled name="contact_no" value="{{ $user->contact_no }}"   class="form-control_profiledef" placeholder="9120000000">
                                 </div>
                              </div>

                              <div>
                                 <label for="">Country</label>
                                 <select id="country" disabled class="form-control_profiledef" name="country">
                                    @foreach($country as $key =>$row)
                                       <option @if($user->country==$row->id) selected @endif value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                 </select>
                              </div>

                              <div>
                                 <label for="">City</label>
                                 <input type="text" disabled name="city" value="{{ $user->city }}"   class="form-control_profiledef" placeholder="city">
                              </div>

                           </div>





                           <!-- <div class="col-md-6">
                           <div class="prosfi">
                              <h2>Personal</h2>
                              <div class="row">
                                 <div class="diovss">
                                    <div class="frsr">
                                       <label for="">First Name</label>
                                       <input type="text" name="first_name" disabled value="{{ $user->first_name }}" class="form-control_profiledef" placeholder="mobina">
                                    </div>
                                    <div class="lastss">
                                       <label for="">Last Name</label>
                                       <input type="text" name="last_name" disabled value="{{ $user->last_name }}" class="form-control_profiledef" placeholder="Mir">
                                    </div>
                                 </div>

                                 <div class="diovss">
                                    <div class="frsr">
                                       <label for="">Year birth</label>
                                       <input name="years_birth" disabled type="text" value="{{ $user->years_birth }}" class="form-control_profiledef" placeholder="">
                                    </div>
                                    <div class="lastss">
                                       <label for="">Gender</label>
                                       <select name="gender" id="gender" disabled class="form-control_profiledef">
                                       <option @if($user->gender==1) selected @endif value="1">Male</option>
                                       <option @if($user->gender==2) selected @endif value="2">Female</option>
                                       </select>
                                    </div>
                                 </div>
                                 <label for="">Postal code</label>
                                 <input type="text" name="Postal code" disabled value="" class="form-control_profiledef" placeholder="0000">


                                 <label for="">Address</label>
                                 <input name="address" disabled value="{{ $user->address }}" type="text" value="" class="form-control_profiledef" placeholder="Type here">
                              </div>



                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="prosfi">
                              <h2>Contact</h2>

                                 <label for="">Email</label>
                                 <input value="{{ $user->email }}" disabled type="email" class="form-control_profiledef" placeholder="Email address" disabled >
                                 <label for="">Phone Number</label>
                                 <div class="phsb">

                                    <input type="phone" disabled name="contact_no" value="{{ $user->contact_no }}"   class="form-control_profiledef" placeholder="9120000000">
                                 </div>

                                 <label for="">Country</label>
                                 <select id="state" disabled class="form-control_profiledef" name="state">
                                    @foreach($country as $key =>$row)
                                   <option @if($user->country==$row->id) selected @endif value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                   </select>
                                   <label for="">City</label>
                                      <input type="text" disabled name="city" value="{{ $user->city }}"   class="form-control_profiledef" placeholder="city">

                           </div>
                        </div> -->
                           {{-- <div class="col-md-12">
                              <div class="btnspro">
                                 <a onclick="submit('persnol')" name="" id="" class="btn-e" href="#" role="button">Save</a>
                              </div>
                           </div> --}}
                        </div>
                     </div>
                  </form>
               </div>

               <div class="box-2">
                  <form id="persnol" method="post" action="{{ route('profile_update',$user->id)}}">
                     @method('PUT')
                     @csrf
                     <div class="container">
                        <div class="row">
                           <div class="col-md-6">
                              <div class="proeide">
                                 <h2>Edit Profile</h2>
                              </div>
                              <div class="prosfi">
                                 <div class="row">
                                    <div class="col-md-12 diovss">
                                       <div class="frsr">
                                          <label for="">First Name</label>
                                          <input type="text" name="first_name" value="{{ $user->first_name }}" class="form-control_profile" placeholder="mobina">
                                       </div>
                                       <div class="lastss">
                                          <label for="">Last Name</label>
                                          <input type="text" name="last_name" value="{{ $user->last_name }}" class="form-control_profile" placeholder="Mir">
                                       </div>
                                    </div>

                                    <div class="col-md-12 diovss">
                                       <div class="frsr">
                                          <label for="">Year birth</label>
                                          <input name="years_birth" readonly  type="text" value="{{ $user->years_birth }}" class="form-control_profile" placeholder="">
                                       </div>
                                       <div class="lastss">
                                          <label for="">Gender</label>
                                          <select name="gender" id="gender" class="form-control_profile">
                                             <option @if($user->gender==1) selected @endif value="1" disabled>Male</option>
                                             <option @if($user->gender==2) selected @endif value="2" disabled>Female</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="col-md-12">
                                       <label for="">Postal code</label>
                                       <input type="text" name="postal_code"  value="{{ $user->postal_code }}" class="form-control_profile" readonly placeholder="0000">
                                    </div>
                                    <div class="col-md-12">
                                       <label for="">Address</label>
                                       <input name="address" value="{{ $user->address }}" type="text" class="form-control_profile" placeholder="Type here">
                                    </div>
                                 </div>

                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="proeide">
                                 <h2>Contact</h2>
                              </div>
                              <div class="prosfi">
                                 <label for="">Email</label>
                                 <input value="{{ $user->email }}" type="email" class="form-control_profile" placeholder="Email address" disabled >
                                 <label for="">Phone Number</label>
                                 <div class="phsb">

                                    <input type="phone" name="contact_no" value="{{ $user->contact_no }}"   class="form-control_profile" placeholder="9120000000">
                                 </div>

                                 <label for="">Country</label>
                                 <select id="state" class="form-control_profile" name="country">
                                    @foreach($country as $key =>$row)
                                       <option @if($user->country==$row->id) selected @endif value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                 </select>
                                 <label for="">City</label>
                                 <input type="text" name="city" value="{{ $user->city }}"   class="form-control_profile" placeholder="city">

                              </div>
                           </div>
                           <div class="col-md-6">

                           </div>
                           <div class="col-md-6">

                           </div>
                           <div class="col-md-12">
                              <div class="btnspro">
                                 <a onclick="submit('persnol')" name="" id="" class="btn-e" href="#" role="button">Save</a>
                              </div>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
               <div class="box-3">
                  <form method="POST" action="{{route('payment_store',$user->id)}}" enctype="multipart/form-data">
                     @csrf
                     <div class="row">
                        <div class="col-md-12">
                           <div class="proeide">
                              <h2>Verification</h2>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="prosfi">
                              <!-- <h2>For Verifications</h2> -->
                              <label for="">Utility bill</label>
                              <div class="">
                                 <input type="file" name="file" value="{{asset('images/document/'.$user->utility_bill)}}" class="input-file">
                                 <div class="upl">
                                    <button id="formFile" class="upload-field btn-e" type="button">Upload</button>
                                    <input type="text" name="" value="{{$user->utility_bill}}" class="form-control_profile" disabled placeholder="Upload Image">
                                 </div>
                              </div>

                              <label for="">Driving license</label>
                              <div class="">
                                 <input type="file" name="file1" value="{{asset('images/document/'.$user->driving_licences)}}" class="input-file2">
                                 <div class="upl">
                                    <button id="formFile" class="upload-field2 btn-e" type="button">Upload</button>
                                    <input type="text" value="{{$user->driving_licences}}" name="" class="form-control_profile" disabled placeholder="Upload Image">
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="prosfi p5">
                              <h2>Verification</h2>
                              <p>We securely collect and store pictures of utility bills and driving licenses provided by users for the sole purpose of verification. We understand the importance of privacy, and we want to assure you that after a thorough verification process, which usually takes 30-40 days, we promptly delete all related data from our systems.</p>

                              {{-- <h2>PayPal Email</h2>
                                 <label for="">Email Address</label>
                                 <input type="email" name="email_address" class="form-control_profile" placeholder="Type here">
                              --}}
                              {{--                           @if(!empty($user->utility_bill))--}}
                              {{--                                 <!-- <a href="{{asset('images/document/'.$user->utility_bill)}}" target="_blank">View Utility Bill</a> -->--}}
                              {{--                              @endif--}}
                              {{--                                 <br>--}}
                              {{--                           @if(!empty($user->driving_licences))--}}
                              {{--                                 <a href="{{asset('images/document/'.$user->driving_licences)}}" target="_blank">View Driving License </a>--}}
                              {{--                              @endif--}}
                           </div>
                        </div>
                        <div class="col-md-12">
                           <div class="table-responsive py-5">
                              <table class="table table-bordered table-hover">
                                 <thead class="tabcolr">
                                 <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Action</th>
                                 </tr>
                                 </thead>
                                 <tbody>
                                 @if(!empty($user->utility_bill))
                                    <tr>
                                       <td> <div class="">1</div></td>
                                       <td> <div class="">Utility Bill</div></td>
                                       <td>
                                          <div class="viess">
                                             <a href="{{asset('images/document/'.$user->utility_bill)}}" target="_blank"> <i class="fa-solid fa-eye"></i></a>
                                             <a onclick="deletebill('1')"> <i class="fa-solid fa-trash"></i></a>
                                          </div>
                                       </td>
                                    </tr>
                                 @endif
                                 @if(!empty($user->driving_licences))
                                    <tr>
                                       <td> <div class="">2</div></td>
                                       <td> <div class="">Driving License</div></td>
                                       <td>
                                          <div class="viess">
                                             <a href="{{asset('images/document/'.$user->driving_licences)}}" target="_blank"> <i class="fa-solid fa-eye"></i></a>
                                             <a onclick="deletebill('2')"> <i class="fa-solid fa-trash"></i></a>
                                          </div>
                                       </td>
                                    </tr>

                                 @endif

                                 </tbody>
                              </table>
                           </div>
                        </div>
                        <div class="col-md-12">
                           <div class="btnspro payoytbt">
                              <input type="submit" class="btn-e" value="Save">
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
               <div class="box-4">
                  <form action="{{route('password-update')}}" method="POST">
                     @csrf
                     <div class="row">
                        <div class="col-md-12">
                           <div class="proeide">
                              <h2>Password & Security</h2>
                           </div>
                        </div>


                        <div class="col-md-12">
                           <div class="btnspro payoytbt">
                              <input type="password" class="form-control_pass" placeholder="Old Password" name="current_password" id="current_password">
                              <input type="password" class="form-control_pass" placeholder="Enter New Password" name="old_password" id="old_password">
                              <input type="text" class="form-control_pass" placeholder="Re-enter New Password"name="new_password">
                              <div class="psfor">
                                 <button type="submit" onclick="validatePasswords()" class="btn-e" href="#" role="button">Submit</button>
                              </div>
                           </div>


                        </div>
                  </form>
               </div>
            </div>
            <div class="box-5">
               <form action="{{route('close_account',$user->id)}}" method="POST">
                  @method('put')
                  @csrf

                  <div class="row">
                     <div class="col-md-12">
                        <div class="proeide">
                           <h2>Deactive Account</h2>
                           <h1>If you would like to close your account, kindly provide a reason in the space provided below and select Close Account. Please note that once your account is closed, it cannot be reopened.</h1>
                        </div>
                     </div>
                     <div class="col-md-12">
                        <div class="btnspro payoytbt">
                           <textarea name="description" id="" class="form-control" placeholder="Short Description About Your Deactivation" rows="5" cols="30"></textarea>
                           <div class="psfor">
                              <button type="submit" onclick="" class="btn-e" href="#" role="button">Close Account</button>
                           </div>
                        </div>
                     </div>
                  </div>
               </form>
               {{-- <div class="box-5">
                  <div class="row">
                     <div class="col-md-8">
                        <div class="rew-h proeide bor1">
                           <div class="text-center bor-bo">
                              <h2>Balance:</h2>
                              <h3>0.12 USD</h3>
                           </div>
                           <div>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                              <a href="#">
                                 <ul class="rew-l">
                                    <li>Careem Rides Credits -</li>
                                    <li class="text-right">2.00 USD  </li>
                                 </ul>
                              </a>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4 proeide bor1 rew-h">
                        <div class="text-center bor-bo">
                              <h2>Payout activity:</h2>
                           </div>
                           <div>
                              <ul class="rew-l">
                                 <li>Easypaisa - <br><span>Requested: 6/2/2023</span></li>
                                 <li class="text-right">2.00 USD <br><span>PENDING</span> </li>
                              </ul>
                              <ul class="rew-l">
                                 <li>Easypaisa - <br><span>Requested: 6/2/2023</span></li>
                                 <li class="text-right">2.00 USD <br><span>PENDING</span> </li>
                              </ul>
                              <ul class="rew-l">
                                 <li>Easypaisa - <br><span>Requested: 6/2/2023</span></li>
                                 <li class="text-right">2.00 USD <br><span>PENDING</span> </li>
                              </ul>
                           </div>
                     </div>
                  </div>
               </div> --}}
            </div>
         </div>
      </div>
   </section>

@endsection
@section('script')
   <script>
      function validatePasswords() {
         var currentPassword = document.getElementById('current_password').value;
         var oldPassword = document.getElementById('old_password').value;

         if (currentPassword !== oldPassword) {
            alert("Current password and old password must be the same.");
            return false;
         }

         // Continue with form submission or any other action
      }
      function deletebill(id)
      {
         if (confirm('Are you sure you want to delete this request')) {
            $.ajax({
               url: "{{url('/delete-bill')}}",
               type: "GET",
               data: {
                  id: id
               },
               success: function(data) {
                  if(data == 1)
                  {
                     alert('Image Delete SuccessFully');
                     location.reload();
                  }
               }
            });
         }
      }

      $( document ).ready(function() {

         var box = '{{ session('class') }}';
         if (box!='')
         {

            $("[data-targetit='box-3']").click();
         }
      });

   </script>
@endsection