@extends('dashboard.admin.layouts.master')
@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                {{ trans('Toolbar.services') }}</h1>
            <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') }}
                </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.services') }}
                </li>
            </ul>
        </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')
    <div class="modal fade" id="AddModal" tabindex="-1" aria-labelledby="AddModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('admin.setting.service.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('settings.AddService') }}</h5>
                    </div>

                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="form-group">
                                <div class="row">
                                    <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>
                                    <div class="col-4">
                                        <label class="required form-label">{{ trans('settings.image') }}</label>
                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                            data-kt-image-input="true">
                                            <div class="image-input-wrapper w-150px h-150px"></div>
                                            <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 image">
                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                <input type="file" name="image" accept=".png, .jpg, .jpeg, .webp" />
                                                <input type="hidden" name="avatar_remove" />
                                            </label>
                                            <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 image">
                                                <i class="bi bi-x fs-2"></i>
                                            </span>
                                            <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 image">
                                                <i class="bi bi-x fs-2"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <input type="hidden" name="id" value="0">

                                <label class="required form-label">{{ trans('settings.ServiceName') }} (<span
                                        class="text-gray-600">{{ trans('forms.lable_en') }}</span>)</label>
                                <input type="text" name="name_en" class="form-control mb-2" value="" required />
                            </div>

                            <div class="row">
                                <label class="required form-label">{{ trans('settings.ServiceName') }} (<span
                                        class="text-gray-600">{{ trans('forms.lable_ar') }}</span>)</label>
                                <input type="text" name="name_ar" class="form-control mb-2" value="" required />
                            </div>

                            <div class="row">
                                <label class="required form-label">{{ trans('Hr_setting.Type') }}</label>
                                <input type="text" name="type" class="form-control mb-2" value="" required />
                            </div>

                            <div class="row">
                                <label class="required form-label">{{ trans('Hr_setting.Code') }}</label>
                                <input type="text" name="code" class="form-control mb-2" value="" required />
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" onclick="$('#StorForm').submit()" 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">
        <div class="card card-flush">
            <div class="card-body pt-0">
                <table id="services_table" 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.ServiceName') }}</th>
                            <th>{{ trans('Hr_setting.Type') }}</th>
                            <th>{{ trans('Hr_setting.Code') }}</th>
                            <th class="min-w-70px">{{ trans('forms.Action') }}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        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;

            var initDatatable = function() {
                dt = initAppDataTable('#services_table', [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'data',
                        name: 'data'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ], "{{ route('admin.setting.service.index') }}");
            };

            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();
                    var action = e.target.getAttribute('href');

                    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 && 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(() => {
                                    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('Delete failed:', error);
                                });
                        }
                    });
                });
            };

            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');

                    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) {
                                    var nameEn = '';
                                    var nameAr = '';
                                    if (data.one_data.name) {
                                        nameEn = data.one_data.name.en ? data.one_data.name.en : '';
                                        nameAr = data.one_data.name.ar ? data.one_data.name.ar : '';
                                    }
                                    document.querySelector('input[name="id"]').value = data.one_data.id;
                                    document.querySelector('input[name="name_en"]').value = nameEn;
                                    document.querySelector('input[name="name_ar"]').value = nameAr;
                                    document.querySelector('input[name="type"]').value = data.one_data.type || '';
                                    document.querySelector('input[name="code"]').value = data.one_data.code || '';

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

                                    $('#AddModal').modal('show');
                                }
                            })
                            .catch(error => {
                                console.error('Edit load failed:', error);
                            });
                    }
                });
            };

            var initSaveForm = function() {
                $('#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) {
                            blockUI.release();

                            Swal.fire({
                                text: response.message,
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "{{ trans('forms.action_done') }}",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            });

                            $('#StorForm')[0].reset();
                            $('input[name="id"]').val('0');
                            $('.image-input-wrapper').css('background-image', '');
                            $('#AddModal').modal('hide');
                            dt.draw();
                        },
                        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 {
                                Swal.fire({
                                    text: "{{ trans('forms.error_occurred') }}",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "{{ trans('forms.action_done') }}",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    }
                                });
                            }
                        }
                    });
                });
            };

            var resetForm = function() {
                $('#AddModal').on('hidden.bs.modal', function() {
                    $('#StorForm')[0].reset();
                    $('input[name="id"]').val('0');
                    $('.image-input-wrapper').css('background-image', '');
                    $('#StorForm').find('.is-invalid').removeClass('is-invalid');
                    $('#StorForm').find('.invalid-feedback').remove();
                });
            };

            return {
                init: function() {
                    initDatatable();
                    handleDeleteRows();
                    handleEditRows();
                    initSaveForm();
                    resetForm();
                }
            };
        }();

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