@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 {
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .table thead th {
            border-top: none;
            padding: 15px 10px;
        }
        .table tbody td {
            padding: 12px 10px;
            vertical-align: middle;
        }
        .label {
            padding: 5px 10px;

            font-size: 12px;
        }
        .label-success {
            background-color: #28a745;
            color: white;
        }
        .label-info {
            background-color: #17a2b8;
            color: white;
        }
        .select2-container .select2-selection--single {
            height: 34px;
        }
        .btn {
            padding: 5px 15px;
        }

        .card {
            border: none;
            box-shadow: 0 0 20px rgba(0,0,0,.08);
            margin-bottom: 24px;
        }

        .card-header {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            padding: 15px 20px;
        }

        .card-body {
            padding: 20px;
        }

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

        .bg-header {
            background-color: #f8f9fa;
        }

        .bg-subheader {
            background-color: #f8f9fa;
        }

        .header-cell {
            color: #495057;
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
            padding: 12px;
        }

        .subheader-cell {
            color: #495057;
            padding: 12px;
            width: 20%;
        }

        .badge {
            padding: 6px 12px;
            font-weight: 500;
            font-size: 12px;
        }

        .form-select {
            padding: 6px 12px;
            font-size: 14px;

            border: 1px solid #ced4da;
        }

        .select2-container .select2-selection--single {
            height: 34px;
        }

        .btn {
            padding: 5px 15px;
            margin-left: 5px;
        }

        .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;
        }

        .main-header {
            background-color: #f8f9fa;
            color: #344767;
            font-weight: 600;
            padding: 15px;
            border-bottom: 2px solid #e0e0e0;
        }

        .sub-header {
            background-color: #f8f9fa;
            color: #344767;
            padding: 12px;
            border-bottom: 2px solid #e0e0e0;
        }

        .badge {
            padding: 6px 12px;
            font-weight: 500;
            font-size: 12px;

        }

        .bg-success {
            background-color: #2dce89 !important;
        }

        .bg-info {
            background-color: #11cdef !important;
        }

        .form-select {
            padding: 8px 12px;

            border: 1px solid #e0e0e0;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .form-select:focus {
            border-color: #4a6cf7;
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
        }

        .btn {
            padding: 8px 16px;

            font-weight: 500;
            transition: all 0.2s ease;
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
        }

        .btn-outline-danger {
            color: #dc3545;
            border-color: #dc3545;
        }

        .btn-outline-danger:hover {
            background-color: #dc3545;
            color: #fff;
        }

        .btn-primary {
            background-color: #4a6cf7;
            border-color: #4a6cf7;
        }

        .btn-primary:hover {
            background-color: #3955c8;
            border-color: #3955c8;
        }

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

        /* Select2 Customization */
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #e0e0e0;

        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            padding-left: 12px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        /* Animation for delete button */
        .delete-row {
            opacity: 0.8;
            transition: all 0.2s ease;
        }

        .delete-row:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        .card {
            border: 1px solid #e0e0e0;

            box-shadow: 0 2px 4px rgba(0,0,0,.05);
        }

        .card-body {
            padding: 1.25rem;
        }

        .custom-table {
            margin-bottom: 0;
        }

        .custom-table th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }

        .header-cell {
            color: #344767;
            font-weight: 600;
            padding: 12px;
            font-size: 14px;
        }

        .subheader-cell {
            padding: 10px;
            font-size: 13px;
        }

        .badge {
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 500;
        }

        .bg-success {
            background-color: #10b981 !important;
        }

        .bg-info {
            background-color: #0ea5e9 !important;
        }

        /* Select2 Customization */
        .select2-container--default .select2-selection--single {
            height: 36px !important;
            border: 1px solid #e0e0e0 !important;

            background-color: #fff !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px !important;
            padding-left: 12px !important;
            color: #333 !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 34px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #6b7280 !important;
        }

        /* Button Styles */
        .btn {
            font-size: 13px;
            padding: 0.4rem 0.75rem;

        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 12px;
        }

        .btn-primary {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }

        .btn-primary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
        }

        .btn-outline-danger {
            color: #ef4444;
            border-color: #ef4444;
        }

        .btn-outline-danger:hover {
            background-color: #ef4444;
            color: #fff;
        }

        /* Table cell padding */
        .table>:not(caption)>*>* {
            padding: 12px 8px;
        }

        /* Select2 width fix */
        .select2 {
            width: 100% !important;
        }

        tfoot td {
            background-color: #f8f9fa;
            padding: 12px !important;
            border-top: 2px solid #dee2e6;
        }

        .btn-primary {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }

        .btn-primary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
        }

        .is-invalid {
            border-color: #dc3545 !important;
        }

        .invalid-feedback {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 80%;
            color: #dc3545;
        }

        /* Select2 validation styling */
        .select2-container--default .select2-selection--single.is-invalid {
            border-color: #dc3545 !important;
        }
    </style>
