@extends('layouts.acc_layout')

@section('Auto Voucher Settings', '| ' . $pageTitle)

@section('stylesheets')
    <style>
        .panel .panel-body {
            color: #2c2e2f;
        }

        .panel .panel-body {
            color: #2c2e2f;
        }

        .table-custom {
            table-layout: fixed;
            width: 100% !important;
            border-collapse: collapse !important;
            border: 1px solid #2c2e2f !important;
        }

        .table-custom th,
        td {
            border: 1px solid #c6c7cc;
            /* padding: 10px 15px; */
        }

        .table-custom th {
            font-weight: bold;
            text-align: center;
            padding: 10px 15px;
        }


        .table tbody td {
            padding: 12px;
            vertical-align: middle;
        }

        /* Custom scrollbar */
        .table-responsive::-webkit-scrollbar {
            height: 6px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: #888;

        }

        .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .custom-table {
            margin-bottom: 0;
            border: 1px solid #e0e0e0;

            overflow: hidden;
        }

        .invalid-feedback {
            color: red;
            display: block;
        }
    </style>
@endsection

@section('content')

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel-heading">
                                <div class="panel-title col-md-6">{{ $pageTitle }}</div>
                                <div class="text-right col-md-6">
                                    <a href="{{ route('finalPaymentAutoVoucherMasterConfiguration.index') }}"
                                        class="btn btn-info btn-xs" style="margin-bottom: 0;">
                                        <i class="fa fa-list"></i> List
                                    </a>
                                </div>
                            </div>
                            <div id="app" class="panel-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        {!! Form::open([
                                            'url' => route('finalPaymentAutoVoucherMasterConfiguration.create'),
                                            'class' => 'form-horizontal',
                                            'method' => 'GET',
                                        ]) !!}
                                        {{ csrf_field() }}
                                        <div class="row">
                                            <div class="col-md-2">
                                                {{ Form::label('project_id_fk', 'Project') }}
                                                {!! Form::text('project_id_fk', $mProject->find($fpAvMaster->project_id_fk)->name ?? '', [
                                                    'class' => 'form-control project',
                                                    'autocomplete' => 'off',
                                                    'readonly',
                                                ]) !!}
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('project_type_id_fk', 'Project Type') }}
                                                {!! Form::text('project_type_id_fk', $mProjectType->find($fpAvMaster->project_type_id_fk)->name ?? '', [
                                                    'class' => 'form-control project-type',
                                                    'autocomplete' => 'off',
                                                    'readonly',
                                                ]) !!}
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('voucher_type_id_fk', 'Voucher Type') }}
                                                {!! Form::text('voucher_type_id_fk', $mAddVoucherType->find($fpAvMaster->voucher_type_id_fk)->name ?? '', [
                                                    'class' => 'form-control voucher-type',
                                                    'autocomplete' => 'off',
                                                    'readonly',
                                                ]) !!}
                                            </div>
                                            <div class="col-md-2">
                                                <div style="margin-bottom: 5px;color: transparent;">""</div>
                                                {!! Form::button("<i class='fa fa-search'></i>", ['type' => 'submit', 'class' => 'btn btn-info', 'disabled']) !!}
                                            </div>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>

                                <br>

                                {!! Form::open([
                                    'url' => route('finalPaymentAutoVoucherMasterConfiguration.update', $fpAvMaster->id),
                                    'class' => 'form-horizontal',
                                    'id' => 'form-nagodan',
                                ]) !!}

                                {{ csrf_field() }}
                                {!! Form::hidden('project_id_fk', $fpAvMaster->project_id_fk, [
                                    'class' => 'form-control project project-hidden',
                                    'autocomplete' => 'off',
                                ]) !!}
                                {!! Form::hidden('project_type_id_fk', $fpAvMaster->project_type_id_fk, [
                                    'class' => 'form-control project-type project-type-hidden',
                                    'autocomplete' => 'off',
                                ]) !!}
                                {!! Form::hidden('voucher_type_id_fk', $fpAvMaster->voucher_type_id_fk, [
                                    'class' => 'form-control voucher-type-hidden',
                                    'autocomplete' => 'off',
                                ]) !!}

                                <div class="row">
                                    <div class="col-md-12">

                                        {{-- Item Wrapper --}}
                                        <div class="item__wrapper">
                                           
                                            @if ($fpAvMaster->items)
                                                @foreach ($fpAvMaster->items as $item)
                                                    <div class="item"
                                                        style="border: 1px dashed gainsboro; padding:1em; margin-bottom: 2em; ">
                                                        <div class="item__header">
                                                            <div class="row">
                                                                <div class="col-md-12 text-right">
                                                                    <button class="item__template-remove-btn btn btn-xs"
                                                                        style="color: red; margin: 0;" type="button">
                                                                        <i class="fa fa-remove"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-2" style="margin-bottom: 5px;">
                                                                    {{ Form::label('project_template_id_fk', 'Project', ['style' => 'font-weight: bold;']) }}
                                                                    {{ Form::select('project_template_id_fk[]', $projectOptionList, $item->project_id_fk, ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                                                                </div>
                                                                <div class="col-md-2">
                                                                    {{ Form::label('project_type_template_id_fk', 'Project Type', ['style' => 'font-weight: bold;']) }}
                                                                    {{ Form::select('project_type_template_id_fk[]', $projectTypeOptionList, $item->project_type_id_fk, ['class' => 'form-control project-type-template', 'autocomplete' => 'off']) }}
                                                                </div>
                                                                <div class="col-md-2">
                                                                    {{ Form::label('counter', 'Counter', ['style' => 'font-weight: bold;']) }}
                                                                    {{ Form::select('counter[]', [0 => 'N/A', 1 => 1, 2 => 2, 3 => 3], $item->counter ?? 0, ['class' => 'form-control counter-template', 'autocomplete' => 'off']) }}
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <button class="btn-get btn" type="button"
                                                                        style="margin-top: 23px;">Get</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12">

                                                                {{--  Hidden attr for breaking dr and cr id project and project type wise --}}
                                                                {{ Form::hidden('debit[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                                                                {{ Form::hidden('credit[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                                                                {{ Form::hidden('amount_head[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}

                                                                <div class="table-responsive">
                                                                    <table class="table custom-table">
                                                                        <thead>
                                                                            <tr>
                                                                                <th rowspan="2"
                                                                                    class="text-center header-cell align-middle">
                                                                                    Amount Head</th>
                                                                                <th colspan="2"
                                                                                    class="text-center header-cell">Before Mature
                                                                                </th>
                                                                                <th colspan="2"
                                                                                    class="text-center header-cell">After Mature
                                                                                </th>
                                                                                <th rowspan="2"
                                                                                    class="text-center header-cell align-middle"
                                                                                    style="width: 100px">Action</th>
                                                                            </tr>
                                                                            <tr>
                                                                                <th class="text-center subheader-cell">
                                                                                    Debit
                                                                                </th>
                                                                                <th class="text-center subheader-cell">
                                                                                    Credit
                                                                                </th>
                                                                                <th class="text-center subheader-cell">
                                                                                    Debit
                                                                                </th>
                                                                                <th class="text-center subheader-cell">
                                                                                    Credit
                                                                                </th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @php
                                                                                $headOptions = $mFpAvMasterItem
                                                                                    ->getByProjectAndProjectTypeId(
                                                                                        $item->project_id_fk,
                                                                                        $item->project_type_id_fk,
                                                                                    )
                                                                                    ->filter(function ($item) use (
                                                                                        $mAddLedger,
                                                                                        $mTransactionHeadInfo,
                                                                                    ) {
                                                                                        if (
                                                                                            empty($item->ledger_id_fk)
                                                                                        ) {
                                                                                            return false;
                                                                                        }
                                                                                        $ledger = $mAddLedger
                                                                                            ->where(
                                                                                                'id',
                                                                                                $item->ledger_id_fk,
                                                                                            )
                                                                                            ->first();

                                                                                        $head = $mTransactionHeadInfo
                                                                                            ->where(
                                                                                                'id',
                                                                                                $item->hr_transaction_head_informations_id_fk,
                                                                                            )
                                                                                            ->first();
                                                                                        if (!$head) {
                                                                                            return false;
                                                                                        }

                                                                                        $item->name =
                                                                                            $head->name .
                                                                                            ' - ' .
                                                                                            $ledger->code;
                                                                                        $item->head_id_fk = $head->id;

                                                                                        return true;
                                                                                    })
                                                                                    ->pluck('name', 'head_id_fk')
                                                                                    ->toArray();
                                                                            @endphp
                                                                            @foreach ($item->subItems as $subItem)
                                                                                <tr class="item__template-table-row">
                                                                                    <td>
                                                                                        <select name="amount_head[]"
                                                                                            class="form-control amount_head"
                                                                                            autocomplete="off">
                                                                                            <option value="">Select One</option>
                                                                                            @foreach ($headOptions as $value => $label)
                                                                                                <option
                                                                                                    value="{{ $value }}"
                                                                                                    {{ $subItem->amount_head_informatioins_id_fk == $value ? 'selected' : '' }}>
                                                                                                    {{ $label }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </td>
                                                                                    <td>
                                                                                        <select name="before_debit[]"
                                                                                            class="form-control before_debit"
                                                                                            autocomplete="off">
                                                                                            <option value="">Select One</option>
                                                                                            @foreach ($headOptions as $value => $label)
                                                                                                <option
                                                                                                    value="{{ $value }}"
                                                                                                    {{ $subItem->before_dr_head_informatioins_id_fk == $value ? 'selected' : '' }}>
                                                                                                    {{ $label }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </td>
                                                                                    <td>
                                                                                        <select name="before_credit[]"
                                                                                            class="form-control before_credit"
                                                                                            autocomplete="off">
                                                                                            <option value="">Select One</option>
                                                                                            @foreach ($headOptions as $value => $label)
                                                                                                <option
                                                                                                    value="{{ $value }}"
                                                                                                    {{ $subItem->before_cr_head_informatioins_id_fk == $value ? 'selected' : '' }}>
                                                                                                    {{ $label }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </td>
                                                                                    <td>
                                                                                        <select name="after_debit[]"
                                                                                            class="form-control after_debit"
                                                                                            autocomplete="off">
                                                                                            <option value="">Select One</option>
                                                                                            @foreach ($headOptions as $value => $label)
                                                                                                <option
                                                                                                    value="{{ $value }}"
                                                                                                    {{ $subItem->after_dr_head_informatioins_id_fk == $value ? 'selected' : '' }}>
                                                                                                    {{ $label }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </td>
                                                                                    <td>
                                                                                        <select name="after_credit[]"
                                                                                            class="form-control after_credit"
                                                                                            autocomplete="off">
                                                                                            <option value="">Select One</option>
                                                                                            @foreach ($headOptions as $value => $label)
                                                                                                <option
                                                                                                    value="{{ $value }}"
                                                                                                    {{ $subItem->after_cr_head_informatioins_id_fk == $value ? 'selected' : '' }}>
                                                                                                    {{ $label }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </td>

                                                                                    <td style="text-align: center;">
                                                                                        <button
                                                                                            class="js-deleteRow btn btn-xs"
                                                                                            style="vertical-align: middle; margin-bottom: 0;">
                                                                                            <i class='fa fa-times'
                                                                                                style="color:red;"></i>
                                                                                        </button>
                                                                                    </td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                        <tfoot>
                                                                            <tr>
                                                                                <td colspan="6" class="text-right">
                                                                                    <button type="button"
                                                                                        class="btn btn-xs js-addRow"
                                                                                        style="margin-bottom: 0px;">
                                                                                        <i class='fa fa-plus'
                                                                                            style="color: green;"></i> Add
                                                                                    </button>
                                                                                </td>
                                                                            </tr>
                                                                        </tfoot>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <div class="box--action ">
                                            <button class="btn btn-xs item__add-btn" type="button">
                                                <i class='fa fa-plus' style="color: green;"></i> Add
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <button class="btn btn-success" type="submit">Submit</button>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                            {{-- ./panel-body --}}
                        </div>
                        {{-- ./col-md-12 --}}
                    </div>
                    {{-- .row --}}
                </div>
                {{-- ./panel-body --}}
            </div>
            {{-- ./panel --}}
        </div>
        {{-- ./col-md-10 --}}
        <div class="col-md-1"></div>
    </div>


    {{-- Template --}}
    <div class="item__template" style="display:none; border: 1px dashed gainsboro; padding:1em; margin-bottom: 2em;">
        <div class="item__header">
            <div class="row">
                <div class="col-md-12 text-right">
                    <button class="item__template-remove-btn btn btn-xs" style="color: red; margin: 0;" type="button">
                        <i class="fa fa-remove"></i>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" style="margin-bottom: 5px;">
                    {{ Form::label('project_template_id_fk', 'Project', ['style' => 'font-weight: bold;']) }}
                    {{ Form::select('project_template_id_fk[]', $projectOptionList, null, ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                </div>
                <div class="col-md-2">
                    {{ Form::label('project_type_template_id_fk', 'Project Type', ['style' => 'font-weight: bold;']) }}
                    {{ Form::select('project_type_template_id_fk[]', [], null, ['class' => 'form-control project-type-template', 'autocomplete' => 'off']) }}
                </div>
                <div class="col-md-2">
                    {{ Form::label('counter', 'Counter', ['style' => 'font-weight: bold;']) }}
                    {{ Form::select('counter[]', [0 => 'N/A', 1 => 1, 2 => 2, 3 => 3], 0, ['class' => 'form-control counter-template', 'autocomplete' => 'off']) }}
                </div>
                <div class="col-md-2">
                    <button class="btn-get btn" type="button" style="margin-top: 23px;">Get</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                {{-- Hidden attr for breaking dr and cr id project and project type wise --}}
                {{ Form::hidden('debit[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                {{ Form::hidden('credit[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}
                {{ Form::hidden('amount_head[]', '-', ['class' => 'form-control project-template', 'autocomplete' => 'off']) }}

                <div class="table-responsive">
                    <table class="table custom-table">
                        <thead>
                            <tr>
                                <th rowspan="2" class="text-center header-cell align-middle">Amount Head</th>
                                <th colspan="2" class="text-center header-cell">Before</th>
                                <th colspan="2" class="text-center header-cell">After</th>
                                <th rowspan="2" class="text-center header-cell align-middle" style="width: 100px">Action</th>
                            </tr>
                            <tr>
                                <th class="text-center subheader-cell">Debit</th>
                                <th class="text-center subheader-cell">Credit</th>
                                <th class="text-center subheader-cell">Debit</th>
                                <th class="text-center subheader-cell">Credit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="item__template-table-row">
                                <td>
                                    {!! Form::select('amount_head[]', ['' => 'Select One'], null, ['class' => 'form-control amount_head', 'autocomplete' => 'off']) !!}
                                </td>
                                <td>
                                    {!! Form::select('before_debit[]', ['' => 'Select One'], null, ['class' => 'form-control before_debit', 'autocomplete' => 'off']) !!}
                                </td>
                                <td>
                                    {!! Form::select('before_credit[]', ['' => 'Select One'], null, ['class' => 'form-control before_credit', 'autocomplete' => 'off']) !!}
                                </td>
                                <td>
                                    {!! Form::select('after_debit[]', ['' => 'Select One'], null, ['class' => 'form-control after_debit', 'autocomplete' => 'off']) !!}
                                </td>
                                <td>
                                    {!! Form::select('after_credit[]', ['' => 'Select One'], null, ['class' => 'form-control after_credit', 'autocomplete' => 'off']) !!}
                                </td>
                                <td style="text-align: center;">
                                    <button class="js-deleteRow btn btn-xs" style="vertical-align: middle; margin-bottom: 0;">
                                        <i class='fa fa-times' style="color:red;"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" class="text-right">
                                    <button type="button" class="btn btn-xs js-addRow" style="margin-bottom: 0px;">
                                        <i class='fa fa-plus' style="color: green;"></i> Add
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).on("click", ".btn-get", function(e) {
            var $item = $(this).closest('.item');
            var project = $item.find('.project-template').val();
            var projectType = $item.find('.project-type-template').val();

            if (!project || !projectType) {
                toastr.error('Please select both Project and Project Type first');
                return;
            }

            // Show loading state
            $(this).prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');

            // Find all select elements in the current item's table
            var $selects = $item.find('table select.amount_head, table select.before_debit, table select.before_credit, table select.after_debit, table select.after_credit');

            $.ajax({
                url: "{{ route('finalPaymentAutoVoucherMasterConfiguration.getCodeOptionList') }}",
                method: 'GET',
                data: {
                    project_id_fk: project,
                    project_type_id_fk: projectType
                },
                success: (response) => {
                    // Clear and populate all dropdowns with new options
                    let options = '<option value="">Select One</option>';

                    // Handle the response format where key is the ID and value is the name
                    $.each(response, function(id, name) {
                        options += `<option value="${id}">${name}</option>`;
                    });

                    $selects.each(function() {
                        $(this).html(options);
                    });

                    toastr.success('Options loaded successfully');
                },
                error: (xhr) => {
                    console.error(xhr);
                    toastr.error('Failed to load options. Please try again.');
                },
                complete: () => {
                    // Reset button state
                    $(this).prop('disabled', false).html('Get');
                }
            });
        });

        $(document).on("click", ".item__add-btn", function(e) {
            $('.item__template')
                .clone()
                .removeClass('item__template')
                .addClass('item')
                .css('display', 'block')
                .appendTo('.item__wrapper');
        });

        $(document).on("click", ".item__template-remove-btn", function(e) {
            $(this).parents('div.item').first().remove();
        });

        $(".item__wrapper").on("click", ".js-addRow", function(e) {
            e.preventDefault();
            // Clone the first row
            var $newRow = $(this).closest("table").find("tbody tr:first").clone();

            // Reset all select elements in the new row
            $newRow.find('select').each(function() {
                $(this).val('');  // Reset to empty value
            });

            // Append the new row to tbody
            $(this).closest('.item').find('tbody').append($newRow);
        });

        $(document).on("click", ".js-deleteRow", function(e) {
            e.preventDefault();
            $(this).closest("tr").remove();
        });

        // Hidden value assign
        $(".staff-type").change(function(e) {
            $(".staff-type-hidden").val($(this).val());
            console.log($('.staff-type-hidden').val())

        });
        $(".voucher-type").change(function(e) {
            $(".voucher-type-hidden").val($(this).val());
            console.log($('.voucher-type-hidden').val())
        });

        function ajaxRequest(sourceElement, targetElement, url, selected = null) {
            var sourceId = sourceElement.val() || '';
            var projectId = $('.project').val() || 0;
            var projectTypeId = $('.project-type').val() || 0;
            var branchId = $('.branch').val() || 0;
            var token = "{{ csrf_token() }}";

            var sendingData = {
                'sourceId': sourceId,
                'projectId': projectId,
                'projectTypeId': projectTypeId,
                'branchId': branchId,
                '_token': token
            }

            console.log(sendingData);

            return $.ajax({
                url: url,
                dataType: 'json',
                type: 'GET',
                data: sendingData,
                success: function(data) {
                    var options = "<option selected disabled='true'>Select One</option>";
                    $.each(data, function(key, item) {
                        var selectedData = '';
                        if (item.id == '*') {
                            return;
                        }
                        if (selected != null && item.id == selected) {
                            selectedData = 'selected="selected"';
                        }
                        options += '<option ' + selectedData + ' value="' + item.id + '">' + item.name +
                            '</option>';
                    });
                    targetElement.html(options);
                },
                error: function(response) {
                    console.log(response);
                }
            });
        }

        $(document).on('change', '.project', function() {
            var srcElement = $('.project');
            var targetElement = $('.project-type');
            var url = "{{ url('hr/filter/getProjectType') }}";
            ajaxRequest(srcElement, targetElement, url);
        });

        $(document).on('change', '.project-template', function() {
            var srcElement = $(this);
            targetElement = srcElement.closest('.item__header').find('.project-type-template');
            var url = "{{ url('hr/filter/getProjectType') }}";
            ajaxRequest(srcElement, targetElement, url);
        });


        $('select.project option:first').attr('disabled', true);
        $('select.project-type option:first').attr('disabled', true);
        $('select.staff-type option:first').attr('disabled', true);
        $('select.voucher-type option:first').attr('disabled', true);



        // ------------------------------------------------------------------  Form Submit  ------------------------------------------------------------------
        $(document).ready(function() {
            $('#form-nagodan').on('submit', function(e) {
                e.preventDefault();

                // alert('test');
                // return;

                // Reset previous errors
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();

                var formData = {
                    project_id_fk: $('.project-hidden').val(),
                    project_type_id_fk: $('.project-type-hidden').val(),
                    voucher_type_id: $('.voucher-type-hidden').val(),
                    details: []
                };

                // Validate master fields
                var hasError = false;
                if (!formData.project_id_fk) {
                    showError('.project', 'Project is required');
                    hasError = true;
                }
                if (!formData.project_type_id_fk) {
                    showError('.project-type', 'Project Type is required');
                    hasError = true;
                }
                if (!formData.voucher_type_id) {
                    showError('.voucher-type', 'Voucher Type is required');
                    hasError = true;
                }

                // Group rows by template/item
                $('.item').each(function() {
                    var item = $(this);
                    var templateData = {
                        project_id_fk: item.find('.project-template').val(),
                        project_type_id_fk: item.find('.project-type-template').val(),
                        counter_id: item.find('.counter-template').val(),
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        children: []
                    };

                    // Validate and collect rows for this template
                    item.find('.item__template-table-row').each(function() {
                        var row = $(this);
                        var rowData = {
                            amount_head: row.find('select[name="amount_head[]"]').val(),
                            before_debit: row.find('select[name="before_debit[]"]')
                                .val(),
                            before_credit: row.find('select[name="before_credit[]"]')
                                .val(),
                            after_debit: row.find('select[name="after_debit[]"]').val(),
                            after_credit: row.find('select[name="after_credit[]"]')
                                .val()
                        };

                        // Validate row fields
                        if (!rowData.amount_head) {
                            showError(row.find('select[name="amount_head[]"]'),
                                'Amount Head is required');
                            hasError = true;
                        }
                        if (!rowData.before_debit) {
                            showError(row.find('select[name="before_debit[]"]'),
                                'Before Debit is required');
                            hasError = true;
                        }
                        if (!rowData.before_credit) {
                            showError(row.find('select[name="before_credit[]"]'),
                                'Before Credit is required');
                            hasError = true;
                        }
                        if (!rowData.after_debit) {
                            showError(row.find('select[name="after_debit[]"]'),
                                'After Debit is required');
                            hasError = true;
                        }
                        if (!rowData.after_credit) {
                            showError(row.find('select[name="after_credit[]"]'),
                                'After Credit is required');
                            hasError = true;
                        }

                        templateData.children.push(rowData);
                    });

                    formData.details.push(templateData);
                });

                if (hasError) {
                    toastr.error('Please check the form for errors');
                    return false;
                }

                // Send Ajax request
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-HTTP-Method-Override': 'POST'
                    },
                    beforeSend: function() {
                        $('button[type="submit"]').prop('disabled', true)
                            .html('<i class="fa fa-spinner fa-spin"></i> Processing...');
                    },
                    success: function(response) {
                        toastr.success('Data updated successfully!');
                        setTimeout(function() {
                            window.location.href = response.redirect_url;
                        }, 1500);
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            handleValidationErrors(xhr.responseJSON.errors);
                        } else {
                            toastr.error('Something went wrong! Please try again.');
                        }
                    },
                    complete: function() {
                        $('button[type="submit"]').prop('disabled', false)
                            .html('Submit');
                    }
                });
            });

            // Helper functions
            function showError(element, message) {
                $(element).addClass('is-invalid');
                $(element).after(`<div class="invalid-feedback" style="color: red; display: block;">${message}</div>`);
            }

            function handleValidationErrors(errors) {
                Object.keys(errors).forEach(function(key) {
                    if (key.includes('.')) {
                        let [group, index, field] = key.split('.');
                        let selector;

                        if (group === 'details') {
                            if (field === 'children') {
                                selector = `.item:eq(${index}) .item__template-table-row`;
                            } else {
                                selector = `.item:eq(${index}) [name="${field}"]`;
                            }
                        } else {
                            selector = `[name="${field}"]`;
                        }

                        showError(selector, errors[key][0]);
                    } else {
                        showError(`[name="${key}"]`, errors[key][0]);
                    }
                });

                toastr.error('Please correct the errors in the form');
            }
        });
    </script>
@endsection