@extends('master.authMaster')

@section('content')
    <div class="intro-y col-span-12 lg:col-span-12">

        <div class="intro-y box mt-5" style="padding: 20px 20px 20px 30px;">
            <h2 class="text-xl font-bold mb-6">Add New Expense Head</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <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">
                            <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>
                    </div>
                </div>

                <div>
                    <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">
                            <option value="">-- Select Account Type --</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>
                    </div>
                </div>

                <!-- Expense Head Group -->
                <div>
                    <label class="block font-medium">Expense Head Group</label>
                    <select id="expense_head_group_id" name="expense_head_group_id"
                        class="w-full border p-2 rounded custm-drpdwn">
                        <option value="">-- Select Expense Head Group --</option>
                        @foreach ($expenseHeadGroups as $group)
                            <option value="{{ $group->expense_head_group_ID }}">
                                {{ $group->expense_head_group_Name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="text-red-500 text-sm mt-1 error-message" id="error-expense-head-group"></div>
                </div>

                <!-- Expense Head Name -->
                <div>
                    <label class="block font-medium">Expense Head Name <span class="text-red-500">*</span></label>
                    <input type="text" id="expense_head_name" name="expense_head_name" class="w-full border p-2 rounded">
                    <div class="text-red-500 text-sm mt-1 error-message" id="error-expense-head-name"></div>
                </div>

            </div>

            <!-- Buttons -->
            <div class="sm:pl-5 mt-5">
                <a href="{{ route('expensehead.index') }}"
                    class="px-4 py-2 rounded bg-gray-500 hover:bg-gray-600 text-white shadow text-sm mr-3">Cancel</a>
                <button type="button" id="saveExpenseHead" class="button w-24 bg-theme-1 text-white">Save</button>
            </div>
        </div>
    </div>

    {{-- SweetAlert2 --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        //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');


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

        function populateAccountTypes(orgId) {
            accSelect.innerHTML = '<option value="">-- Select Account Type --</option>';

            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 (oldAcc == at.account_type_id) {
                            option.selected = true;
                        }
                        accSelect.appendChild(option);
                    });

                    accSelect.disabled = false;
                    msg.style.display = "none";
                } else {
                    accSelect.disabled = true;
                    msg.textContent = "No account types found for this organisation.";
                    msg.style.display = "block";
                    document.getElementById("accountTypeWrapper").style.display = "none";
                }
            } else {
                accSelect.disabled = true;
                msg.textContent = "Please select organisation first.";
                msg.style.display = "block";
            }
        }

        orgSelect.addEventListener('change', function() {
            populateAccountTypes(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);
            }
        });

        if (oldOrg) {
            populateAccountTypes(oldOrg);
        }
        //organisation and accountype checking end.

        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("saveExpenseHead").addEventListener("click", function() {
                document.querySelectorAll('.error-message').forEach(el => el.innerText = '');

                let formData = {
                    organisation_id: document.getElementById("organisation_id").value,
                    account_type_id: document.getElementById("account_type_id").value,
                    expense_head_group_id: document.getElementById("expense_head_group_id").value ??
                        null,
                    expense_head_name: document.getElementById("expense_head_name").value,
                    _token: "{{ csrf_token() }}"
                };

                fetch("{{ route('expensehead.store') }}", {
                        method: "POST",
                        headers: {
                            "Accept": "application/json",
                            "X-Requested-With": "XMLHttpRequest",
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify(formData)
                    })
                    .then(async response => {
                        let data = await response.json();

                        if (response.ok) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: data.message,
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                window.location.href = "{{ route('expensehead.index') }}";
                            });
                        } else if (response.status === 422) {
                            if (data.errors.expense_head_name) {
                                document.getElementById("error-expense-head-name").innerText = data
                                    .errors.expense_head_name[0];
                            }
                            if (data.errors.expense_head_group_id) {
                                document.getElementById("error-expense-head-group").innerText = data
                                    .errors.expense_head_group_id[0];
                            }
                            if (data.errors.account_type_id) {
                                document.getElementById("error-account-type").innerText = data
                                    .errors.account_type_id[0];
                            }
                            if (data.errors.organisation_id) {
                                document.getElementById("error-organisation").innerText = data
                                    .errors.organisation_id[0];
                            }
                        } else {
                            Swal.fire('Error', data.message || 'Something went wrong!', 'error');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        Swal.fire('Error', 'An error occurred!', 'error');
                    });
            });
        });
        $("#expense_head_name").on("input", function() {
            this.value = this.value.replace(/[^a-zA-Z\s]/g, '');
        });
    </script>
@endsection