@extends('layouts.admin_layout')

@section('content')


<main class="h-full pb-16 overflow-y-auto">
          <div class="container grid px-6 mx-auto">
            <h2
              class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
            >
            <span class="text-blue-500">Agent Withdrawal</span> Requests
            </h2>
             <!-- CTA -->
             <a
              class="flex items-center justify-between p-4 mb-8 text-sm font-semibold bg-blue-600 shadow-md focus:outline-none focus:shadow-outline-green"
              href="{{ url('/') }}" style="color: #fff;"
            >
              <div class="flex items-center">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  ></path>
                </svg>
                <span>Go to main website</span>
              </div>
              <span>View &RightArrow;</span>
            </a>

            <button id="generatePdf" class="px-5 py-3 mb-4 mr-auto font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent w-fit active:bg-green-500 hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
                  type="button" style="color: #fff; width: fit-content;">
              Generate Payment List
            </button>

            <!-- With actions -->
            <h4
              class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
            >
              List of Withdrawals
            </h4>
            <x-alert/><br>
            <div class="w-full overflow-hidden rounded-lg shadow-xs">
              <div class="w-full overflow-x-auto">
                <table class="w-full whitespace-no-wrap" id="pdfContent">
                  <thead>
                    <tr
                      class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
                    >
                      <th class="px-4 py-3 border">Main Balance</th>
                      <th class="px-4 py-3 border">Withdrawal Amount</th>
                      <th class="px-4 py-3 border">Wallet Address</th>
                      <th class="px-4 py-3 border">Request Status</th>
                      <th class="px-4 py-3 border">Request Date</th>
                      <th class="px-3 py-3 border">Actions</th>
                    </tr>
                  </thead>
                  <tbody
                    class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
                  >
                  @forelse($withdrawals as $withdrawal)
                    <tr class="text-gray-700 dark:text-gray-400">
                      <td class="px-4 py-3 text-sm border">
                        <a href="#">USDT {{ number_format($withdrawal->admin?->balance, 2) }}</a>
                      </td>
                      <td class="px-4 py-3 text-sm border">
                        USDT {{ number_format($withdrawal->amount, 2) }}
                      </td>
                      <td class="px-4 py-3 text-sm border">
                        {{ substr($withdrawal->admin?->wallet, 0, 10) }}...
                        <p class="hidden wallets"id="input-{{ $withdrawal->id }}">{{ $withdrawal->admin?->wallet }}</p>
                        @if($withdrawal->admin?->wallet)
                        <button type="button" onclick="copyToClipboard({{ $withdrawal->id }})" 
                        class="p-2 mt-3 border rounded btn btn-primary">
                            Copy <i class="bx bx-copy-alt me-1"></i>
                        </button>
                        @else
                        <button type="button" onclick="alert('No wallet address added')" 
                        class="p-2 mt-3 border rounded btn btn-primary">
                            Copy <i class="bx bx-copy-alt me-1"></i>
                        </button>
                        @endif
                      </td>
                      @if($withdrawal->status == 'pending')
                      <td class="px-4 py-3 text-sm border">
                      <span
                          class="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-red-100"
                        >
                          Pending...
                        </span>
                      </td>
                      @elseif($withdrawal->status == 'approved')
                      <td class="px-4 py-3 text-sm border">
                      <span
                          class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
                        >
                          Approved
                        </span>
                      </td>
                      @elseif($withdrawal->status == 'declined')
                      <td class="px-4 py-3 text-sm border">
                      <span
                          class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100"
                        >
                          Declined
                        </span>
                      </td>
                      @endif
                      <td class="px-4 py-3 text-sm border">
                      {{ date('M j Y - h:i:s', strtotime($withdrawal->created_at)) }}
                      </td>
                      <td class="px-4 py-3 border">
                        <div class="flex items-center space-x-6 text-sm">
                          
                              @if($withdrawal->status == 'pending')
                              <form action="{{ route('admin.agent.withdraw_approve', $withdrawal->id) }}" method="post">
                                @csrf
                                @method('patch')
                                <input type="hidden" name="type" value="{{ $withdrawal->type }}">
                                <button type="submit" class="font-semibold text-green-700 dark:text-green-200" 
                                title="Approve"
                                onclick="return confirm('Dear Admin, Are you sure you want to approve this withdrawal?');" >
                                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" >
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                  </svg>
                                </button>
                              </form>
                              &nbsp; &nbsp; &nbsp;
                              <form action="{{ route('admin.agent.withdraw_decline', $withdrawal->id) }}" method="post">
                                @csrf
                                @method('patch')
                                <input type="hidden" name="type" value="{{ $withdrawal->type }}">
                                <button type="submit" class="font-semibold text-red-700 dark:text-red-200" 
                                title="Decline"
                                onclick="return confirm('Dear Admin, Are you sure you want to decline this withdrawal?');" >
                                <svg class="w-5 h-5 svg-icon" viewBox="0 0 20 20" fill="currentColor">
                                  <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></path>
                                </svg>
                                </button>
                              </form>
                              @elseif($withdrawal->status == 'approved')
                              <button class="font-semibold text-gray-400 cursor-not-allowed dark:text-muted-200" disabled>
                              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" 
                              fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 
                              16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 
                                0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                              </button>
                              @elseif($withdrawal->status == 'declined')
                              <button class="font-semibold text-gray-400 cursor-not-allowed dark:text-muted-200" disabled>
                              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" 
                              fill="currentColor">
                                <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></path>
                                </svg>
                              </button>
                              @endif
                        </div>
                      </td>
                    </tr>
                  @empty
                  <div class="mx-auto my-3">
                        <p class="text-center text-white lead">No Withdrawal Requests.</p>
                  </div>
                  <br><br><br>
                  @endforelse
                  
        
                  </tbody>
                </table>
              </div>
              <div
                class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
              >

              </div>
            </div>
          </div>
        </main>



<!-- Add this script in your HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.js"></script>

<script>
  document.getElementById('generatePdf').addEventListener('click', function () {
        // Get the content you want to convert to PDF (here, we assume it has the ID 'pdfContent')
        const pdfContent = `<table class="w-full px-4 whitespace-no-wrap" id="pdfContent">
                    <thead>
                      <tr
                        class="text-xs font-semibold tracking-wide text-left text-black uppercase border-b"
                      >
                        <th class="px-4 py-3 border">Wallet Address</th>
                        <th class="px-4 py-3 border">Amount</th>
                      </tr>
                    </thead>
                    <tbody
                      class="bg-white divide-y"
                    >
                    @forelse($withdrawals as $withdrawal)
                      @if($withdrawal->status == 'pending')
                        <tr>
                          <td class="px-4 py-3 border">{{ $withdrawal->admin?->wallet }}</td>
                          <td class="px-4 py-3 border">USDT {{ number_format($withdrawal->amount, 2) }}</td>
                        </tr>
                      @else
                      <tr>No Records To Show!</tr>
                      @endif
                    @empty
                      <tr>No Records To Show!</tr>
                    @endforelse
                    </tbody>
                  </table>`;

        // Use html2pdf to generate the PDF
        html2pdf(pdfContent);
    });



function copyToClipboard(walletId) {
    // Create a temporary input element
    var input = document.createElement("input");
    input.value = document.getElementById('input-'+walletId).textContent;

    // Append the input element to the document
    document.body.appendChild(input);

    // Select the content of the input element
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices

    // Copy the content to the clipboard
    document.execCommand("copy");

    // Remove the temporary input element
    document.body.removeChild(input);

    // Alert the user
    alert("Wallet copied to clipboard");
}
</script>  

@endsection