@props(['type' => 'ruangan'])

@php
$isRuangan = $type === 'ruangan';
$entityName = $isRuangan ? 'Ruangan' : 'Personal';
$tableId = $isRuangan ? 'ruangan-table' : 'personal-table';
$updateRoute = $isRuangan ? 'data.ruangan.update' : 'data.personal.update';
$deleteRoute = $isRuangan ? 'data.ruangan.delete' : 'data.personal.delete';
$fragment = $isRuangan ? '#ruangan' : '#personal';
@endphp

<div
    x-data="{ ...actionModal(), submitUpdate() {}, submitDelete() {} }"
    x-init="
        submitUpdate = async function() {
            this.errors = {};
            this.loading = true;
            try {
                const form = this.$refs.updateForm;
                const formData = new FormData(form);
                const response = await fetch(form.action, {
                    method: form.method,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: formData
                });
                const result = await response.json();
                if (result.success) {
                    this.loading = false;
                    this.data = {};
                    $('#{{ $tableId }}').DataTable().ajax.reload(null, false);
                    this.open = false;
                    $store.toast.success('Data {{ $entityName }} berhasil diperbarui!');
                } else if (result.errors) {
                    this.errors = result.errors;
                    this.loading = false;
                } else {
                    this.loading = false;
                    $store.toast.error('Gagal memperbarui Data {{ $entityName }}. Silakan coba lagi.');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        };
        submitDelete = async function() {
            this.errors = {};
            this.loading = true;
            try {
                const form = this.$refs.deleteForm;
                const formData = new FormData(form);
                const response = await fetch(form.action, {
                    method: form.method,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: formData
                });
                const result = await response.json();
                if (result.success) {
                    this.loading = false;
                    this.data = {};
                    $('#{{ $tableId }}').DataTable().ajax.reload(null, false);
                    this.open = false;
                    $store.toast.success('Data {{ $entityName }} berhasil dihapus!');
                } else if (result.errors) {
                    this.errors = result.errors;
                    this.loading = false;
                } else {
                    this.loading = false;
                    $store.toast.error('Gagal menghapus Data {{ $entityName }}. Silakan coba lagi.');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }
    "
    @ruangan-action.window="initial($event.detail.mode, $event.detail.data)"
    @personal-action.window="initial($event.detail.mode, $event.detail.data)"
    x-show="open"
    x-transition.opacity
    x-cloak
>
    <x-modal-shell show="open" close="close" :close-on-outside="false">
        <template x-if="mode === 'update'">
            <div class="flex flex-col gap-2">
                <div class="flex flex-col gap-px items-center text-xs font-semibold">
                    @if($isRuangan)
                    <h2>Edit Data</h2>
                    <h2 x-text="data.nama"></h2>
                    @else
                    <h2>Edit Data Personal</h2>
                    @endif
                </div>
                <form
                    @submit.prevent="submitUpdate"
                    x-ref="updateForm"
                    :action="`{{ route($updateRoute, '') }}/${data.id}{{ $fragment }}`"
                    method="POST"
                >
                    @csrf
                    @method('patch')
                    <div class="flex flex-col gap-2">
                        @if($isRuangan)
                        <div class="flex flex-col gap-1">
                            <x-input-label :value="__('Nama Ruangan')" class="!text-xs !text-gray-600"></x-input-label>
                            <x-text-input class="text-slate-900 text-xs font-medium" x-model="data.nama" name="nama" required></x-text-input>
                        </div>
                        <div class="flex flex-col gap-1">
                            <x-input-label :value="__('Lantai')" class="!text-xs !text-gray-600"></x-input-label>
                            <x-text-input class="text-slate-900 text-xs font-medium" x-model="data.lantai" name="lantai"></x-text-input>
                        </div>
                        <div class="flex flex-col gap-1">
                            <x-input-label :value="__('Kode Ruangan')" class="!text-xs !text-gray-600"></x-input-label>
                            <x-text-input class="text-slate-900 text-xs font-medium" x-model="data.kode_ruangan" name="kode_ruangan" required></x-text-input>
                        </div>
                        @else
                        <div class="flex flex-col gap-1">
                            <x-input-label :value="__('Nama Personal')" class="!text-xs !text-gray-600"></x-input-label>
                            <x-text-input class="text-slate-900 text-xs font-medium" x-model="data.nama" name="nama" required></x-text-input>
                        </div>
                        @endif
                        <button type="submit" class="bg-blue-700 text-white text-xs font-semibold hover:opacity-75 flex justify-center items-center gap-1.5 rounded-lg py-1.5">
                            <span x-show="loading" x-cloak>
                                <svg class="animate-spin h-3.5 w-3.5 inline-block mb-[0.15rem]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="white" stroke-width="3"></circle>
                                    <path class="opacity-75" fill="white" d="M4 12a8 8 0 018-8v8H4z"></path>
                                </svg>
                            </span>
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </template>

        <template x-if="mode === 'delete'">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-center">Hapus data <span class="font-medium" x-text="data.nama"></span>?</p>
                <div class="flex gap-2">
                    <form
                        :action="`{{ route($deleteRoute, '') }}/${data.id}{{ $fragment }}`"
                        @submit.prevent="submitDelete"
                        x-ref="deleteForm"
                        method="POST"
                    >
                        @csrf
                        @method('delete')
                        <button type="submit" class="bg-red text-white px-3 py-1 rounded-md text-xs font-semibold">Hapus</button>
                    </form>
                    <button @click="close" class="bg-white text-slate-900 ring-1 ring-gray-300 px-3 py-1 rounded-md text-xs font-semibold">Batal</button>
                </div>
            </div>
        </template>
    </x-modal-shell>
</div>