@extends('app')

@section('content')

@php
    $inputClass = "w-full px-5 py-4 bg-slate-50 border border-blue-100 rounded-xl text-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white transition duration-200 outline-none";

    $labelClass = "block text-sm font-semibold text-gray-700 mb-2";

    $selectClass = "w-full px-5 py-4 bg-slate-50 border border-blue-100 rounded-xl text-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 outline-none";
@endphp

    <div class="max-w-screen-2xl mx-auto px-8 py-8" id="stubForm">
            <div class="space-y-8">
          
            <!-- Center column -->
            <div>
                {{-- ✅ Local & Offline-safe Notifications --}}
                @if ($errors->any())
                    <div id="alert-error"
                        class="fixed top-5 right-5 z-50 flex items-start p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 shadow-md animate-fade-in"
                        role="alert">
                        {{-- Inline SVG icon (local-safe) --}}
                        <svg class="w-5 h-5 mt-0.5 me-2 flex-shrink-0 text-red-600" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20" fill="currentColor">
                            <path
                                d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0ZM9 6a1 1 0 1 0 2 0v4a1 1 0 0 1-2 0V6Zm1 8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 10 14Z" />
                        </svg>

                        <div class="flex-1">
                            <p class="font-semibold mb-1">Please check your input:</p>
                            <ul class="list-disc list-inside space-y-0.5">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>

                        {{-- Close button (no external dependency) --}}
                        <button type="button"
                            class="ms-3 text-red-600 hover:text-red-900 font-bold rounded-lg focus:outline-none"
                            onclick="this.parentElement.remove()">×</button>
                    </div>
                @endif

                @if (session('Success'))
                    <div id="alert-success"
                        class="fixed top-5 right-5 z-50 flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 shadow-md animate-fade-in"
                        role="alert">
                        {{-- Inline SVG icon --}}
                        <svg class="w-5 h-5 me-2 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 18A8 8 0 1 1 10 2a8 8 0 0 1 0 16Zm-1.293-4.707 5-5-1.414-1.414L9 10.586 7.707 9.293 6.293 10.707l2.414 2.586Z" />
                        </svg>

                        <span class="font-medium">Success:</span>
                        <span class="ml-1">{{ session('Success') }}</span>

                        <button type="button"
                            class="ms-3 text-green-600 hover:text-green-900 font-bold rounded-lg focus:outline-none"
                            onclick="this.parentElement.remove()">×</button>
                    </div>
                @endif



                <div id="accordion-collapse" data-accordion="collapse">

                    <h2 id="accordion-collapse-heading-1">
                        <button type="button"
                            class="flex items-center justify-between w-full px-6 py-5 font-semibold
                                bg-white text-gray-800 border border-blue-100 rounded-t-2xl
                                hover:bg-blue-50 transition shadow-sm"
                            data-accordion-target="#accordion-collapse-body-1" aria-expanded="true"
                            aria-controls="accordion-collapse-body-1">
                            <span class="flex items-center gap-3">
                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                            Application Processing
                            </span>
                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 5 5 1 1 5" />
                            </svg>
                        </button>
                    </h2>
                    <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
                        <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">

                            <div class="mb-6 bg-white border border-blue-100 rounded-2xl shadow-sm p-6">
                                <h3 class="text-md font-semibold mb-4 text-gray-700 dark:text-gray-200">
                                    Client Lookup
                                </h3>

                                <div class="grid gap-4 md:grid-cols-4">
                                    <div>
                                        <label for="search_fname"
                                            class="block text-sm mb-3 font-medium text-gray-700 dark:text-gray-300">
                                            First Name
                                        </label>
                                        <input type="text" id="search_fname"
                                            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 
                    block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                                            placeholder="Enter First Name">
                                    </div>

                                    <div>
                                        <label for="search_mname"
                                            class="block text-sm mb-3 font-medium text-gray-700 dark:text-gray-300">
                                            Middle Name
                                        </label>
                                        <input type="text" id="search_mname"
                                            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 
                    block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                                            placeholder="Enter Middle Name">
                                    </div>

                                    <div>
                                        <label for="search_lname"
                                            class="block text-sm mb-3 font-medium text-gray-700 dark:text-gray-300">
                                            Last Name
                                        </label>
                                        <input type="text" id="search_lname"
                                            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 
                    block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                                            placeholder="Enter Last Name">
                                    </div>

                                    <div class="flex items-end">
                                        <button id="stubSearchButton" type="button"
                                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-4 py-2.5">
                                            Search
                                        </button>
                                    </div>
                                </div>

                                <!-- Results -->
                                <div id="stubSearchResults" class="mt-4 hidden">
                                    <h4 class="font-medium text-gray-700 mb-2 dark:text-gray-200">Search Results:</h4>
                                    <div id="stubResultsContainer" class="space-y-2"></div>
                                    <div id="stubPaginationContainer" class="mt-6 flex justify-center gap-3"></div>
                                </div>
                            </div>

                            <form action="{{ route('application.store') }}" method="POST" class="space-y-8">
                                @csrf

                                <!-- Assistance Selection -->
                                <div class="grid gap-8 md:grid-cols-2">

                                    <div>
                                        <label for="category" class="{{ $labelClass }}">Category</label>
                                        <select id="category" name="category" class="{{ $selectClass }}" required>
                                            <option value="">-- Select Category --</option>
                                            <option value="Financial Assistance">Financial Assistance</option>
                                            <option value="Guarantee Letter">Guarantee Letter</option>
                                        </select>
                                    </div>

                                    <div>
                                        <label for="subcategory" class="{{ $labelClass }}">Sub-category</label>
                                        <select id="subcategory" name="subcategory" class="{{ $selectClass }}" required>
                                            <option value="">-- Select Sub-category --</option>
                                        </select>
                                    </div>

                                    <div id="institutionWrapper" class="hidden md:col-span-2">
                                        <label for="institution" class="{{ $labelClass }}">Institution</label>
                                        <select id="institution" name="institution" class="{{ $selectClass }}">
                                            @foreach ($institutions as $institution)
                                                <option value="{{ $institution->id }}">
                                                    {{ $institution->institution_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                                <!-- Hidden -->
                                <input type="text" readonly id="intake_id" name="intake_id" class="hidden">

                                <!-- Client Info -->
                                <div class="grid gap-8 md:grid-cols-4">

                                    <div class="md:col-span-2">
                                        <label for="fname" class="{{ $labelClass }}">First Name</label>
                                        <input type="text" readonly id="fname" name="fname" class="{{ $inputClass }}">
                                    </div>

                                    <div class="md:col-span-2">
                                        <label for="lname" class="{{ $labelClass }}">Last Name</label>
                                        <input type="text" readonly id="lname" name="lname" class="{{ $inputClass }}">
                                    </div>

                                    <div class="md:col-span-2">
                                        <label for="address" class="{{ $labelClass }}">Address</label>
                                        <input type="text" readonly id="address" name="address" class="{{ $inputClass }}" required>
                                    </div>

                                    <div class="md:col-span-2">
                                        <label for="barangay" class="{{ $labelClass }}">Barangay</label>
                                        <input type="text" readonly id="barangay" name="barangay" class="{{ $inputClass }}" required>
                                    </div>

                                </div>

                                <!-- Financial Details -->
                                <div class="grid gap-8 md:grid-cols-4">

                                    <div>
                                        <label for="bill_amount" class="{{ $labelClass }}">Bill Amount</label>
                                        <input type="number" id="bill_amount" name="bill_amount" step="0.01"
                                            class="{{ $inputClass }}" required>
                                    </div>

                                    <input type="number" id="approved_amount" name="approved_amount"
                                        step="0 " class="hidden">

                                    <div>
                                        <label for="contactNo" class="{{ $labelClass }}">Contact No.</label>
                                        <input type="tel" id="contactNo" name="contactNo"
                                            pattern="[0-9]{11}"
                                            class="{{ $inputClass }}"
                                            placeholder="09XXXXXXXXX"
                                            required>
                                    </div>

                                    <div class="md:col-span-2">
                                        <label for="claimant" class="{{ $labelClass }}">Claimant</label>
                                        <input type="text" id="claimant" name="claimant"
                                            class="{{ $inputClass }}">
                                    </div>

                                </div>

                                <!-- Actions -->
                                <div class="flex justify-end gap-4 pt-6 border-t border-blue-100">

                                    <button type="submit"
                                        class="px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 shadow-sm transition font-semibold">
                                        Submit Application
                                    </button>

                                    <button type="button"
                                        class="px-8 py-3 bg-slate-100 text-gray-700 rounded-xl hover:bg-slate-200 transition font-medium">
                                        Cancel
                                    </button>

                                </div>

                            </form>

                            <script>
                                document.addEventListener('DOMContentLoaded', function () {

                                    const searchButton = document.getElementById('stubSearchButton');
                                    const resultsDiv = document.getElementById('stubSearchResults');
                                    const container = document.getElementById('stubResultsContainer');
                                    const pagination = document.getElementById('stubPaginationContainer');

                                    // =========================
                                    // PAGINATION
                                    // =========================
                                    window.loadStubSearchPage = function(url) {
                                        fetch(url, {
                                            method: "POST",
                                            headers: {
                                                "Content-Type": "application/json",
                                                "Accept": "application/json",
                                                "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
                                            },
                                            body: JSON.stringify({
                                                fname: document.getElementById('search_fname').value.trim(),
                                                mname: document.getElementById('search_mname').value.trim(),
                                                lname: document.getElementById('search_lname').value.trim()
                                            })
                                        })
                                        .then(res => res.json())
                                        .then(data => renderStubResults(data))
                                        .catch(err => console.error(err));
                                    };

                                    // =========================
                                    // RENDER RESULTS
                                    // =========================
                                    function renderStubResults(data) {

                                        container.innerHTML = "";
                                        pagination.innerHTML = "";
                                        resultsDiv.classList.remove("hidden");

                                        if (data.data.length === 0) {
                                            container.innerHTML = `
                                                <p class="font-semibold text-gray-600">
                                                    No matching records found.
                                                </p>`;
                                            return;
                                        }

                                        data.data.forEach(item => {
                                            container.innerHTML += `
                                                <div class="bg-white border border-blue-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 p-4">

                                                    <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">

                                                        <div class="min-w-0">
                                                            <h3 class="text-lg font-bold text-gray-900">
                                                                ${item.fname} ${item.mname ?? ''} ${item.lname}
                                                            </h3>

                                                            <p class="text-sm text-gray-600 mt-1">
                                                                Address: ${item.address ?? 'N/A'}
                                                            </p>

                                                            <p class="text-sm text-gray-600">
                                                                Barangay: ${item.barangay ?? 'N/A'}
                                                            </p>

                                                            <div class="mt-3 flex w-full items-start gap-3 rounded-xl border ${item.eligible ? 'border-emerald-200 bg-emerald-50' : 'border-rose-200 bg-rose-50'} p-3">
                                                                <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${item.eligible ? 'bg-emerald-600 text-white' : 'bg-rose-600 text-white'} text-xs font-bold">
                                                                    ${item.eligible ? '&#10003;' : '!'}
                                                                </span>
                                                                <div>
                                                                    <p class="text-sm font-bold ${item.eligible ? 'text-emerald-800' : 'text-rose-800'}">
                                                                        ${item.eligible ? 'Eligible for application' : 'Not eligible'}
                                                                    </p>
                                                                    <p class="mt-0.5 text-xs leading-5 ${item.eligible ? 'text-emerald-700' : 'text-rose-700'}">
                                                                        Last successful transaction:
                                                                        ${item.last_successful_transaction_at ?? 'None'}
                                                                    </p>
                                                                    ${item.eligible ? '' : `<p class="text-xs leading-5 text-rose-700">The last transaction is less than 3 months old.</p>`}
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <button type="button"
                                                            class="stub-view-btn w-full shrink-0 border px-4 py-2.5 text-sm font-semibold rounded-xl transition sm:w-auto ${item.eligible ? 'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100' : 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed'}"
                                                            data-record='${JSON.stringify(item)}'
                                                            ${item.eligible ? '' : 'disabled title="Not eligible until 3 months after the last successful transaction"'}>
                                                            ${item.eligible ? 'Load Record' : 'Not eligible'}
                                                        </button>

                                                    </div>

                                                </div>
                                            `;
                                        });

                                        // PAGINATION BUTTONS
                                        if (data.last_page > 1) {
                                            pagination.innerHTML = `
                                                <button
                                                    ${!data.prev_page_url ? 'disabled' : ''}
                                                    onclick="loadStubSearchPage('${data.prev_page_url}')"
                                                    class="px-4 py-2 rounded-xl border border-slate-300 bg-white hover:bg-slate-50 disabled:opacity-50">
                                                    Previous
                                                </button>

                                                <span class="px-4 py-2 text-sm text-slate-600">
                                                    Page ${data.current_page} of ${data.last_page}
                                                </span>

                                                <button
                                                    ${!data.next_page_url ? 'disabled' : ''}
                                                    onclick="loadStubSearchPage('${data.next_page_url}')"
                                                    class="px-4 py-2 rounded-xl border border-slate-300 bg-white hover:bg-slate-50 disabled:opacity-50">
                                                    Next
                                                </button>
                                            `;
                                        }
                                    }

                                    // =========================
                                    // SEARCH BUTTON
                                    // =========================
                                    searchButton.addEventListener('click', function () {

                                        const fname = document.getElementById('search_fname').value.trim();
                                        const mname = document.getElementById('search_mname').value.trim();
                                        const lname = document.getElementById('search_lname').value.trim();

                                        if (!fname && !lname && !mname) {
                                            alert("Please provide at least one information");
                                            return;
                                        }

                                        fetch("{{ route('intake.search') }}", {
                                            method: "POST",
                                            headers: {
                                                "Content-Type": "application/json",
                                                "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
                                            },
                                            body: JSON.stringify({
                                                fname,
                                                mname,
                                                lname
                                            })
                                        })
                                        .then(res => res.json())
                                        .then(data => renderStubResults(data))
                                        .catch(err => console.error("Search error:", err));
                                    });

                                    // =========================
                                    // LOAD RECORD
                                    // =========================
                                    document.addEventListener('click', function(e) {

                                        if (e.target.classList.contains('stub-view-btn')) {

                                            const record = JSON.parse(e.target.getAttribute('data-record'));

                                            if (!record.eligible) {
                                                alert("This client is not eligible. The last successful transaction is less than 3 months old.");
                                                return;
                                            }

                                            document.getElementById('intake_id').value = record.id || '';
                                            document.getElementById('fname').value = record.fname || '';
                                            document.getElementById('lname').value = record.lname || '';
                                            document.getElementById('address').value = record.address || '';
                                            document.getElementById('barangay').value = record.barangay || '';
                                            document.getElementById('contactNo').value = record.contact || '';

                                            document.getElementById('claimant').value =
                                                `${record.rfname ?? ''} ${record.rlname ?? ''}`.trim();

                                            alert("✅ Record loaded successfully.");
                                        }

                                    });

                                });
                            </script>
                            <!-- <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const searchButton = document.getElementById('stubSearchButton');
                                    const resultsDiv = document.getElementById('stubSearchResults');
                                    const container = document.getElementById('stubResultsContainer');

                                    searchButton.addEventListener('click', function() {
                                        const fname = document.getElementById('search_fname').value;
                                        const mname = document.getElementById('search_mname').value;
                                        const lname = document.getElementById('search_lname').value;

                                        if (!fname && !lname && !mname) {
                                            alert("Please provide at least a one information");
                                            return;
                                        }

                                        fetch("{{ route('intake.search') }}", {
                                                method: "POST",
                                                headers: {
                                                    "Content-Type": "application/json",
                                                    "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
                                                },
                                                body: JSON.stringify({
                                                    fname,
                                                    mname,
                                                    lname
                                                })
                                            })
                                            .then(res => res.json())
                                            .then(data => {
                                                container.innerHTML = "";
                                                resultsDiv.classList.remove("hidden");

                                                if (data.length === 0) {
                                                    container.innerHTML =
                                                        `<p class=" font-semibold text-gray-600">   No matching records found.</p>`;
                                                    return;
                                                }

                                                data.forEach(item => {
                                                    container.innerHTML += `
                                                        <div class="bg-white border border-blue-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 p-5">

                                                            <div class="flex items-center justify-between gap-6">

                                                                <div>
                                                                    <h3 class="text-lg font-bold text-gray-900">
                                                                        ${item.fname} ${item.mname ?? ''} ${item.lname}
                                                                    </h3>

                                                                    <p class="text-sm text-gray-600 mt-1">
                                                                        Address: ${item.address ?? 'N/A'}
                                                                    </p>

                                                                    <p class="text-sm text-gray-600">
                                                                        Barangay: ${item.barangay ?? 'N/A'}
                                                                    </p>
                                                                </div>

                                                                <button type="button"
                                                                    class="stub-view-btn bg-blue-50 text-blue-700 border border-blue-200 text-sm font-semibold px-5 py-3 rounded-xl hover:bg-blue-100 transition"
                                                                    data-record='${JSON.stringify(item)}'>
                                                                    Load Record
                                                                </button>

                                                            </div>
                                                        </div>
                                                    `;
                                                });
                                            })
                                            .catch(err => console.error("Search error:", err));
                                    });

                                    // Handle view button clicks
                                    document.addEventListener('click', function(e) {
                                        if (e.target.classList.contains('stub-view-btn')) {
                                            const record = JSON.parse(e.target.getAttribute('data-record'));

                                            // Fill stub form fields automatically
                                            document.getElementById('intake_id').value = record.id || '';
                                            document.getElementById('fname').value = record.fname || 'erer';
                                            document.getElementById('lname').value = record.lname || '';
                                            document.getElementById('address').value = record.address || '';
                                            document.getElementById('barangay').value = record.barangay || '';
                                            document.getElementById('contactNo').value = record.contact || '';
                                            document.getElementById('claimant').value = 
                                                `${record.rfname ?? ''} ${record.rlname ?? ''}`.trim();

                                        }
                                    });
                                });
                            </script> -->





                            <script>
                                // Define subcategories for each category
                                const subcategories = {
                                    "Financial Assistance": ["Hospitalization", "Laboratory", "Burial", "Dialysis",
                                        "Therapy", "Medicines", "Animal Bite", "Chemo", "Blood",
                                        "Oxygen"
                                    ],
                                    "Guarantee Letter": ["Hospitalization", "Laboratory", "Burial", "Dialysis",
                                        "Therapy", "Medicines", "Animal Bite", "Chemo", "Blood",
                                        "Oxygen"
                                    ],
                                };

                                const categorySelect = document.getElementById("category");
                                const subcategorySelect = document.getElementById("subcategory");
                                const institutionWrapper = document.getElementById("institutionWrapper");
                                const institutionSelect = document.getElementById('institution'); // actual dropdown

                                categorySelect.addEventListener("change", function() {
                                    const selected = this.value;
                                    // clear previous options
                                    subcategorySelect.innerHTML = '<option value="">-- Select Sub-category --</option>';

                                    if (selected && subcategories[selected]) {
                                        subcategories[selected].forEach(sub => {
                                            const option = document.createElement("option");
                                            option.value = sub.toUpperCase().replace(/\s+/g, "-");
                                            option.textContent = sub;
                                            subcategorySelect.appendChild(option);
                                        });
                                    }

                                    if (selected === "Guarantee Letter") {
                                        institutionWrapper.classList.remove("hidden");
                                        institutionSelect.required = true;

                                    } else {
                                        institutionWrapper.classList.add("hidden");
                                        document.getElementById("institution").value = ""; // reset when hidden
                                    }

                                });
                            </script>

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


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






@endsection