@props([
    'route',
    'title' => null,
    'name',
    'id',
    'parameters' => [],
    'readOnly' => false,
    'files' => false,
    'breadcrumbs' => null,
    'class' => '',
    'noActions' => false,
    'validator' => true,
])
@php
    $routesList = is_array($route) ? $route : null;
    $title = $title ?? (isset($model) ? __('Edit :name', ['name' => $name]) : __('Add :name', ['name' => $name]));
@endphp
<x-ui::layout :title="$title" :breadcrumbs="$breadcrumbs">
    {{ $prepend ?? '' }}

    <div class="card noBorder">
        <div id="{{ $id ?? $name . '-form' }}" class=" card-body ">
            @if (isset($model))
                <form id="crud-modal-form" novalidate class="{{ $class }}"
                    action="{{ route($routesList['update'] ?? $route . '.update', $model->{$model->getKeyName()}) }}"
                    method="POST" enctype="multipart/form-data">
                    @method('PUT')
                    @csrf
                    <div class="">
                        {{ $slot }}
                    </div>
                </form>
            @else
                <form id="crud-modal-form" class="{{ $class }}" novalidate
                    action="{{ route($routesList['create'] ?? $route . '.store') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="">
                        {{ $slot }}
                    </div>
                </form>
            @endif
        </div>
    </div>

    {{ $append ?? '' }}

    @if (!$noActions)
        <div class="card noBorder">
            <div class="card-body border-0">
                <div class="  justify-content-end d-flex align-items-center">
                    @isset($actions)
                        {{ $actions }}
                    @else
                        @if (!$readOnly)
                            <x-ui::form.submit id="hsm_submit" class="btn-primary me-2 flex-shrink-0" form="crud-modal-form"
                                :label="__('Save')" />
                        @endif
                        <x-ui::form.button-link id="hsm_back" :href="route($route . '.index', $parameters)" class="btn-secondary me-2 flex-shrink-0"
                            :label="__('Go back')" />
                    @endisset
                </div>
            </div>
        </div>
    @endif

    <x-slot:header>
        {{ $header ?? '' }}
    </x-slot:header>

    <x-slot:scripts>
        {{ $scripts ?? '' }}

        @if ($validator)
            <script>
                $('#crud-modal-form').submit((e) => {
                    e.preventDefault();
                    $('.errorMessage').text('');
                    $('.is-invalid').removeClass('is-invalid');

                    let form = $(e.target);
                    let formData = new FormData(form[0]);

                    let route =
                        "{{ isset($model) ? route($route . '.validation-action', $model->{$model->getKeyName()}) : route($route . '.validation-action') }}";
                    let method = 'POST';

                    $.ajax({
                        url: route,
                        type: method,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            form.unbind('submit').submit();
                        },
                        error: function(reject) {
                            if (reject.status === 422) {
                                var response = $.parseJSON(reject.responseText);
                                $.each(response.errors, function(key, val) {
                                    $(`.error_${key}`).text(val[0]);
                                    $(`span[class="errorMessage error_${key}"]`).text(val[0]);
                                    $(`[name="${key}"]`).addClass('is-invalid');
                                });
                            }

                            enableSubmitButton();
                        }
                    });
                });
            </script>
        @endif
    </x-slot:scripts>

</x-ui::layout>