@extends('backend.layouts.app')
@section('content')
    <h4 class="py-3 mb-4">
        @lang('messages.menus.menus')
    </h4>
    <div class="card">
        <div class="card-datatable table-responsive datatable-roles">
            @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create Menu'))
                <div class="text-end m-4">
                    <a href="javascript:;" class="btn btn-primary me-4 px-4" data-bs-target="#addMenu" data-bs-toggle="modal">+@lang('messages.menus.add_new_menu')</a>
                </div>
            @endif
            <table class="datatables-menus table" id="dataTableUserList">
                <thead>
                    <tr>
                        <th>@lang('messages.menus.sr_no')</th>
                        <th>@lang('messages.menus.menu_name_en')</th>
                        <th>@lang('messages.menus.menu_name_ro')</th>
                        <th>@lang('messages.menus.url_of_menu')</th>
                        <th>@lang('messages.menus.status')</th>
                        <th>@lang('messages.menus.action')</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Table body content goes here -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="addMenu" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-Add-user">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-6">
                        <h4 class="mb-2">@lang('messages.menus.add_new_menu')</h4>
                        <p class="mb-6">@lang('messages.menus.add_new_menu_sub').</p>
                    </div>
                    <form id="addMenuForm" action="{{ route('menus-settings.store') }}" class="row g-5">
                        @csrf
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="menu_name_en" name="menu_name_en" class="form-control"
                                    placeholder="@lang('messages.menus.english_menu')" />
                                <label for="menu_name_en">@lang('messages.menus.english_menu')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="menu_name_ro" name="menu_name_ro" class="form-control"
                                    placeholder="@lang('messages.menus.romanian_menu')"/>
                                <label for="menu_name_ro">@lang('messages.menus.romanian_menu')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="input-group input-group-floating">
                                <div class="col-sm-12 col-md-12 col-lg-12 col-lx-12 col-lxx-12">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" class="form-control" id="basic-url24" name="menu_url"
                                        placeholder="@lang('messages.menus.menu_url')" aria-describedby="basic-url24">
                                        <label for="basic-url24">@lang('messages.menus.menu_url')</label>
                                    </div>
                                </div>
                                <span class="form-floating-focused"></span>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-floating form-floating-outline">
                                <select id="menu_status" name="menu_status" class="form-select"
                                    aria-label="Default select example">
                                    <option value="ACTV" selected>@lang('messages.menus.enabled')</option>
                                    <option value="NACT">@lang('messages.menus.disabled')</option>
                                </select>
                                <label for="menu_status">@lang('messages.menus.menu_status')</label>
                            </div>
                        </div>

                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-3">@lang('messages.menus.submit')</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                                aria-label="Close">@lang('messages.menus.cancel')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade " id="editMenuModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-Add-user">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-E6">
                        <h4 class="mb-2">@lang('messages.menus.update_menu')</h4>
                        <p class="mb-6">@lang('messages.menus.update_menu_sub').</p>
                    </div>
                    <form id="editMenuForm" action="" class="row g-5">
                        @csrf
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_menu_name_en" value="" name="edit_menu_name_en"
                                    class="form-control" placeholder="@lang('messages.menus.english_menu')" />
                                <label for="edit_menu_name_en">@lang('messages.menus.english_menu')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_menu_name_ro" value="" name="edit_menu_name_ro"
                                    class="form-control" placeholder="@lang('messages.menus.romanian_menu')" />
                                <label for="edit_menu_name_ro">@lang('messages.menus.romanian_menu')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="input-group input-group-floating">
                                <div class="col-sm-12 col-md-12 col-lg-12 col-lx-12 col-lxx-12">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" class="form-control" id="edit_menu_url" name="edit_menu_url"
                                        placeholder="example" value="" aria-describedby="basic-url24">
                                        <label for="edit_menu_url">@lang('messages.menus.menu_url')</label>

                                    </div>
                                </div>
                                <span class="form-floating-focused"></span>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-floating form-floating-outline">
                                <select id="edit_menu_status" name="edit_menu_status" class="form-select"
                                    aria-label="Default select example">
                                    <option value="ACTV" selected>@lang('messages.menus.enabled')</option>
                                    <option value="NACT">@lang('messages.menus.disabled')</option>
                                </select>
                                <label for="edit_menu_status">@lang('messages.menus.menu_status')</label>
                            </div>
                        </div>

                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-3">@lang('messages.menus.submit')</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                                aria-label="Close">@lang('messages.menus.cancel')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- / Content -->
@endsection

@section('footer_scripts')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $("body").on("click", ".editmenu", function() {
                jQuery.ajax({
                    url: $(this).data('href'),
                    type: 'get',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            $("#editMenuForm").val(data.id);
                            $("#edit_menu_name_en").val(data.menu_name_en);
                            $("#edit_menu_name_ro").val(data.menu_name_ro);
                            $("#edit_menu_url").val(data.menu_url);
                            $("#edit_menu_status").val(data.menu_status);
                            $("#EditMenuForm").attr('action', data.route);
                            $("#editMenuModal").modal('show');
                        } else {
                            // Handle the case where the menu is not found
                            alert('Menu not found');
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                })
            });


            var table = $("#dataTableUserList").DataTable({
                processing: true,
                serverSide: false,
                ajax: "{{ route('menus-settings.index') }}",
                columns: [{
                        data: "DT_RowIndex"
                    },
                    {
                        data: "menu_name_en"
                    },
                    {
                        data: "menu_name_ro"
                    },
                    {
                        data: "menu_url"
                    },
                    {
                        data: "menu_status"
                    },
                    {
                        data: "action"
                    },
                ],
            });




            $("#addMenuForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    menu_name_en: {
                            required: true,
                            maxlength: 255
                        },
                        menu_name_ro: {
                            required: true,
                            maxlength: 255
                        },
                        // menu_url: {
                        //     url: true
                        // },
                        menu_status: {
                            required: true,
                            // Optionally, add a custom rule to validate enum values
                        }
                    },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                $(form)[0].reset();
                                // $("#roles_data").html('');
                                // $("#roles_data").html(data.data);
                                $("#addMenu").modal('hide');
                                table.ajax.reload();

                                // // Refresh user_details div

                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            $("#addMenu").modal('hide');
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }

                    });
                    return false;
                }
            });

            $("#editMenuForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    menu_name_en: {
                            required: true,
                            maxlength: 255
                        },
                        menu_name_ro: {
                            required: true,
                            maxlength: 255
                        },
                        menu_url: {
                            url: true
                        },
                        menu_status: {
                            required: true,
                            // Optionally, add a custom rule to validate enum values
                        }
                    },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    jQuery.ajax({
                        url: jQuery('#editMenuForm').attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.status) {
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                $(form)[0].reset();
                                $("#editMenuModal").modal('hide');
                                table.ajax.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            $("#editMenuModal").modal('hide');
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });


        });
    </script>
@endsection