{% extends "administrator/base.html"%}

{% block title %}
Crypto Project Manager
{% endblock %}

{% block content %}
<section class="mt-3 p-5 justify-around gap-5">
    <div class="bg-blue-100 p-5 md:px-20 md:py-10 rounded-xl">
        <h3 class="font-bold text-blue-1 text-xl mb-10">Deposit Records</h3>
        <div>
            

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Date
                </th>
                <th scope="col" class="px-6 py-3">
                    Amount
                </th>
                <th scope="col" class="px-6 py-3">
                    Payment Method
                </th>
                <th scope="col" class="px-6 py-3">
                    Proof
                </th>
                <th scope="col" class="px-6 py-3">
                    Status
                </th>
                <th scope="col" class="px-6 py-3">
                    Actions
                </th>
            </tr>
        </thead>
        <tbody>
            @php
                $counter=1 ;
                foreach($deposits['data'] as $deposit): 

            @endphp
            <tr class="hover:bg-blue-400 bg-white border-b hover:text-white cursor-pointer">
                <td class="px-6 py-4">
                    {{ $deposit->transaction_date }}
                </td>
                <td class="px-6 py-4">
                    ${{ $deposit->transaction_amount }}
                </td>
                <td class="px-6 py-4">
                    <span class="text-sm font-bold">
                        {{ get_payment_method($deposit->payment_method)->name }}
                    </span>
                    
                </td>
                <td class="px-6 py-4">
                    @php if(strlen($deposit->deposit_transaction_proof) > 5): @endphp
                    <a href="{{ $deposit->deposit_transaction_proof }}" class="text-sm font-bold">View Proof</a>
                    @php endif; @endphp
                </td>
                <td class="px-6 py-4">
                    {{ $deposit->transaction_status }}
                </td>
                <td>
                    <div class="mt-3">
                        <button onclick="revealActions('btn-{{ $counter}}', '{{ $deposit->id }}')" id="btn-{{ $counter }}" data-modal-target="default-modal" data-modal-toggle="default-modal" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Actions</button>
                    </div>
                </td>
                
            </tr>
            @php
                $counter++;
                endforeach; 
            @endphp
        </tbody>
    </table>
</div>

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

<section>
    

<!-- Modal toggle -->
  <!-- Main modal -->
  <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative p-4 w-full max-w-2xl max-h-full">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow">
              <!-- Modal header -->
              <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                  <h3 class="text-xl font-semibold text-gray-900">
                      Deposit Record
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-hide="default-modal">
                      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                      </svg>
                      <span class="sr-only">Close modal</span>
                  </button>
              </div>
              <!-- Modal body -->
              <div class="p-4 md:p-5 space-y-4">
                  

<div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
            <!--
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
            </tr>
        -->
        </thead>
        <tbody>
            <tr class="bg-white border-b">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    Transaction Date
                </th>
                <td class="px-6 py-4">
                    <p id="transactionDate"></p>
                </td>
            </tr>
            <tr class="bg-white border-b">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    Transaction ID
                </th>
                <td class="px-6 py-4">
                    <p id="transactionID"></p>
                </td>
            </tr>
            <tr class="bg-white border-b">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    Transaction Amount
                </th>
                <td class="px-6 py-4">
                    <p id="transactionAmount"></p>
                </td>
            </tr>
            <tr class="bg-white border-b">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    Transaction Status
                </th>
                <td class="px-6 py-4">
                    <p id="transactionStatus"></p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

              </div>
              <!-- Modal footer -->
              <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b">
                <!--
                  <button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">I accept</button>
                  <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100">Decline</button>
                -->

                  <button id="approveBtn" class="mr-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Approve</button>
                  <button id="rejectBtn" class="mr-5 text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center ">Reject</button>
                  <button id="deleteBtn" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center ">Delete Transaction</button>
                  
              </div>
          </div>
      </div>
  </div>  
</section>


{% endblock %}

