@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 Head</h2>
            
            <form id="groupStoreForm" action="{{ route('heads.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="mt-3">
                            <input type="hidden" name="organisation_id" value="{{ $orgId }}">
                            <label>Organisation <span style="color: red">*</span></label>
                            <select id="organisation_id" class="input w-full border mt-2" disabled>
                                <option value="">-- Select Organisation --</option>
                                @foreach ($organisations as $organisation)
                                    <option value="{{ $organisation->organisation_id }}"
                                        {{ old('organisation_id', $orgId) == $organisation->organisation_id ? 'selected' : '' }}>
                                        {{ $organisation->organisation_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <div class="mt-3">
                            <label>Head Name <span class="text-red-500">*</span></label>
                            <input type="text" id="name" name="name" class="w-full border p-2 rounded mt-2"
                                required>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <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 Division --</option>
                                @foreach ($divitions as $div)
                                    <option value="{{ $div->account_type_id }}">
                                        {{ $div->account_type_Name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="text-red-500 text-sm mt-1 error-message" id="error-account-type"></div>
                        </div>
                    </div>
                    <div>
                        <div class="mt-3" id="headgroupId">
                            <label>Head Group <span style="color: red">*</span> </label>
                            <select id="head_group_id" name="head_group_id" class="input w-full border mt-2">
                                <option value="">-- Select Head Group --</option>
                                @foreach ($headGroup as $group)
                                    <option value="{{ $group->id }}">
                                        {{ $group->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="text-red-500 text-sm mt-1 error-message" id="error-income-head-group"></div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 " id="html_type"></div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 " id="html_type_libility"></div>
                <div class="grid grid-cols-1 md:grid-cols-1 gap-6 " id="html_type_receipt_payment"></div>

                <div class="mt-5">
                    <a href="{{ route('heads.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="save-btn" class="button w-24 bg-theme-1 text-white">Save</button>
                </div>
            </form>

        </div>
        @if (session('error'))
            <div id="errorBox"
                style="
        background:#fdecea;
        border:1px solid #f5c2c7;
        color:#842029;
        padding:14px 18px;
        border-radius:8px;
        margin-top:16px;
        font-size:14px;
    ">
                {{ session('error') }}
            </div>

            <script>
                setTimeout(() => {
                    document.getElementById('errorBox').style.display = 'none';
                }, 5000);
            </script>
        @endif

        @if ($errors->any())
            <div
                style="background:#fdecea; border:1px solid #f5c2c7; color:#842029; padding:14px 18px; border-radius:8px; margin-bottom:16px; font-size:14px;">
                <ul style="margin:0; padding-left:18px;">
                    @foreach ($errors->all() as $error)
                        <li style="line-height:1.6;">
                            {{ $error }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <script>
        $(document).ready(function() {
            $('#html_type').hide();
            $('#html_type_libility').hide();
            $('#html_type_receipt_payment').hide();

            $('#save-btn').on('click', function(e) {
                let form = $('#groupStoreForm')[0];
                if (form.checkValidity()) {
                    $(this).prop('disabled', true).text('Submitting...');
                    form.submit();
                } else {
                    form.reportValidity();
                }
            });

            $('#head_group_id').on('change', function() {
                var id = $(this).val();

                // Reset all conditional sections
                $('#html_type').hide();
                $('#html_type_libility').hide();
                $('#html_type_receipt_payment').hide();
                if (id == 3) {
                    let asset_html = `
                        <div class="mt-3">
                            <label class="block font-medium text-gray-700">Choose Asset Type</label>
                            <div class="flex space-x-6 mt-2">
                                <label class="flex items-center space-x-2">
                                    <input type="radio" name="asset_type" value="fixed_asset" id="assetType" class="w-4 h-4" checked>
                                    <span>Fixed Assets</span>
                                </label>
                                <label class="flex items-center space-x-2">
                                    <input type="radio" name="asset_type" value="current_asset" id="assetType" class="w-4 h-4">
                                    <span>Current Assets</span>
                                </label>
                                <label class="flex items-center space-x-2">
                                    <input type="radio" name="asset_type" value="financial_assets" id="assetType" class="w-4 h-4" >
                                    <span>Financial Assets</span>
                                </label>
                            </div>
                        </div>

                        <div class="mt-3" >
                            <label class="block font-medium">Depreciation Rate (% or Amount) <span class="text-red-500"></span></label>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <input type="text" id="depriciation_rate" name="depriciation_rate" class="w-full border p-2 rounded mt-2">
                                </div>
                                <div>
                                    <select id="rte_extention" name="rte_extention" class="w-full border p-2 rounded custm-drpdwn mt-2">
                                        <option value="">
                                    --Select  --
                                </option>
                                        <option value="amount">
                                    Amount
                                        </option>
                                        <option value="%">
                                            Percentage(%)
                                        </option>
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div>
                            <label class="block font-medium">Depreciation Tenure</label>
                            <select id="depriciation_tenure" name="depriciation_tenure" class="w-full border p-2 rounded custm-drpdwn mt-2">
                                <option value="">
                                    --Select Tenior --
                                </option>
                                <option value="6">
                                6 Months
                                </option>
                                <option value="12">
                                    Yearly
                                </option>
                            </select>
                            <div class="text-red-500 text-sm mt-1 error-message" id="error-expense-head-group"></div>
                        </div>
                    `;

                    $('#html_type').show();
                    $('#html_type').html(asset_html);
                } else{
                    $('#html_type').hide();
                }


                if (id == 8) {
                    let libilities_html = `
                        <div class="mt-3">
                            <label>Choose Liabilities Type</label>
                            <div class="flex space-x-6 mt-2">
                                <label class="flex items-center space-x-2">
                                    <input type="radio" name="liability_type" value="fixed_libilities" id="liability_type_fixed" class="w-4 h-4">
                                    <span>Fixed Liabilities (Non-current Liabilities)</span>
                                </label>
                                <label class="flex items-center space-x-2">
                                    <input type="radio" name="liability_type" value="current_libilities" id="liability_type_current" class="w-4 h-4" checked>
                                    <span>Current Liabilities</span>
                                </label>
                            </div>
                        </div>
                    `;
                    $('#html_type_libility').show();
                    $('#html_type_libility').html(libilities_html);
                } else {
                    $('#html_type_libility').hide();
                    $('#html_type_libility').html('');
                }

                // Show receipt checkbox for group head id 9, 7, 5
                if (id == 9 || id == 7 || id == 5) {
                    let receipt_html = `
                        <div class="mt-3">
                            <label class="flex items-center space-x-2">
                                <input type="radio" name="type" value="receipt" id="mark_as_receipt" class="w-4 h-4">
                                <span class="font-medium">Mark as a Receipt</span>
                            </label>
                        </div>
                    `;
                    $('#html_type_receipt_payment').show();
                    $('#html_type_receipt_payment').html(receipt_html);
                }

                // Show payment and expenditure checkboxes for group head id 6, 4, 2, 1
                if (id == 6 || id == 4 || id == 2 || id == 1) {
                    let payment_expenditure_html = `
                        <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
                        <div class="mt-3">
                            <label class="flex items-center space-x-2">
                                <input type="radio" name="type" value="payment" id="mark_as_payment" class="w-4 h-4">
                                <span class="font-medium">Mark as a Payment</span>
                            </label>
                        </div>
                        <div class="mt-3">  
                            <label class="flex items-center space-x-2">
                                <input type="radio" name="type" value="expenditure" id="mark_as_expenditure" class="w-4 h-4">
                                <span class="font-medium">Mark as an Expenditure</span>
                            </label>
                        </div>
                        </div>
                    `;
                    $('#html_type_receipt_payment').show();
                    $('#html_type_receipt_payment').html(payment_expenditure_html);
                }

                // Reset receipt/payment section if not matching any condition
                if (id != 9 && id != 7 && id != 5 && id != 6 && id != 4 && id != 2 && id != 1) {
                    $('#html_type_receipt_payment').hide();
                    $('#html_type_receipt_payment').html('');
                }

            });
        });
    </script>
@endsection