@props(['space' => null, 'spaceTypes', 'spaceStatuses', 'energyCertificates'])

@php
    $isEdit = !is_null($space);

    $booleanOptions = [
        ['value' => '1', 'label' => 'Sim'],
        ['value' => '0', 'label' => 'Não'],
    ];

    $contacts = old('contacts', $space?->contacts ?? []);

@endphp

@include('spc_spaces._contacts_scripts')

<div class="card py-4 px-4">

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="space_type_id">Tipo de Espaço<span class="handle-error">*</span></label>
                <select name="space_type_id" id="space_type_id" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach ($spaceTypes as $type)
                        <option value="{{ $type->id }}" 
                            {{ old('space_type_id', $space->space_type_id ?? '') == $type->id ? 'selected' : '' }}>
                            {{ $type->name }}
                        </option>
                    @endforeach
                </select>
                @error('space_type_id')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="space_status_id">Estado<span class="handle-error">*</span></label>
                <select name="space_status_id" id="space_status_id" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach ($spaceStatuses as $status)
                        <option value="{{ $status->id }}" 
                            {{ old('space_status_id', $space->space_status_id ?? '') == $status->id ? 'selected' : '' }}>
                            {{ $status->name }}
                        </option>
                    @endforeach
                </select>
                @error('space_status_id')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="title">Título<span class="handle-error">*</span></label>
                <input type="text" name="title" id="title" class="form-control"
                    value="{{ old('title', $space->title ?? '') }}">
                @error('title')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12">
            <div class="form-group">
                <label for="description">Descrição</label>
                <textarea name="description" id="description" class="form-control">{{ old('description', $space->description ?? '') }}</textarea>
                @error('description')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="address">Endereço</label>
                <input type="text" name="address" id="address" class="form-control"
                    value="{{ old('address', $space->address ?? '') }}">
                @error('address')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-3">
            <div class="form-group">
                <label for="latitude">Latitude</label>
                <input type="text" name="latitude" id="latitude" class="form-control"
                    value="{{ old('latitude', $space->latitude ?? '') }}">
                @error('latitude')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-3">
            <div class="form-group">
                <label for="longitude">Longitude</label>
                <input type="text" name="longitude" id="longitude" class="form-control"
                    value="{{ old('longitude', $space->longitude ?? '') }}">
                @error('longitude')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="number_of_doors">Número de Portas</label>
                <input type="number" name="number_of_doors" id="number_of_doors" class="form-control"
                    value="{{ old('number_of_doors', $space->number_of_doors ?? '') }}">
                @error('number_of_doors')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="number_of_floors">Número de Andares</label>
                <input type="number" name="number_of_floors" id="number_of_floors" class="form-control"
                    value="{{ old('number_of_floors', $space->number_of_floors ?? '') }}">
                @error('number_of_floors')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="construction_year">Ano de Construção</label>
                <input type="number" name="construction_year" id="construction_year" class="form-control"
                    value="{{ old('construction_year', $space->construction_year ?? '') }}">
                @error('construction_year')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="certificate_energy_id">Certificado Energético</label>
                <select name="certificate_energy_id" id="certificate_energy_id" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach ($energyCertificates as $certificate)
                        <option value="{{ $certificate->id }}" 
                            {{ old('certificate_energy_id', $space->certificate_energy_id ?? '') == $certificate->id ? 'selected' : '' }}>
                            {{ $certificate->code }}
                        </option>
                    @endforeach
                </select>
                @error('certificate_energy_id')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="space_type">Tipo de Propriedade<span class="handle-error">*</span></label>
                <select name="space_type" id="space_type" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach (\App\Enums\SpaceTypeEnum::all() as $type)
                        <option value="{{ $type }}" 
                            {{ old('space_type', $space->space_type ?? '') == $type ? 'selected' : '' }}>
                            {{ \App\Enums\SpaceTypeEnum::description($type) }}
                        </option>
                    @endforeach
                </select>
                @error('space_type')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="featured_type">Tipo de Destaque<span class="handle-error">*</span></label>
                <select name="featured_type" id="featured_type" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach (\App\Enums\FeaturedTypeEnum::all() as $type)
                        <option value="{{ $type }}" 
                            {{ old('featured_type', $space->featured_type ?? '') == $type ? 'selected' : '' }}>
                            {{ \App\Enums\FeaturedTypeEnum::description($type) }}
                        </option>
                    @endforeach
                </select>
                @error('featured_type')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="is_active">Publicado?</label>
                <select name="is_active" id="is_active" class="form-select">
                    <option value="">Selecionar</option>
                    @foreach ($booleanOptions as $option)
                        <option value="{{ $option['value'] }}" 
                            {{ old('is_active', $space->is_active ?? '') == $option['value'] ? 'selected' : '' }}>
                            {{ $option['label'] }}
                        </option>
                    @endforeach
                </select>
                @error('is_active')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="location_geo">Localização Geográfica</label>
                <input type="text" name="location_geo" id="location_geo" class="form-control"
                    value="{{ old('location_geo', $space->location_geo ?? '') }}">
                @error('location_geo')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="area_m2">Área (m²)</label>
                <input type="number" name="area_m2" id="area_m2" class="form-control"
                    value="{{ old('area_m2', $space->area_m2 ?? '') }}">
                @error('area_m2')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label for="price">Preço</label>
                <input type="number" name="price" id="price" class="form-control"
                    value="{{ old('price', $space->price ?? '') }}">
                @error('price')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
