@extends('layouts.app')

@section('title', 'Editar imóvel — ImóvelZapAi')
@section('page-title', 'Editar imóvel')

@section('content')
    <div
        class="property-edit-page"
        x-data="{ confirmDelete: false, deleting: false, deleteError: '' }"
        @keydown.escape.window="confirmDelete = false"
    >
        <form
            method="POST"
            action="{{ route('properties.update', $property) }}"
            enctype="multipart/form-data"
            id="property-edit-form"
        >
            @csrf
            @method('PUT')

            @include('properties._form', [
                'property' => $property,
                'states' => $states,
                'citiesByState' => $citiesByState,
                'statesByCode' => $statesByCode,
                'types' => $types,
                'purposes' => $purposes,
                'statuses' => $statuses,
                'selectedStateId' => $selectedStateId,
                'selectedCityId' => $selectedCityId,
                'selectedCityName' => $selectedCityName ?? null,
                'neighborhoodName' => $neighborhoodName,
                'showExistingImages' => true,
            ])

            <div class="property-form__actions">
                <div class="property-form__actions-inner">
                    <button type="button" class="property-form__btn property-form__btn--danger" @click="confirmDelete = true">
                        Excluir imóvel
                    </button>
                    <div class="property-form__btn-group">
                        <a href="{{ route('properties.show', $property) }}" class="property-form__btn property-form__btn--ghost">
                            Cancelar
                        </a>
                        <button type="submit" class="property-form__btn property-form__btn--primary">
                            Salvar alterações
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <div
            x-show="confirmDelete"
            x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
            @click.self="confirmDelete = false"
        >
            <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl" role="dialog" aria-modal="true">
                <h3 class="text-lg font-semibold text-slate-900">Excluir imóvel?</h3>
                <p class="mt-2 text-sm text-slate-600">
                    O imóvel <strong>{{ $property->title }}</strong> será removido da carteira. Esta ação não pode ser desfeita.
                </p>
                <p x-show="deleteError" x-text="deleteError" class="mt-2 text-sm text-red-600"></p>
                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" class="property-form__btn property-form__btn--ghost" @click="confirmDelete = false">
                        Cancelar
                    </button>
                    <button
                        type="button"
                        class="property-form__btn property-form__btn--danger"
                        style="background: #dc2626; color: #fff; border-color: #dc2626;"
                        :disabled="deleting"
                        @click="
                            deleting = true;
                            deleteError = '';
                            fetch(@js(route('properties.destroy', $property)), {
                                method: 'DELETE',
                                headers: {
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                            })
                            .then(r => r.ok ? r.json() : Promise.reject())
                            .then(() => { window.location.href = @js(route('properties.index')); })
                            .catch(() => { deleteError = 'Não foi possível excluir. Tente novamente.'; deleting = false; });
                        "
                    >
                        Sim, excluir
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
