<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>API Data Cards and Tables</title>
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.2.7/dist/tailwind.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
   <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
   <style>
      .tabcontent {
      display: none;
      }
      .active {
      display: block;
      }
      .card {
      border: 1px solid #ddd;
      border-radius: 0.5rem;
      padding: 1rem;
      margin: 1rem 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 100%;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button {
      padding: 0.5rem;
      margin: 0.5rem;
      border-radius: 0.25rem;
      border: 1px solid #ddd;
      background-color: #f3f4f6;
      color: #1f2937;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      background-color: #3b82f6;
      color: white;
      border: 1px solid #3b82f6;
      }
      .dataTables_wrapper .dataTables_filter input {
      padding: 0.5rem;
      margin: 0.5rem;
      border-radius: 0.25rem;
      border: 1px solid #ddd;
      background-color: #f3f4f6;
      }
      .dataTables_wrapper .dataTables_info {
      margin: 0.5rem;
      }
      table.dataTable thead th {
      background-color: #1f2937;
      color: white;
      font-weight: bold;
      }
      table.dataTable tbody tr:nth-child(even) {
      background-color: #f9fafb;
      }
      table.dataTable tbody tr:hover {
      background-color: #e5e7eb;
      }
      .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      }
      .card {
      flex: 1 1 calc(20% - 1rem);
      box-sizing: border-box;
      min-width: 200px;
      }
      .order-column{
      width: 265.86px;
      height: 90px;
      background: white;
      border-radius: 8px;
      padding-top: 20px;
      padding-left: 20px;
      text-align: start;
      color: #8F9BB3;
      }
      .nav-pills .nav-link{
      padding: 0;
      /*margin-right: 10px;*/
      background: transparent !important;
      font-size: 13px;
      margin-right: 15px;
      margin-bottom: 15px;
      }
      .nav-pills .nav-link.active{
      border: 1px solid blue;
      }
      .nav-item {
      margin-right: 15px;
      margin-bottom: 15px;
      }
   </style>
   </head>
   <body class="bg-gray-100 font-sans leading-normal tracking-normal">
      <header class="bg-blue-600 text-white py-4">
         <div class="container mx-auto">
            <h3 class="text-2xl font-semibold" style="color:black !important;" id="query-heading">Payment Logs / <span style="font-size: 16px; color: gray;">Transaction History </span> </h3>
         </div>
      </header>
      <main class="container mx-auto p-6 mt-5">
         <nav class="mb-6">
            <ul class="flex space-x-4">
               <li><a href="#vendor_collection" class="tablink rounded-t-lg border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition">Vendor Collection</a></li>
            </ul>
            <ul class="nav nav-pills mb-3 mt-5" id="pills-tab" role="tablist">
               <li class="nav-item " role="presentation">
                  <a href="#transaction_history" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link active" id="pending-orders-tab" onclick="updateHeading('Transaction History')">
                        <div class="order-column">
                           <div class="order-div1">Transaction History</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="countPending1">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a href="#vendor_collection" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link" id="total-orders-tab" onclick="updateHeading('Vendor Collection')">
                        <div class="order-column">
                           <div class="order-div1">Vendor Collection</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="orderCount">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a href="#referral_transactions" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link" id="accepted-orders-tab" onclick="updateHeading('Referral Transactions')">
                        <div class="order-column">
                           <div class="order-div1">Referral Transactions</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="countPickup1">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a href="#cash_collections" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link" id="shipping-orders-tab" onclick="updateHeading('Cash Collections')">
                        <div class="order-column">
                           <div class="order-div1">Cash Collections</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="countPicked1">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a href="#cash_collection_history" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link" id="delivered-orders-tab" onclick="updateHeading('Cash Collection History')">
                        <div class="order-column">
                           <div class="order-div1">Cash Collection History</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="countDelivered">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a href="#premium_purchases" class="tablink bg-blue-500 text-white rounded hover:bg-blue-600">
                     <button class="nav-link" id="premium-purchases-tab" onclick="updateHeading('Premium Purchases')">
                        <div class="order-column">
                           <div class="order-div1">Premium Purchases</div>
                           <div class="order-combine1">
                              <div class="order-div2" id="countPremium">0</div>
                           </div>
                        </div>
                     </button>
                  </a>
               </li>
            </ul>
         </nav>
         <div id="transaction_history" class="tabcontent">
            <h3 class="text-xl font-semibold mb-4">Transaction History</h3>
            <table id="transactionHistoryTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th class="px-4 py-2">ID</th>
                     <th class="px-4 py-2">User ID</th>
                     <th class="px-4 py-2">Payment ID</th>
                     <th class="px-4 py-2">Amount</th>
                     <th class="px-4 py-2">Message</th>
                     <th class="px-4 py-2">Reason</th>
                     <th class="px-4 py-2">Type</th>
                     <th class="px-4 py-2">Created At</th>
                     <th class="px-4 py-2">Updated At</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
         <div id="vendor_collection" class="tabcontent active">
            <h3 class="text-xl font-semibold mb-4">Vendor Collection</h3>
            <table id="vendorCollectionTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th class="px-4 py-2">ID</th>
                     <th class="px-4 py-2">Order ID</th>
                     <th class="px-4 py-2">Vendor ID</th>
                     <th class="px-4 py-2">Amount Collected</th>
                     <th class="px-4 py-2">Transaction Date</th>
                     <th class="px-4 py-2">Commission (%)</th>
                     <th class="px-4 py-2">Amount After Commission</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
         <div id="referral_transactions" class="tabcontent">
            <h3 class="text-xl font-semibold mb-4">Referral Transactions</h3>
            <table id="referralTransactionsTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th class="px-4 py-2">ID</th>
                     <th class="px-4 py-2">User ID</th>
                     <th class="px-4 py-2">Referral ID</th>
                     <th class="px-4 py-2">Amount</th>
                     <th class="px-4 py-2">Created At</th>
                     <th class="px-4 py-2">Updated At</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
         <div id="cash_collections" class="tabcontent">
            <h3 class="text-xl font-semibold mb-4">Cash Collections</h3>
            <table id="cashCollectionsTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th class="px-4 py-2">ID</th>
                     <th class="px-4 py-2">Delivery Agent ID</th>
                     <th class="px-4 py-2">Amount Collected</th>
                     <th class="px-4 py-2">Date of Submission</th>
                     <th class="px-4 py-2">Recipient</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
         <div id="cash_collection_history" class="tabcontent">
            <h3 class="text-xl font-semibold mb-4">Cash Collection History</h3>
            <table id="cashCollectionHistoryTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th class="px-4 py-2">ID</th>
                     <th class="px-4 py-2">Delivery Agent ID</th>
                     <th class="px-4 py-2">Order ID</th>
                     <th class="px-4 py-2">Amount</th>
                     <th class="px-4 py-2">Transaction Date</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
         <div id="premium_purchases" class="tabcontent">
            <h3 class="text-xl font-semibold mb-4">Premium Purchases</h3>
            <table id="premiumPurchasesTable" class="display w-full bg-white shadow-md rounded-lg" style="width:100%;">
               <thead class="bg-gray-200 text-gray-700">
                  <tr>
                     <th>ID</th>
                     <th>User ID</th>
                     <th>Transaction ID</th>
                     <th>Purchase Date</th>
                     <th>Amount</th>
                     <th>Payment Method</th>
                     <th>Status</th>
                     <th>Subscription Plan ID</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
      </main>
      <script>
    $(document).ready(function () {
        // Function to fetch data and update the table and count
        function fetchData(url, tableId, countId, orderColumnIndex = 0) {
            $.ajax({
                url: url,
                method: "GET",
                dataType: "json",
                success: function (data) {
                    // Update DataTable
                    $(tableId).DataTable({
                        destroy: true, // Destroy previous DataTable instance
                        data: data,
                        order: [[orderColumnIndex, "desc"]],
                        columns: Object.keys(data[0]).map(key => ({ title: key, data: key }))
                    });

                    // Update Count
                    $(countId).text(data.length);
                }
            });
        }

        // Fetch data and update tables and counts
        fetchData('https://drycleaneo.com/update/vendor_collection_api.php', '#vendorCollectionTable', '#orderCount');
        fetchData('https://drycleaneo.com/update/transaction_api.php', '#transactionHistoryTable', '#countPending1');
        fetchData('https://drycleaneo.com/update/referral_transactions_api.php', '#referralTransactionsTable', '#countPickup1');
        fetchData('https://drycleaneo.com/update/cash_collections_api.php', '#cashCollectionsTable', '#countPicked1');
        fetchData('https://drycleaneo.com/update/cash_collection_history_api.php', '#cashCollectionHistoryTable', '#countDelivered');
        fetchData('https://drycleaneo.com/update/premium_purchases.php?endpoint=read', '#premiumPurchasesTable', '#countPremium');

        // Handle tab navigation
        $(".tablink").on("click", function () {
            var target = $(this).attr("href");
            $(".tabcontent").removeClass("active");
            $(target).addClass("active");
            return false;
        });

        // Trigger the first tab to be active on page load
        $(".tablink:first").trigger("click");
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Function to handle tab activation
        var tabs = document.querySelectorAll('.nav-link');

        tabs.forEach(function (tab) {
            tab.addEventListener('click', function () {
                tabs.forEach(function (t) {
                    t.classList.remove('active');
                });
                tab.classList.add('active');
            });
        });
    });

    // Function to update the heading based on the query type
    function updateHeading(queryType) {
        const heading = document.getElementById('query-heading');
        const prefix = 'Payment Logs/ ';
        heading.innerHTML = `${prefix}<span style="font-size: 16px; color: gray;">${queryType}</span>`;
    }
</script>

 
   </body>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/Log_Management.blade.php ENDPATH**/ ?>