@extends('layouts/contentLayoutMaster')
@section('title', 'Add General Expense')
@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        @if ($users->contains('_id', auth()->user()->_id) || 
                        optional($aoBankAccount)->area_acc_officer === auth()->user()->_id || 
                        optional($pettyCashWallet)->user_id === auth()->user()->_id)
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">Account Balances</h4>
                        </div>
                        <div class="card-datatable table-responsive">
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    @php
                                        $bankBalance = $aoBankAccount ? "{$aoBankAccount->bank_acc_title} (Balance: " . ($aoBankAccount->amount ?? 0) . ")" : null;
                                        $pettyCashBalance = $pettyCashWallet ? "{$pettyCashWallet->title} (Balance: " . ($pettyCashWallet->amount ?? 0) . ")" : null;
                                    @endphp
                                    <tr>
                                        <th>Bank Balance</th>
                                        <td>
                                            {{$bankBalance ?? ''}} 
                                            @if(empty($aoBankAccount))
                                                <small class="text-danger">No record added for bank account.</small>
                                            @endif
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        <th>Petty Cash Balance</th>
                                        <td>
                                            {{ $pettyCashBalance ?? ''}}
                                            @if(empty($pettyCashWallet))
                                                <small class="text-danger">No record added for petty cash.</small>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add General Expense</h4>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($errorMessage = Session::get('errorMessage'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $errorMessage }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <form class="form" id="expenseForm" action="{{ route('general-expense.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                        
                                <input type="hidden" name="status" id="status" value="0">
                                <input type="hidden" name="codee" id="codee" value="{{ old('codee', $code) }}">
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="code">Code</label>
                                        <input type="text" id="code" class="form-control" placeholder="MCC Code"
                                            name="code" value="{{ old('code', $code) }}" disabled maxlength="7" />
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="exp_date">Expense Date *</label>
                                        <input type="date" id="exp_date" class="form-control" placeholder="Trx Date"
                                            name="exp_date" value="{{ old('exp_date') }}" max="{{ date('Y-m-d') }}"/>
                                        @error('exp_date')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="select2-multiple">Expense Category *</label>
                                        <select class="form-select" id="expense_category_id" name="expense_category_id">
                                            <option selected disabled>Please Select Category</option>
                                            @foreach ($expenseCategories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ $category->category_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('expense_category_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label">Level Of Expense *</label>
                                        <select class="form-control select2" name="level_of_expense" id="level_of_expense" onchange="showCollectionPoints()">
                                            <option selected disabled>Please Select Level Of Expense</option>
                                            <option value="area_office">Area Office</option>
                                            <option value="mcc">Collection Point</option>
                                        </select>
                                        @error('level_of_expense')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label">Area Office *</label>
                                        <select class="form-control select2" name="area_office_id" id="area_office_id">
                                            <option value="" selected disabled>Please Select Area Office</option>
                                            @foreach ($areaOffices as $areaOffice)
                                                <option value="{{ $areaOffice->id }}">{{ $areaOffice->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('area_office_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12 d-none" id="collection_point_div">
                                    <label class="form-label">Collection Point</label>
                                    <select class="form-control select2" name="collection_point_id" id="collection_point_id">
                                        <option value="" selected disabled>Please Select Collection Point</option>
                                    </select>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="type">Expense From *</label>
                        
                                        <select class="form-select" name="type" id="type">
                                            <option selected disabled>Please Select Type</option>
                                        </select>
                        
                                        @error('type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="select2-multiple">Bank</label>
                                        <select class="form-select select2" id="bank_id" name="bank_id">
                                            <option selected disabled>Please Select Bank Account</option>
                                        </select>
                                        @error('bank_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        <div id="error-message"></div> 
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12" id="petty_cash_wallets_div">
                                    <label class="form-label">Petty Cash Wallets</label>
                                    <select class="form-control select2" name="petty_cash_wallet_id" id="petty_cash_wallet_id">
                                        <option value="" selected disabled>Please Select Wallet</option>
                                    </select>
                                    @error('petty_cash_wallet_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div id="pc-error-message"></div> 
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="amount">Amount *</label>
                                        <input type="text" id="amount" class="form-control" placeholder="Amount"
                                            name="amount" value="{{ old('amount') }}" />
                                        @error('amount')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        
                                <div class="col-md-4 col-12">
                                    <div class="mb-2">
                                        <label class="form-label" for="remarks">Remarks *</label>
                                        <input type="text" id="remarks" class="form-control" placeholder="remarks"
                                            name="remarks" value="{{ old('remarks') }}" />
                                        @error('remarks')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4 col-12">
                                    <div class="mt-2">
                                        <a id="addExpense" class="btn btn-primary">Add</a>
                                    </div>
                                </div>
                                
                                <!-- Hidden input to store multiple entries -->
                                <input type="hidden" name="entries" id="entries">

                                <div class="card-datatable table-responsive mb-3">
                                    <!-- Table to display form data -->
                                    <table class="table table-bordered mt-3" id="expenseTable">
                                        <thead>
                                            <tr>
                                                <th>Expense Date</th>
                                                <th>Expense Category</th>
                                                <th>Level Of Expense</th>
                                                <th>Area Office</th>
                                                <th>Collection Point</th>
                                                <th>Expense From</th>
                                                <th>Bank</th>
                                                <th>Petty Cash Wallet</th>
                                                <th>Amount</th>
                                                <th>Remarks</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <div class="col-md-4 col-12">
                                    <div class="mb-2">
                                        <label class="form-label" for="file">Upload Image or PDF</label>
                                        <input type="file" id="file" class="form-control" name="file" accept="image/jpeg, image/png, image/jpg, application/pdf" onchange="previewUploadedFile(event)" />
                                        @error('file')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                
                                    <!-- File Preview Container -->
                                    <div class="mb-2" id="preview-container">
                                        <label class="form-label" for="file-preview">File Preview</label><br>
                                        <img id="imagePreview" style="max-width: 100%; height: auto; border: 1px solid #ddd; padding: 5px; display: none;" />
                                        <a id="pdfPreview" href="#" target="_blank" style="display: none; font-size: 16px;"></a>
                                    </div>
                                </div>
                        
                                <div class="col-12 d-flex align-items-center">
                                    <button type="submit" class="btn btn-primary me-1" onclick="setDraftFlag()" id="draftForm">Save as Draft</button>
                                    <button type="submit" class="btn btn-primary me-1" onclick="setPendingFlag()" id="submitForm">Submit for Approval</button>
                                    <div class="ms-auto">
                                        <strong>Total Amount: </strong> <span id="totalAmount">0</span>
                                    </div>
                                    {{-- <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                    <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('general-expense-category.index') }}">Cancel</a> --}}
                                </div>
                            </div>
                        </form>

                        
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->
@endsection
@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
@endsection
@section('page-script')
    <!-- Page js files -->
    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>
    <script>
        function showCollectionPoints() {
            var selectedValue = document.getElementById('level_of_expense').value;
            var collectionPointDiv = document.getElementById('collection_point_div');
            // var collectionPointSelect = document.getElementById('collection_point_id');
            var collectionPointSelect = $('#collection_point_id');
            var areaOfficeSelect = $('#area_office_id');
            
            if (selectedValue === 'mcc') {
                areaOfficeSelect.val(null).trigger('change');
                // Remove 'd-none' class if "Collection Point" is selected
                collectionPointDiv.classList.remove('d-none');
                
            } else if (selectedValue === 'area_office') {
                // Reset the "Collection Point" dropdown and add 'd-none' class if "Area Office" is selected
                collectionPointSelect.val(null).trigger('change'); // Reset to the first option
                areaOfficeSelect.val(null).trigger('change'); // Reset to the first option
                collectionPointDiv.classList.add('d-none');
            }
        }
    </script>
    <script>
        $('#area_office_id').on('change', function() {
            var baseUrl = '{{ URL::to('/') }}';
            var areaOfficeId = $(this).val();
            var levelOfExpense = $('#level_of_expense').val();
            
            // Make sure a valid Area Office is selected and "Collection Point" is selected in "Level Of Expense"
            if (areaOfficeId && levelOfExpense === 'mcc') {
                // console.log(areaOfficeId, levelOfExpense);
                // Make an AJAX request to get the collection points for the selected Area Office
                fetch(baseUrl +`/get-ao-collection-points/${areaOfficeId}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        // Get the collection points dropdown
                        var collectionPointsSelect = $('#collection_point_id');
                        
                        // Clear the current options
                        collectionPointsSelect.html('<option value="" selected disabled>Please Select Collection Point</option>');
                        
                        // Add the new options from the fetched data
                        data.forEach(function(collectionPoint) {
                            var option = $('<option>', {
                                value: collectionPoint._id,
                                text: collectionPoint.name
                            });
                            collectionPointsSelect.append(option);
                        });

                        // Trigger select2 to refresh the dropdown options
                        collectionPointsSelect.trigger('change.select2');

                        if (!collectionPointsSelect.hasClass('select2-hidden-accessible')) {
                            collectionPointsSelect.select2();  // Reinitialize select2 if needed
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching collection points:', error);
                    });
            }
        });
    </script>
    <script>
        function setDraftFlag() {
            // Set the flag to '0' when Save as Draft is clicked
            document.getElementById('status').value = 0;
        }

        function setPendingFlag() {
            // Set the flag to '2' when Submit is clicked
            document.getElementById('status').value = 2;
        }
    </script>

    <script>
        let selectedAreaOfficeId = null;
        let selectedAccountType = null;

        function loadBankAccounts() {
        // $('#area_office_id').on('change', function() {
            var baseUrl = '{{ URL::to('/') }}';
            // var areaOfficeId = $(this).val();
            console.log(selectedAreaOfficeId);
            // Make sure a valid Area Office is selected and "Collection Point" is selected in "Level Of Expense"
            
                if (selectedAreaOfficeId && selectedAccountType === 'bank') {
                    // console.log(areaOfficeId, levelOfExpense);
                    // Make an AJAX request to get the collection points for the selected Area Office
                    fetch(baseUrl +`/get-ao-bank-accounts/${selectedAreaOfficeId}`)
                        .then(response => response.json())
                        .then(data => {
                        console.log(data)
                        // Get the collection points dropdown
                        var aoAccountsSelect = $('#bank_id');
                        var errorMessageContainer = $('#error-message');
                        
                        // Clear the current options
                        aoAccountsSelect.html('<option value="" selected disabled>Please Select Bank Account</option>');
                        errorMessageContainer.html('');

                        if (data.length === 0) {
                            // If no bank accounts are returned, show an error message  
                            errorMessageContainer.html('<span class="text-danger">No bank account added against the selected Area Office.</span>');
                        } else {
                            // Add the new options from the fetched data
                            data.forEach(function(aoAccount) {
                                var amount = aoAccount.amount ? aoAccount.amount : 0;
                                var option = $('<option>', {
                                    value: aoAccount._id,
                                    text: aoAccount.bank_acc_title + ' (Balance: ' + amount + ')'
                                });
                                aoAccountsSelect.append(option);
                            });

                            aoAccountsSelect.prop('selectedIndex', 1);
                            // Trigger select2 to refresh the dropdown options
                            aoAccountsSelect.trigger('change.select2');
                        }

                        if (!aoAccountsSelect.hasClass('select2-hidden-accessible')) {
                            aoAccountsSelect.select2();  // Reinitialize select2 if needed
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching ao accounts:', error);
                    });
                } else {
                        console.log("No valid Area Office selected.");
                }
        }
        // });

        // Get petty cash wallets
        
        // Function to load petty cash wallets if both conditions are met
        function loadPettyCashWallets() {
        // $('#area_office_id').on('change', function() {
            var baseUrl = '{{ URL::to('/') }}';
            // var areaOfficeId = $(this).val();
            // var accountType = $('#type').val();
           
            // Make sure a valid Area Office is selected and "Collection Point" is selected in "Level Of Expense"
            if (selectedAreaOfficeId && selectedAccountType === 'petty_cash') {
                // console.log(bankId, levelOfExpense);
                // Make an AJAX request to get the collection points for the selected Area Office
                fetch(baseUrl +`/get-petty-cash-wallets/${selectedAreaOfficeId}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        // Get the collection points dropdown
                        var pettyCashWalletsSelect = $('#petty_cash_wallet_id');
                        var errorMessageContainer = $('#pc-error-message');
                        
                        // Clear the current options
                        pettyCashWalletsSelect.html('<option value="" selected disabled>Please Select Wallet</option>');
                        
                        errorMessageContainer.html('');

                        if (data.length === 0) {
                            // If no bank accounts are returned, show an error message  
                            errorMessageContainer.html('<span class="text-danger">No matching Petty Cash Wallet found for the selected Bank Account.</span>');
                        } else {
                            // Add the new options from the fetched data
                            data.forEach(function(pettyCashWallet) {
                                var amount = pettyCashWallet.amount ? pettyCashWallet.amount : 0;
                                var option = $('<option>', {
                                    value: pettyCashWallet._id,
                                    text: pettyCashWallet.title + ' (Balance: ' + amount + ')'
                                });
                                pettyCashWalletsSelect.append(option);
                            });

                            pettyCashWalletsSelect.prop('selectedIndex', 1);
                            // Trigger select2 to refresh the dropdown options
                            pettyCashWalletsSelect.trigger('change.select2');
                        }

                        if (!pettyCashWalletsSelect.hasClass('select2-hidden-accessible')) {
                            pettyCashWalletsSelect.select2();  // Reinitialize select2 if needed
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching collection points:', error);
                    });
            }
        }

        $('#area_office_id').on('change', function() {
            selectedAreaOfficeId = $(this).val();
            loadPettyCashWallets();  // Try to load wallets if account type is already selected
            loadBankAccounts();
        });

        $('#type').on('change', function() {
            selectedAccountType = $(this).val();
            loadPettyCashWallets();  // Try to load wallets if area office is already selected
            loadBankAccounts();

            // Clear petty cash wallets if "bank" is selected
            if (selectedAccountType === 'bank') {
                var pettyCashWalletsSelect = $('#petty_cash_wallet_id');
                pettyCashWalletsSelect.html('<option value="" selected disabled>Select Wallet</option>');
                pettyCashWalletsSelect.prop('disabled', true);
                $('#pc-error-message').html(''); // Clear any error messages
                pettyCashWalletsSelect.trigger('change.select2'); // Refresh select2

                // Enable Bank dropdown
                var bankAccountSelect = $('#bank_id');
                bankAccountSelect.prop('disabled', false);
                bankAccountSelect.trigger('change.select2'); // Refresh select2
            }

            if (selectedAccountType === 'petty_cash') {
                var bankAccountSelect = $('#bank_id');
                bankAccountSelect.html('<option value="" selected disabled>Select Bank Account</option>');
                bankAccountSelect.prop('disabled', true);
                $('#error-message').html(''); // Clear any error messages
                bankAccountSelect.trigger('change.select2'); // Refresh select2

                // Enable Wallet dropdown
                var pettyCashWalletsSelect = $('#petty_cash_wallet_id');
                pettyCashWalletsSelect.prop('disabled', false);
                pettyCashWalletsSelect.trigger('change.select2'); // Refresh select2
            }
        });
        // });
    </script>
    <script>
        // Account type
        const accountTypes = [
            { value: "bank", text: "Bank" },
            { value: "petty_cash", text: "Petty Cash" }
        ];
        // Get the select element
        const accountTypeSelect = document.getElementById('type');

        // Dynamically add options
        accountTypes.forEach(function(type) {
            let option = document.createElement('option');
            option.value = type.value;
            option.text = type.text;
            accountTypeSelect.add(option);
        });
        // Account type
    </script>

    <script>
        document.getElementById('amount').addEventListener('input', function(event) {
            var amount = event.target.value;
            var regex = /^[0-9]*\.?[0-9]+$/; // Valid float regex
            if (!regex.test(amount)) {
                event.target.setCustomValidity("Please enter a valid amount.");
            } else if (parseFloat(amount) < 0) {
                event.target.setCustomValidity("Opening balance cannot be negative.");
            } else {
                event.target.setCustomValidity(""); // Reset the error message
            }
        });
    </script>

    <script>
        function previewUploadedFile(event) {
            const file = event.target.files[0];  // Get the selected file
            const maxImageSize = 1024 * 1024;    // 1MB in bytes for images
            const maxPdfSize = 5 * 1024 * 1024;  // 5MB in bytes for PDFs
            if (file) {
                const fileType = file.type;
                const imagePreview = document.getElementById('imagePreview');
                const pdfPreview = document.getElementById('pdfPreview');

                if (fileType.startsWith('image/')) {
                    if (file.size > maxImageSize) {
                        alert('The selected image size exceeds 1 MB. Please choose a smaller image.');
                        event.target.value = ''; // Clear the file input
                        imagePreview.style.display = 'none';  // Hide image preview
                        pdfPreview.style.display = 'none';    // Hide PDF preview
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // Show image preview and hide PDF preview
                        imagePreview.src = e.target.result;  
                        imagePreview.style.display = 'block';
                        pdfPreview.style.display = 'none';
                    };
                    reader.readAsDataURL(file);  // Read the file as a data URL (base64)

                } else if (fileType === 'application/pdf') {
                    if (file.size > maxPdfSize) {
                        alert('The selected PDF size exceeds 5 MB. Please choose a smaller PDF.');
                        event.target.value = ''; // Clear the file input
                        imagePreview.style.display = 'none';  // Hide image preview
                        pdfPreview.style.display = 'none';    // Hide PDF preview
                        return;
                    }

                    const fileURL = URL.createObjectURL(file);
                    
                    // Show PDF preview as a link and hide image preview
                    pdfPreview.href = fileURL;
                    pdfPreview.style.display = 'inline-block';
                    pdfPreview.textContent = 'View PDF';
                    imagePreview.style.display = 'none';
                }

                // Disable input after selection
                // document.getElementById('file').disabled = true;
            }
        }
    </script>

    <script>
        // Set up AJAX to include CSRF token in all requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Initialize an empty array to store the form entries
        let expenseEntries = [];
    
        $(document).ready(function () {
            // Add event listener to the Add button
            $('#addExpense').on('click', function () {
                if(validateForm())
                {
                    // Get form field values
                    let code = $('#code').val();
                    let exp_date = $('#exp_date').val();
                    let expense_category_id = $('#expense_category_id').val();
                    let expense_category = $('#expense_category_id option:selected').text();
                    let level_of_expense = $('#level_of_expense').val();
                    let area_office = $('#area_office_id option:selected').text();
                    let area_office_id = $('#area_office_id').val();
                    let expense_from = $('#type').val();
                    let collection_point_id = $('#collection_point_id').val();
                    let collection_point = $('#collection_point_id option:selected').text();
                    let type = $('#type').val();
                    let bank_id = $('#bank_id').val();
                    let bank = $('#bank_id option:selected').text().replace(/\(.*?\)/g, '').trim();
                    let petty_cash_wallet = $('#petty_cash_wallet_id option:selected').text().replace(/\(.*?\)/g, '').trim();
                    let petty_cash_wallet_id = $('#petty_cash_wallet_id').val();
                    let amount = $('#amount').val();
                    let remarks = $('#remarks').val();
        
                    if(level_of_expense == 'area_office') {
                        collection_point = 'N/A';
                    }
        
                    if(expense_from == 'bank') {
                        petty_cash_wallet = 'N/A';
                    } else {
                        bank = 'N/A';
                    }

                    // Check if account has enough balance via AJAX call
                    $.ajax({
                        url: '{{ route('check.balance') }}', // Create a route for checking balance
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'), // CSRF token for Laravel
                            type: expense_from,
                            bank_id: bank_id,
                            petty_cash_wallet_id: petty_cash_wallet_id,
                            amount: amount
                        },
                        success: function (response) {
                            if (response.success) {
                                // If the balance is sufficient, add the entry to the table
                                // Create a new entry object and push it to the array
                                let newEntry = {
                                    code: code,
                                    exp_date: exp_date,
                                    expense_category: expense_category,
                                    expense_category_id: expense_category_id,
                                    level_of_expense: level_of_expense,
                                    area_office: area_office,
                                    area_office_id: area_office_id,
                                    expense_from: expense_from == 'bank' ? 'Bank' : 'Petty Cash',
                                    collection_point: collection_point,
                                    collection_point_id: collection_point_id,
                                    type: type,
                                    bank: bank,
                                    bank_id: bank_id,
                                    petty_cash_wallet: petty_cash_wallet,
                                    petty_cash_wallet_id: petty_cash_wallet_id,
                                    amount: amount,
                                    remarks: remarks
                                };
                                expenseEntries.push(newEntry);
                    
                                // Display the updated table
                                displayExpenses();
                    
                                // Reset the form for the next entry
                                resetForm();
                            } else {
                                // Show an error message if balance is insufficient
                                alert(response.message);
                            }
                        },
                        error: function (error) {
                            console.error('Error checking balance:', error);
                        }
                    });
                }else{
                    return false;
                }
            });
    
            // On form submit, serialize the array and submit the form
            $('#submitForm, #draftForm').on('click', function (e) {
                e.preventDefault(); // Prevent the form from submitting normally
    
                // Convert the entries array into a JSON string and store it in the hidden input
                $('#entries').val(JSON.stringify(expenseEntries));

                // Create FormData object to append form fields and file data
                let formData = new FormData($('#expenseForm')[0]);
    
                // Submit the form via AJAX
                $.ajax({
                    url: $('#expenseForm').attr('action'),
                    method: 'POST',
                    data: formData,
                    contentType: false, // Important for file upload
                    processData: false, // Important to prevent jQuery from processing the data
                    success: function (response) {
                        if (response.success === true) {
                            if (response.redirect_url) {
                                // Redirect to the specified route
                                window.location.href = response.redirect_url;
                            } else {
                                // Handle success (e.g., show success message, reset form, and table)
                                alert('Form submitted successfully');
                                expenseEntries = [];
                                clearTable();
                                resetForm();
                            }
                        } else {
                            // Handle error messages from the controller
                            if (response.message) {
                                alert(response.message); // Display the error message
                            } else {
                                alert('An unexpected error occurred. Please try again.'); // Generic error message
                            }
                        }
                    },
                    error: function (error) {
                        // Handle AJAX request errors (e.g., server errors)
                        if (error.responseJSON && error.responseJSON.message) {
                            alert(error.responseJSON.message); // Display the error message from the server
                        } else {
                            alert('An unexpected error occurred. Please try again.'); // Generic error message
                        }
                        console.error('Error submitting form:', error);
                    }
                });
            });
        });
    
        // Function to reset form fields
        function resetForm() {
            $('#expenseForm').find('input').not('#file, #code').val('');
    
            // Reset select2 fields or other custom dropdowns
            $('#area_office_id').val('').trigger('change');
            $('#collection_point_id').val('').trigger('change');
            $('#bank_id').val('').trigger('change');
            $('#petty_cash_wallet_id').val('').trigger('change');
        }
    
        // Function to display data in the table
        function displayExpenses() {
            let tbody = $('#expenseTable tbody');
            tbody.empty(); // Clear previous entries

            let totalAmount = 0;

            expenseEntries.forEach((entry, index) => {
                totalAmount += parseFloat(entry.amount); // Add the current entry's amount to the total

                tbody.append(`
                    <tr>
                        <td>${entry.exp_date}</td>
                        <td>${entry.expense_category}</td>
                        <td>${entry.level_of_expense}</td>
                        <td>${entry.area_office}</td>
                        <td>${entry.collection_point}</td>
                        <td>${entry.expense_from}</td>
                        <td>${entry.bank}</td>
                        <td>${entry.petty_cash_wallet}</td>
                        <td>${entry.amount}</td>
                        <td>${entry.remarks}</td>
                        <td><button class="btn btn-danger" onclick="removeExpense(${index})">Remove</button></td>
                    </tr>
                `);
            });

            // Update the total amount in the relevant span
            $('#totalAmount').text(totalAmount); // Display total amount with 2 decimal places
        }
    
        // Function to remove an entry by index
        function removeExpense(index) {
            expenseEntries.splice(index, 1); // Remove the entry from the array
            displayExpenses(); // Update the table
        }

        function validateForm() {
            let exp_date = $('#exp_date').val();
            let expense_category_id = $('#expense_category_id').val();
            let level_of_expense = $('#level_of_expense').val();
            let area_office_id = $('#area_office_id').val();
            let collection_point_id = $('#collection_point_id').val();
            let amount = $('#amount').val();
            let type = $('#type').val();
            let petty_cash_wallet_id = $('#petty_cash_wallet_id').val();
            let bank_id = $('#bank_id').val();
            let remarks = $('#remarks').val();

            if (!exp_date) {
                showAlert('error', 'Expense Date is required');
                $('#exp_date').addClass('is-invalid');
                return false;
            } else {
                $('#exp_date').removeClass('is-invalid');
            }

            if (!expense_category_id) {
                showAlert('error', 'Expense Category is required');
                $('#expense_category_id').addClass('is-invalid');
                return false;
            } else {
                $('#expense_category_id').removeClass('is-invalid');
            }

            if (!level_of_expense) {
                showAlert('error', 'Level of Expense is required');
                $('#level_of_expense').addClass('is-invalid');
                return false;
            } else {
                $('#level_of_expense').removeClass('is-invalid');
            }

            if (!area_office_id) {
                showAlert('error', 'Area Office is required');
                $('#area_office_id').addClass('is-invalid');
                return false;
            } else {
                $('#area_office_id').removeClass('is-invalid');
            }

            if (level_of_expense === 'mcc' && !collection_point_id) {
                showAlert('error', 'Collection Point is required when Level of Expense is MCC');
                $('#collection_point_id').addClass('is-invalid');
                return false;
            } else {
                $('#collection_point_id').removeClass('is-invalid');
            }

            if (!amount || isNaN(amount) || parseFloat(amount) < 0 || !Number.isInteger(parseFloat(amount))) {
                showAlert('error', 'Amount must be a valid integer greater than or equal to 0');
                $('#amount').addClass('is-invalid');
                return false;
            } else {
                $('#amount').removeClass('is-invalid');
            }

            if (!type) {
                showAlert('error', 'Type is required');
                $('#type').addClass('is-invalid');
                return false;
            } else {
                $('#type').removeClass('is-invalid');
            }

            if (type === 'petty_cash' && !petty_cash_wallet_id) {
                showAlert('error', 'Petty Cash Wallet is required when Type is Petty Cash');
                $('#petty_cash_wallet_id').addClass('is-invalid');
                return false;
            } else {
                $('#petty_cash_wallet_id').removeClass('is-invalid');
            }

            if (type === 'bank' && !bank_id) {
                showAlert('error', 'Bank is required when Type is Bank');
                $('#bank_id').addClass('is-invalid');
                return false;
            } else {
                $('#bank_id').removeClass('is-invalid');
            }

            if (!remarks) {
                showAlert('error', 'Remarks are required');
                $('#remarks').addClass('is-invalid');
                return false;
            } else {
                $('#remarks').removeClass('is-invalid');
            }

            return true;
        }

        function clearTable() {
            // Clear the table after form submission
            $('#expenseTable tbody').empty();
        }
    
    </script>
    
@endsection