@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 Release</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 ($pendingRelease 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">
                                    @if ($app->status === 'DECLINED')
                                        <span class="px-2 py-1 text-xs font-semibold text-gray-100 bg-red-800 rounded-full">
                                            {{ $app->status }}
                                        </span>
                                    @elseif ($app->status === 'For Releasing')
                                        <span
                                            class="px-2 py-1 text-xs font-semibold text-gray-800 bg-yellow-400 rounded-full">
                                            {{ $app->status }}
                                        </span>
                                    @else
                                        <span
                                            class="px-2 py-1 text-xs font-semibold text-gray-100 bg-green-800 rounded-full">
                                            {{ $app->status }}
                                        </span>
                                    @endif
                                </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->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="{{ optional($app->institution)->institution_name }}"
                                        data-bill_amount="{{ $app->bill_amount }}"
                                        data-approved_amount="{{ $app->approved_amount }}"
                                        data-claimant="{{ $app->claimant }}" data-contact_no="{{ $app->contact_no }}"
                                        data-status="{{ $app->status }}"
                                        data-date="{{ $app->created_at ? $app->created_at->format('M j, Y • g:i A') : '' }}">
                                        View Details
                                    </button>

                                    @if (strtoupper(trim($app->status)) !== 'DECLINED')
                                        <a href="{{ route('print.preview', $app->id  ) }}?print=1 " target="_blank"
                                            class="inline-block px-3 py-1 bg-yellow-600 text-white rounded-md text-sm hover:bg-yellow-700">
                                            Print
                                        </a>
                                    @endif
                                </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.releasingmodal')

    <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 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 ||
                    '';
            }


            // 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;
                    const canUpdate = this.dataset.status?.trim() === 'For Releasing';
                    approveBtn.disabled = !canUpdate;
                    rejectBtn.disabled = !canUpdate;
                    approveBtn.classList.toggle('opacity-50', !canUpdate);
                    approveBtn.classList.toggle('cursor-not-allowed', !canUpdate);
                    rejectBtn.classList.toggle('opacity-50', !canUpdate);
                    rejectBtn.classList.toggle('cursor-not-allowed', !canUpdate);

                    // 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
                });
            });

            // 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 decline this application?')) {
                    return;
                }

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

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

                rejectBtn.disabled = true;
                approveBtn.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;
                        approveBtn.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 declined', 'success');
                        // close modal:
                        modal.classList.add('hidden');
                        // Redirect after short visual success delay
                        setTimeout(() => {
                            window.location.href = "{{ url('releasings') }}";
                        }, 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('Are you sure you want to release this application?')) {
                    return;
                }

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

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

                approveBtn.disabled = true;
                rejectBtn.disabled = true;
                approveBtn.textContent = 'Releasing...';

                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 => {
                        approveBtn.disabled = false;
                        rejectBtn.disabled = false;
                        approveBtn.textContent = 'Release';

                        if (!res.ok) {
                            let err = 'RELEASE 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-green-100 rounded-full">Released</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 || 'RELEASED';
                            }
                        }

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