<x-backend.model :id="'edit-model'" class="lg:max-w-2xl" :button="'Submit'" :form_id="'service-edit'" :action="route('service.store')"
    :method="__('post')">
    @csrf
    @method('put')
    <div class="p-4 sm:p-10 overflow-y-auto  space-y-2">
        <x-backend.input-label :value="'Title'" for="title" />
        <x-backend.input-field type="text" name="title" id='title' :value="old('title')" placeholder="Enter title" />
        <x-backend.input-label :value="'Icone'" for="icone" />
        <x-backend.input-field type="text" name="icone" id='icone' :value="old('icone')" placeholder="Enter icone" />
        <small>Hare is Font awesome link to get icon <a href="https://fontawesome.com/icons" target="_blank"
                class="text-blue-500">Link</a></small>
        <x-backend.input-label :value="'Short Description'" for="short-des" />
        <x-backend.input-textarea name="short_des" rows="4" id='short-des' :text="old('short-des')"
            placeholder="Enter description" />
        <x-backend.input-label :value="'Description'" for="des" />
        <x-backend.editor name='content' :height="__('200px')" :full="false" :id="'des-edit'" :form_id="'service-edit'"
            :validate="true" />
        <x-backend.input-label :value="__('Upload Image')" for="upload_image" />
        <x-backend.input-field type="file" name="image" id='upload_image'
            class="block w-full text-sm text-gray-500 -ml-2
    file:me-4 file:py-2 file:px-4
    file:rounded-lg file:border-0
    file:text-sm file:font-semibold
    file:bg-blue-600 file:text-white
    hover:file:bg-blue-700
    file:disabled:opacity-50 file:disabled:pointer-events-none
    dark:file:bg-blue-500
    dark:hover:file:bg-blue-400
  " />
    </div>
</x-backend.model>




<script>
    $(document).on('click', '#update', function() {
        let data = $(this).attr('data');
        data = JSON.parse(data);
        $('#service-edit').find('#title').val(data.title);
        $('#service-edit').find('#icone').val(data.icone);
        $('#service-edit').find('#short-des').val(data.short_des);
        // Get the Froala Editor instance
        var editor = new FroalaEditor('#des-edit');
        // Set the content of the editor
        editor.html.set(data.content);
        let route = "{{ route('service.update', ':id') }}".replace(':id', data.id);
        $('#service-edit').attr('action', route)
    })
</script>
