{{--
 *
 * @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="editTenantRecord" x-cloak x-show="show" id="editTenantRecordModal" tabindex="-1"
    x-on:show-edit-tenant-record-modal.window="showModal($event)"
    x-on:tenant-record-edited.window="edited($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-2xl 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::tenant-records.modal.edit.heading')
                    </h3>
                </div>
                <button x-on:click="hideModal()" 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>

                <div class="grid gap-4 mb-4 sm:grid-cols-2">

                    <!-- Zeile 1: company | short_name -->
                    <div>
                        <label for="edit-tenant-record-company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.company')
                        </label>
                        <input type="text" id="edit-tenant-record-company" wire:model="company"
                            placeholder="{{ __('globals::tenant-records.placeholder.company') }}"
                            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('company') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="edit-tenant-record-short-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.short_name')
                        </label>
                        <input type="text" id="edit-tenant-record-short-name" wire:model="short_name"
                            placeholder="{{ __('globals::tenant-records.placeholder.short_name') }}"
                            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('short_name') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 2: street | house_number -->
                    <div>
                        <label for="edit-tenant-record-street" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.street')
                        </label>
                        <input type="text" id="edit-tenant-record-street" wire:model="street"
                            placeholder="{{ __('globals::tenant-records.placeholder.street') }}"
                            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('street') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="edit-tenant-record-house-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.house_number')
                        </label>
                        <input type="text" id="edit-tenant-record-house-number" wire:model="house_number"
                            placeholder="{{ __('globals::tenant-records.placeholder.house_number') }}"
                            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('house_number') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 3: zip_code | city -->
                    <div>
                        <label for="edit-tenant-record-zip-code" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.zip_code')
                        </label>
                        <input type="text" id="edit-tenant-record-zip-code" wire:model="zip_code"
                            placeholder="{{ __('globals::tenant-records.placeholder.zip_code') }}"
                            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('zip_code') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="edit-tenant-record-city" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.city')
                        </label>
                        <input type="text" id="edit-tenant-record-city" wire:model="city"
                            placeholder="{{ __('globals::tenant-records.placeholder.city') }}"
                            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('city') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 4: country_id | home_page -->
                    <div>
                        <label for="edit-tenant-record-country" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.country_id')
                        </label>
                        <select id="edit-tenant-record-country" wire:model="country_id"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 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">
                            <option value="">-</option>
                            @foreach ($countries as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        @error('country_id') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="edit-tenant-record-home-page" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.home_page')
                        </label>
                        <input type="url" id="edit-tenant-record-home-page" wire:model="home_page"
                            placeholder="{{ __('globals::tenant-records.placeholder.home_page') }}"
                            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('home_page') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 5: phone_number | mobile_phone_number (intl-tel-input) -->
                    <div>
                        <div wire:ignore>
                            <label for="edit-tenant-record-phone-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::tenant-records.label.phone_number')
                            </label>
                            <input type="tel" id="edit-tenant-record-phone-number"
                                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" />
                        </div>
                        <input type="hidden" wire:model="phone_number" />
                        @error('phone_number') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <div wire:ignore>
                            <label for="edit-tenant-record-mobile-phone-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                @lang('globals::tenant-records.label.mobile_phone_number')
                            </label>
                            <input type="tel" id="edit-tenant-record-mobile-phone-number"
                                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" />
                        </div>
                        <input type="hidden" wire:model="mobile_phone_number" />
                        @error('mobile_phone_number') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 6: email (Spalte 1) -->
                    <div>
                        <label for="edit-tenant-record-email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.email')
                        </label>
                        <input type="email" id="edit-tenant-record-email" wire:model="email"
                            placeholder="{{ __('globals::tenant-records.placeholder.email') }}"
                            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('email') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <!-- Zeile 7: description (fullwidth) -->
                    <div class="sm:col-span-2">
                        <label for="edit-tenant-record-description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            @lang('globals::tenant-records.label.description')
                        </label>
                        <textarea id="edit-tenant-record-description" wire:model="description" rows="3"
                            placeholder="{{ __('globals::tenant-records.placeholder.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"></textarea>
                        @error('description') <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                </div>

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

                <div x-cloak x-show="!editSucceeded" class="flex justify-end">
                    <button wire:loading.remove wire:target="editTenantRecord" wire:click="editTenantRecord" 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.5" 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::tenant-records.action.edit')
                    </button>
                    <x-globals::global.loading-spinner wire:loading wire:target="editTenantRecord" />
                </div>

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

    <script>

        document.addEventListener('alpine:init', () => {
            Alpine.data('editTenantRecord', () => ({
                show: false,
                editSucceeded: false,
                phonenumberInput: null,
                intlTelPhonenumberInput: null,
                mobilenumberInput: null,
                intlTelMobilenumberInput: null,

                setPhoneNumber(iti) {
                    @this.phone_number = iti.getNumber();
                },

                setMobileNumber(iti) {
                    @this.mobile_phone_number = iti.getNumber();
                },

                init() {
                    this.phonenumberInput  = document.querySelector('#edit-tenant-record-phone-number');
                    this.mobilenumberInput = document.querySelector('#edit-tenant-record-mobile-phone-number');

                    this.intlTelPhonenumberInput = intlTelInput(this.phonenumberInput, {
                        initialCountry: "de",
                        autoPlaceholder: "aggressive",
                        formatOnDisplay: true,
                        separateDialCode: true,
                        utilsScript: "/vendor/intl-tel-input/utils.js",
                    });

                    this.intlTelMobilenumberInput = intlTelInput(this.mobilenumberInput, {
                        initialCountry: "de",
                        validationNumberType: "MOBILE",
                        autoPlaceholder: "aggressive",
                        formatOnDisplay: true,
                        separateDialCode: true,
                        utilsScript: "/vendor/intl-tel-input/utils.js",
                    });

                    this.phonenumberInput.addEventListener('keyup', () => this.setPhoneNumber(this.intlTelPhonenumberInput));
                    this.phonenumberInput.addEventListener('countrychange', () => this.setPhoneNumber(this.intlTelPhonenumberInput));
                    this.mobilenumberInput.addEventListener('keyup', () => this.setMobileNumber(this.intlTelMobilenumberInput));
                    this.mobilenumberInput.addEventListener('countrychange', () => this.setMobileNumber(this.intlTelMobilenumberInput));
                },

                edited(event) {
                    this.editSucceeded = true;

                    setTimeout(() => {
                        this.hideModal();
                        this.resetEditSucceeded();
                    }, 2000);
                },

                resetEditSucceeded() {
                    this.editSucceeded = false;
                },

                hideModal() {
                    this.show = false;
                    this.resetEditSucceeded();
                    this.intlTelPhonenumberInput.setNumber('');
                    this.intlTelMobilenumberInput.setNumber('');
                    @this.resetModal();
                },

                showModal(event) {
                    this.show = true;

                    let fullPhone  = (event.detail.tenantRecord.phone_number_country_code ?? '')
                                   + (event.detail.tenantRecord.phone_number ?? '');
                    let fullMobile = (event.detail.tenantRecord.mobile_phone_number_country_code ?? '')
                                   + (event.detail.tenantRecord.mobile_phone_number ?? '');

                    this.intlTelPhonenumberInput.setNumber(fullPhone);
                    this.intlTelMobilenumberInput.setNumber(fullMobile);

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

    </script>
</div>
