@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto">
        <div class="relative flex flex-col items-end justify-end mr-10 text-center">
            <div>
                <button type="button"
                    class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                    id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                    Menu
                    <!-- Dropdown icon -->
                    <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                    id="dropdown-menu">
                    <div class="py-1" role="none">

                        <button onclick="showDiv1()" class="px-4 py-2 mb-2 rounded hover:bg-blue-700">
                            Expenses
                        </button>
                        <button onclick="showDiv2()" class="px-4 py-2 mb-4 rounded hover:bg-green-700">
                            Check Expenses
                        </button>
                    </div>
                </div>
            </div> <!-- Dropdown menu, show/hide based on menu state -->

        </div>
        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>
        <button class="py-3 text-white bg-blue-500 w-44 rounded-xl" onclick="openModal('addexpenseModal')">Add
            Expenses</button>
        <button class="py-3 text-white bg-blue-500 w-44 rounded-xl" onclick="openModal('CrincomeModal')">Add
            CR Income</button>
        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif
        <div class="mb-6">
            <form method="GET" action="{{ route('expense.report') }}" class="flex flex-col justify-end gap-4 md:flex-row">
                <div class="flex items-center gap-4">
                    <input type="checkbox" id="today" name="today" value="1"
                        {{ request('today') == '1' ? 'checked' : '' }}>
                    <label for="today" class="font-semibold">Today</label>
                </div>
                <div class="flex items-center gap-4">
                    <label for="specific_date" class="font-semibold">Select Date:</label>
                    <input type="date" id="specific_date" name="specific_date"
                        class="px-3 py-2 border border-gray-300 rounded-lg" value="{{ request('specific_date') }}">
                    <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-lg">Filter</button>
                </div>
            </form>
        </div>
        <div id="div1" class="p-4 bg-white rounded shadow">
            <table id="expensesWithoutCheckTable" class="min-w-full bg-white border border-gray-300">

                <thead class="">
                    <tr class="text-sm leading-normal text-gray-700 uppercase ">
                        <th class="px-6 py-3 text-left">Voucher</th>
                        <th class="px-6 py-3 text-left">Description</th>
                        <th class="px-6 py-3 text-left">Amount</th> <!-- Column for expense amount -->
                        <th class="px-6 py-3 text-left">Date</th> <!-- Column for expense date -->
                        <th class="px-6 py-3 text-left">Actions</th> <!-- Column for action buttons -->
                    </tr>
                </thead>
                <tbody class="text-sm font-light text-gray-600">
                    <!-- DataTables will populate this section -->
                </tbody>
            </table>
        </div>
        <div id="div2" class="hidden p-4 bg-white rounded shadow">
            <table id="expensesWithCheckTable" class="min-w-full bg-white border border-gray-300">

                <thead>
                    <tr class="text-sm leading-normal text-gray-700 uppercase bg-orange-500">
                        <th class="px-6 py-3 ">Date</th>
                        <th class="px-6 py-3 ">Check Date</th>
                        <th class="px-6 py-3 ">Amount</th>
                        <th class="px-6 py-3 ">Particulars</th> <!-- Column for expense amount -->
                        <th class="px-6 py-3 ">SRHI Cheque#</th> <!-- Column for expense date -->
                        <th class="px-6 py-3 ">Voucher</th> <!-- Column for action buttons -->
                        <th class="px-6 py-3">Remarks</th>
                        <th class="px-6 py-3 ">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm font-light text-center text-gray-600">
                    <!-- DataTables will populate this section -->
                </tbody>
                <tfoot>
                    <tr>

                        <th colspan="1">Total:</th>

                        <th colspan="1" id="totalAmount" colspan="6">0.00</th>

                    </tr>
                </tfoot>
            </table>
        </div>

        <script>
            function showDiv1() {
                document.getElementById('div1').classList.remove('hidden');
                document.getElementById('div2').classList.add('hidden');
            }

            function showDiv2() {
                document.getElementById('div1').classList.add('hidden');
                document.getElementById('div2').classList.remove('hidden');
            }
        </script>


        {{-- Expense Modal --}}
        <div id="addexpenseModal" class="fixed inset-0 flex items-baseline justify-center hidden bg-gray-500 bg-opacity-75">
            <div class="w-full max-w-4xl mt-10 overflow-y-auto bg-white rounded-lg shadow-lg">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-6 py-3 bg-blue-600 ">
                    <h5 class="text-lg font-bold text-white">Add Expenses</h5>
                    <button onclick="closeModal('addexpenseModal')" class="text-2xl font-bold text-white">&times;</button>
                </div>

                <form method="post" action="{{ route('expenses.store') }}"
                    class="p-6 space-y-6 bg-white rounded-lg shadow-md">
                    @csrf <!-- Include CSRF token for security -->

                    <!-- Input Voucher (same for all expenses) -->
                    <div class="flex flex-col gap-6 md:flex-row">
                        <div class="flex-1">
                            <label for="voucher" class="block text-sm font-medium text-gray-700">Voucher</label>
                            <div class="flex items-center mt-1">
                                <input type="text" id="voucher" name="Voucher"
                                    class="w-full p-2 border border-gray-300 rounded-md shadow-sm" required>
                                <button type="button" onclick="generateVoucherNumber()"
                                    class="px-4 py-2 ml-2 font-semibold text-white bg-blue-500 rounded-md shadow hover:bg-blue-600">Generate</button>
                            </div>
                        </div>

                        <!-- Input Date (same for all expenses) -->
                        <div class="flex-1">
                            <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
                            <input type="date" id="date" name="date"
                                class="w-full p-2 border border-gray-300 rounded-md shadow-sm" required>
                        </div>
                    </div>

                    <!-- Container for dynamic expense entries -->
                    <div id="expense-container" class="space-y-4">
                        <!-- Initial Expense Entry -->
                        <div class="relative p-4 border border-gray-300 rounded-md shadow-sm bg-gray-50">
                            <p class="text-xl font-bold">Non-Check Expenese</p>
                            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                                <div class="flex flex-col">
                                    <label for="description-0"
                                        class="text-sm font-medium text-gray-700">Description</label>
                                    <input type="text" id="description-0" name="expenses[0][Description]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                    <input type="text" id="type-0" name="expenses[0][type]"
                                        class="hidden p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required
                                        value="expense">
                                </div>
                                <div class="flex flex-col">
                                    <label for="amount-0" class="text-sm font-medium text-gray-700">Amount</label>
                                    <input type="number" id="amount-0" name="expenses[0][Amount]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01"
                                        required>
                                </div>
                                <button type="button" class="absolute text-red-600 top-2 right-2 hover:text-red-800"
                                    onclick="removeExpense(this)" title="Remove Expense">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Container for check expenses -->
                    <div id="check-expense-container" class="mt-6 space-y-4">
                        <!-- Initial Check Expense Entry -->
                        <div class="relative p-4 border border-gray-300 rounded-md shadow-sm bg-gray-50">
                            <p class="text-xl font-bold">Check Expenese</p>

                            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                                <div class="flex flex-col">
                                    <label for="check-number-0" class="text-sm font-medium text-gray-700">Check
                                        Number</label>
                                    <input type="text" id="check-number-0" name="check_expenses[0][CheckNumber]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                <input type="text" id="type-0" name="check_expenses[0][type]"
                                    class="hidden p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required
                                    value="check_expense">
                                <div class="flex flex-col">
                                    <label for="check-description-0"
                                        class="text-sm font-medium text-gray-700">Particulars</label>
                                    <input type="text" id="check-description-0" name="check_expenses[0][Description]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                <div class="flex flex-col">
                                    <label for="check-amount-0" class="text-sm font-medium text-gray-700">Amount</label>
                                    <input type="number" id="check-amount-0" name="check_expenses[0][Amount]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01"
                                        required>
                                </div>
                                <div class="flex flex-col">
                                    <label for="date" class="text-sm font-medium text-gray-700">Date</label>
                                    <input type="date" id="check_date" name="check_expenses[0][check_date]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01"
                                        required>
                                </div>
                                <div class="flex flex-col">
                                    <label for="remarks" class="text-sm font-medium text-gray-700">Remarks</label>
                                    <input type="remarks" id="remarks" name="check_expenses[0][remarks]"
                                        class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01"
                                        required>
                                </div>
                                <button type="button" class="absolute text-red-600 top-2 right-2 hover:text-red-800"
                                    onclick="removeCheckExpense(this)" title="Remove Check Expense">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons to add more entries -->
                    <div class="flex space-x-4">
                        <button type="button"
                            class="px-4 py-2 font-semibold text-white bg-green-500 rounded-md shadow hover:bg-green-600"
                            onclick="addExpense()">+ Add Another Expense</button>
                        <button type="button"
                            class="px-4 py-2 font-semibold text-white bg-yellow-500 rounded-md shadow hover:bg-yellow-600"
                            onclick="addCheckExpense()">+ Add Check Expense</button>
                        <button type="submit"
                            class="px-4 py-2 font-semibold text-white bg-blue-500 rounded-md shadow hover:bg-blue-600">Submit</button>
                    </div>
                </form>

                <script>
                    let expenseIndex = 1;
                    let checkExpenseIndex = 1;

                    function addExpense() {
                        const container = document.getElementById('expense-container');
                        const newEntry = document.createElement('div');
                        newEntry.className = 'relative p-4 border border-gray-300 rounded-md bg-gray-50 shadow-sm';
                        newEntry.innerHTML = `  <p class="text-xl font-bold">Non-Check Expenese</p>
                            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                                <div class="flex flex-col">
                                    <label for="description-${expenseIndex}" class="text-sm font-medium text-gray-700">Description</label>
                                    <input type="text" id="description-${expenseIndex}" name="expenses[${expenseIndex}][Description]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                  <input type="text" id="type-0"  name="expenses[${expenseIndex}][type]"
                                    class="hidden p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required
                                    value="expense">
                                <div class="flex flex-col">
                                    <label for="amount-${expenseIndex}" class="text-sm font-medium text-gray-700">Amount</label>
                                    <input type="number" id="amount-${expenseIndex}" name="expenses[${expenseIndex}][Amount]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01" required>
                                </div>
                                <button type="button" class="absolute text-red-600 top-2 right-2 hover:text-red-800" onclick="removeExpense(this)" title="Remove Expense">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        `;
                        container.appendChild(newEntry);
                        expenseIndex++;
                    }

                    function removeExpense(button) {
                        button.closest('.relative').remove();
                    }

                    function addCheckExpense() {
                        const container = document.getElementById('check-expense-container');
                        const newEntry = document.createElement('div');
                        newEntry.className = 'relative p-4 border border-gray-300 rounded-md bg-gray-50 shadow-sm';
                        newEntry.innerHTML = `  <p class="text-xl font-bold">Check Expenese</p>
                            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                                <div class="flex flex-col">
                                    <label for="check-number-${checkExpenseIndex}" class="text-sm font-medium text-gray-700">Check Number</label>
                                    <input type="text" id="check-number-${checkExpenseIndex}" name="check_expenses[${checkExpenseIndex}][CheckNumber]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                 <input type="text" id="type-0"  name="check_expenses[${expenseIndex}][type]"
                                    class="hidden p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required
                                    value="expense">
                                <div class="flex flex-col">
                                    <label for="check-description-${checkExpenseIndex}" class="text-sm font-medium text-gray-700">Particulars</label>
                                    <input type="text" id="check-description-${checkExpenseIndex}" name="check_expenses[${checkExpenseIndex}][Description]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                <div class="flex flex-col">
                                    <label for="check-amount-${checkExpenseIndex}" class="text-sm font-medium text-gray-700">Amount</label>
                                    <input type="number" id="check-amount-${checkExpenseIndex}" name="check_expenses[${checkExpenseIndex}][Amount]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01" required>
                                </div>
                                  <div class="flex flex-col">
                                    <label for="check-check_date-${checkExpenseIndex}" class="text-sm font-medium text-gray-700">Check Date</label>
                                    <input type="date" id="check-check_date-${checkExpenseIndex}" name="check_expenses[${checkExpenseIndex}][check_date]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" step="0.01" required>
                                </div>
                                  <div class="flex flex-col">
                                    <label for="check-remarks-${checkExpenseIndex}" class="text-sm font-medium text-gray-700">Remarks</label>
                                    <input type="text" id="check-remarks-${checkExpenseIndex}" name="check_expenses[${checkExpenseIndex}][remarks]" class="p-2 mt-1 border border-gray-300 rounded-md shadow-sm" required>
                                </div>
                                <button type="button" class="absolute text-red-600 top-2 right-2 hover:text-red-800" onclick="removeCheckExpense(this)" title="Remove Check Expense">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        `;
                        container.appendChild(newEntry);
                        checkExpenseIndex++;
                    }

                    function removeCheckExpense(button) {
                        button.closest('.relative').remove();
                    }

                    function generateVoucherNumber() {
                        const voucherInput = document.getElementById('voucher');
                        voucherInput.value = 'VOUCHER-' + Math.floor(Math.random() * 10000);
                    }
                </script>


            </div>
        </div>


        {{-- income Modal --}}
        <div id="CrincomeModal" class="fixed inset-0 flex items-start justify-center hidden bg-gray-800 bg-opacity-75">
            <div class="relative w-full max-w-3xl mt-10 bg-white rounded-lg shadow-lg">
                <div class="flex items-center justify-between px-6 py-3 bg-blue-600 ">
                    <h5 class="text-lg font-bold text-white">Add CR income</h5>
                    <button onclick="closeModal('CrincomeModal')" class="text-2xl font-bold text-white">&times;</button>
                </div>

                <form action="{{ route('miscellaneous_fees.store') }}" method="POST" class="p-6">
                    @csrf

                    <!-- Property Dropdown -->
                    <div class="mb-4">
                        <label for="property" class="block font-medium text-gray-700">Property</label>
                        <select id="property" name="property_id"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            required>
                            @foreach ($property as $property)
                                <option value="{{ $property->id }}">{{ $property->property_name }}</option>
                            @endforeach
                        </select>
                        @error('property_id')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Name Field -->
                    <div class="hidden mb-4">
                        <label for="name" class="block font-medium text-gray-700">Name Description</label>
                        <input type="text" id="name" name="name"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            value="CR" required>
                        @error('name')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Amount Field -->
                    <div class="mb-4">
                        <label for="amount" class="block font-medium text-gray-700">Amount (PHP)</label>
                        <input type="number" id="amount" name="amount"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            step="0.01" min="0" required>
                        @error('amount')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Amount Paid Field -->
                    <div class="hidden mb-4">
                        <label for="amount_paid" class="block font-medium text-gray-700">Amount Paid (PHP)</label>
                        <input type="number" id="amount_paid" name="amount_paid"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            step="0.01" min="0" required value="0">
                        @error('amount_paid')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Status Field -->
                    <div class="hidden mb-4">
                        <label for="status" class="block font-medium text-gray-700">Status</label>
                        <input type="text" id="status" name="status"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            required value="for_CR">
                        @error('status')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Notes -->
                    <div class="hidden mb-4">
                        <label for="notes" class="block font-medium text-gray-700">Notes</label>
                        <textarea id="notes" name="notes"
                            class="block w-full h-32 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">For CR</textarea>
                        @error('notes')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Date of Payable -->
                    <div class="mb-4">
                        <label for="date" class="block font-medium text-gray-700">Date of Payable</label>
                        <input type="date" id="date" name="date"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            required>
                        @error('date')
                            <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mt-6 text-center">
                        <button type="submit"
                            class="px-6 py-2 text-white transition duration-300 bg-blue-600 rounded-lg hover:bg-blue-700">Submit</button>
                    </div>
                </form>
            </div>
        </div>



        <div id="successModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
            <div class="w-full max-w-sm p-6 mt-16 text-center bg-white rounded-lg shadow-lg">
                <h2 class="text-lg font-bold text-green-600">Success!</h2>
                <p id="successMessage">Expense Updated Successfully</p>
                <button id="closeSuccessModal"
                    class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600">Close</button>
            </div>
        </div>
        </script>
        <script>
            // Open and close modal functions
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
            }

            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
            }
        </script>
        <script>
            function generateVoucherNumber() {
                const voucherInput = document.getElementById('voucher');
                const length = 8; // Length of the voucher number
                const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; // Characters to use
                let voucherNumber = '';

                for (let i = 0; i < length; i++) {
                    const randomIndex = Math.floor(Math.random() * charset.length);
                    voucherNumber += charset[randomIndex];
                }

                voucherInput.value = voucherNumber;
            }
        </script>

        @foreach ($expenses as $exp)
            <div id="deleteModal{{ $exp->id }}"
                class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                <!-- Modal dialog -->
                <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                    <!-- Modal header -->
                    <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                        <h5 class="font-bold text-white">Confirm Delete</h5>
                        <button onclick="closeModal('deleteModal{{ $exp->id }}')"
                            class="text-white">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="px-4 py-4">
                        <p>Are you sure you want to delete this data?</p>
                    </div>

                    <!-- Modal footer -->
                    <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                        <button onclick="closeModal('deleteModal{{ $exp->id }}')"
                            class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                        <!-- Form for delete -->
                        <form id="deleteForm{{ $exp->id }}" action="{{ route('expenses.destroy', $exp->id) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
            <div id="remarksModal{{ $exp->id }}"
                class="fixed inset-0 flex items-start justify-center hidden bg-black bg-opacity-70">
                <div class="w-full max-w-3xl mx-auto mt-10 overflow-hidden bg-white rounded-lg shadow-2xl">
                    <div class="flex items-center justify-between px-6 py-4 bg-blue-600">
                        <h5 class="text-lg font-bold text-white">Change Remarks</h5>
                        <button onclick="closeModal('remarksModal{{ $exp->id }}')"
                            class="text-2xl text-white">&times;</button>
                    </div>

                    <div class="p-6">
                        <form id="remarksForm{{ $exp->id }}" action="{{ route('expenses.update', $exp->id) }}"
                            method="POST">
                            @csrf
                            @method('PUT') <!-- This is important for resource routes -->
                            <div class="mb-4">
                                <label for="remark" class="block text-sm font-semibold text-gray-700">Remarks</label>
                                <textarea name="remarks" id="remark" rows="4"
                                    class="w-full p-2 border-2 border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="Enter your remarks here">{{ $exp->remarks }}</textarea>
                            </div>
                            <div class="mb-4">
                                <label for="canceled" class="flex items-center">
                                    <input type="checkbox" name="canceled" id="canceled" value="1"
                                        {{ $exp->status ? 'checked' : '' }} class="mr-2">
                                    This check is canceled
                                </label>
                            </div>
                            <button type="submit"
                                class="w-full px-4 py-2 text-white transition duration-300 bg-blue-500 rounded hover:bg-blue-600">Save
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach







        <script>
            $(document).ready(function() {
                // Initialize DataTable for expenses with check numbers
                var tableWithCheck = $('#expensesWithCheckTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('expenses.index') }}', // Replace with your route
                        data: {
                            table: 'check'
                        } // Send a parameter to identify the table
                    },
                    columns: [{
                            data: 'date',
                            name: 'date'
                        }, {
                            data: 'check_date',
                            name: 'check_date'
                        },
                        {
                            data: 'expenses_amount',
                            name: 'expenses_amount'
                        },
                        {
                            data: 'Description',
                            name: 'Description'
                        },
                        {
                            data: 'check_number',
                            name: 'check_number'
                        },
                        {
                            data: 'Voucher',
                            name: 'Voucher'
                        },
                        {
                            data: 'remarks',
                            name: 'remarks'
                        },
                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    createdRow: function(row, data, dataIndex) {
                        // Check if status is "canceled" (assuming you return the status in the response data)
                        if (data.status === '1') {
                            // Apply the yellow background color to the expenses_amount column (2nd column)
                            $('td', row).eq(2).css('background-color', 'yellow');
                        }
                    },
                    footerCallback: function(row, data, start, end, display) {
                        var api = this.api();

                        // Initialize total
                        var total = 0;

                        // Loop through each row's data
                        api.rows({
                            page: 'current'
                        }).every(function(rowIdx, tableLoop, rowLoop) {
                            var rowData = this.data(); // Get the data for the row

                            // Check if the status is not 1 (canceled or excluded status)
                            if (rowData.status != 1) {
                                total += parseFloat(rowData.expenses_amount) ||
                                    0; // Add to total if status is not 1
                            }
                        });

                        // Update the footer with the calculated total
                        $(api.column(1).footer()).html(total.toFixed(2));
                    }
                });

                // Initialize DataTable for expenses without check numbers
                var tableWithoutCheck = $('#expensesWithoutCheckTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('expenses.index') }}', // Replace with your route
                        data: {
                            table: 'no-check'
                        } // Send a parameter to identify the table
                    },
                    columns: [{
                            data: 'Voucher',
                            name: 'Voucher'
                        },
                        {
                            data: 'Description',
                            name: 'Description'
                        },
                        {
                            data: 'expenses_amount',
                            name: 'expenses_amount'
                        },
                        {
                            data: 'date',
                            name: 'date'
                        },
                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    createdRow: function(row, data, dataIndex) {
                        // Check if status is "canceled" (assuming you return the status in the response data)
                        if (data.status === '1') {
                            // Apply the yellow background color to the expenses_amount column (3rd column)
                            $('td', row).eq(2).css('background-color', 'yellow');
                        }
                    }
                });

                // Handle the form submission for remarks editing
                $('form[id^="remarksForm"]').on('submit', function(event) {
                    event.preventDefault(); // Prevent default form submission

                    $.ajax({
                        url: $(this).attr('action'), // Get action URL
                        method: 'POST',
                        data: $(this).serialize() + '&_method=PUT', // Append the method for updating
                        success: function(response) {
                            // Show success modal
                            $('#successMessage').text(response.message); // Update message
                            $('#successModal').removeClass('hidden'); // Show modal

                            // Reload both DataTables
                            tableWithCheck.ajax.reload(); // Reload the table with checks
                            tableWithoutCheck.ajax.reload(); // Reload the table without checks
                        },
                        error: function(xhr) {
                            alert('An error occurred. Please try again.'); // Handle error
                        }
                    });
                });

                // Close modal functionality
                $('#closeSuccessModal').on('click', function() {
                    $('#successModal').addClass('hidden'); // Hide modal
                });
            });
        </script>
    @endsection()