</div>

<div class="card py-4 px-4 mt-5">
    <h5>Gestão de Ficheiros</h5>
    
    @include('layouts.components.section-marker', ['section_name' => 'Galeria'])

    <div class="row mb-3">
        <div class="col-6">
            <div class="form-group">
                <label for="images">Imagens</label>
                <input type="file" name="images[]" id="images" class="form-control custom-file" multiple>
                <small class="form-text text-muted">Você pode enviar várias imagens.</small>
                @error('images.*')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-12">
            @if (!empty($space?->galleries) && $space?->galleries->isNotEmpty())
                @foreach ($space?->galleries as $image)
                    <div class="col-3">
                        <x-file-preview-with-delete
                            :url="$image->name"
                            :folder="config('paths.spaces.images')" 
                            class="img-fluid mb-2"
                            :deleteRoute="route('spc_spaces.gallery.destroy', ['uuid' => $image->uuid])"
                        />                  
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    @include('layouts.components.section-marker', ['section_name' => 'Documentos'])

    <div class="row">
        <div class="col-6">
            <div class="form-group">
                <label for="documents">Documentos</label>
                <input type="file" name="documents[]" id="documents" class="form-control custom-file" multiple>
                <small class="form-text text-muted">Você pode enviar vários documentos.</small>
                @error('documents.*')
                    <div class="error handle-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-12">
            @if (!empty($space?->documents) && $space?->documents->isNotEmpty())
                @foreach ($space?->documents as $document)
                    <x-file-preview-with-delete
                        :url="$document->name"
                        :folder="config('paths.spaces.documents')"
                        :isImage="false"
                        class="img-fluid mb-2"
                        :deleteRoute="route('spc_spaces.document.destroy', ['uuid' => $document->uuid])"
                    /> 
                @endforeach
            @endif
        </div>
    </div>

</div>

<div class="card py-4 px-4 mt-5">
    <h5>Gestão de Contactos</h5>
    <div id="contacts-container">
        @forelse ($contacts as $index => $contact)
            <div class="row mb-3 contact-item" data-index="{{ $index }}">
                <div class="col-5">
                    <div class="form-group">
                        <label for="contacts[{{ $index }}][type]">Tipo de Contacto</label>
                        <select name="contacts[{{ $index }}][type]" class="form-select">
                            @foreach (\App\Enums\SpaceContactTypeEnum::all() as $type)
                                <option value="{{ $type }}"
                                    {{ ($contact['type'] ?? $contact->type ?? '') == $type ? 'selected' : '' }}>
                                    {{ \App\Enums\SpaceContactTypeEnum::description($type) }}
                                </option>
                            @endforeach
                        </select>
                        @error("contacts.$index.type")
                            <div class="error handle-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-5">
                    <div class="form-group">
                        <label for="contacts[{{ $index }}][value]">Valor</label>
                        <input type="text" name="contacts[{{ $index }}][value]" class="form-control"
                            value="{{ $contact['value'] ?? $contact->value ?? '' }}">
                        @error("contacts.$index.value")
                            <div class="error handle-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-2 d-flex align-items-end">
                    <button type="button" class="btn btn-danger btn-xs remove-contact">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
        @empty
            <div class="row mb-3 contact-item" data-index="0">
                <div class="col-5">
                    <div class="form-group">
                        <label for="contacts[0][type]">Tipo de Contacto</label>
                        <select name="contacts[0][type]" class="form-select">
                            @foreach (\App\Enums\SpaceContactTypeEnum::all() as $type)
                                <option value="{{ $type }}">{{ \App\Enums\SpaceContactTypeEnum::description($type) }}</option>
                            @endforeach
                        </select>
                        @error('contacts.0.type')
                            <div class="error handle-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-5">
                    <div class="form-group">
                        <label for="contacts[0][value]">Valor</label>
                        <input type="text" name="contacts[0][value]" class="form-control">
                        @error('contacts.0.value')
                            <div class="error handle-error">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-2 d-flex align-items-end">
                    <button type="button" class="btn btn-danger btn-xs remove-contact">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
        @endforelse
    </div>
    <div class="text-start">
        <button type="button" id="add-contact" class="btn btn-sm btn-success">
            <i class="fa fa-plus"></i> Adicionar Contacto
        </button>
    </div>
</div>

<div class="row">
    <div class="text-end my-4">
        <button type="submit" class="btn btn-sm btn-primary">
            {{ $isEdit ? 'Guardar' : 'Criar' }} <i class="fa-light fa-floppy-disk"></i>
        </button>
    </div>
</div>