@extends('layouts.app', ['page' => __('Cliente'), 'pageSlug' => 'customer', 'section' => 'menu'])

@section('content')

    <style>
        .container {
            margin-left: 10px;
        }

        .carousel-netflix {
            display: flex;
            overflow-x: auto; /* Permite el desplazamiento horizontal */
            scroll-behavior: smooth; /* Desplazamiento suave */
            padding: 10px 0;
            position: relative; /* Necesario para posicionar los botones */
        }

        .carousel-netflix::-webkit-scrollbar {
            display: none; /* Oculta la barra de desplazamiento */
        }

        .carousel-item-netflix {
            flex: 0 0 auto; /* Evita que los elementos se estiren */
            width: 300px; /* Ancho de cada imagen */
            height: 400px; /* Alto de cada imagen */
            margin-right: 10px; /* Espacio entre imágenes */
            object-fit: cover; /* Ajusta la imagen al tamaño del contenedor */
            border-radius: 8px; /* Bordes redondeados */
            cursor: pointer; /* Cambia el cursor a un puntero */
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición suave */
        }

        .carousel-item-netflix:hover {
            transform: scale(1.05); /* Escala ligeramente la imagen */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
        }

        .carousel-controls {
            position: absolute; /* Posiciona los botones sobre el carrusel */
            top: 50%; /* Centra verticalmente */
            transform: translateY(-50%); /* Ajusta el centrado vertical */
            width: 100%; /* Ocupa todo el ancho del contenedor padre */
            display: flex;
            justify-content: space-between; /* Separa los botones a los extremos */
            pointer-events: none; /* Evita que los botones bloqueen el carrusel */
        }

        .carousel-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
            font-size: 18px;
            pointer-events: all; /* Permite hacer clic en los botones */
        }

        .carousel-controls button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal .carousel-control-prev,
        .modal .carousel-control-next {
            background-color: rgba(128, 128, 128, 0.7); /* Fondo gris semitransparente */
            width: 40px; /* Ancho del círculo */
            height: 40px; /* Alto del círculo */
            border-radius: 50%; /* Hace que el fondo sea un círculo */
            top: 50%; /* Centra verticalmente */
            transform: translateY(-50%); /* Ajusta el centrado */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal .carousel-control-prev-icon,
        .modal .carousel-control-next-icon {
            filter: brightness(0) invert(1); /* Cambia el color de las flechas a blanco */
        }
    </style>
    <div class="container">
        @foreach ($houseDevelopmentProgressRecords as $index => $houseDevelopmentProgressRecord)

            @php
                $reportedDate = (!is_null($houseDevelopmentProgressRecord->reported_date) ? \Carbon\Carbon::parse($houseDevelopmentProgressRecord->reported_date)->isoFormat('D [de] MMMM [del] YYYY') : '-')
            @endphp

            <div class="row mb-4">
                <div class="col-12">
                    <span class="bw-card-text">{{ $reportedDate }}</span>

                    <div class="mt-3">
                        <p class="bw-card-text">{{ $houseDevelopmentProgressRecord->description }}</p>
                    </div>

                    <!-- Carrusel estilo Netflix -->
                     @if(count($houseDevelopmentProgressRecord->media))
                        <div class="carousel-netflix-container" style="position: relative;">
                            <div class="carousel-netflix" id="carousel{{ $index }}">
                                @foreach ($houseDevelopmentProgressRecord->media as $imageIndex => $image)
                                    <img src="{{ asset('storage/' . $image->path) }}"
                                        class="carousel-item-netflix"
                                        alt="Imagen de avance de obra"
                                        onclick="openModal('modal{{ $index }}', {{ $imageIndex }})">
                                @endforeach
                            </div>

                            <!-- Controles del carrusel -->
                            <div class="carousel-controls">
                                <button onclick="scrollCarousel('carousel{{ $index }}', -300)">&#10094;</button>
                                <button onclick="scrollCarousel('carousel{{ $index }}', 300)">&#10095;</button>
                            </div>
                        </div>
                    @else
                        <p>No se encontraron imágenes para este avance de obra.</p>
                    @endif

                </div>
            </div>

            <!-- Modal para ver la imagen en grande -->
            <div class="modal fade" id="modal{{ $index }}" tabindex="-1" aria-labelledby="modalLabel{{ $index }}" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel{{ $index }}">Imágenes de avance de obra</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Carrusel dentro del modal -->
                            <div id="carouselModal{{ $index }}" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    @foreach ($houseDevelopmentProgressRecord->media as $modalImageIndex => $image)
                                        <div class="carousel-item {{ $modalImageIndex === 0 ? 'active' : '' }}">
                                            <img src="{{ asset('storage/' . $image->path) }}"
                                                class="d-block w-100"
                                                alt="Imagen {{ $modalImageIndex + 1 }}">
                                        </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href="#carouselModal{{ $index }}" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Anterior</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselModal{{ $index }}" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Siguiente</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Script para el desplazamiento del carrusel y el modal -->
    <script>
        // Función para desplazar el carrusel horizontal
        function scrollCarousel(carouselId, offset) {
            const carousel = document.getElementById(carouselId);
            carousel.scrollBy({
                left: offset,
                behavior: 'smooth'
            });
        }

        // Función para abrir el modal y mostrar la imagen seleccionada
        function openModal(modalId, imageIndex) {
            const modal = document.getElementById(modalId);
            const carousel = modal.querySelector('.carousel');
            const carouselItems = carousel.querySelectorAll('.carousel-item');

            // Activar la imagen seleccionada
            carouselItems.forEach((item, index) => {
                if (index === imageIndex) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });

            // Mostrar el modal
            $(`#${modalId}`).modal('show');
        }
    </script>
@endsection