@extends('dashbord.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.FouceBlog')}}</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.site')}}</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.FouceBlog')}}
                </li>

            </ul>
            <!--end::Breadcrumb-->
        </div>


        <div class="d-flex align-items-center gap-2 gap-lg-3">

            <div class="d-flex">
                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#AddModal"
                   class="btn btn-icon btn-sm btn-success flex-shrink-0 ms-4">
                <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>
                </a>

            </div>


        </div>

    </div>
@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.FouceBlog.store')}}" method="POST"
                  id="StorForm"
                  class="form d-flex flex-column flex-lg-row my-form" enctype="multipart/form-data">
                {{csrf_field()}}
                <div class="modal-content" id="kt_block_ui">
                    <div class="modal-header">
                        <h5 class="modal-title" id="AddModalLabel">{{trans('fouceblog.AddFouceBlog')}}</h5>
                    </div>
                    <!--begin::Formmmmm-->

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

                            <div class="form-group">
                                <div class="row">
                                    <!--begin::Image input placeholder-->
                                    <style>.image-input-placeholder {
                                            background-image: url('{{asset('assets/media/svg/files/blank-image.svg')}}');
                                        }

                                        [data-bs-theme="dark"] .image-input-placeholder {
                                            background-image: url('{{asset('assets/media/svg/files/blank-image-dark.svg')}}');
                                        }</style>
                                    <!--end::Image input placeholder-->
                                    <div class="col-4">
                                        <label class="required form-label">{{trans('fouceblog.image')}} </label>

                                        <!--begin::Image input-->
                                        <div
                                            class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                            data-kt-image-input="true">
                                            <!--begin::Preview existing avatar-->
                                            <div class="image-input-wrapper w-150px h-150px"></div>
                                            <!--end::Preview existing avatar-->
                                            <!--begin::Label-->
                                            <label
                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                title="Change avatar">
                                                <!--begin::Icon-->
                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                <!--end::Icon-->
                                                <!--begin::Inputs-->
                                                <input type="file" name="image" accept=".png, .jpg, .jpeg"/>
                                                <input type="hidden" name="avatar_remove"/>
                                                <!--end::Inputs-->
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Cancel-->
                                            <span
                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                title="Cancel avatar">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                            <!--end::Cancel-->
                                            <!--begin::Remove-->
                                            <span
                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                title="Remove avatar">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                            <!--end::Remove-->
                                        </div>
                                    </div>
                                </div>

                            </div>


                            <div class="row">
                                <input type="hidden" name="id" value="0">
                                <label class="required form-label">{{trans('fouceblog.FouceBlogName')}} (<span
                                        class="text-gray-600">{{trans('forms.lable_en')}}</span>)</label>

                                <input type="text" name="name_en" class="form-control mb-2"
                                       placeholder=" " value="" required autocomplete/>
                            </div>
                            <div class="row">
                                <label class="required form-label">{{trans('fouceblog.FouceBlogName')}}(<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 class="row">
                                <label class="required form-label">{{trans('fouceblog.FouceBlogdetails')}} (<span
                                        class="text-gray-600">{{trans('forms.lable_en')}}</span>)</label>

                                <textarea  name="details_en" class="form-control mb-2" placeholder=" "   ></textarea>
                            </div>
                            <div class="row">
                                <label class="required form-label">{{trans('fouceblog.FouceBlogdetails')}}(<span
                                        class="text-gray-600">{{trans('forms.lable_ar')}}</span>)</label>

                                <textarea  name="details_ar" class="form-control mb-2" placeholder=" "   ></textarea>

                            </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-xxxl">
        <!--begin::Category-->
        <div class="card card-flush">
            <!--begin::Card header-->

            <div class="card-body pt-0">
                <table id="FouceBlogs" 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 class="text-center">{{trans('fouceblog.FouceBlogName')}}</th>
                        <th class="text-center">{{trans('fouceblog.FouceBlogdetails')}}</th>
                        <th class="text-center 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 table;
            var dt;
            var filterPayment;

            // Private functions
            var initDatatable = function () {
                dt = $('#FouceBlogs').DataTable({
                    searchDelay: 500,
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{route('admin.FouceBlog.index')}}",

                    },
                    columns: [
                        {data: 'id', name: 'id', className: 'text-center'},
                        {data: 'data', name: 'data', className: 'text-center'},
                        {data: 'details', name: 'details', className: 'text-center'},
                        {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center'
                        }

                    ],
                    order: [[0, 'desc']],

                });
                table = dt.$;

                dt.on('draw', function () {
                    KTMenu.createInstances();
                });
            }
            // Delete customer
            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'); // Use 'this' instead of 'e'
                    console.log('action', action)
                    // Get customer name
                    const customerName = parent.querySelectorAll('td')[1].innerText;
                    // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                    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) {
                            // Simulate delete request -- for demo purpose only
                            /*Swal.fire({
                                showConfirmButton: false,
                                imageUrl: 'https://media.tenor.com/C7KormPGIwQAAAAi/epic-loading.gif',
                                imageWidth: 200,
                                imageHeight: 200,
                                target: '#ConvertModalInfo',
                                imageAlt: '',
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            });*/
                            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', // or 'GET', 'POST', etc. depending on your server setup
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': csrfToken,

                                            // Add any additional headers if needed
                                        },
                                        // You can add body if needed, e.g., JSON.stringify({ key: 'value' })
                                    })
                                        .then(response => {
                                            if (!response.ok) {
                                                throw new Error('Network response was not ok');
                                            }
                                            return response.json(); // or response.text() or response.blob(), etc.
                                        })
                                        .then(data => {
                                            // Handle the response data if needed
                                            Swal.fire({
                                                text: "{{trans('forms.Delete')}}",
                                                icon: "success",
                                                buttonsStyling: false,
                                                confirmButtonText: "{{trans('forms.action_done')}}",

                                                customClass: {
                                                    confirmButton: "btn fw-bold btn-primary",
                                                }
                                            }).then(function () {
                                                // delete row data from server and re-draw datatable
                                                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 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'); // Use 'this' instead of 'e'
                    console.log('action', action)

                    if (action) {
                        fetch(action, {
                            method: 'GET', // or 'GET', 'POST', etc. depending on your server setup
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrfToken,

                                // Add any additional headers if needed
                            },
                            // You can add body if needed, e.g., JSON.stringify({ key: 'value' })
                        })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok');
                                }
                                return response.json(); // or response.text() or response.blob(), etc.
                            })
                            .then(data => {

                                if (data.one_data) {
                                    // Populate input fields
                                    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;
                                    document.querySelector('textarea[name="details_ar"]').textContent = data.one_data.details.ar;
                                    document.querySelector('textarea[name="details_en"]').textContent = data.one_data.details.en;

                                    // Set image preview
                                    const imageWrapper = document.querySelector('.image-input-wrapper');
                                    if (imageWrapper) {
                                        imageWrapper.style.backgroundImage = `url('${data.one_data.imageUrl}')`;
                                    }

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


                });
            }

            var initsaveform = () => {
                console.log('StorForm');
                $('#StorForm').on('submit', function (event) {
                    event.preventDefault();
                    var formData = new FormData(this);
                    /* console.log(editors,editors['description_en'].getData(),editors['description_ar'].getData());
                     formData.append('description[en]', editors['description_en'].getData());
                     formData.append('description[ar]', editors['description_ar'].getData());
 */
                    $.ajax({
                        url: $(this).attr('action'),
                        method: 'POST',
                        data: formData,
                        processData: false, // Important!
                        contentType: false, // Important!
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include CSRF token
                        },
                        beforeSend: function () {
                            blockUI.block();

                        },
                        success: function (response) {
                            blockUI.release();

                            $('#response').html('<p>' + response.message + '</p>');

                            Swal.fire({
                                text: response.message,
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "{{trans('forms.action_done')}}",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            });
                            // Reset form fields
                            $('#StorForm')[0].reset(); // Reset all input fields
                            $('.image-input-wrapper').css('background-image', ''); // Reset image preview

                            $('#AddModal').modal('hide'); // Close the modal on success
                            dt.draw();
                        },
                        error: function (xhr) {
                            blockUI.release();

                            if (xhr.status === 422) { // Laravel validation error
                                // Remove existing error classes
                                $('#StorForm').find('.is-invalid').removeClass('is-invalid');
                                $('#StorForm').find('.invalid-feedback').remove();

                                var errors = xhr.responseJSON.errors;
                                // Iterate over the errors and add error feedback to corresponding fields
                                $.each(errors, function (field, messages) {
                                    // Find the input (or select) by its name attribute
                                    var $input = $('[name="' + field + '"]');
                                    // Add the is-invalid class
                                    $input.addClass('is-invalid');
                                    // Create an error message container
                                    var $error = $('<div class="invalid-feedback"></div>').text(messages[0]);
                                    // Append the error after the input element (or its parent, depending on your markup)
                                    $input.after($error);
                                });
                            } else {
                                // Handle other errors
                                toastr.error('An error occurred. Please try again.');
                                Swal.fire({
                                    text: xhr.error,
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "{{trans('forms.error_occurred')}}",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    }
                                });
                            }
                        }
                    });
                });
            }
            var restForm = function () {
                $('#AddModal').on('hidden.bs.modal', function () {
                    $('#StorForm')[0].reset(); // Reset all input fields
                    $('.image-input-wrapper').css('background-image', ''); // Reset image preview
                    $('input[type="hidden"]').val(''); // Clear hidden input fields
                });


            }
            return {
                init: function () {

                    initDatatable();
                    handleDeleteRows();
                    handleEditRows();
                    initsaveform();
                    restForm();
                }
            }
        }();

        // On document ready
        KTUtil.onDOMContentLoaded(function () {

            KTDatatablesServerSide.init();

        });
    </script>

    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

@endsection