{{--
 *
 * @version     1.0.$Revision:$
 * @version     SVN: $Id:$
 * @package     bplan-base/globals
 * @subpackage  Views
 * @author      Emilio Cannarozzo <emilio.cannarozzo@bplan-solutions.de>
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
 --}}

<div x-data="editPrinterType" x-cloak x-show="show" id="editPrinterTypeModal" tabindex="-1"
    x-on:show-edit-printer-type-modal.window="showEditPrinterTypeModal($event)"
    x-on:printer-type-data-loaded.window="onPrinterTypeDataLoaded()"
    x-on:printer-type-edited.window="onPrinterTypeEdited($event)"
    x-on:printer-type-deleted.window="onPrinterTypeDeleted($event)"
    class="fixed top-0 left-0 right-0 z-50 flex items-center justify-center w-full h-screen overflow-x-hidden overflow-y-auto md:inset-0 md:h-full">
    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
    <div class="relative w-full h-full max-w-4xl p-4 md:h-auto">

        <!-- Modal content -->
        <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">

            <!-- Modal header -->
            <div class="flex items-center justify-between pb-4 mb-4 border-b rounded-t sm:mb-5 dark:border-gray-600">
                <div class="flex items-center space-x-2 text-gray-900 dark:text-white">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        @lang('globals::printer-types.modal.edit.heading')
                    </h3>
                </div>
                <button x-on:click="hideEditPrinterTypeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" fill-rule="evenodd" />
                    </svg>
                    <span class="sr-only">
                        @lang('globals::global.action.close')
                    </span>
                </button>
            </div>

            <!-- Modal body -->
            <div>

                <!-- Tabs -->
                <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
                    <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                        <a href="#" x-on:click.prevent="activeTab = 'base'"
                            class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium"
                            :class="activeTab === 'base' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">
                            @lang('globals::printer-types.tab-name.base')
                        </a>
                        <a href="#" x-on:click.prevent="activeTab = 'config-template'"
                            class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium"
                            :class="activeTab === 'config-template' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">
                            @lang('globals::printer-types.tab-name.config-template')
                        </a>
                    </nav>
                </div>
                <!-- /Tabs -->

                <!-- Tab: Base -->
                <div x-show="activeTab === 'base'">
                    <div class="grid gap-4 mb-4 sm:grid-cols-2">

                        <!-- brand -->
                        <div>
                            <label for="edit-brand" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.brand')
                            </label>
                            <input type="text" id="edit-brand" wire:model="brand"
                                placeholder="{{ __('globals::printer-types.placeholder.brand') }}"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                            @error('brand') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- model -->
                        <div>
                            <label for="edit-model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.model')
                            </label>
                            <input type="text" id="edit-model" wire:model="model"
                                placeholder="{{ __('globals::printer-types.placeholder.model') }}"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                            @error('model') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- label -->
                        <div>
                            <label for="edit-label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.label')
                            </label>
                            <input type="text" id="edit-label" wire:model="label"
                                placeholder="{{ __('globals::printer-types.placeholder.label') }}"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                            @error('label') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- identifier -->
                        <div>
                            <label for="edit-identifier" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.identifier')
                            </label>
                            <input type="text" id="edit-identifier" wire:model="identifier"
                                placeholder="{{ __('globals::printer-types.placeholder.identifier') }}"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                            @error('identifier') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- description -->
                        <div class="sm:col-span-2">
                            <label for="edit-description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.description')
                            </label>
                            <input type="text" id="edit-description" wire:model="description"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                            @error('description') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- active -->
                        <div class="flex items-center sm:col-span-2">
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" wire:model="active" class="sr-only peer">
                                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div>
                                <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                                    @lang('globals::printer-types.label.active')
                                </span>
                            </label>
                        </div>

                    </div>
                </div>
                <!-- /Tab: Base -->

                <!-- Tab: Config Template -->
                <div x-show="activeTab === 'config-template'">
                    <div class="grid gap-4 mb-4">

                        <!-- config_template -->
                        <div>
                            <label for="edit-config-template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.config_template')
                            </label>
                            <textarea id="edit-config-template" wire:model="configTemplate" rows="10"
                                class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"></textarea>
                            @error('configTemplate') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                        <!-- payload_template -->
                        <div>
                            <label for="edit-payload-template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::printer-types.label.payload_template')
                            </label>
                            <textarea id="edit-payload-template" wire:model="payloadTemplate" rows="10"
                                class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"></textarea>
                            @error('payloadTemplate') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                        </div>

                    </div>
                </div>
                <!-- /Tab: Config Template -->

                <div x-show="editSucceeded" class="flex justify-end mb-3">
                    <p x-cloak class="mt-2 text-xs text-green-600 dark:text-green-400">
                        @lang('globals::printer-types.info.updated')
                    </p>
                </div>

                <div class="flex items-center justify-between">

                    <!-- Delete -->
                    <div>
                        <div x-show="!showRemove">
                            <button wire:loading.remove wire:target="deletePrinterType" x-on:click="showRemove = true" type="button" class="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">
                                <svg class="w-5 h-5 mr-1 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path clip-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" fill-rule="evenodd" />
                                </svg>
                                @lang('globals::printer-types.action.delete')
                            </button>
                        </div>
                        <div x-show="showRemove" class="flex items-center space-x-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">
                                @lang('globals::printer-types.confirm.delete')
                            </span>
                            <button wire:loading.remove wire:target="deletePrinterType" wire:click="deletePrinterType" type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900">
                                @lang('globals::global.option.yes')
                            </button>
                            <button x-on:click="showRemove = false" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-3 py-1.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                                @lang('globals::global.option.no')
                            </button>
                            <x-globals::global.loading-spinner wire:loading wire:target="deletePrinterType" />
                        </div>
                    </div>

                    <!-- Save -->
                    <div class="flex justify-end">
                        <button wire:loading.remove wire:target="editPrinterType" wire:click="editPrinterType" type="button" class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                            <svg class="w-5 h-5 mr-1 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                                <path clip-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" fill-rule="evenodd" />
                            </svg>
                            @lang('globals::printer-types.action.edit')
                        </button>
                        <x-globals::global.loading-spinner wire:loading wire:target="editPrinterType" />
                    </div>

                </div>

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

    <script>

        document.addEventListener('alpine:init', () => {
            Alpine.data('editPrinterType', () => ({
                activeTab: 'base',
                show: false,
                editSucceeded: false,
                showRemove: false,

                onPrinterTypeEdited(event) {
                    this.editSucceeded = true;

                    setTimeout(() => {
                        this.hideEditPrinterTypeModal();
                        this.resetPrinterTypeEdited();
                    }, 2000);
                },

                onPrinterTypeDeleted(event) {
                    this.show = false;
                    this.resetPrinterTypeEdited();
                },

                resetPrinterTypeEdited() {
                    this.activeTab = 'base';
                    this.editSucceeded = false;
                    this.showRemove = false;
                },

                hideEditPrinterTypeModal() {
                    this.show = false;
                    this.resetPrinterTypeEdited();
                    @this.resetModal();
                },

                showEditPrinterTypeModal(event) {
                    this.resetPrinterTypeEdited();
                },

                onPrinterTypeDataLoaded() {
                    this.show = true;

                    setTimeout(() => {
                        document.getElementById('edit-brand').focus();
                    }, 100);
                }
            }));
        });

    </script>

</div>
