@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>&nbsp;&nbsp;/ Admin Web</li>
            <li>&nbsp;&nbsp;/ <a href="{{ url('/admin/web/galeriafotos') }}">Galeria de fotos</a></li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div align="right">
            <a href="{{ url('/admin/web/galeriafotos') }}"><i class='bx bxs-chevrons-left'></i> Regresar</a>
        </div>

        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Álbum: {{ $album->nombre }}</h3>
            <div class="btn-group" role="group" align="right">
                <button class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalFoto">
                    <i class='bx bxs-pencil'></i> Subir nueva foto
                </button>
            </div>
        </div>

        <div class="card-body">
            <div class="row">
                @foreach($fotos as $foto)
                <div class="col-lg-3" id="foto-{{ $foto->id }}">
                    <div style="border-radius: 17px; border: 3px solid #ffffff;">
                        <img class="img-responsive" src="{{ asset('album/imagenes/' . $foto->imagen) }}" style="border-radius: 10px 10px 0px 0px; border: 0px solid #ffffff;width:250px;height: 180px;">
                        <p style="background-color: #FFFFFF;height: 42px;">{{ $foto->nombre }}</p>
                        <p align="center">
                            <button class="btn btn-danger btn-sm" onclick="eliminarFoto({{ $foto->id }})">Eliminar <i class='bx bx-trash'></i></button>
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Modal para subir nueva foto -->
    <div class="modal fade" id="myModalFoto" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Cargar imagen (Foto)</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="form-subir-foto" enctype='multipart/form-data'>
                        @csrf
                        <input type="hidden" name="albumId" value="{{ $album->id }}">
                        <div class="form-group">
                            <label for="tituloimg">Título de la imagen:</label>
                            <input type="text" class="form-control" id="tituloimg" name="tituloimg" placeholder="Título de la imagen" required>
                        </div>
                        <div class="form-group">
                            <label for="imagen">Imagen: <small>(Formatos Permitidos: *gif, *.jpg, *.jpeg, *.png)</small></label>
                            <input id="imagen" name="imagen" type="file" class="form-control" required />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="guardarFoto()"><i class="bx bx-save"></i> Guardar</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin Modal -->

</main>

<script>
    // Función para guardar una nueva imagen
    function guardarFoto() {
        var formData = new FormData(document.getElementById('form-subir-foto'));
        $.ajax({
            url: "{{ url('admin/web/galeriafotos/imagen') }}/" + "{{ $album->id }}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    location.reload(); // Recargar la página para mostrar la nueva imagen
                } else {
                    alert('Error al subir la imagen');
                }
            },
            error: function(data) {
                alert('Error en el servidor');
            }
        });
    }

    // Función para eliminar una imagen
    function eliminarFoto(id) {
        if (confirm('¿Estás seguro de que deseas eliminar esta imagen?')) {
            $.ajax({
                url: "{{ url('admin/web/galeriafotos/imagen') }}/" + id,
                type: 'DELETE',
                data: {
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    if (data.success) {
                        $('#foto-' + id).remove();
                    } else {
                        alert('Error al eliminar la imagen');
                    }
                },
                error: function(data) {
                    alert('Error en el servidor');
                }
            });
        }
    }
</script>
@endsection