@php
    $route = explode('.', Route::currentRouteName());
@endphp

<x-default-layout>
    <!--begin::Card-->
    <div class="card card-xxl-stretch mb-5 mb-xl-8">
        <!--begin::Card body-->
        <div class="card-header border-0 pt-5">
            <div class="card-title align-items-start flex-column">
                <div class="d-flex align-items-center position-relative my-1">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                    <span class="svg-icon svg-icon-1 position-absolute ms-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                  transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
                            <path
                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                fill="currentColor"></path>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    <input type="text" id="searchbox"
                           class="form-control form-control-solid border border-gray-300 w-250px ps-15"
                           placeholder="Search Role">
                </div>

                <!--begin::Export buttons-->
                <div id="kt_datatable_example_1_export" class="d-none"></div>
                <!--end::Export buttons-->

            </div>

            <div class="card-toolbar">

                <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click"
                        data-kt-menu-placement="bottom-end">
                    <i class="ki-duotone ki-exit-down fs-2"><span class="path1"></span><span class="path2"></span></i>
                    Export Report
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_export_menu"
                     class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4"
                     data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="print">
                            Print
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>

                <!--begin::Hide default export buttons-->
                <div id="kt_datatable_example_buttons" class="d-none"></div>
                <!--end::Hide default export buttons-->

            </div>
        </div>
        <div class="card-body pt-6">
            @include('usermanager::users.roles._table')
            @include('usermanager::users.roles._form')
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
    @push('customscript')
        <script>
            $(function () {
                $(".form_user_roles").submit(function (e) {
                    e.preventDefault(); // avoid to execute the actual submit of the form.

                    var form = $(this);
                    var actionUrl = form.attr('action');

                    $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data: form.serialize(), // serializes the form's elements.
                        success: function (data) {
                            var _data = JSON.parse(data);
                            toastr.success(_data.message);
                            form[0].reset();
                            LaravelDataTables["{{$route[0].'-'.$route[1]}}-table"].ajax.reload();
                            $('#kt_modal_user_roles').modal('hide');

                        },
                        error: function (data, textStatus, errorThrown) {
                            var errors = data.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                toastr.error(value);
                            });
                        }
                    });
                });

                $('#kt_modal_user_roles').on('hidden.bs.modal', function (e) {
                    $(".form_user_roles")[0].reset();
                    $(".form_user_roles").attr('action', "{{ route('user.roles.store') }}");
                    $(".form_user_roles").find('input[name="_method"]').remove();
                    $("#title_form").html("Create Role");
                })
            });
        </script>
    @endpush
</x-default-layout>