@extends('master.authMaster')


@section('content')
    {{-- Form --}}

    <div class="intro-y col-span-12 lg:col-span-12">

        <!-- BEGIN: Select Options -->
        <div class="intro-y box mt-5">
            <!-- BEGIN: Horizontal Form -->
            <div class="intro-y box mt-5">
                <div class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5">
                    <h2 class="font-medium text-base mr-auto">
                        Donor Subscription
                    </h2>

                </div>
                <form id="incomeForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="p-5" id="donors_dropdown">
                        <div class="w-full px-4">
                            <div class="mt-3">
                                <label>Donors <span style="color: red">*</span></label>
                                <select id="donor_id" name="donor_id" class="input w-full border mt-2 custm-drpdwn">
                                    <option value="">-- Select Donor --</option>
                                    @foreach ($donors as $donor)
                                        <option value="{{ $donor->donor_id }}" data-org-id =" {{ $donor->organisation_id }}"
                                            {{ old('donor_id') == $donor->donor_id ? 'selected' : '' }}>
                                            {{ $donor->donor_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="text-red-500 text-sm mt-1 error-message" id="error-donor"></div>
                            </div>
                        </div>
                        <div class="w-full px-4" id="donors_subscription_history">
                        </div>
                    </div>

                    <div class="p-5 hidden" id="horizontal-form">


                        <div class="preview">
                            {{-- <div class="grid grid-cols-12 gap-6 mt-5"> --}}
                            <div class="intro-y col-span-12 lg:col-span-12">
                                <!-- BEGIN: Input -->
                                <div class="intro-y box">

                                    <div class="p-5" id="input">
                                        <div class="preview">
                                            @php
                                                use Carbon\Carbon;
                                                $financialYear = \App\Models\AccountingYear::current();

                                                [$startDate, $endDate] = explode(
                                                    ' to ',
                                                    $financialYear->accounting_year_financial,
                                                );

                                                $startDate = Carbon::createFromFormat('d-m-Y', trim($startDate));
                                                $endDate = Carbon::createFromFormat('d-m-Y', trim($endDate));

                                                $today = Carbon::today();

                                                if ($today->between($startDate, $endDate)) {
                                                    $maxDate = $today->toDateString();
                                                } else {
                                                    $maxDate = $endDate->toDateString();
                                                }

                                                $minDate = $startDate->toDateString();
                                            @endphp
                                            <div class="w-full -ml-4 -mr-4 flex flex-wrap">

                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Organisation <span style="color: red">*</span></label>
                                                        <select id="organisation_id" name="organisation_id"
                                                            class="input w-full border mt-2 custm-drpdwn" disabled>
                                                            <option value="">-- Select Organisation --</option>
                                                            @foreach ($organisations as $organisation)
                                                                <option value="{{ $organisation->organisation_id }}"
                                                                    {{ old('organisation_id') == $organisation->organisation_id ? 'selected' : '' }}>
                                                                    {{ $organisation->organisation_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-organisation"></div>
                                                        <input type="hidden" name="organisation_id_hidden"
                                                            id="organisation_id_hidden"
                                                            value="{{ old('organisation_id', $donor->organisation_id ?? '') }}">

                                                    </div>
                                                </div>
                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3" id="accountTypeWrapper">
                                                        <label>Division<span style="color: red">*</span></label>
                                                        <select id="account_type_id" name="account_type_id"
                                                            class="input w-full border mt-2 custm-drpdwn" disabled>
                                                            <option value="">-- Select Division --</option>
                                                        </select>
                                                        <small id="accountTypeMsg" class="text-red-500"
                                                            style="display:none;">
                                                            Please select organisation first
                                                        </small>
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-account-type"></div>
                                                        <input type="hidden" name="account_type_id_hidden"
                                                            id="account_type_id_hidden">
                                                    </div>
                                                </div>
                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label class="items-center justify-between"> Income Head<span
                                                                style="color: red">*</span>
                                                            <button type="button" id="openIncomeHeadModalBtn"
                                                                class="ml-2 bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 hidden"
                                                                style="float:right;">+</button>
                                                        </label>
                                                        <select id="income_head_id" name="income_head_id"
                                                            class="input w-full border mt-2 custm-drpdwn" disabled>
                                                            <option value="">-- Select Income Head --</option>
                                                            @foreach ($incomeHeads as $incomeHead)
                                                                @php
                                                                    $normalized = strtolower(
                                                                        str_replace(
                                                                            ' ',
                                                                            '',
                                                                            $incomeHead->income_head_name,
                                                                        ),
                                                                    );
                                                                    $isDefault = in_array($normalized, [
                                                                        'membersubscription',
                                                                        'memebersubscription',
                                                                    ]);
                                                                @endphp
                                                                <option value="{{ $incomeHead->income_head_id }}"
                                                                    {{ old('income_head_id') == $incomeHead->income_head_id ? 'selected' : ($isDefault ? 'selected' : '') }}>
                                                                    {{ $incomeHead->income_head_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <input type="hidden" id="hidden_income_head_id"
                                                            name="income_head_id" value="">

                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-income-head">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Total Subscription Amount (₹)</label>
                                                        <div class="border rounded bg-gray-50 p-3">
                                                            <strong>500</strong>

                                                            <div class="mt-2 pl-4 text-sm text-gray-700 border-t pt-2">
                                                                <div class="flex justify-between">
                                                                    <span><strong>Subscription Fee:</strong></span>
                                                                    <span>₹400</span>
                                                                </div>
                                                                <div class="flex justify-between">
                                                                    <span><strong>Contingent Fee:</strong></span>
                                                                    <span>₹100</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="transaction_amount" value="500">


                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Money Receipt No. </label>
                                                        <input type="text" class="input w-full border mt-2"
                                                            name="money_receipt_no" value="{{ old('money_receipt_no') }}"
                                                            placeholder="Enter Money Receipt Number">
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-money-receipt-number"></div>
                                                    </div>
                                                </div>
                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Payment Type <span style="color: red">*</span> </label>
                                                        <select id="payment_type_id" name="payment_type_id"
                                                            class="input w-full border mt-2 custm-drpdwn">
                                                            <option value="">-- Select Payment Type --</option>

                                                            @foreach ($paymentTypes->where('parent_id', null) as $parent)
                                                                @php
                                                                    $children = $paymentTypes->where(
                                                                        'parent_id',
                                                                        $parent->id,
                                                                    );
                                                                @endphp

                                                                @if ($children->isEmpty())
                                                                    <option value="{{ $parent->id }}"
                                                                        {{ old('payment_type_id') == $parent->id ? 'selected' : '' }}>
                                                                        {{ $parent->name }}
                                                                    </option>
                                                                @else
                                                                    <optgroup label="{{ $parent->name }}">
                                                                        @foreach ($children as $child)
                                                                            <option value="{{ $child->id }}"
                                                                                {{ old('payment_type_id') == $child->id ? 'selected' : '' }}>
                                                                                {{ $child->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </optgroup>
                                                                @endif
                                                            @endforeach
                                                        </select>

                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-payment-type"></div>
                                                    </div>
                                                </div>
                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Date of Transaction <span
                                                                style="color: red">*</span></label>
                                                        <input type="date" class="input w-full border mt-2"
                                                            name="transaction_date" min="{{ $minDate }}"
                                                            max="{{ $maxDate }}"
                                                            value="{{ old('transaction_date', now()->toDateString()) }}"
                                                            onfocus="this.showPicker()" />
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-date">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Transaction Reference No.</label>
                                                        <input id="transaction_reference" type="text"
                                                            class="input w-full border mt-2" name="transaction_reference"
                                                            value="{{ old('transaction_reference') }}"
                                                            placeholder="Enter Transaction Reference" maxlength="20">
                                                        <div class="text-gray-500 text-xs mt-1">
                                                            Only letters and numbers allowed, 5–20 characters.
                                                        </div>
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-transaction-reference"></div>
                                                    </div>
                                                </div>



                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Transaction Narration </label>
                                                        <textarea class="input w-full border mt-2" name="transaction_narration" placeholder="Enter Transaction Narration">{{ old('transaction_narration') }}</textarea>
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-transaction-narration"></div>
                                                    </div>
                                                </div>

                                                <div class="w-6/12 px-4">
                                                    <div class="mt-3">
                                                        <label>Upload Images / PDFs</label>
                                                        <input type="file" class="w-full border mt-2 p-2 rounded"
                                                            name="income_files[]" id="income_files"
                                                            accept="image/*,application/pdf" multiple>
                                                        <ul id="file-list" class="mt-2 text-sm text-gray-600 space-y-1">
                                                        </ul>
                                                        <div class="text-red-500 text-sm mt-1 error-message"
                                                            id="error-income-files"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- </div> --}}


                                <hr>
                                <hr>



                            </div>
                            <div class="sm:pl-5 mt-5">

                                <a href="{{ route('income.index') }}"><span
                                        class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 mr-2">
                                        ← Back
                                    </span></a>
                                <button type="submit" class="button w-24 bg-theme-1 text-white">Save</button>
                            </div>
                        </div>
                </form>

            </div>
        </div>
        <!-- END: Horizontal Form -->
    </div>
    <!-- END: Select Options -->
    </div>
    {{-- <div class="intro-y col-span-12 lg:col-span-6">
    </div> --}}
    <script>
        const incomeSelect = document.getElementById('income_head_id');
        const hiddenIncome = document.getElementById('hidden_income_head_id');

        hiddenIncome.value = incomeSelect.value;

        incomeSelect.addEventListener('change', function() {
            hiddenIncome.value = this.value;
        });
        //organisation and accountype checking start.
        let accountTypes = @json($accountTypes);
        let orgSelect = document.getElementById('organisation_id');
        let accSelect = document.getElementById('account_type_id');
        let msg = document.getElementById('accountTypeMsg');
        const donors = @json($donors);

        let oldOrg = "{{ old('organisation_id') }}";
        let oldAcc = "{{ old('account_type_id') }}";

        function populateAccountTypes(orgId, selectedId = null) {
            accSelect.innerHTML = '<option value="">-- Select Division --</option>';
            accSelect.disabled = true;

            if (orgId) {
                let filtered = accountTypes.filter(at => at.organisation_id == orgId);

                if (filtered.length > 0) {
                    document.getElementById("accountTypeWrapper").style.display = "block";

                    filtered.forEach(at => {
                        let option = document.createElement('option');
                        option.value = at.account_type_id;
                        option.textContent = at.account_type_Name;

                        if (String(selectedId ?? oldAcc) === String(at.account_type_id)) {
                            option.selected = true;
                            document.getElementById('account_type_id_hidden').value = at.account_type_id;
                        }
                        accSelect.appendChild(option);
                    });
                    msg.style.display = "none";
                } else {
                    msg.textContent = "No Division found for this organisation.";
                    msg.style.display = "block";
                    document.getElementById("accountTypeWrapper").style.display = "none";
                }
            } else {
                msg.textContent = "Please select organisation first.";
                msg.style.display = "block";
            }
        }
        orgSelect.addEventListener('change', function() {
            populateAccountTypes(this.value);
            if (this.value) {
                accSelect.disabled = false;
            }
            document.getElementById('organisation_id_hidden').value = this.value;
        });
        accSelect.addEventListener('focus', function() {
            if (!orgSelect.value) {
                msg.textContent = "Please select organisation first.";
                msg.style.display = "block";
                setTimeout(() => msg.style.display = "none", 2000);
            }
            document.getElementById('account_type_id_hidden').value = this.value;
        });

        if (oldOrg) {
            if (oldAcc) {
                populateAccountTypes(oldOrg, oldAcc);
                document.getElementById('organisation_id_hidden').value = oldOrg;
            } else {
                populateAccountTypes(oldOrg);
                accSelect.disabled = true;
            }
        }
        //organisation and accountype checking end.


        $(document).ready(function() {

            // console.log(purposes);
            $("input[name='type']").on("click", function(e) {
                const orgId = $("#organisation_id").val();
                const accountTypeId = $("#account_type_id").val();
                const $errorDiv = $("#error-organisation");
                const $errorDiv2 = $("#error-account-type");

                $errorDiv.text("");

                if (!orgId) {
                    e.preventDefault();
                    $errorDiv.text("Please select Organisation first.");
                    return;
                }

                if (orgId != 2 && !accountTypeId) {
                    e.preventDefault();
                    $errorDiv2.text("Please select Division first.");
                    return;
                }
            });
            $("#organisation_id").on("change", function() {
                $("#error-organisation").text("");
            });
            $("#account_type_id").on("change", function() {
                $("#error-account-type").text("");
            });


            $("#incomeForm").on("submit", function(e) {
                e.preventDefault();


                let formData = new FormData($('#incomeForm')[0]);

                $(".error-message").text("");
                $("input, select, textarea").removeClass("border-red-500");

                let isValid = true;
                let firstInvalidField = null;


                if ($.trim($("#income_head_id").val()) === "") {
                    $("#error-income-head").text("Income Head is required");
                    $("#income_head_id").addClass("border-red-500");
                    if (!firstInvalidField) firstInvalidField = $("#income_head_id");
                    isValid = false;
                }

                if ($.trim($("#payment_type_id").val()) === "") {
                    $("#error-payment-type").text("Payment Type is required");
                    $("#payment_type_id").addClass("border-red-500");
                    if (!firstInvalidField) firstInvalidField = $("#payment_type_id");
                    isValid = false;
                } else {
                    $("#error-payment-type").text("");
                    $("#payment_type_id").removeClass("border-red-500");
                }
                if ($.trim($("input[name='transaction_amount']").val()) === "") {
                    $("#error-transaction-amount").text("Transaction Amount is required");
                    $("input[name='transaction_amount']").addClass("border-red-500");
                    if (!firstInvalidField) firstInvalidField = $("#transaction_amount");

                    isValid = false;
                }

                if ($.trim($("input[name='transaction_date']").val()) === "") {
                    $("#error-date").text("Transaction Date is required");
                    $("input[name='transaction_date']").addClass("border-red-500");
                    if (!firstInvalidField) firstInvalidField = $("#transaction_date");

                    isValid = false;
                }


                if (!isValid) {
                    if (firstInvalidField) {
                        $('html, body').animate({
                            scrollTop: firstInvalidField.offset().top - 100
                        }, 500);
                        // firstInvalidField.focus();
                    }
                    return;
                }

                $.ajax({
                    url: "{{ route('donor.subscription.store') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        alert("Member Subscription saved successfully!");
                        window.location.href = "{{ route('donor.index') }}";
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let messages = [];
                            for (let key in errors) {
                                messages.push(errors[key][0]);
                            }
                            alert(messages.join("\n"));
                        } else {
                            alert("Something went wrong. Please try again.");
                        }
                    }
                });
            });

            $("#organisation_id").on("change", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-organisation").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("#income_head_id").on("change", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-income-head").text("");
                    $(this).removeClass("border-red-500");
                }
            });

            $("#payment_type_id").on("change", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-payment-type").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("#account_type_id").on("change", function() {
                let value = $(this).val();
                if (value && value.trim() !== "") {
                    $("#error-account-type").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("input[name='transaction_type']").on("change", function() {
                $("#error-transaction-type").text("");
            });
            $("input[name='transaction_reference']").on("input", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-transaction-reference").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("input[name='transaction_amount']").on("input", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-transaction-amount").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("input[name='transaction_date']").on("change", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-date").text("");
                    $(this).removeClass("border-red-500");
                }
            });
            $("textarea[name='transaction_narration']").on("input", function() {
                if ($(this).val().trim() !== "") {
                    $("#error-transaction-narration").text("");
                    $(this).removeClass("border-red-500");
                }
            });


        });

        //for file upload logic and append names 
        document.getElementById('income_files').addEventListener('change', function(e) {
            const fileList = document.getElementById('file-list');
            const errorDiv = document.getElementById('error-income-files');
            fileList.innerHTML = "";
            errorDiv.textContent = "";

            const maxTotalSize = 3 * 1024 * 1024;
            let totalSize = 0;
            let hasInvalidType = false;

            for (let i = 0; i < this.files.length; i++) {
                const file = this.files[i];
                totalSize += file.size;

                if (!file.type.startsWith("image/") && file.type !== "application/pdf") {
                    hasInvalidType = true;
                }
            }
            if (totalSize > maxTotalSize) {
                // alert("Total file size must not exceed 3 MB.\nYou selected " + (totalSize / (1024 * 1024)).toFixed(
                //     2) + " MB.");
                errorDiv.textContent = "Total file size must not exceed 3 MB.\nYou selected " + (totalSize / (1024 *
                    1024)).toFixed(
                    2) + " MB.";
                this.value = "";
                return;
            }
            if (hasInvalidType) {
                // alert("Invalid file type. Only images or PDFs allowed.");
                errorDiv.textContent = "Invalid file type. Only images or PDFs up to 3 MB are allowed.";
                this.value = "";
                return;
            }

            for (let i = 0; i < this.files.length; i++) {
                const li = document.createElement("li");
                li.textContent = this.files[i].name;
                fileList.appendChild(li);
            }
        });
        // end for file upload logic and append names 


        // start : validations
        $("input[name='transaction_amount']").on("input", function() {
            let val = this.value;
            val = val.replace(/[^0-9.]/g, "");
            let parts = val.split(".");
            if (parts.length > 2) {
                val = parts[0] + "." + parts.slice(1).join("");
            }
            if (/^0[0-9]/.test(val)) {
                val = val.replace(/^0+/, "");
            }
            if (val.startsWith("0.") || val === "0") {
                val = val.replace(/^0+/, "");
            }

            this.value = val;
        });
        $("#transaction_reference").on("input", function() {
            let value = $(this).val();
            value = value.replace(/[^A-Za-z0-9]/g, "");
            if (value.length > 20) {
                value = value.substring(0, 20);
            }
            $(this).val(value);
            let errorDiv = $("#error-transaction-reference");
            if (value.length < 5) {
                errorDiv.text("Transaction reference must be at least 5 characters.");
            } else {
                errorDiv.text("");
            }
        });
        // end : validations

        document.getElementById("donor_id").addEventListener("change", function() {
            let donorId = this.value;

            let donorSubscriptionHistory = document.getElementById("donors_subscription_history");
            let horizontalForm = document.getElementById("horizontal-form");

            donorSubscriptionHistory.classList.add("hidden");

            if (!donorId) {
                horizontalForm.classList.add("hidden");
                return;
            }
            let donor = donors.find(d => d.donor_id == donorId);

            $("#organisation_id").val(donor.organisation_id);
            populateAccountTypes(donor.organisation_id, donor.account_type_id);

            fetch(`/donor/income-check/${donorId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.exists) {
                        donorSubscriptionHistory.classList.remove("hidden");
                        donorSubscriptionHistory.innerHTML = `
                    <div class="p-4 bg-green-100 border border-green-400 rounded">
                        <h3 class="font-bold text-lg">Existing Subscription</h3>
                        <p><strong>Amount:</strong> ₹${data.data.transaction_amount}</p>
                        <p><strong>Date:</strong> ${data.data.transaction_date}</p>
                        <p><strong>Receipt:</strong> ${data.data.money_receipt_no ?? '-'}</p>
                    </div>
                `;
                        horizontalForm.classList.add("hidden");
                    } else {
                        horizontalForm.classList.remove("hidden");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    horizontalForm.classList.add("hidden");
                });
        });
    </script>
@endsection