{% block js %}
<script>
    const revealActions = (elemId, depositId) => {
        console.log(document.querySelector(`#${elemId}`));
        $.get({
            method: 'GET',
            url: '{% url fetch-transaction-details %}',
            data: {
                'transaction-id': depositId,
            },
            success: function(response){
                const result = JSON.parse(response);
                if(result.status == 'success'){
                    const transaction_id = result.data.transaction_id;
                    const user_id = result.data.user_id;
                    const transaction_date = result.data.transaction_date;
                    const transaction_status = result.data.transaction_status;
                    const transaction_amount = result.data.transaction_amount;

                   //console.log(transaction_date)

                   $("#transactionDate").text(transaction_date);
                   $("#transactionID").text(transaction_id);
                   $("#transactionAmount").text(`$${transaction_amount}`);
                   $("#transactionStatus").text(transaction_status);

                   if(transaction_status == 'approved'){
                    $("#approveBtn").hide('fast');
                    $("#rejectBtn").hide('fast');

                   }else if(transaction_status == 'rejected'){
                    $("#approveBtn").hide('fast');
                    $("#rejectBtn").hide('fast');
                   }else{
                    $("#approveBtn").show('fast');
                    $("#rejectBtn").show('fast');
                   }

                   $("#rejectBtn").click(function(){

                    $.post({
                            url: '{% url reject-transaction %}',
                            data: {
                                'id': transaction_id,
                            },
                            success: function(response){
                                const result = JSON.parse(response);
                                switch(result.status){
                                    case 'success':
                                        Swal.fire({
                                            title:  'Success',
                                            text: result.msg,
                                            icon: 'success',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;
                                    case 'error':
                                        Swal.fire({
                                            title:  'Error',
                                            text: result.msg,
                                            icon: 'error',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                //window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;

                                }
                            }
                        })

                   })

                   $("#deleteBtn").click(function(){
                    const confirmDelete = confirm("Do you really want to delete this record? This action is irreversible");
                    if(confirmDelete){
                        $.post({
                        url: "{% url delete-transaction %}",
                        data: {
                            'id': transaction_id,                            
                        },
                        success: function(response){
                                const result = JSON.parse(response);
                                switch(result.status){
                                    case 'success':
                                        Swal.fire({
                                            title:  'Success',
                                            text: result.msg,
                                            icon: 'success',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;
                                    case 'error':
                                        Swal.fire({
                                            title:  'Error',
                                            text: result.msg,
                                            icon: 'error',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                //window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;

                                }
                            }

                    })
                    }
                   })

                   $("#approveBtn").click(function(){
                        //alert(`Transaction: ${transaction_id} Approved`);
                        $.post({
                            url: '{% url approve-transaction %}',
                            data: {
                                'id': transaction_id,
                            },
                            success: function(response){
                                const result = JSON.parse(response);
                                switch(result.status){
                                    case 'success':
                                        Swal.fire({
                                            title:  'Success',
                                            text: result.msg,
                                            icon: 'success',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;
                                    case 'error':
                                        Swal.fire({
                                            title:  'Error',
                                            text: result.msg,
                                            icon: 'error',
                                            confirmButtonText: 'Okay',
                                        }).then(outcome => {
                                            if(outcome.isConfirmed){
                                                //window.location = "{% url manager-deposits %}"
                                            }
                                        })
                                        break;

                                }
                            }
                        })
                   })

                }
            }
            
        })
    }
</script>
<script>
    const revealID = (data) => {
        Swal.fire({
                title: 'Tranaction Id',
                text: `Your Transaction ID is:  ${data}`,
                icon: 'info',
                confirmButtonText: 'Okay'
        });
    }

    $("#depositForm").submit(function(e){
        e.preventDefault();

        const paymentMethod = $("#paymentMethod").val();
        const depositAmount = $("#depositAmount").val();
        const minimumDeposit = 500;

        if(depositAmount < minimumDeposit){
            Swal.fire({
                title: 'Error',
                text: `The minimum deposit is $${minimumDeposit}`,
                icon: 'error',
                confirmButtonText: 'Okay'
            }).then((outcome) => {
                //if(outcome.isConfirmed){
                    //window.location = "{% url login %}";
                //}
            })
            return 0;
        }

        $.post({
            method: 'POST',
            url: "{% url deposit-to-wallet %}",
            data: {
                'paymentMethod': paymentMethod,
                'depositAmount': depositAmount,
                'minimumDeposit': minimumDeposit,
            },
            success: function(data){
                result = JSON.parse(data)
                switch(result.status){
                    case 'error':
                        Swal.fire({
                            title: 'Error',
                            text: `${result.msg}`,
                            icon: 'error',
                            confirmButtonText: 'Go to Deposit'
                        }).then((outcome) => {
                            if(outcome.isConfirmed){
                                window.location = "{% url deposit %}";
                            }
                        });
                        break;
                    case 'success':
                        window.location = result.data.url;
                }
            },
        });



    })
</script>
{% endblock %}