

<?php $__env->startSection('content'); ?>

<div class="">
    <a href="<?php echo e(route('profile')); ?>" class="text-blue-400 mb-5">Skip &rightarrow;</a>
</div>
       
<div align="center" class="items-center py-6">

<div class="lg:w-2/3">

        <h3 class="md:text-4xl lg:text-6xl text-2xl font-semibold text-gray-100">
        Verify Profile <span class="text-blue-400">Photo</span>
        </h3>
        <p class="mt-3 text-gray-100">Kindly upload a bright and bold selfie of you, which will be verified our team.</p>
    </div>

             <div align="center" class="mt-8 mx-auto lg:mt-6">
                <div class="max-w-md bg-white rounded-lg dark:bg-gray-800 shadow-lg shadow-blue-500/50" style="width:100%;">
                    <div class="p-5 text-center">
                        <h2 class="text-xl font-semibold text-gray-700 dark:text-white fo">Profile<span class="text-blue-500">Photo</span></h2>

                        <div class="card-box mt-3">                         
                           <form method="POST" enctype="multipart/form-data" id="upload">
                            <?php echo csrf_field(); ?>
                            <input type="file" name="avatar" class="" id="inpFile" />
                            <div class="prev_submit pop">
                                <label for="inpFile" class="custom-file-upload inline-flex px-4 py-2 font-semibold 
                                text-white transition-colors duration-300 bg-gradient-to-r from-cyan-500 to-blue-500 
                                hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 
                                font-medium rounded-lg"> 
                                <span class="flex">Choose Photo <svg class="h-6 w-6 text-white"  width="24" height="24" viewBox="0 0 24 24" 
                                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  
                                    <path stroke="none" d="M0 0h24v24H0z"/>  <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />  
                                    <path d="M4 16v2a2 2 0 0 0 2 2h2" />  <path d="M16 4h2a2 2 0 0 1 2 2v2" />  
                                    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />  <circle cx="12" cy="12" r="3" /></svg>
                                </span>
                                </label>
                            </div>

                            </form>
                            <div align="center" class="image-preview mx-auto py-1 px-2" id="imagePreview">
                                <img src="" alt="Image Preview" class="img-responsive profile-img">
                                <span class="profile-text" id="">Photo Preview</span>
                            </div>
                        </div><!-- end col -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</header>






<script>
          const inpFile = document.getElementById("inpFile");
          const previewContainer = document.getElementById("imagePreview");
          const previewImage = previewContainer.querySelector(".profile-img");
          const previewDefaultText = previewContainer.querySelector(".profile-text");

          inpFile.addEventListener("change", function(){
              const file = this.files[0];

              if (file){
                  
                    $('.prev_submit').html(`
                        <button type="submit" class="inline-flex px-4 py-2 font-semibold 
                            text-white transition-colors duration-300 bg-gradient-to-r from-cyan-500 to-blue-500 
                            hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 
                            font-medium rounded-lg" data-user_email="<?php if(isset(auth()->user()->email)): ?>auth()->user()->email <?php endif; ?>">
                            <span>Submit</span>
                        </button>
                        <label for="inpFile" class="custom-file-upload inline-flex px-4 py-2 font-semibold 
                                text-white transition-colors duration-300 bg-gradient-to-r from-cyan-500 to-blue-500 
                                hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 
                                font-medium rounded-lg"> 
                        <span class="flex">Change Photo <svg class="h-6 w-6 text-white"  width="24" height="24" viewBox="0 0 24 24" 
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  
                            <path stroke="none" d="M0 0h24v24H0z"/>  <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />  
                            <path d="M4 16v2a2 2 0 0 0 2 2h2" />  <path d="M16 4h2a2 2 0 0 1 2 2v2" />  
                            <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />  <circle cx="12" cy="12" r="3" /></svg>
                        </span>
                        </label>
                    `);
                    const reader = new FileReader(file);

                    previewDefaultText.style.display = "none";
                    previewImage.style.display = "block";

                    reader.addEventListener("load", function(){
                        previewImage.setAttribute("src", this.result);
                    });

                    reader.readAsDataURL(file);
              } else {
                    previewDefaultText.style.display = "null";
                    previewImage.style.display = "null";
                    previewImage.setAttribute("src", "null");
              }
          });
          
          
    // Submit photo
    $('#upload').submit(function(e) {
       e.preventDefault();
       let formData = new FormData(this);

        $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            
            type: "post",
            url: "<?php echo e(route('store.profile_photo')); ?>",
            data: formData, 
            contentType: false,
            processData: false,
            success:function(data) {
                if(data == 1) {
                    Swal.fire({
                    title: 'Successful!',
                    text: 'Your profile photo has been submitted and would be reviewed by our team for approval.',
                    icon: 'success',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " <?php echo e(route('withdrawal_plan')); ?> ";
                    });
                }
                else {
                    Swal.fire({
                    title: 'Unsuccessful!',
                    text: 'Something went wrong.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                    })
                }
            }
        });
    });
    
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.auth', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\wamp64\www\jango\resources\views/profile_photo.blade.php ENDPATH**/ ?>