@extends('layouts.master')

@section('title', 'Transactions')

@section('content')
    <div class="bg-white p-4 rounded shadow max-w-full mx-auto">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-amber-900">Transactions</h2>
            <button id="filterToggleBtn"
                    class="bg-amber-700 hover:bg-amber-800 text-white text-sm px-3 py-1 rounded shadow flex items-center">
                <i class="fas fa-filter mr-1"></i> Filter
            </button>
        </div>

        <!-- Filter Panel -->
        <div id="filterPanel"
             class="mb-4 bg-amber-50 p-4 rounded shadow-inner grid grid-cols-1 md:grid-cols-5 gap-4 hidden">
            <div>
                <label for="filterPAY_DATE" class="block text-amber-900 font-semibold mb-1">PAY_DATE</label>
                <input id="filterPAY_DATE" type="text"
                       class="w-full text-sm rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-amber-400" />
            </div>
            <div>
                <label for="filterBANK_TRAN_ID" class="block text-amber-900 font-semibold mb-1">BANK_TRAN_ID</label>
                <input id="filterBANK_TRAN_ID" type="text"
                       class="w-full text-sm rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-amber-400" />
            </div>
            <div>
                <label for="filterORG_CODE" class="block text-amber-900 font-semibold mb-1">ORG_CODE</label>
                <input id="filterORG_CODE" type="text"
                       class="w-full text-sm rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-amber-400" />
            </div>
            <div>
                <label for="filterBILL_NUM" class="block text-amber-900 font-semibold mb-1">BILL_NUM</label>
                <input id="filterBILL_NUM" type="text"
                       class="w-full text-sm rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-amber-400" />
            </div>
            <div>
                <label for="filterACC_NUM" class="block text-amber-900 font-semibold mb-1">ACC_NUM</label>
                <input id="filterACC_NUM" type="text"
                       class="w-full text-sm rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-amber-400" />
            </div>
        </div>

        <!-- Data Table -->
        <div class="overflow-auto max-h-[500px] border border-gray-200 rounded">
            <table id="transactionTable"
                   class="min-w-full text-sm table-auto border-collapse border border-gray-200">
                <thead class="bg-amber-100 sticky top-0 z-10">
                <tr>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CHANNEL_TYPE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CHANNEL_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PAY_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">TRAN_ID</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">BANK_TRAN_ID</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">ORG_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">BILL_MON</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">BILL_NUM</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">ACC_NUM</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">TOT_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PRIN_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">USER_MOBILE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">TRANSACTION_STATUS</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">ORG_BR_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">VAT_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">COMM_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">GT_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CREATE_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CREATE_BY</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">UPDATE_BY</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">UPDATE_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">STATUS</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PRIN_AMT_PC</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">MBP_TRANS_ID</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">SP_TRANS_ID</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PAY_TYPE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">METER_NO</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">ENERGY_COST</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">DEMAND_CHARGE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">METER_RENT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">SP_MSG</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CALLBACK_MSG</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">DUE_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">CONS_NAME</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">BILL_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">SP_ERR_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">LPC_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">AMT_WLPC</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">AMT_WOLPC</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">TOT_DEDDUCT_AMT</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">ALREADY_PAY_DATE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PC_TIMESTAMP</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PC_CALL_BACK_STATUS</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PC_CALL_BACK_MSG</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">PC_CALL_BACK_STATUS_CODE</th>
                    <th class="border border-gray-300 px-2 py-1 text-amber-900 font-semibold whitespace-nowrap">MERCHANT_MSISDN</th>
                </tr>
                </thead>
                <tbody>
                @php
                    // Dummy data array
                    $dummyTransactions = [
                        [
                            "CHANNEL_TYPE" => "Online", "CHANNEL_CODE" => "CH001", "PAY_DATE" => "2025-08-01",
                            "TRAN_ID" => "T1001", "BANK_TRAN_ID" => "B2001", "ORG_CODE" => "ORG1",
                            "BILL_MON" => "2025-07", "BILL_NUM" => "BN001", "ACC_NUM" => "AC12345",
                            "TOT_AMT" => "150.00", "PRIN_AMT" => "130.00", "USER_MOBILE" => "0551234567",
                            "TRANSACTION_STATUS" => "Success", "ORG_BR_CODE" => "BR01", "VAT_AMT" => "10.00",
                            "COMM_AMT" => "5.00", "GT_CODE" => "GT01", "CREATE_DATE" => "2025-08-01",
                            "CREATE_BY" => "admin", "UPDATE_BY" => "admin", "UPDATE_DATE" => "2025-08-02",
                            "STATUS" => "Active", "PRIN_AMT_PC" => "86.67", "MBP_TRANS_ID" => "MBP1001",
                            "SP_TRANS_ID" => "SP2001", "PAY_TYPE" => "Credit Card", "METER_NO" => "MTR100",
                            "ENERGY_COST" => "70.00", "DEMAND_CHARGE" => "30.00", "METER_RENT" => "10.00",
                            "SP_MSG" => "None", "CALLBACK_MSG" => "Received", "DUE_DATE" => "2025-08-15",
                            "CONS_NAME" => "John Doe", "BILL_AMT" => "150.00", "SP_ERR_CODE" => "0",
                            "LPC_DATE" => "2025-08-01", "AMT_WLPC" => "0", "AMT_WOLPC" => "0",
                            "TOT_DEDDUCT_AMT" => "0", "ALREADY_PAY_DATE" => "2025-08-01",
                            "PC_TIMESTAMP" => "2025-08-01 10:00:00", "PC_CALL_BACK_STATUS" => "OK",
                            "PC_CALL_BACK_MSG" => "Success", "PC_CALL_BACK_STATUS_CODE" => "200",
                            "MERCHANT_MSISDN" => "0557654321",
                        ],
                        [
                            "CHANNEL_TYPE" => "Offline", "CHANNEL_CODE" => "CH002", "PAY_DATE" => "2025-08-02",
                            "TRAN_ID" => "T1002", "BANK_TRAN_ID" => "B2002", "ORG_CODE" => "ORG2",
                            "BILL_MON" => "2025-07", "BILL_NUM" => "BN002", "ACC_NUM" => "AC67890",
                            "TOT_AMT" => "200.00", "PRIN_AMT" => "180.00", "USER_MOBILE" => "0559876543",
                            "TRANSACTION_STATUS" => "Pending", "ORG_BR_CODE" => "BR02", "VAT_AMT" => "15.00",
                            "COMM_AMT" => "10.00", "GT_CODE" => "GT02", "CREATE_DATE" => "2025-08-02",
                            "CREATE_BY" => "user1", "UPDATE_BY" => "user1", "UPDATE_DATE" => "2025-08-03",
                            "STATUS" => "Pending", "PRIN_AMT_PC" => "90.00", "MBP_TRANS_ID" => "MBP1002",
                            "SP_TRANS_ID" => "SP2002", "PAY_TYPE" => "Cash", "METER_NO" => "MTR200",
                            "ENERGY_COST" => "80.00", "DEMAND_CHARGE" => "40.00", "METER_RENT" => "15.00",
                            "SP_MSG" => "None", "CALLBACK_MSG" => "Waiting", "DUE_DATE" => "2025-08-16",
                            "CONS_NAME" => "Jane Smith", "BILL_AMT" => "200.00", "SP_ERR_CODE" => "0",
                            "LPC_DATE" => "2025-08-02", "AMT_WLPC" => "0", "AMT_WOLPC" => "0",
                            "TOT_DEDDUCT_AMT" => "0", "ALREADY_PAY_DATE" => "",
                            "PC_TIMESTAMP" => "2025-08-02 11:00:00", "PC_CALL_BACK_STATUS" => "Pending",
                            "PC_CALL_BACK_MSG" => "In Progress", "PC_CALL_BACK_STATUS_CODE" => "102",
                            "MERCHANT_MSISDN" => "0551239876",
                        ],
                    ];
                @endphp

                @foreach($dummyTransactions as $tran)
                    <tr>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CHANNEL_TYPE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CHANNEL_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PAY_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['TRAN_ID'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['BANK_TRAN_ID'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['ORG_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['BILL_MON'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['BILL_NUM'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['ACC_NUM'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['TOT_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PRIN_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['USER_MOBILE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['TRANSACTION_STATUS'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['ORG_BR_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['VAT_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['COMM_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['GT_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CREATE_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CREATE_BY'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['UPDATE_BY'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['UPDATE_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['STATUS'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PRIN_AMT_PC'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['MBP_TRANS_ID'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['SP_TRANS_ID'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PAY_TYPE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['METER_NO'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['ENERGY_COST'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['DEMAND_CHARGE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['METER_RENT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['SP_MSG'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CALLBACK_MSG'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['DUE_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['CONS_NAME'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['BILL_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['SP_ERR_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['LPC_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['AMT_WLPC'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['AMT_WOLPC'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['TOT_DEDDUCT_AMT'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['ALREADY_PAY_DATE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PC_TIMESTAMP'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PC_CALL_BACK_STATUS'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PC_CALL_BACK_MSG'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['PC_CALL_BACK_STATUS_CODE'] }}</td>
                        <td class="border border-gray-300 px-2 py-1 whitespace-nowrap">{{ $tran['MERCHANT_MSISDN'] }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const filterToggleBtn = document.getElementById('filterToggleBtn');
            const filterPanel = document.getElementById('filterPanel');
            const filters = {
                PAY_DATE: document.getElementById('filterPAY_DATE'),
                BANK_TRAN_ID: document.getElementById('filterBANK_TRAN_ID'),
                ORG_CODE: document.getElementById('filterORG_CODE'),
                BILL_NUM: document.getElementById('filterBILL_NUM'),
                ACC_NUM: document.getElementById('filterACC_NUM'),
            };
            const table = document.getElementById('transactionTable');
            const tbody = table.tBodies[0];

            filterToggleBtn.addEventListener('click', () => {
                filterPanel.classList.toggle('hidden');
            });

            // Filtering function
            function filterRows() {
                const filterValues = {
                    PAY_DATE: filters.PAY_DATE.value.trim().toLowerCase(),
                    BANK_TRAN_ID: filters.BANK_TRAN_ID.value.trim().toLowerCase(),
                    ORG_CODE: filters.ORG_CODE.value.trim().toLowerCase(),
                    BILL_NUM: filters.BILL_NUM.value.trim().toLowerCase(),
                    ACC_NUM: filters.ACC_NUM.value.trim().toLowerCase(),
                };

                for (const row of tbody.rows) {
                    // Get cell texts for filter columns by index:
                    // PAY_DATE = col 2, BANK_TRAN_ID = 4, ORG_CODE = 5, BILL_NUM = 7, ACC_NUM = 8 (0-based)
                    const payDate = row.cells[2].textContent.toLowerCase();
                    const bankTranId = row.cells[4].textContent.toLowerCase();
                    const orgCode = row.cells[5].textContent.toLowerCase();
                    const billNum = row.cells[7].textContent.toLowerCase();
                    const accNum = row.cells[8].textContent.toLowerCase();

                    const matches =
                        (!filterValues.PAY_DATE || payDate.includes(filterValues.PAY_DATE)) &&
                        (!filterValues.BANK_TRAN_ID || bankTranId.includes(filterValues.BANK_TRAN_ID)) &&
                        (!filterValues.ORG_CODE || orgCode.includes(filterValues.ORG_CODE)) &&
                        (!filterValues.BILL_NUM || billNum.includes(filterValues.BILL_NUM)) &&
                        (!filterValues.ACC_NUM || accNum.includes(filterValues.ACC_NUM));

                    row.style.display = matches ? '' : 'none';
                }
            }

            Object.values(filters).forEach(input => {
                input.addEventListener('input', filterRows);
            });
        });
    </script>
@endsection