@extends('layouts.app', ['page' => __('Administración de Desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')

@component('components.searchBar', ['fields' => $fields , 'action' => route('house-development-amenities.showByDevelopment',$houseDevelopment), 'search' => $search]) @endcomponent

<div class="row">
    <div class="col-md-12 div-container-amt">
        <div class="card-header">
            <div class="row">
                <div class="col-8">
                    <span class="bw-card-title">{{ __('Amenidades del desarrollo') }}</span>
                    <span class="bw-card-title-bold">
                        <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                        {{ $houseDevelopment->name }}
                    </span>
                </div>
                <div class="col-4 text-right">
                    <a href="#" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#createAmenityModal">
                        {{ __('Alta de Amenidad') }}
                    </a>
                    <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                        {{ __('Regresar a listado') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="gallery d-flex flex-wrap mt-4">
            @foreach ($houseDevelopmentAmenities as $amenity)
                <div class="gallery-item text-center m-2 amenity-card" style="flex: 0 0 150px;" data-id="{{ $amenity->id }}" data-name="{{ $amenity->name }}" data-image="{{ asset('storage/' . $amenity->image) }}">
                    <!-- Imagen con marco negro y tamaño fijo -->
                    <div style="border: 2px solid black; padding: 5px; width: 400px; height: 200px; overflow: hidden;">
                        @if($amenity->image == '-')
                           No hay imagen...
                        @else
                            <img src="{{ asset('storage/' . $amenity->image) }}" alt="{{ $amenity->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                        @endif
                    </div>
                    <span>{{ $amenity->name }}</span>
                </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal para editar amenidad -->
<div class="modal fade" id="editAmenityModal" tabindex="-1" aria-labelledby="editAmenityModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editAmenityForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editAmenityModalLabel">Editar Amenidad</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-3 text-center">
                        <img id="current-amenity-image" src="" alt="Amenity Image" style="max-width: 100%; height: auto;">
                    </div>
                    <div class="mb-3">
                        <label for="amenity-image" class="form-label">Cambiar Imagen</label>
                        <input type="file" class="form-control" id="amenity-image" name="image">
                    </div>
                    <div class="mb-3">
                        <label for="amenity-name" class="form-label">Nombre de la Amenidad</label>
                        <input type="text" class="form-control" id="amenity-name" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- Botón de eliminar -->
                    <button type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn bw-btn-danger-gradient" id="deleteAmenityButton">Eliminar</button>
                    <button type="submit" class="btn btn-gradient">Actualizar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para crear nueva amenidad -->
<div class="modal fade" id="createAmenityModal" tabindex="-1" aria-labelledby="createAmenityModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="createAmenityForm" action="{{ route('house-development-amenities.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createAmenityModalLabel">Alta de Amenidad</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="house_development_id" value="{{ $houseDevelopment->id }}">
                    <div class="mb-3 text-center">
                        <img id="new-amenity-image-preview" src="" alt="Amenity Image Preview" style="max-width: 100%; height: auto;">
                    </div>
                    <div class="mb-3">
                        <label for="new-amenity-image" class="form-label">Imagen</label>
                        <input type="file" class="form-control" id="new-amenity-image" name="image" required>
                    </div>
                    <div class="mb-3">
                        <label for="new-amenity-name" class="form-label">Nombre de la Amenidad</label>
                        <input type="text" class="form-control" id="new-amenity-name" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-gradient">Crear Amenidad</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animación al pasar el mouse sobre las tarjetas
        document.querySelectorAll('.amenity-card').forEach(function(card) {
            card.addEventListener('mouseenter', function() {
                card.style.transform = 'scale(1.05)';
                card.style.transition = 'transform 0.3s';
            });
            card.addEventListener('mouseleave', function() {
                card.style.transform = 'scale(1)';
            });

            // Abrir el modal con los datos de la amenidad seleccionada
            card.addEventListener('click', function() {
                let amenityId = card.getAttribute('data-id');
                let amenityName = card.getAttribute('data-name');
                let amenityImage = card.getAttribute('data-image');

                // Actualizar el formulario con los datos de la amenidad
                document.getElementById('editAmenityForm').action = `/house-development-amenities/${amenityId}`;
                document.getElementById('amenity-name').value = amenityName;
                document.getElementById('current-amenity-image').src = amenityImage;

                // Almacenar el ID de la amenidad para el botón de eliminar
                document.getElementById('deleteAmenityButton').setAttribute('data-id', amenityId);

                // Mostrar el modal
                new bootstrap.Modal(document.getElementById('editAmenityModal')).show();
            });
        });

        // Actualizar la imagen de vista previa cuando se selecciona una nueva imagen
        document.getElementById('amenity-image').addEventListener('change', function(event) {
            const [file] = event.target.files;
            if (file) {
                document.getElementById('current-amenity-image').src = URL.createObjectURL(file);
            }
        });

        // Vista previa de la imagen al crear una nueva amenidad
        document.getElementById('new-amenity-image').addEventListener('change', function(event) {
            const [file] = event.target.files;
            if (file) {
                document.getElementById('new-amenity-image-preview').src = URL.createObjectURL(file);
            }
        });

        document.getElementById('deleteAmenityButton').addEventListener('click', function() {
            let amenityId = this.getAttribute('data-id');

            if (confirm('¿Estás seguro de que deseas eliminar esta amenidad? Esta acción no se puede deshacer.')) {
                // Realiza la solicitud para eliminar la amenidad
                fetch(`/house-development-amenities/${amenityId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('Error al eliminar la amenidad.');
                    }
                })
                .then(data => {
                    // Elimina la tarjeta de la galería
                    document.querySelector(`.gallery-item[data-id="${amenityId}"]`).remove();

                    // Cierra el modal
                    let editAmenityModal = document.getElementById('editAmenityModal');
                    let modalInstance = bootstrap.Modal.getInstance(editAmenityModal);
                    modalInstance.hide();

                    // Muestra un mensaje de éxito con SweetAlert
                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: 'Amenidad eliminada exitosamente.',
                        confirmButtonText: 'OK'
                    });
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: error.message,
                        confirmButtonText: 'OK'
                    });
                });
            }
        });

    });
</script>
@endpush