@extends('dashboard.admin.layouts.master')
@section('toolbar')
    <!--begin::Toolbar container-->
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <!--begin::Page title-->
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <!--begin::Title-->
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                {{trans('Toolbar.Nationality')}}</h1>
            <!--end::Title-->
            <!--begin::Breadcrumb-->
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">

                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">
                        {{trans('Toolbar.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>


                <li class="breadcrumb-item text-muted">
                    {{trans('Toolbar.setting')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    {{trans('Toolbar.Nationality')}}
                </li>

            </ul>
            <!--end::Breadcrumb-->
        </div>
        <!--begin::Actions-->
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <!--begin::Filter menu-->
            <div class="d-flex">
                @if(auth()->user()->hasRole('Super-Admin')||(auth()->user()->canAny(['add_nationality'])))
                <button type="button" data-bs-toggle="modal" data-bs-target="#AddModal"
                        class="btn btn-icon btn-sm btn-success flex-shrink-0 ms-4">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->
                    <span class="svg-icon svg-icon-2">
													<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                         xmlns="http://www.w3.org/2000/svg">
														<rect opacity="0.5" x="11.364" y="20.364" width="16" height="2"
                                                              rx="1" transform="rotate(-90 11.364 20.364)"
                                                              fill="currentColor"/>
														<rect x="4.36396" y="11.364" width="16" height="2" rx="1"
                                                              fill="currentColor"/>
													</svg>
												</span>
                    <!--end::Svg Icon-->
                </button>
                @endif
            </div>
            <!--end::Filter menu-->
        </div>
        <!--end::Actions-->
    </div>
    <!--end::Toolbar container-->
@endsection
@section('content')
    <!-- Modal 1-->
    <div class="modal fade" id="AddModal" tabindex="-1"
         aria-labelledby="AddModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{route('admin.setting.nationality.store')}}" method="POST" id="StorForm"
                  class="form d-flex flex-column flex-lg-row my-form" enctype="multipart/form-data">
                {{csrf_field()}}
                <input type="hidden" name="id" value="0">

                <div class="modal-content" id="kt_block_ui">
                    <div class="modal-header">
                        <h5 class="modal-title" id="AddModalLabel">{{trans('settings.AddNationality')}}</h5>
                    </div>
                    <!--begin::Form-->

                    <div class="modal-body">
                        <div class="container-fluid">


                            <div class="row">
                                <label class="required form-label">{{trans('settings.NameNationality')}}(<span
                                        class="text-gray-600">{{trans('forms.lable_en')}}</span>)</label>

                                <input type="text" name="name_en" class="form-control mb-2"
                                       placeholder="name" value="" required autocomplete/>


                                <label class="required form-label">{{trans('settings.NameNationality')}}(<span
                                        class="text-gray-600">{{trans('forms.lable_ar')}}</span>)</label>

                                <input type="text" name="name_ar" class="form-control mb-2"
                                       placeholder="الاسم " value="" required autocomplete/>
                            </div>


                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="$('#StorForm').submit()" id="" class="btn btn-primary">
                            <span class="indicator-label">{{trans('forms.save_btn')}}</span>
                            <span class="indicator-progress">Please wait...
													<span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{trans('forms.Close')}}</button>

                    </div>


                </div>
            </form>
        </div>

    </div>


    <div id="kt_app_content_container" class="app-container container-xxl">
        <!--begin::Category-->
        <div class="card card-flush">
            <!--begin::Card header-->
            <div class="card-header align-items-center py-3 gap-2 gap-md-1">
                <!--begin::Card title-->
                <div class="card-title">

                </div>
                <!--end::Card title-->

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            <div class="card-body pt-0">
                <table id="data" class="table align-middle table-row-dashed fs-6 gy-3">
                    <thead>
                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                        <th>#</th>
                        <th>{{trans('settings.NameNationality')}}</th>
                        <th class="min-w-70px">{{trans('forms.Action')}}</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Category-->
    </div>

@stop
@section('js')
    <script>
        var editors = {};

        var target = document.querySelector("#kt_block_ui");

        var blockUI = new KTBlockUI(target, {
            message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> {{trans('forms.Loading')}}...</div>',
        });
        var KTDatatablesServerSide = function () {
            var dt;

            // Private functions
            var initDatatable = function () {
                dt = initAppDataTable('#data', [
                        {data: 'id', name: 'id'},
                        {data: 'name', name: 'name'},
                        {data: 'action', name: 'action', orderable: false, searchable: false}
                    ], "{{route('admin.setting.nationality.index')}}");
            }
            // Delete record
            var handleDeleteRows = function () {
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                KTUtil.on(document.body, '[data-kt-table-delete="delete_row"]', 'click', function (e) {
                    e.preventDefault();
                    // Select parent row
                    const parent = e.target.closest('tr');
                    var action = e.target.getAttribute('href');
                    console.log('action', action)

                    Swal.fire({
                        text: "{{trans('forms.delete_quetion')}}?",
                        icon: "warning",
                        showCancelButton: true,
                        buttonsStyling: false,
                        confirmButtonText: "{{trans('forms.delete_btn')}}",
                        cancelButtonText: "{{trans('forms.action_no')}}",
                        customClass: {
                            confirmButton: "btn fw-bold btn-danger",
                            cancelButton: "btn fw-bold btn-active-light-primary"
                        }
                    }).then(function (result) {
                        if (result.value) {
                            Swal.fire({
                                imageUrl: '{{getLoaderImag()}}',
                                imageWidth: 200,
                                imageHeight: 200,
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 2000,
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            }).then(function () {


                                if (action) {
                                    fetch(action, {
                                        method: 'DELETE',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': csrfToken,
                                        },
                                    })
                                        .then(response => {
                                            if (!response.ok) {
                                                throw new Error('Network response was not ok');
                                            }
                                            return response.json();
                                        })
                                        .then(data => {
                                            Swal.fire({
                                                text: "{{trans('forms.Delete')}}",
                                                icon: "success",
                                                buttonsStyling: false,
                                                confirmButtonText: "{{trans('forms.action_done')}}",

                                                customClass: {
                                                    confirmButton: "btn fw-bold btn-primary",
                                                }
                                            }).then(function () {
                                                dt.draw();
                                            });
                                        })
                                        .catch(error => {
                                            console.error('There was a problem with the fetch operation:', error);
                                        });
                                }


                            });
                        } else if (result.dismiss === 'cancel') {
                            Swal.fire({
                                text: " {{trans('forms.Delete_cancel')}}",
                                icon: "error",
                                buttonsStyling: false,
                                confirmButtonText: "{{trans('forms.action_done')}}",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            });
                        }
                    });
                });

            }

            var initsaveform = () => {
                $('#StorForm').on('submit', function (event) {
                    event.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        url: $(this).attr('action'),
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () {
                            blockUI.block();

                        },
                        success: function (response) {
                            Swal.fire({
                                text: response.message,
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "{{trans('forms.action_done')}}",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            });
                            $('#StorForm')[0].reset();
                            $('#AddModal').modal('hide');
                            dt.draw();
                            blockUI.release();

                        },
                        error: function (xhr) {
                            blockUI.release();

                            if (xhr.status === 422) {
                                $('#StorForm').find('.is-invalid').removeClass('is-invalid');
                                $('#StorForm').find('.invalid-feedback').remove();

                                var errors = xhr.responseJSON.errors;
                                $.each(errors, function (field, messages) {
                                    var $input = $('[name="' + field + '"]');
                                    $input.addClass('is-invalid');
                                    var $error = $('<div class="invalid-feedback"></div>').text(messages[0]);
                                    $input.after($error);
                                });
                            } else {
                                toastr.error('An error occurred. Please try again.');
                            }
                        }
                    });
                });
            }
            var handleEditRows = function () {
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                KTUtil.on(document.body, '[data-kt-table-edit="edit_row"]', 'click', function (e) {
                    e.preventDefault();
                    var action = e.target.getAttribute('href');
                    console.log('action', action)

                    if (action) {
                        fetch(action, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                        })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok');
                                }
                                return response.json();
                            })
                            .then(data => {

                                if (data.one_data) {
                                    document.querySelector('input[name="id"]').value = data.one_data.id;
                                    document.querySelector('input[name="name_en"]').value = data.one_data.name.en;
                                    document.querySelector('input[name="name_ar"]').value = data.one_data.name.ar;

                                    $('#AddModal').modal('show');
                                }
                            })
                            .catch(error => {
                                console.error('There was a problem with the fetch operation:', error);
                            });
                    }


                });
            }
            var restForm = function () {
                $('#AddModal').on('hidden.bs.modal', function () {
                    $('#StorForm')[0].reset();
                    $('input[type="hidden"]').val('');
                    document.querySelector('input[name="id"]').value = 0;
                });
            }

            return {
                init: function () {
                    initDatatable();
                    handleDeleteRows();
                    initsaveform();
                    handleEditRows();
                    restForm();
                }
            }
        }();

        // On document ready
        KTUtil.onDOMContentLoaded(function () {
            KTDatatablesServerSide.init();
        });
    </script>
@endsection