@extends('layouts/acc_layout')
@section('title', '| Account Report Budget Particular')
@section('content')
    @php
        // Check if the form is in view mode or edit mode
        $isViewMode = request()->has('view');
        $isEditMode = request()->has('edit');
    @endphp

    @include('partials/layout-assets')
    <style>
        .form-control {
            padding: 5px !important;
            border: 1px solid #aaa !important;
            border-radius: 4px;
            font-weight: 600;
        }
    </style>

    <div class="row" style="padding-bottom: 1%; display: flex; justify-content:center;">
        <div class="col-md-12 col-lg-8">

            <div class="panel panel-default">
                <div class="panel-heading" style="padding: 15px 20px !important;">
                    <div>
                        <h4>{{ $isViewMode ? 'View Target & Achievement (TAR) Budget' : ($isEditMode ? 'Edit Target & Achievement (TAR) Budget' : 'Add New Target & Achievement (TAR) Budget') }}</h4>
                    </div>
                    <div class="panel-options">
                        <a href="{{ route('tar.budget.config.index') }}" id="addViewBtn" class="btn btn-primary" style="margin-bottom:0;">
                            <i class="fa fa-list" aria-hidden="true" style="padding-right: 5px;"></i>List of Target & Achievement (TAR) Budgets
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12" style="color: black;">
                            {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}

                            <div class="row" style="display: flex;align-items: center;">
                                <div class="col-md-4">
                                    {!! Form::label('Branch', 'Branch:', ['class' => 'control-label branch-label']) !!}

                                    {!! Form::select('branchId', $branches, $selectedBranch, [
                                        'id' => 'branchId', 
                                        'class' => 'form-control select2', 
                                        'autocomplete' => 'off', 
                                        'autofocus', 
                                        'onchange' => 'existTarBudget()',
                                        'disabled' => $isViewMode || $isEditMode ? 'disabled' : null,
                                        'aria-hidden' => ($isViewMode || $isEditMode) ? 'true' : 'false',
                                    ]) !!}

                                    @if($isEditMode)
                                        <input type="hidden" name="branchId" value="{{ $selectedBranch }}">
                                    @endif

                                </div>
                                <div class="col-md-4">
                                    {!! Form::label('Fiscal Year', 'Fiscal Year:', ['class' => 'control-label fiscal-year-label']) !!}

                                    {!! Form::select('fiscalYearId', $fiscalYears, $selectedFiscalYear, [
                                        'id' => 'fiscalYearId', 
                                        'class' => 'form-control select2', 
                                        'autocomplete' => 'off', 
                                        'autofocus', 
                                        'onchange' => 'existTarBudget()',
                                        'disabled' => $isViewMode || $isEditMode ? 'disabled' : null 
                                    ]) !!}

                                    @if($isEditMode)
                                        <input type="hidden" name="fiscalYearId" value="{{ $selectedFiscalYear }}">
                                    @endif

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="collapsible-section particular-container" style="margin-top: 24px;transition:display 0.5s ease; display:none;">
                                        <table class="table table-striped table-bordered" style="color: black;">
                                            <thead>
                                                <th style="width:60%; text-align: left !important;">Particular</th>
                                                <th style="width:40%;">Amount</th>
                                            </thead>
                                            <tbody>
                                                @foreach ($orderedFinalParticulars  as $key => $particular)
                                                    @if($particular['isInput'] == 0 && $particular['isHeader'] == true && $particular['total'] == 1)
                                                        @continue
                                                    @endif
                                                    <tr 
                                                        style="{{ 
                                                            $particular['title'] == 'Total Income' ? 'background-color: #d4edda !important;' : 
                                                            ($particular['isSubTotal'] == true ? 'background-color: #f6ecce !important;' :
                                                            ($particular['title'] == 'Total' ? 'background-color: #d4edda !important;' : '')) 
                                                        }}">
                                                        <td  style="text-align: left; {{ $particular['isInput'] == 1 ? 'font-weight: 400;' : 'font-weight: bold;' }}">
                                                            {{$particular['title']}}
                                                        </td>
                                                        <td>
                                                            @if($particular['isInput'] == 1)
                                                                {{-- Input for particular --}}
                                                                {!! Form::number("particulars[{$particular['id']}][amount]", null, [
                                                                    'id' => 'particular_'.$particular['id'], 
                                                                    'class' => 'form-control input-field', 
                                                                    'data-id' => $particular['id'],
                                                                    'data-parent-id' => $particular['parentId'],
                                                                    'autocomplete' => 'off', 
                                                                    'step' => 'any',
                                                                    'placeholder' => '0.00',
                                                                    'disabled' => $isViewMode ? 'disabled' : null,
                                                                    'style' => 'font-weight:400; !important;'
                                                                ]) !!}
                                                            @elseif($particular['isSubTotal'] == true)
                                                                {{-- Input to hold sum --}}
                                                                {!! Form::number(null, null, [
                                                                    'id' => 'subtotal_'.$particular['parentId'],
                                                                    'class' => 'form-control sum-field '. ($particular['title'] == 'Total Income' ? 'income-sum-field' : 'expense-sum-field'), 
                                                                    'data-sub-total-ids' => $particular['subTotalIds'],
                                                                    'disabled' => true,
                                                                    'placeholder' => '0.00',
                                                                ]) !!}
                                                            @elseif($particular['title'] == 'Total')
                                                                {{-- Input to hold Expense Total Sum --}}
                                                                {!! Form::number(null, null, [
                                                                    'id' => 'total-expense',
                                                                    'class' => 'form-control',
                                                                    'disabled' => true,
                                                                    'placeholder' => '0.00',
                                                                ]) !!}
                                                            @endif
                                                        </td>
                                                    </tr> 
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12" style="text-align: right;">
                                            @if($isViewMode)
                                                {!! Form::label('Submit', 'Submit:', ['class' => 'control-label submit-label']) !!}
                                                <a href="{{ route('tar.budget.config.index') }}" id="addViewBtn" class="btn btn-warning" style="margin-bottom:0; margin-top:0;">Close</a>
                                            @else
                                                {!! Form::label('Submit', 'Submit:', ['class' => 'control-label submit-label']) !!}
                                                {!! Form::submit($isEditMode ? 'Update' : 'Submit', ['class' => 'btn btn-info', 'id' => 'submit', 'style' => 'margin-top:0px !important;']) !!}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('form').submit(function(e) {
                e.preventDefault();
                var branchId        = $('#branchId').val();
                var fiscalYearId    = $('#fiscalYearId').val();

                if (!branchId || !fiscalYearId) {
                    if (!branchId) toastr.error("Please select the Branch", "Validation Error");
                    if (!fiscalYearId) toastr.error("Please select the Fiscal Year", "Validation Error");
                    return false; 
                }

                $('input[type="submit"]').prop('disabled', true);
                showPreloader();

                $.ajax({
                    type: "POST",
                    url: '{{ route("tar.budget.config.add") }}',
                    data: $('form').serialize(),
                    dataType: "json",
                    success: function(response) {
                        if (response.responseTitle == 'error') {
                            toastr.warning(response.responseText, response.responseTitle, opts);
                            $('input[type="submit"]').prop('disabled', false);
                            hidePreloader();
                        } else {
                            toastr.success(response.responseText, response.responseTitle, opts);
                            setTimeout(function() {
                                window.location.href = '{{ route("tar.budget.config.index") }}'; 
                            }, 2000);
                        }
                    },
                    error: function(xhr) {
                        $('input[type="submit"]').prop('disabled', false);
                        hidePreloader();
                        // alert('Something went wrong!');
                        var response = xhr.responseJSON || {};
                        var message = response.responseText || 'Something went wrong!';
                        if (xhr.status === 422) {
                            // Handle validation errors
                            var errors = response.errors;
                            for (var field in errors) {
                                toastr.error(errors[field].join(', '), 'Validation Error', opts);
                            }
                        } else {
                            toastr.error(message, 'Warning', opts);
                        }
                    }
                });
            });
        });
    </script>

    <script>
         $(document).ready(function() {
            // Check if we are in edit mode
            if ('{{ request()->has('edit') || request()->has('view') }}') {
                // Manually trigger the onchange function
                existTarBudget();
            }
        });
        function existTarBudget() {
            var branchId        = $('#branchId').val();
            var fiscalYearId    = $('#fiscalYearId').val();
            var isHasView       = @json(request()->has('view'));
            var isHasEdit       = @json(request()->has('edit'));

            var collapsibleSection = document.querySelector('.collapsible-section');

            if (!isHasView && !isHasEdit){
                $('input[type="submit"]').prop('disabled', true);
            }

            if (fiscalYearId && branchId) {

                $.ajax({
                    url: '{{ route("tar.budget.config.exist") }}',
                    type: 'GET',
                    data: { 
                        _token: '{{ csrf_token() }}',
                        branchId: branchId,
                        fiscalYearId: fiscalYearId
                    },
                    success: function(response) {

                        if (response.particulars && Object.keys(response.particulars).length > 0) {
                            // If particulars exist for the fiscal year
                            if (isHasView || isHasEdit) {

                                expandCollapsibleSection(collapsibleSection);

                                // Populate each particular amount field by ID in view or edit mode
                                $.each(response.particulars, function(particularId, amount) {
                                    $('#particular_' + particularId).val(amount);
                                });
                                calculateAllSubtotal();
                            } else {
                                // If in "Add New" mode, show alert and clear fiscal year field
                                toastr.warning('Data for this fiscal year already exists. Please edit the existing record.', 'Warning');

                                $('#fiscalYearId').val('').trigger('change');
                                $('[id^="particular_"]').val('');

                                collapseCollapsibleSection(collapsibleSection);

                            }
                        } else {
                            expandCollapsibleSection(collapsibleSection);
                            // If no data exists for the fiscal year
                            if (!isHasView && !isHasEdit) {
                                // Enable the submit button if no data found in "Add New" mode
                                $('input[type="submit"]').prop('disabled', false);
                            }
                            // Clear all amount fields
                            $('[id^="particular_"]').val('');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred while fetching fiscal year budget particular:', error);
                        if (!isHasView && !isHasEdit){
                            $('input[type="submit"]').prop('disabled', false);
                        }
                    }
                });

            } else{
                $('input[type="submit"]').prop('disabled', false);
                $('[id^="particular_"]').val('');
                collapseCollapsibleSection(collapsibleSection);
            }
        }
        function expandCollapsibleSection(section) {
            section.style.display = 'block';  
        }
        function collapseCollapsibleSection(section) {
            section.style.display = 'none';
        }
        // Function to calculate the subtotal based on parentId
        function calculateSubtotal(parentId) {
            // Find all input fields for the same parentId
            const inputs = document.querySelectorAll(`[data-parent-id="${parentId}"]`);
            let sum = 0;
            // Sum the values of the relevant input fields
            inputs.forEach(input => {
                const value = parseFloat(input.value) || 0; // Ensure value is a number
                sum += value;
            });
            // Find the subtotal field associated with the parentId
            const subtotalField = document.querySelector(`#subtotal_${parentId}`);
            if (subtotalField) {
                subtotalField.value = sum.toFixed(2);
            }
            calculateTotalExpense();
        }
        function calculateAllSubtotal() {
            // Loop over each sum field with the class "sum-field"
            $('.sum-field').each(function() {
                var sumField = $(this);
                var parentId = sumField.attr('id').split('_')[1];
                if (parentId) {
                    calculateSubtotal(parentId);
                }
            });
        }
        // Function to calculate the total expense
        function calculateTotalExpense() {
            let totalExpense = 0;
            document.querySelectorAll('.expense-sum-field').forEach(function(inputField) {
                let fieldValue = parseFloat(inputField.value) || 0;
                totalExpense += fieldValue;
            });
            const totalExpenseField = document.querySelector('#total-expense');
            if (totalExpenseField) {
                totalExpenseField.value = totalExpense.toFixed(2);
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Event Delegation
            document.querySelector('.particular-container').addEventListener('input', function(event) {
                // Only handle input events on input fields with the class 'input-field'
                if (event.target.classList.contains('input-field')) {
                    const parentId = event.target.getAttribute('data-parent-id');
                    if (parentId) {
                        calculateSubtotal(parentId);
                    }
                }
            });
        });
    </script>
@endsection