@extends('layouts.app')

@section('content')
 <!-- Require css -->
<style>

  .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;
    }

    .image-preview{
        width:250px;
        min-height:250px;
        border:2px solid #519adf;
        margin-top:15px;
        border-radius:10%;
        display: flex;
        align-items:center;
        justify-content:center;
        font-weight:bold;
        color: #519adf;
        object-fit: contain;
    }
    
    .image-preview2{
        width:250px;
        min-height:250px;
        border:2px solid #dddddd;
        border-radius:50%;
        display: flex;
        align-items:center;
        justify-content:center;
        font-weight:bold;
        color: #cccccc;
    }
    
    input[type="file"] {
        display: none;
    }

    .profile-img{
        display:none;
        width:100%;
        max-height:250px;
        border-radius:10%;
        object-fit: contain;
    }
    
    .profile-img2{
        display:none;
        width:200px;
        min-height:200px;
        border:2px solid #dddddd;
        border-radius:50%;
    }
    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
    }
    
    .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="mt-16 p-4">
    <a href="{{ route('investment_history') }}" class="text-blue-400 mb-5">Skip &rightarrow;</a>
</div>

<div align="center" class="items-center py-6 mt-5">


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

        <h3 class="md:text-4xl lg:text-6xl text-2xl font-semibold text-gray-600">
        Proof Of <span class="text-blue-400">Payment</span>
        </h3>
        <p class="mt-3 text-gray-600">Kindly upload a screenshot of your just made transfer.</p>
    </div>

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

                        <div class="card-box mt-3">                         
                           <form method="POST" enctype="multipart/form-data" id="upload">
                            @csrf
                            <input type="file" name="s_image" 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>



<!--Modal-->
<div id="shrink" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    
    <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto shadow-lg z-50 overflow-y-auto mt-8 md:mt-10">
      
      <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
        <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
          <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
        </svg>
        <span class="text-sm">(Esc)</span>
      </div>

      <!-- Add margin if you want to see some of the overlay behind the modal-->
      <div class="modal-content py-4 text-left px-6">
        <!--Title-->
        <div class="flex justify-between items-center pb-3">
          <p class="text-2xl text-dark font-bold underline underline-offset-3 decoration-8 decoration-blue-400">Disregard Payment</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
          </div>
        </div>

        <!--Body-->
        <p>If you were unable to make payment or didn't complete payment process, please click on disregard payment below.<br><br>
            If you successfully made payment, click on <b>Proceed</b> </p>

        <!--Footer-->
        <div class="flex justify-end pt-2">
          <a href="{{ route('delete_proof', session('dep_id')) }}" class="text-blue-700 text-sm mt-4 mr-4 disregard">DISREGARD PAYMENT</a>
          
          <button class="modal-close inline-flex cursor-pointer items-center rounded-full  bg-blue-700 border-4 h-12 hover:translate-y-1 hover:shadow-lg hover:scale-105 shadow-md transition border-white  text-white py-3 font-b px-6 font-sans text-xl">Proceed</button>
        </div>      
      </div>
    </div>
  </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    $(document).bind("ajaxSend", function() {
        $("#loader-body").removeClass("invisible");
    }).bind("ajaxComplete", function() {
        $("#loader-body").addClass("invisible");
    });
    
//End of modal
    $(document).ready(function(){
      setTimeout(function toggleModal () {
        const body = document.querySelector('body')
        const modal = document.querySelector('.modal')
        modal.classList.toggle('opacity-0')
        modal.classList.toggle('pointer-events-none')
        body.classList.toggle('modal-active')
      }, 1);    
    });

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)
    
    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal)
    }
    
    document.onkeydown = function(evt) {
      evt = evt || window.event
      var isEscape = false
      if ("key" in evt) {
    	isEscape = (evt.key === "Escape" || evt.key === "Esc")
      } else {
    	isEscape = (evt.keyCode === 27)
      }
      if (isEscape && document.body.classList.contains('modal-active')) {
    	toggleModal()
      }
    };
    
    
    function toggleModal () {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }

//End of modal




    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");
        }
    });
          
          
    // 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('user.proof') }}",
            data: formData, 
            contentType: false,
            processData: false,
            success:function(data) {
                if(data == 1) {
                    Swal.fire({
                    title: 'Good job {{ auth()->user()->first_name }} 👍🏽!',
                    text: 'Your proof of payment has been submitted, and would be checked for confirmation within the next 24 hours.',
                    icon: 'success',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " {{route('home')}} ";
                    });
                }
                else {
                    Swal.fire({
                    title: 'Unsuccessful!',
                    text: 'Something went wrong.',
                    icon: 'danger',
                    confirmButtonText: 'Okay'
                    })
                }
            }
        });
    });
    

    $('.disregard').on('click', function(e) {
        e.preventDefault();
       let dep_id = "{{ session('dep_id') }}";

        $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            
            url: "{{ route('delete_proof', session('dep_id')) }}", 
            type: 'DELETE',
            data: {_method : "DELETE", dep_id:dep_id}, 
            contentType: false,
            processData: false,
            success:function(data) {
                if(data == 1) {
                    Swal.fire({
                    title: 'Successful!',
                    text: 'Payment Successfully Discontinued.',
                    icon: 'success',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " {{route('investments')}} ";
                    });
                }
                else {
                    Swal.fire({
                    title: 'Unsuccessful!',
                    text: 'Something went wrong.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                    })
                }
            }
        });
    });
</script>

@endsection