@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/sliderportada') }}">Slider Portada</a></li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de banner de portada de la web</h3>
            <a href="javascript:void(0)" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalSlider" onclick="agregarNuevoSlider()">
                <i class='bx bxs-pencil'></i> Nuevo Registro
            </a>
        </div>

        <div class="card-body">
            <!-- Tabla de Sliders -->
            <div class="table-responsive">
                <table id="tblSliders" class="table table-hover" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Título</th>
                            <th>Link</th>
                            <th>Imagen</th>
                            <th>Estado</th>
                            <th>Editar</th>
                            <th>Eliminar</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sliders as $key => $slider)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $slider->titulo }}</td>
                            <td>{{ $slider->link }}</td>
                            <td><img src="{{ asset('slider/' . $slider->imagen) }}" style="width:50px"></td>
                            <td>{{ $slider->estado }}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-xs" onclick="editarSlider({{ $slider->id }})">
                                    <span class='bx bx-pencil'></span>
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-xs" onclick="eliminarSlider({{ $slider->id }})">
                                    <span class='bx bx-trash'></span>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modal para Crear/Editar Slider -->
        <div class="modal fade" id="myModalSlider" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear/Editar Slider</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Formulario para crear o editar slider -->
                        <div id="sliderForm" class="form-horizontal">
                            @csrf
                            <input type="hidden" id="slider_id">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label" for="titulo">Título:</label>
                                        <input type="text" class="form-control" id="titulo" maxlength="50" placeholder="Ingrese Título">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="imagen">Imagen de escritorio:</label>
                                        <p style="color: #F31519; margin-bottom:0"><i>Medidas recomendadas: 1200px*320px</i></p>
                                        <input type="file" class="form-control" id="imagen" accept="image/*" onchange="previewImage(event, 'imagen-preview')">
                                        <img id="imagen-preview" src="#" alt="Vista previa de la imagen de escritorio" style="display: none; width: 200px; height:auto;">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label" for="link">Link:</label>
                                        <input type="url" class="form-control" id="link" maxlength="255" placeholder="Ingrese link de Hipervínculo">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="imagen_movil">Imagen de móvil:</label>
                                        <p style="color: #F31519; margin-bottom:0"><i>Medidas recomendadas: 500px*700px</i></p>
                                        <input type="file" class="form-control" id="imagen_movil" accept="image/*" onchange="previewImage(event, 'imagen-movil-preview')">
                                        <img id="imagen-movil-preview" src="#" alt="Vista previa de la imagen móvil" style="display: none; width: 200px; height:auto;">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="estado">Estado:</label>
                                        <select id="estado" class="form-control">
                                            <option value="1">Habilitado</option>
                                            <option value="0">Deshabilitado</option>
                                        </select>
                                    </div>
                                    
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-12">
                                    <button type="button" class="btn btn-success" onclick="guardarSlider()">Guardar</button>
                                </div>
                            </div>

                        </div>
                        <!-- Fin del formulario -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function agregarNuevoSlider() {
            $('#slider_id').val('');
            $('#titulo').val('');
            $('#link').val('');
            $('#estado').val('1');
            document.getElementById('imagen-preview').style.display = 'none';
            document.getElementById('imagen-movil-preview').style.display = 'none'; // Ocultar vista previa móvil
            $('#myModalSlider').modal('show');
        }

        function guardarSlider() {
            var formData = new FormData();
            formData.append('titulo', $('#titulo').val());
            formData.append('link', $('#link').val());
            formData.append('estado', $('#estado').val());
            formData.append('imagen', $('#imagen')[0].files[0]);
            formData.append('imagen_movil', $('#imagen_movil')[0].files[0]); // Añadir imagen de móvil
            formData.append('_token', '{{ csrf_token() }}');

            var sliderId = $('#slider_id').val();
            var url = sliderId ? '{{ url("/admin/web/sliderportada") }}/' + sliderId : '{{ url("/admin/web/sliderportada") }}';

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#myModalSlider').modal('hide');
                    location.reload(); 
                    alert('Slider guardado exitosamente');
                },
                error: function (response) {
                    alert('Error al guardar el slider');
                }
            });
        }

        function editarSlider(id) {
            $.ajax({
                url: '{{ url("/admin/web/sliderportada") }}/' + id + '/edit',
                type: 'GET',
                success: function (response) {
                    $('#slider_id').val(response.id);
                    $('#titulo').val(response.titulo);
                    $('#link').val(response.link);
                    $('#estado').val(response.estado);

                    // Mostrar la imagen existente en la vista previa (escritorio)
                    if (response.imagen) {
                        var imagenPreview = document.getElementById('imagen-preview');
                        imagenPreview.src = '{{ asset("slider/") }}/' + response.imagen;
                        imagenPreview.style.display = 'block';
                    }

                    // Mostrar la imagen existente en la vista previa (móvil)
                    if (response.imagen_movil) {
                        var imagenMovilPreview = document.getElementById('imagen-movil-preview');
                        imagenMovilPreview.src = '{{ asset("slider/") }}/' + response.imagen_movil;
                        imagenMovilPreview.style.display = 'block';
                    }

                    $('#myModalSlider').modal('show');
                },
                error: function (response) {
                    alert('Error al obtener los datos del slider');
                }
            });
        }

        function eliminarSlider(id) {
            if (confirm('¿Estás seguro de eliminar este slider?')) {
                $.ajax({
                    url: '{{ url("/admin/web/sliderportada") }}/' + id,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {
                        location.reload();
                        alert('Slider eliminado exitosamente');
                    },
                    error: function (response) {
                        alert('Error al eliminar el slider');
                    }
                });
            }
        }

        function previewImage(event, previewId) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = document.getElementById(previewId);
                output.src = reader.result;
                output.style.display = 'block';
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</main>
@endsection