@endsection

@section('content')
    {{--Messsage--}}
    <div class="row">
        <div class="col-md-12">
            @include('hr_partials._message')
        </div>
    </div>

    <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-sm" 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::select('project_id_fk', $projectOptionList, $projectIdSelected ?: null, ['class' => 'form-control project','autocomplete'=>'off']) !!}
                                                @if ($errors->has('project_id_fk'))
                                                    <p class="help-block">
                                                        <small class="text-danger">
                                                            <span class="glyphicon glyphicon-exclamation-sign"
                                                                  aria-hidden="true"></span>
                                                            {{ $errors->first('project_id_fk') }}
                                                        </small>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('project_type_id_fk','Project Type') }}
                                                {!! Form::select('project_type_id_fk', [],old('project_type_id_fk'), ['class' => 'form-control project-type','autocomplete'=>'off']) !!}
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('voucher_type_id_fk','Voucher Type') }}
                                                {!! Form::select('voucher_type_id_fk', $voucherTypeOptionList, $voucherTypeIdSelected ?: null, ['class' => 'form-control voucher-type','autocomplete'=>'off']) !!}
                                            </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']) !!}
                                            </div>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>

                                @if($isNagodanFormShowing)
                                    <br>
                                    {!! Form::open(['url'=>route('finalPaymentAutoVoucherMasterConfiguration.store'),'class'=>'form-horizontal','id'=>'form-nagodan']) !!}

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

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

                                            {{--Item Wrapper--}}
                                            <div class="item__wrapper"></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() !!}
                                @endif
                            </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 ], $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']) }}
                {{ Form::hidden('credit[]', '-', ['class' => 'form-control project-template']) }}
                {{ Form::hidden('amount_head[]', '-', ['class' => 'form-control project-template']) }}

                <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>
                            <tr class="item__template-table-row">
                                <td>
                                    {!! Form::select('amount_head[]', [], null, [
                                        'class' => 'form-control amount_head',
                                        'placeholder' => 'Select Amount'
                                    ]) !!}
                                </td>
                                <td>
                                    {!! Form::select('before_debit[]', [], null, [
                                        'class' => 'form-control before_debit',
                                        'style' => 'width: 100%',
                                        'placeholder' => 'Select Debit'
                                    ]) !!}
                                </td>
                                <td>
                                    {!! Form::select('before_credit[]', [], null, [
                                        'class' => 'form-control before_credit',
                                        'placeholder' => 'Select Credit'
                                    ]) !!}
                                </td>
                                <td>
                                    {!! Form::select('after_debit[]', [], null, [
                                        'class' => 'form-control after_debit',
                                        'style' => 'width: 100%',
                                        'placeholder' => 'Select Debit'
                                    ]) !!}
                                </td>
                                <td>
                                    {!! Form::select('after_credit[]', [], null, [
                                        'class' => 'form-control after_credit',
                                        'style' => 'width: 100%',
                                        'placeholder' => 'Select Credit'
                                    ]) !!}
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-row">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" class="text-end text-right">
                                    <button type="button" class="btn btn-sm btn-primary js-addRow">
                                        <i class="fa fa-plus me-1"></i> New Row
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
<!-- In your layout file -->

    <script>

        $(document).on("click", ".btn-get", function (e) {
            var project = $(this).closest(".row").find('.project-template');
            var projectType = $(this).closest(".row").find('.project-type-template');

            var templateTableRow = $(".item__template").find(".item__template-table-row").clone();

            // Remove rows
            $(this).closest(".item").find(".item__template-table tbody tr").detach()

            // Add new row
            $(this).closest(".item").find(".item__template-table").append(templateTableRow)

            var after_debit = $(this).closest(".item").find(".item__template-table-row").find('.after_debit');
            var after_credit = $(this).closest(".item").find(".item__template-table-row").find('.after_credit');
            var before_debit = $(this).closest(".item").find(".item__template-table-row").find('.before_debit');
            var before_credit = $(this).closest(".item").find(".item__template-table-row").find('.before_credit');
            var amountHeadOptSelect = $(this).closest(".item").find(".item__template-table-row").find('.amount_head');

            $.ajax({
                url: "{{ route('finalPaymentAutoVoucherMasterConfiguration.getCodeOptionList') }}",
                method: "GET",
                data: {project_id_fk: project.val(),project_type_id_fk: projectType.val()}

            }).then(function (result) {
                // after_debit.find('option').detach()
                // after_credit.find('option').detach()
                // before_debit.find('option').detach()
                // before_credit.find('option').detach()
                // amountHeadOptSelect.find('option').detach()
                $.each(result, function (key, item) {
                    after_debit.append(`<option value="${key}">${item}</option>`);
                    after_credit.append(`<option value="${key}">${item}</option>`);
                    before_debit.append(`<option value="${key}">${item}</option>`);
                    before_credit.append(`<option value="${key}">${item}</option>`);
                    amountHeadOptSelect.append(`<option value="${key}">${item}</option>`);
                })
            })
        })

        $(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();
            $(this).closest('.item')
                .find('tbody')
                .append($(this).closest("table").find("tbody").children().clone()[0]);
        });

        $(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);
        });

        ajaxRequest(
            $('.project'),
            $('.project-type'),
            "{{ url('hr/filter/getProjectType') }}",
            "{{ $projectTypeIdSelected ?: null }}"
        );

        $('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);

        $(document).ready(function() {
            // Initialize Select2
            initializeSelect2();

            // Add new row at the beginning of the table
            $('.js-addRow').click(function() {
                var newRow = $('.item__template-table-row:first').clone();

                // Clear select2 and reset values
                newRow.find('select').each(function() {
                    $(this)
                        .val(null)
                        .empty()
                        .removeAttr('data-select2-id')
                        .find('option')
                        .removeAttr('data-select2-id');
                });

                // Remove select2 containers and event handlers
                newRow.find('.select2-container').remove();
                newRow.find('select').off();

                // Insert new row at beginning of tbody
                $(this).closest('tbody').prepend(newRow);

                // Initialize select2 on new row
                initializeSelect2ForRow(newRow);

                // Smooth scroll to top of table
                $('html, body').animate({
                    scrollTop: newRow.offset().top - 100
                }, 300);
            });

            // Delete row - simplified version without last row check
            $(document).on('click', '.delete-row', function() {
                var tbody = $(this).closest('tbody');
                if (tbody.find('tr').length > 1) {
                    $(this).closest('tr').remove();
                } else {
                    alert('Cannot delete the last row. At least one row is required.');
                }
            });

            // Initialize Select2 function
            function initializeSelect2() {
                $('.select2-basic').each(function() {
                    if (!$(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2({
                            width: '100%',
                            allowClear: true,
                            placeholder: $(this).data('placeholder'),
                            minimumResultsForSearch: 6,
                            language: {
                                noResults: function() {
                                    return "No results found";
                                }
                            },
                            escapeMarkup: function(markup) {
                                return markup;
                            }
                        });
                    }
                });
            }

            // Initialize Select2 for a specific row
            function initializeSelect2ForRow(row) {
                row.find('.select2-basic').each(function() {
                    $(this).select2({
                        width: '100%',
                        allowClear: true,
                        placeholder: $(this).data('placeholder'),
                        minimumResultsForSearch: 6,
                        language: {
                            noResults: function() {
                                return "No results found";
                            }
                        },
                        escapeMarkup: function(markup) {
                            return markup;
                        }
                    });
                });
            }

            // Client-side validation and submission
            $('#form-nagodan').on('submit', function(e) {
                e.preventDefault();

                // 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')
                    },
                    beforeSend: function() {
                        $('#submit-btn').prop('disabled', true)
                            .html('<i class="fa fa-spinner fa-spin"></i> Processing...');
                    },
                    success: function(response) {
                        toastr.success('Data saved 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() {
                        $('#submit-btn').prop('disabled', false)
                            .html('<i class="fa fa-save"></i> Submit');
                    }
                });
            });

            // Helper functions
            function showError(element, message) {
                $(element).addClass('is-invalid');
                $(element).after(`<div class="invalid-feedback">${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