@extends('app')

@section('content')


    <div id="approval" class="container mx-auto px-4 my-6">
        <div class="bg-white rounded-lg shadow-md p-5 dark:bg-gray-800">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Pending Applications</h2>

            <!-- Search Bar -->
            <div class="flex items-center justify-between mb-4">
                <input type="text" id="approvalSearch" placeholder="Search by Client Name..."
                    class="w-full md:w-1/3 p-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>

            <!-- Pending Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full border border-gray-200 text-sm text-left text-gray-700 dark:text-gray-300">
                    <thead class="bg-gray-100 dark:bg-gray-700">
                        <tr>
                            <th class="px-4 py-2">Client Name</th>
                            <th class="px-4 py-2">Category</th>
                            <th class="px-4 py-2">Subcategory</th>
                            <th class="px-4 py-2">Date Submitted</th>
                            <th class="px-4 py-2">Status</th>
                            <th class="px-4 py-2 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody id="approvalTableBody">
                        @forelse ($pendingApplications as $app)
                            <tr class="border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">
                                <td class="px-4 py-2">{{ $app->fname ?? '' }} {{ $app->lname ?? '' }}</td>
                                <td class="px-4 py-2">
                                    @if ($app->category === 'Financial Assistance')
                                        <span
                                            class="px-2 py-1 text-xs font-semibold text-indigo-800 bg-indigo-200 rounded-full">
                                            Financial Assistance
                                        </span>
                                    @elseif ($app->category === 'Guarantee Letter')
                                        <span
                                            class="px-2 py-1 text-xs font-semibold text-pink-800 bg-pink-200 rounded-full">
                                            Guarantee Letter
                                        </span>
                                    @else
                                        <span
                                            class="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 rounded-full">
                                            {{ $app->category }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">{{ $app->subcategory }}</td>
                                <td class="px-4 py-2">{{ $app->created_at->format('m-d-Y g:i A') }}</td>
                                <td class="px-4 py-2"><span
                                        class="px-2 py-1 text-xs font-semibold text-gray-800 bg-yellow-500 rounded-full">
                                        {{ $app->status }} </span></td>
                                <td class="px-4 py-2 text-center">
                                    <button data-modal-target="reviewApprovalModal" data-modal-toggle="reviewApprovalModal"
                                        class="view-btn bg-blue-600 text-white px-3 py-1 rounded-md text-sm hover:bg-blue-700"
                                        data-id="{{ $app->id }}" data-user_id="{{ optional($app->user)->FULLNAME ?? 'Unknown Encoder' }}"
                                        data-fname="{{ $app->fname }}" data-lname="{{ $app->lname }}"
                                        data-address="{{ $app->address }}" data-barangay="{{ $app->barangay }}"
                                        data-category="{{ $app->category }}" data-subcategory="{{ $app->subcategory }}"
                                        data-institution="{{ $app->institution }}"
                                        data-bill_amount="{{ $app->bill_amount }}"
                                        data-approved_amount="{{ $app->approved_amount }}"
                                        data-claimant="{{ $app->claimant }}" data-contact_no="{{ $app->contact_no }}"
                                        data-date="{{ $app->created_at ? $app->created_at->format('M j, Y • g:i A') : '' }}">
                                        View Details
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-6 text-center text-gray-600">
                                    No pending applications found.
                                </td>
                            </tr>
                        @endforelse

                    </tbody>

                </table>
            </div>
        </div>
    </div>

    <!-- Toast container -->
    <div id="toastContainer" class="fixed top-6 right-6 z-50 space-y-2"></div>

    <!-- Toast styling helper (optional small fade) -->
    <style>
        .toast {
            transition: transform .3s ease, opacity .3s ease;
        }

        .toast-hide {
            opacity: 0;
            transform: translateY(-8px);
        }
    </style>



    @include('approval.reviewmodal')



    <script>
        document.getElementById('approvalSearch').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            const rows = document.querySelectorAll('#approvalTableBody tr');

            rows.forEach(row => {
                const name = row.cells[0].textContent.toLowerCase();
                row.style.display = name.includes(searchValue) ? '' : 'none';
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // Load values from button data attributes (coming from backend)
                    document.getElementById('AppID').textContent = this.dataset.id ||
                        '—';
                    document.getElementById('modalEncoder').textContent = this.dataset.user_id ||
                        '—';
                    document.getElementById('modalDate').textContent = this.dataset.date || '—';
                    document.getElementById('modalFname').value = this.dataset.fname || '—';

                    document.getElementById('modalLname').value = this.dataset.lname || '—';
                    document.getElementById('modalAddress').value = this.dataset.address ||
                        '—';
                    document.getElementById('modalBarangay').value = this.dataset.barangay ||
                        '—';
                    document.getElementById('modalContact').value = this.dataset.contact_no ||
                        '—';
                    document.getElementById('modalClaimant').value = this.dataset.claimant ||
                        '—';
                    document.getElementById('modalCategory').value = this.dataset.category ||
                        '—';
                    document.getElementById('modalSubcategory').value = this.dataset
                        .subcategory || '—';
                    document.getElementById('modalInstitution').value = this.dataset
                        .institution || 'N/A';
                    document.getElementById('modalBillAmount').value = this.dataset
                        .bill_amount ? `₱${parseFloat(this.dataset.bill_amount).toLocaleString()}` :
                        '—';
                    document.getElementById('modalApprovedAmount').value = this.dataset
                        .approved_amount ?
                        `₱${parseFloat(this.dataset.approved_amount).toLocaleString()}` : '—';
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // elements
            const modal = document.getElementById('reviewApprovalModal');
            const saveBtn = document.getElementById('saveEditBtn');
            const editToggleBtn = document.getElementById('editToggleBtn');
            const editableInputs = document.querySelectorAll('.editable-input');
            const toastContainer = document.getElementById('toastContainer');
            const approveBtn = document.getElementById('approveBtn');
            const rejectBtn = document.getElementById('rejectBtn');

            let editMode = false;
            let currentAppId = null;
            let activeRow = null; // DOM row for updating after save

            // helper: show toast
            function showToast(message, type = 'success', timeout = 3000) {
                const bg = type === 'error' ? 'bg-red-600' : 'bg-green-600';
                const el = document.createElement('div');
                el.className = `toast ${bg} text-white px-4 py-2 rounded shadow-md`;
                el.textContent = message;
                toastContainer.appendChild(el);
                setTimeout(() => {
                    el.classList.add('toast-hide');
                    setTimeout(() => el.remove(), 300);
                }, timeout);
            }
            // helper: CSRF
            function getCsrfToken() {
                return document.querySelector('meta[name="csrf-token"]')?.content ||
                    document.querySelector('input[name="_token"]')?.value ||
                    '';
            }
            // Toggle edit mode (re-uses your earlier toggling but ensure classes and readonly updated)
            editToggleBtn.addEventListener('click', function() {
                editMode = !editMode;

                editableInputs.forEach(input => {
                    input.readOnly = !editMode;
                    if (editMode) {
                        input.classList.add(
                            "bg-blue-50",
                            "text-gray-900",
                            "border-blue-500"
                        );
                        input.classList.remove("bg-transparent", "text-gray-800",
                            "dark:text-gray-100");
                    } else {
                        input.classList.remove("bg-blue-50", "border-blue-500");
                        input.classList.add("bg-transparent", "text-gray-800",
                            "dark:text-gray-100");
                    }
                });

                if (editMode) {
                    editToggleBtn.textContent = 'Cancel Edit';
                    editToggleBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
                    editToggleBtn.classList.add('bg-gray-400', 'hover:bg-gray-500');
                    saveBtn.classList.remove('hidden');
                } else {
                    editToggleBtn.textContent = 'Edit';
                    editToggleBtn.classList.remove('bg-gray-400', 'hover:bg-gray-500');
                    editToggleBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
                    saveBtn.classList.add('hidden');
                }
            });

            // click handler for view buttons: populate modal fields AND record currentAppId and active row
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // set active row (closest tr)
                    activeRow = this.closest('tr');

                    // capture app id
                    currentAppId = this.dataset.id || null;

                    // Fill modal fields (same as before)
                    document.getElementById('AppID').textContent = currentAppId  ?
                     `AICS-${new Date().getFullYear()}-${String(currentAppId).padStart(6, '0')}`
                    : '—';
                    document.getElementById('modalEncoder').textContent = this.dataset.user_id ||
                        '—';
                    document.getElementById('modalDate').textContent = this.dataset.date || '—';
                    document.getElementById('modalFname').value = this.dataset.fname || '—';
                    document.getElementById('modalLname').value = this.dataset.lname || '—';
                    document.getElementById('modalAddress').value = this.dataset.address || '';
                    document.getElementById('modalBarangay').value = this.dataset.barangay || '';
                    document.getElementById('modalContact').value = this.dataset.contact_no || '';
                    document.getElementById('modalClaimant').value = this.dataset.claimant || '';
                    document.getElementById('modalCategory').value = this.dataset.category || '';
                    document.getElementById('modalSubcategory').value = this.dataset.subcategory ||
                        '';
                    document.getElementById('modalInstitution').value = this.dataset.institution ||
                        '';
                    document.getElementById('modalBillAmount').value = this.dataset.bill_amount ||
                        '';
                    document.getElementById('modalApprovedAmount').value = this.dataset
                        .approved_amount || '';
                    document.getElementById('reviewRemarks').value = this.dataset.remarks || '';

                    // ensure modal is visible (if you're not using Flowbite)
                    modal.classList.remove('hidden');

                    // reset edit mode UI (read-only)
                    if (editMode) {
                        editToggleBtn.click();
                    } // cancel edit if left on
                });
            });

            // Save changes: send to server and update table
            saveBtn.addEventListener('click', function() {
                if (!currentAppId) {
                    showToast('No application selected', 'error');
                    return;
                }

                // collect values from modal inputs
                const payload = {
                    fname: document.getElementById('modalFname').value || '',
                    lname: document.getElementById('modalLname').value || '',
                    address: document.getElementById('modalAddress').value || '',
                    barangay: document.getElementById('modalBarangay').value || '',
                    contact_no: document.getElementById('modalContact').value || '',
                    claimant: document.getElementById('modalClaimant').value || '',
                    category: document.getElementById('modalCategory').value || '',
                    subcategory: document.getElementById('modalSubcategory').value || '',
                    institution: document.getElementById('modalInstitution').value || '',
                    bill_amount: document.getElementById('modalBillAmount').value || '',
                    approved_amount: document.getElementById('modalApprovedAmount').value || '',
                    remarks: document.getElementById('reviewRemarks').value || '',
                    _method: 'PUT' // because we'll send POST with method override
                };

                //Routing value
                const updateUrl =
                    `{{ url('approvals') }}/${currentAppId}`; // expects route: Route::put('/approvals/{id}'

                saveBtn.disabled = true;
                saveBtn.textContent = 'Saving...';

                fetch(updateUrl, {
                        method: 'POST', // using method override for Laravel
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                ?.content || document.querySelector('input[name="_token"]')?.value ||
                                '',
                            'Accept': 'application/json'
                        },
                        body: (function() {
                            const formData = new FormData();
                            for (const key in payload) formData.append(key, payload[key]);
                            return formData;
                        })()
                    })
                    .then(async res => {
                        saveBtn.disabled = false;
                        saveBtn.textContent = 'Save Changes';

                        if (!res.ok) {
                            // try to parse JSON error
                            let err = 'Save failed';
                            try {
                                const json = await res.json();
                                err = json.message || JSON.stringify(json);
                            } catch (e) {}
                            throw new Error(err);
                        }
                        return res.json();
                    })
                    .then(data => {
                        // backend should return the updated resource (attempt to support both shapes)
                        const updated = data.updated || data.data || data; // try common shapes

                        // Update table row cells + data attributes so UI stays in sync
                        if (activeRow) {
                            // first cell: name
                            const nameCell = activeRow.querySelector('td:first-child');
                            if (nameCell) nameCell.textContent =
                                `${updated.fname || payload.fname} ${updated.lname || payload.lname}`
                                .trim();

                            // category badge cell
                            const categoryCell = activeRow.querySelector('td:nth-child(2)');
                            if (categoryCell) {
                                // update text and badge color
                                const cat = updated.category || payload.category;
                                if (cat === 'Financial Assistance') {
                                    categoryCell.innerHTML =
                                        `<span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Financial Assistance</span>`;
                                    activeRow.classList.remove('border-blue-500');
                                    activeRow.classList.add('border-green-500');
                                } else if (cat === 'Guarantee Letter') {
                                    categoryCell.innerHTML =
                                        `<span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">Guarantee Letter</span>`;
                                    activeRow.classList.remove('border-green-500');
                                    activeRow.classList.add('border-blue-500');
                                } else {
                                    categoryCell.textContent = cat || '—';
                                }
                            }

                            // subcategory cell
                            const subCell = activeRow.querySelector('td:nth-child(3)');
                            if (subCell) subCell.textContent = updated.subcategory || payload
                                .subcategory || '—';

                            // barangay/date cells: if different indices change accordingly
                            const dateCell = activeRow.querySelector('td:nth-child(4)');
                            if (dateCell) {
                                // keep original date or update to returned created_at if provided
                                dateCell.textContent = updated.created_at ? updated.created_at :
                                    dateCell.textContent;
                            }

                            // update data-* attrs on the button in this row (so next open has fresh values)
                            const btn = activeRow.querySelector('.view-btn');
                            if (btn) {
                                btn.dataset.fname = updated.fname || payload.fname;
                                btn.dataset.lname = updated.lname || payload.lname;
                                btn.dataset.address = updated.address || payload.address;
                                btn.dataset.barangay = updated.barangay || payload.barangay;
                                btn.dataset.contact_no = updated.contact_no || payload.contact_no;
                                btn.dataset.claimant = updated.claimant || payload.claimant;
                                btn.dataset.category = updated.category || payload.category;
                                btn.dataset.subcategory = updated.subcategory || payload.subcategory;
                                btn.dataset.institution = updated.institution || payload.institution;
                                btn.dataset.bill_amount = updated.bill_amount || payload.bill_amount;
                                btn.dataset.approved_amount = updated.approved_amount || payload
                                    .approved_amount;
                                btn.dataset.contact_no = updated.contact_no || payload
                                    .contact_no;
                                btn.dataset.remarks = updated.remarks || payload.remarks || '';
                            }
                        }

                        // exit edit mode
                        if (editMode) editToggleBtn.click();

                        showToast('Changes saved successfully', 'success');

                    })
                   .catch(async err => {
                        console.error('FULL ERROR:', err);
                        showToast(`Save failed: ${err.message}`, 'error', 10000);
                    });
            });

            // NEW: Reject button – update status to REJECTED
            rejectBtn.addEventListener('click', function() {
                if (!currentAppId) {
                    showToast('No application selected', 'error');
                    return;
                }
                if (!confirm('Are you sure you want to reject this application?')) {
                    return;
                }

                const payload = {
                    status: 'REJECTED',
                    remarks: document.getElementById('reviewRemarks').value || '',
                    _method: 'PUT'
                };

                const updateUrl = `{{ url('approvals') }}/${currentAppId}`;

                rejectBtn.disabled = true;
                rejectBtn.textContent = 'Rejecting...';

                fetch(updateUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': getCsrfToken(),
                            'Accept': 'application/json'
                        },
                        body: (function() {
                            const fd = new FormData();
                            for (const key in payload) fd.append(key, payload[key]);
                            return fd;
                        })()
                    })
                    .then(async res => {
                        rejectBtn.disabled = false;
                        rejectBtn.textContent = 'Reject';

                        if (!res.ok) {
                            let err = 'Reject failed';
                            try {
                                const json = await res.json();
                                err = json.message || JSON.stringify(json);
                            } catch (e) {}
                            throw new Error(err);
                        }
                        return res.json();
                    })
                    .then(data => {
                        const updated = data.updated || data.data || data;

                        // Optional: update status cell / styling in the table
                        if (activeRow) {
                            // Example: assuming status is in 5th column – adjust index as needed
                            const statusCell = activeRow.querySelector('td:nth-child(5)');
                            if (statusCell) {
                                statusCell.innerHTML =
                                    `<span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Rejected</span>`;
                            }
                            // Optionally dim the row or disable button
                            const btn = activeRow.querySelector('.view-btn');
                            if (btn) {
                                btn.disabled = false; // or true if you don't want re-open
                                btn.dataset.status = updated.status || 'REJECTED';
                            }
                        }

                        showToast('Application rejected', 'success');
                        // close modal:
                        modal.classList.add('hidden');
                        // Redirect after short visual success delay
                        setTimeout(() => {
                            window.location.href = "{{ url('approvals') }}";
                        }, 800);
                    })
                    .catch(err => {
                        console.error(err);
                        showToast(`Reject failed: ${err.message}`, 'error', 6000);
                    });
            });

            // NEW: Approve button – create ApprovedTransaction + mark original as APPROVED
            approveBtn.addEventListener('click', function() {
                if (!currentAppId) {
                    showToast('No application selected', 'error');
                    return;
                }
                if (!confirm('Approve this application and move it to For Releasing?')) {
                    return;
                }

                const approveUrl = `{{ url('approvals') }}/${currentAppId}/approve`;

                approveBtn.disabled = true;
                approveBtn.textContent = 'Approving...';

                // We only need remarks here; backend will copy fields from the approval record
                const fd = new FormData();
                fd.append('remarks', document.getElementById('reviewRemarks').value || '');
                

                fetch(approveUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': getCsrfToken(),
                            'Accept': 'application/json'
                        },
                        body: fd
                    })
                    .then(async res => {
                        approveBtn.disabled = false;
                        approveBtn.textContent = 'Approve';

                        if (!res.ok) {
                            let err = 'Approve failed';
                            try {
                                const json = await res.json();
                                err = json.message || JSON.stringify(json);
                            } catch (e) {}
                            throw new Error(err);
                        }
                        return res.json();
                    })
                    .then(data => {
                        // Expect backend to return something like:
                        // { approval: {...}, approved_transaction: {...} }
                        const approval = data.approval || data;

                        if (activeRow) {
                            // Example: update status cell
                            const statusCell = activeRow.querySelector(
                                'td:nth-child(5)'); // adjust index
                            if (statusCell) {
                                statusCell.innerHTML =
                                    `<span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Approved</span>`;
                            }

                            const btn = activeRow.querySelector('.view-btn');
                            if (btn) {
                                btn.dataset.status = approval.status || 'APPROVED';
                                // Optionally disable the button or change label
                                // btn.disabled = true;
                            }

                            // Optional: visually highlight as approved
                            activeRow.classList.add('border-green-500');
                        }

                        showToast('Application approved and moved to For Releasing', 'success');
                        //  close modal
                        modal.classList.add('hidden');

                        // Redirect after short visual success delay
                        setTimeout(() => {
                            window.location.href = "{{ url('approvals') }}";
                        }, 800);
                    })
                    .catch(err => {
                        console.error(err);
                        showToast(`Approve failed: ${err.message}`, 'error', 6000);
                    });
            });
        });
    </script>
@endsection