@extends('frontend.user-dashboard.layout.app')

@section('header')
    @include('frontend.user-dashboard.include.header')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    @include('frontend.user-dashboard.include.sidebar')
@endsection

@section('content')
    @php
        $residence_choose = '';
        $settings = Session::has('settings') ? Session::get('settings')[0] : [];
        $delivery_date = date('F j, Y', strtotime(data_get($settings, 'delivery_date')));
        $max_age = Session::get('max_age');
    @endphp

    <div class="dashboard_wrapper">
        @if (isset($iscompletedApplication))
            <div class="topbar">
                <h3>{{ __('form.Hi') }}, <strong>{{ auth()->user()->name }}</strong></h3>

                <h6>{{ __('form.successHeadermsg.1') }} {{ @$settings->current_year }} {{ __('form.successHeadermsg.2') }}
                </h6>
                <p style="font-size: 30px !important;">{{ __('form.Application') }}: {{ @$iscompletedApplication->id }}</p>
                <div class="progress_bar">
                    <p>{{ __('form.SuccessMessage') }}
                        {{ \Carbon\Carbon::parse($settings->last_date_of_application_submission)->format('F d, Y') }}
                    </p>
                </div>
            </div>
        @else
            <div class="topbar">
                <h3>{{ __('form.Hi') }}, <strong>{{ auth()->user()->name }}</strong></h3>
                <h5>{{ __('form.headerMsg') }}</h5>
                <div class="progress_block">
                    <div class="progress_count" style="left: calc(81% - 16px)">
                        <span id="progressspanid">81%</span>
                    </div>
                    <div class="progress_bar">
                        <span class="main_progress" style="width: 81%;"></span>
                    </div>
                </div>
            </div>
        @endif
        <div class="lang_block">
            <div class="inner">
                <div class="icon_box">
                    <img src="{{ asset('/frontend') }}/user-assets/img/translation_icon.svg" alt="">
                </div>
                <label for="">Language:</label>
                <select name="" class="right-container" id="lang-change">
                    @foreach (config('app.allowed_languages') as $ln_key => $ln_value)
                        <option class="text-black" value="{{ $ln_key }}"
                            {{ App::getLocale() == $ln_key ? 'selected' : '' }}>{{ $ln_value }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="content_area">
            <form method="post" action="{{ route('user.questions.StepFiveStore') }}">
                @csrf
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif



                <!-- Step 2: Question 10 -->
                <div class="content_box step" id="step-1">
                    <div class="question_box">
                        {{-- <div class="no_box">
                        <span>10</span>
                    </div> --}}
                        <div class="main_question">
                            <h2>{{ __('form.question10.1') }} {{ @$max_age }} {{ __('form.question10.2') }}<span class="important" style="color:red;">*</span></h2>
                                {{-- {{ $delivery_date }}? --}}
                                
                            <h5>({{ __('form.question10.Description') }})</h5>
                            <div class="selcet-with-left-value-sm">
                                <select type="text" class="form-control" name="christmas_household" id="child_household"
                                    @if ($isApplicationForm->member_of_household > 0) disabled @endif>
                                    <option value="" selected>--Select--</option>
                                    @for ($i = 1; $i <= 10; $i++)
                                        <option value="{{ $i }}"
                                            {{ @$isApplicationForm->member_of_household == $i ? 'selected' : '' }}>
                                            {{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            @if ($isApplicationForm->member_of_household > 0)
                                <p style="color:blue">{{ __('form.PreviouslyAddress') }}
                                    {{ @$isApplicationForm->member_of_household }} @if ($isApplicationForm->member_of_household == 1)
                                        {{ __('form.childForOne') }}
                                    @else
                                        {{ __('form.childForMultiple') }}
                                    @endif {{ __('form.Ifyouwanttoadd') }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="btn_row">

                        <button type="button" class="site_btn site_btn_success"
                            onclick="showNextStep(2)"><span>{{ __('form.NextStep') }}</span></button>
                    </div>
                </div>

                <!-- Step 4: Question 12 -->
                <div class="content_box step" id="step-2" style="display: none;">
                    <div class="question_box">
                        {{-- <div class="no_box">
                        <span>11</span>
                    </div> --}}
                        <div class="main_question">
                            <h2>{{ __('form.question12_new') }} {{ @$max_age }}
                                {{ __('form.question12_afterage_new') }}<span class="important" style="color:red;">*</span>
                            </h2>
                            <h5>{{ __('form.question12_desc_new') }}</h5>
                            @if ($isApplicationForm->member_of_household >= 1)
                                <a class="btn btn-warning add-child">
                                    <i class="fas fa-plus">{{ __('form.addbutton') }}</i>
                                </a>
                                <br>
                                <br>
                            @endif

                            <div class="left-space">
                                @if ($isApplicationForm->member_of_household < 1)
                                    <div class="row">
                                        <div class="col-12 col-md-10" id="childdv">

                                            @php
                                                $no_of_child = Session::has('child_no') ? Session::get('child_no') : 1;
                                                Session::forget('child_no');

                                                if (old('christmas_household')) {
                                                    $no_of_child = old('christmas_household', '1');
                                                }
                                            @endphp
                                            @for ($i = 1; $i <= $no_of_child; $i++)
                                                <h4>{{ __('form.child') }} {{ $i }}</h3>
                                                    <div class="row fix-row">
                                                        <div class="col-12 col-md-6 fix-col">
                                                            <div class="form-group mb-4">
                                                                <input type="text" class="form-control"
                                                                    placeholder="{{ __('form.q6_placeholder1') }}"
                                                                    name="child_info[{{ $i }}][first_name]"
                                                                    value="{{ old('child_info.' . $i . '.first_name', '') }}"
                                                                    autocomplete="off">
                                                                @error('child_info.' . $i . '.first_name')
                                                                    <div class="error" style="color:red;">{{ $message }}
                                                                    </div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-6 fix-col">
                                                            <div class="form-group mb-4">
                                                                <input type="text" class="form-control"
                                                                    placeholder="{{ __('form.q6_placeholder2') }}"
                                                                    name="child_info[{{ $i }}][last_name]"
                                                                    value="{{ old('child_info.' . $i . '.last_name', '') }}"
                                                                    autocomplete="off">
                                                                @error('child_info.' . $i . '.last_name')
                                                                    <div class="error" style="color:red;">{{ $message }}
                                                                    </div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-6 fix-col">
                                                            <div class="form-group mb-4">
                                                                <select class="form-control"
                                                                    name="child_info[{{ $i }}][toy_type]">
                                                                    <option value="">{{ __('form.toy_preference') }}
                                                                    </option>
                                                                    <option value="boy_toys"
                                                                        {{ old('child_info.' . $i . '.toy_type') == 'boy_toys' ? 'selected' : '' }}>
                                                                        {{ __('form.boy_toy') }}</option>
                                                                    <option value="girl_toys"
                                                                        {{ old('child_info.' . $i . '.toy_type') == 'girl_toys' ? 'selected' : '' }}>
                                                                        {{ __('form.girl_toy') }}</option>
                                                                </select>
                                                                @error('child_info.' . $i . '.toy_type')
                                                                    <div class="error" style="color:red;">{{ $message }}
                                                                    </div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-6 fix-col">
                                                            <div class="form-group mb-4">
                                                                <select class="form-control"
                                                                    name="child_info[{{ $i }}][age_group]">
                                                                    <option value="">{{ __('form.age_group') }}
                                                                    </option>
                                                                    <option value="1"
                                                                        {{ old('child_info.' . $i . '.age_group') == '1' ? 'selected' : '' }}>
                                                                        {{ __('form.less1') }}</option>
                                                                    <option value="2"
                                                                        {{ old('child_info.' . $i . '.age_group') == '2' ? 'selected' : '' }}>
                                                                        1 - 2</option>
                                                                    <option value="3"
                                                                        {{ old('child_info.' . $i . '.age_group') == '3' ? 'selected' : '' }}>
                                                                        3 - 4</option>
                                                                    <option value="4"
                                                                        {{ old('child_info.' . $i . '.age_group') == '4' ? 'selected' : '' }}>
                                                                        5 - 7</option>
                                                                    <option value="5"
                                                                        {{ old('child_info.' . $i . '.age_group') == '5' ? 'selected' : '' }}>
                                                                        8 - 10</option>
                                                                    <option value="6"
                                                                        {{ old('child_info.' . $i . '.age_group') == '6' ? 'selected' : '' }}>
                                                                        11 - 14</option>
                                                                </select>
                                                                @error('child_info.' . $i . '.age_group')
                                                                    <div class="error" style="color:red;">
                                                                        {{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                            @endfor
                                        </div>
                                    </div>
                                @endif
                                @if ($isApplicationForm->member_of_household >= 1)
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table" style="width: 100%; border-collapse: collapse;">
                                                    <thead style="background-color: #ee2555; color: white;">
                                                        <tr>

                                                            <th scope="col">{{ __('form.q6_placeholder1') }}</th>
                                                            <th scope="col">{{ __('form.q6_placeholder2') }}</th>
                                                            <th scope="col">{{ __('form.toy_preference') }}</th>
                                                            <th scope="col">{{ __('form.age_group') }}</th>
                                                            <th scope="col">{{ __('form.Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($isApplicationForm->child_details as $child)
                                                            <tr>

                                                                <td>{{ $child->first_name }}</td>
                                                                <td>{{ $child->last_name }}</td>
                                                                <td>
                                                                    @if ($child->toy_type == 'boy_toys')
                                                                        {{ __('form.boy_toy') }}
                                                                    @elseif ($child->toy_type == 'girl_toys')
                                                                        {{ __('form.girl_toy') }}
                                                                    @endif
                                                                </td>

                                                                <td>
                                                                    @if ($child->age_group == 1)
                                                                        {{ __('form.less1') }}
                                                                    @elseif ($child->age_group == 2)
                                                                        1 - 2
                                                                    @elseif ($child->age_group == 3)
                                                                        3 - 4
                                                                    @elseif ($child->age_group == 4)
                                                                        5 - 7
                                                                    @elseif ($child->age_group == 5)
                                                                        8 - 10
                                                                    @elseif ($child->age_group == 6)
                                                                        11 - 14
                                                                    @endif


                                                                </td>
                                                                <td>
                                                                    <a class="btn btn-danger delete-child"
                                                                        data-id="{{ $child->id }}">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                    </a>
                                                                    <a class="btn btn-warning edit-child"
                                                                        data-id="{{ $child->id }}"
                                                                        data-first-name="{{ $child->first_name }}"
                                                                        data-last-name="{{ $child->last_name }}"
                                                                        data-toy-type="{{ $child->toy_type }}"
                                                                        data-age-group="{{ $child->age_group }}">
                                                                        <i class="fas fa-edit"></i>
                                                                    </a>
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="btn_row">
                        <button type="button" class="site_btn site_btn_success"
                            onclick="showPreviousStep(1)"><span>{{ __('form.PreStep') }}</span></button>
                        <button type="submit" class="site_btn site_btn_success"
                            id="form_submit"><span>{{ __('form.submit') }}</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="editChildModal" tabindex="-1" role="dialog" aria-labelledby="editChildModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editChildModalLabel">Edit Child Details</h5>
                    <a type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></a>
                </div>
                <div class="modal-body">
                    <form id="editChildForm">
                        <input type="hidden" id="edit_child_id" name="id">
                        <div class="mb-3">
                            <label for="edit_first_name" class="form-label">{{ __('form.q6_placeholder1') }}</label>
                            <input type="text" class="form-control" id="edit_first_name" name="first_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit_last_name" class="form-label">{{ __('form.q6_placeholder2') }}</label>
                            <input type="text" class="form-control" id="edit_last_name" name="last_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit_toy_type" class="form-label">{{ __('form.toy_preference') }}</label>
                            <select class="form-select" id="edit_toy_type" name="toy_type" required>
                                <option value="boy_toys">{{ __('form.boy_toy') }}</option>
                                <option value="girl_toys">{{ __('form.girl_toy') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="edit_age_group" class="form-label">{{ __('form.age_group') }}</label>
                            <select class="form-select" id="edit_age_group" name="age_group" required>
                                <option value="1">{{ __('form.less1') }}</option>
                                <option value="2">1 - 2</option>
                                <option value="3">3 - 4</option>
                                <option value="4">5 - 7</option>
                                <option value="5">8 - 10</option>
                                <option value="6">11 - 14</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addChildModal" tabindex="-1" role="dialog" aria-labelledby="addChildModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addChildModalLabel">Add Child Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addChildForm">
                        <input type="hidden" id="edit_child_id" name="id">
                        <div class="mb-3">
                            <label for="edit_first_name" class="form-label">{{ __('form.q6_placeholder1') }}</label>
                            <input type="text" class="form-control" id="edit_first_name" name="first_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit_last_name" class="form-label">{{ __('form.q6_placeholder2') }}</label>
                            <input type="text" class="form-control" id="edit_last_name" name="last_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="edit_toy_type" class="form-label">{{ __('form.toy_preference') }}</label>
                            <select class="form-select" id="edit_toy_type" name="toy_type" required>
                                <option value="boy_toys">{{ __('form.boy_toy') }}</option>
                                <option value="girl_toys">{{ __('form.girl_toy') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="edit_age_group" class="form-label">{{ __('form.age_group') }}</label>
                            <select class="form-select" id="edit_age_group" name="age_group" required>
                                <option value="1">{{ __('form.less1') }}</option>
                                <option value="2">1 - 2</option>
                                <option value="3">3 - 4</option>
                                <option value="4">5 - 7</option>
                                <option value="5">8 - 10</option>
                                <option value="6">11 - 14</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



@endsection
@section('footer')
    @include('frontend.user-dashboard.include.footer')

    <script>
        $(document).ready(function() {

            $('#contact_no').keydown(function(e) {
                var key = e.which || e.charCode || e.keyCode || 0;
                $phone = $(this);
                // Auto-format- do not expose the mask as the user begins to type
                console.log(key);
                if (key !== 8 && key !== 9) {
                    if ($phone.val().length === 3) {
                        $phone.val($phone.val() + '-');
                    }
                    if ($phone.val().length === 7) {
                        $phone.val($phone.val() + '-');
                    }
                }
                // Allow numeric (and tab, backspace, delete) keys only
                return (key == 8 ||
                    key == 9 ||
                    key == 46 ||
                    (key >= 48 && key <= 57) ||
                    (key >= 96 && key <= 105));
            })

            var selectedval = '';
            // if (selectedval == 'yes') {
            if ("{{ old('residence') }}" === "yes") {
                $("#unit_sec").removeClass('d-none');
            } else {
                $("#unit_sec").addClass('d-none');
            }

            $("#residence_yes").click(function() {
                $("#unit_sec").removeClass('d-none');
                $("#unit_sec").show();

            });
            $("#residence_no").click(function() {
                $("#unit_sec").addClass('d-none');
                $("#unit_sec").hide();
            });
            $("#child_household").change(function() {
                var child_info = $("#child_household").val();
                $.ajax({
                    url: "{!! route('childHouseHoldInfo') !!}",
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        child_info: child_info
                    },
                    success: function(result) {
                        console.log(result);
                        $("#childdv").load(" #childdv");
                    }
                });
            });

            if ($('#t6').prop('checked')) {
                $(".other-dv").show();
            }
            $("#t6").click(function() {
                $(".other-dv").show();
                // $(".error_client").html('This field is required');
            });
            $("#t1,#t2,#t3,#t4,#t5").click(function() {
                $(".other-dv").hide();
                // $(".error_client").html('');
            });

            $(".shw_pickup").addClass('d-none');

            if ($('.pickup_d').prop('checked')) {
                $(".shw_pickup").removeClass('d-none');
            }
            $(".pickup_d").click(function() {
                $(".shw_pickup").removeClass('d-none');
            })
            $(".delivery_d").click(function() {
                $(".shw_pickup").addClass('d-none');
            })
        });
        $(document).ready(function() {
            function validateForm() {
                let isValid = true;

                // Clear previous errors
                $('.error').remove();

                // Question 9
                if ($('select[name="household_no"]').val() === "") {
                    isValid = false;
                    $('select[name="household_no"]').parent().append(
                        '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                }

                // Question 10
                if ($('select[name="christmas_household"]').val() === "") {
                    isValid = false;
                    $('select[name="christmas_household"]').parent().append(
                        '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                }



                // Question 12
                $('#childdv').find('input, select').each(function() {
                    if ($(this).val() === "") {
                        isValid = false;
                        $(this).parent().append(
                            '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>'
                            );
                    }
                });

                return isValid;
            }

            $('form').on('submit', function(e) {
                if (!validateForm()) {
                    e.preventDefault(); // Prevent form submission
                }
            });

            // Toggle other relationship field
            $('input[name="relwithchildern"]').on('change', function() {
                if ($(this).val() === 'no') {
                    $(".other-dv").show();
                } else {
                    $(".other-dv").hide();
                    $('input[name="other_relationship"]').val(''); // Clear value
                }
            });

            // Child household change event
            $("#child_household").change(function() {
                var child_info = $("#child_household").val();
                $.ajax({
                    url: "{!! route('childHouseHoldInfo') !!}",
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        child_info: child_info
                    },
                    success: function(result) {
                        $("#childdv").html(result);

                        // Reattach event handlers to dynamically generated fields
                        $('form').off('submit').on('submit', function(e) {
                            if (!validateForm()) {
                                e.preventDefault(); // Prevent form submission
                            }
                        });
                    }
                });
            });

            // Additional existing scripts...
        });
    </script>
    <script>
        function showNextStep(step) {
            if (!validateStep(step - 1)) {
                return;
            }
            document.querySelectorAll('.step').forEach(step => step.style.display = 'none');
            document.getElementById('step-' + step).style.display = 'block';

            // Update progress bar and percentage display
            const progress = 81 + (step - 1) * 9; // Starting at 36% and each step increases the progress by 9%
            document.querySelector('.main_progress').style.width = progress + '%';

            // Update progress_count style left calculation
            const progressLeft = `calc(${progress}% - 16px)`;
            document.querySelector('.progress_count').style.left = progressLeft;

            // Update progressspanid percentage display
            document.getElementById('progressspanid').innerText = progress + '%';
        }

        function showPreviousStep(step) {
            document.querySelectorAll('.step').forEach(step => step.style.display = 'none');
            document.getElementById('step-' + step).style.display = 'block';

            // Update progress bar and percentage display
            const progress = 81 + (step - 1) * 9;
            document.querySelector('.main_progress').style.width = progress + '%';

            // Update progress_count style left calculation
            const progressLeft = `calc(${progress}% - 16px)`;
            document.querySelector('.progress_count').style.left = progressLeft;

            // Update progressspanid percentage display
            document.getElementById('progressspanid').innerText = progress + '%';
        }

        function validateStep(step) {
            let isValid = true;

            // Clear previous errors
            $('.error').remove();

            // Validate fields based on the step number
            if (step === 1) {
                if ($('select[name="christmas_household"]').val() === "") {
                    isValid = false;
                    $('select[name="christmas_household"]').parent().append(
                        '<div class="error" style="color:red;">This field is required.</div>');
                }
            }

            return isValid;
        }
    </script>
    <script>
        $(document).ready(function() {
            // Use event delegation to handle edit button click
            $(document).on('click', '.edit-child', function() {
                var id = $(this).data('id');
                var firstName = $(this).data('first-name');
                var lastName = $(this).data('last-name');
                var toyType = $(this).data('toy-type');
                var ageGroup = $(this).data('age-group');

                $('#editChildModal').modal('show');
                $('#edit_child_id').val(id);
                $('#edit_first_name').val(firstName);
                $('#edit_last_name').val(lastName);
                $('#edit_toy_type').val(toyType);
                $('#edit_age_group').val(ageGroup);
            });

            $(document).on('click', '.add-child', function() {

                $('#addChildModal').modal('show');
            });

            // Handle form submission
            $('#editChildForm').submit(function(e) {
                e.preventDefault(); // Prevent default form submission

                var id = $('#edit_child_id').val();
                var formData = $(this).serialize(); // Serialize form data

                $.ajax({
                    url: '{{ route('user.questions.updatechild', ':id') }}'.replace(':id', id),
                    type: 'post',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#editChildModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: '{{ __('form.child_details_updated') }}'
                        });
                        refreshTable(); // Refresh the table data
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        alert('An error occurred while updating child details.');
                    }
                });
            });

            // Handle form submission
            $('#addChildForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize(); // Serialize form data

                $.ajax({
                    url: '{{ route('user.questions.addchild') }}',
                    type: 'post',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#addChildModal').modal('hide');
                        $('#addChildForm')[0].reset();
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: '{{ __('form.child_added') }}'
                        });
                        refreshTable(); // Refresh the table data
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        alert('An error occurred while updating child details.');
                    }
                });
            });

            // Function to refresh the table data
            function refreshTable() {
                $.ajax({
                    url: '{{ route('user.questions.childdata') }}', // Create a route that returns updated table data
                    type: 'GET',
                    success: function(response) {
                        var tableBody = $('table tbody');
                        tableBody.empty(); // Clear existing rows

                        // Check if there are no child details
                        if (response.length === 0) {
                            // Refresh the page if no child details are found
                            location.reload();
                            return;
                        }

                        // Append updated rows if child details are found
                        response.forEach(function(child, index) {
                            var row = `
                    <tr>
                        
                        <td>${child.first_name}</td>
                        <td>${child.last_name}</td>
                        <td>${child.toy_type === 'boy_toys' ? '{{ __('form.boy_toy') }}' : '{{ __('form.girl_toy') }}'}</td>
                        <td>${getAgeGroup(child.age_group)}</td>
                        <td>
                            <a class="btn btn-danger delete-child" data-id="${child.id}">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                            <a class="btn btn-warning edit-child" data-id="${child.id}" data-first-name="${child.first_name}" data-last-name="${child.last_name}" data-toy-type="${child.toy_type}" data-age-group="${child.age_group}">
                                <i class="fas fa-edit"></i>
                            </a>
                        </td>
                    </tr>
                `;
                            tableBody.append(row);
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        alert('An error occurred while fetching updated data.');
                    }
                });
            }

            $(document).on('click', '.delete-child', function() {
                var id = $(this).data('id');

                if (confirm('Are you sure you want to delete this child?')) {
                    $.ajax({
                        url: '{{ route('user.questions.deletechild', ':id') }}'.replace(':id',
                            id),
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: response.message
                                });
                                refreshTable();
                            } else {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Warning',
                                    text: response.message
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message ||
                                    'An error occurred while deleting child details.'
                            });
                        }
                    });
                }
            });

            // Function to convert {{ __('form.age_group') }} code to text
            function getAgeGroup(ageGroup) {
                switch (ageGroup) {
                    case '1':
                        return '{{ __('form.less1') }}';
                    case '2':
                        return '1 - 2';
                    case '3':
                        return '3 - 4';
                    case '4':
                        return '5 - 7';
                    case '5':
                        return '8 - 10';
                    case '6':
                        return '11 - 14';
                    default:
                        return '';
                }
            }
        });
    </script>
@endsection