@extends('layouts.auth')

@section('content')
<!-- Require css -->
<style>
    button:disabled,
    button[disabled]{
    background-color: #9fb5ff;
    }

    button:disabled:hover{
    color: #d1d5db;
    }

  .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-image: url('../images/Fidget-spinner.gif');
        background-repeat: no-repeat; 
        background-color: #FFF;
        background-position: center;
    }

    
    .loader-body {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.7;
        background-color: #28282b;
        z-index: 99;
    }

    .loader {
        border-top-color: #0e4792;
        -webkit-animation: spinner 1.5s linear infinite;
        animation: spinner 1.5s linear infinite;
    }

    @-webkit-keyframes spinner {
        0% {
        -webkit-transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spinner {
        0% {
        transform: rotate(0deg);
        }
        100% {
        transform: rotate(360deg);
        }
    } 
</style>


<div class="">
    <a href="@if(session('amount')) {{ route('selected_plan', session('amount')) }} @elseif(session('remove_skip')) {{ route('home') }} @else {{ route('investments') }} @endif" 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 shadow-lg shadow-blue-500/50" style="width:100%;">
                    <div class="p-5 text-center">
                        <h2 class="text-xl font-semibold text-gray-700 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">
                            @csrf
                            <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 
                                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 
                            font-medium rounded-lg" data-user_email="@if(isset(auth()->user()->email))auth()->user()->email @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 
                                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");
              }
          });
          
    $(document).bind("ajaxSend", function() {
        $("#loader-body").removeClass("invisible");
    }).bind("ajaxComplete", function() {
        $("#loader-body").addClass("invisible");
    });


    // 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: "{{ 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 = "@if(session('amount')) {{ route('selected_plan', session('amount')) }} @elseif(session('remove_skip')) {{ route('home') }} @else {{ route('investments') }} @endif";
                    });
                }
                else if(data == 0) {
                    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 = "@if(session('amount')) {{route('selected_plan', session('amount'))}} @else {{route('withdrawal_plan')}} @endif";
                    });
                }
                else {
                    Swal.fire({
                    title: 'Unsuccessful!',
                    text: 'Something went wrong.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                    })
                }
            }
        });
    });
    
</script>
@endsection