@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
            <li class="">&nbsp;&nbsp;/ Admin Web</li>
            <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/web/noticia') }}">Noticias</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 noticias</h3>
            <div class="btn-group" role="group" align="right">
                <a href="#" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalPubli" onclick="agregarNoticia()">
                    <i class='bx bxs-pencil'></i> Nuevo Registro
                </a>&nbsp;&nbsp;
                <a href="{{ url('/admin/web/noticiacategoria') }}" class="btn btn-warning rounded-pill">
                    <i class='bx bxs-spreadsheet'></i> Nueva Categoría
                </a>
            </div>
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                <thead>
                    <tr>
                        <th>N.</th>
                        <th>Categoría</th>
                        <th>Título</th>
                        <th>Editar</th>
                        <th>Archivos</th>
                        <th>Eliminar</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($noticias as $noticia)
                    <tr id="noticia_{{ $noticia->id }}">
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $noticia->categoria->nombre }}</td>
                        <td>{{ $noticia->titulo }}</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs" onclick="editarNoticia({{ $noticia->id }})">
                                <i class='bx bx-edit-alt'></i>
                            </button>
                        </td>
                        <td>
                            <a href="{{ url('/admin/web/noticia/' . $noticia->id . '/archivos') }}">
                                <button class='btn btn-info btn-xs'><i class='bx bxs-folder-open'></i></button>
                            </a>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-xs" onclick="eliminarNoticia({{ $noticia->id }})">
                                <i class='bx bx-trash'></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal para crear/editar noticia -->
    <div class="modal fade" id="myModalPubli" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="modalTitle" class="modal-title">Crear Nueva Noticia</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="noticiaForm" class="form-horizontal" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="noticia_id" name="id">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label" for="categoria_id">Categoría:</label>
                                    <select name="categoria_id" id="categoria_id" class="form-control" required>
                                        <option value="" selected>..:: Seleccione ::..</option>
                                        @foreach($categorias as $categoria)
                                        <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="titulo">Título:</label>
                                    <input type="text" class="form-control" maxlength="255" id="titulo" name="titulo" placeholder="Ingrese Nombre del Título" required>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="texto">Texto grande:</label>
                                    <textarea class="form-control" name="texto" id="texto" placeholder="Ingrese breve descripción" required></textarea>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="imagen">Imagen: <small>(Campo Opcional)</small></label>
                                    <br><small>Formatos Permitidos: *.gif, *.jpg, *.jpeg, *.png / Peso imagen menor a 500KB<br> Dimensiones 914px x 514px</small>
                                    <input id="imagen" name="imagen" type="file" class="form-control" onchange="previewImage(event)" />
                                    <div id="preview" name="preview" style="margin-top: 10px;">
                                        <img id="img_preview" src="#" alt="Vista previa" style="display:none; max-width: 100%; height: auto;">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="link_video">Link video: <small>Youtube - (Campo Opcional)</small></label>
                                    <input type="text" class="form-control" name="link_video" id="link_video" placeholder="Ingrese link video">
                                </div>

                                <!-- Aquí se muestra un enlace si la noticia tiene un archivo -->
                                <div id="archivo_link" class="form-group" style="display: none;">
                                    <label class="control-label">Archivo actual:</label>
                                    <p><a id="archivo_enlace" href="#" target="_blank">Ver archivo</a></p>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label" for="detalle">Detalle:</label>
                                    <textarea id="detalle" name="detalle" class="form-control" required></textarea>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="link_video_dos">Link video adicional: <small>Youtube - (Campo Opcional)</small></label>
                                    <input type="text" class="form-control" name="link_video_dos" id="link_video_dos" placeholder="Ingrese link video">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-5 col-sm-12">
                                <button type="button" class="btn btn-success" id="guardarNoticia" onclick="guardarnoticia(event)">
                                    <i class="bx bx-save"></i> Guardar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin Modal -->
</main>
<script>
    function agregarNoticia() {
        $('#modalTitle').text('Crear Nueva Noticia');
        $('#noticiaForm').trigger('reset');
        $('#noticia_id').val('');
        $('#archivo_link').hide();
        $('#img_preview').hide();
        $('#myModalPubli').modal('show');
    }

    function editarNoticia(id) {
        $('#modalTitle').text('Editar Noticia');
        $.ajax({
            url: '{{ url("admin/web/noticia") }}/' + id + '/edit',
            type: 'GET',
            success: function(response) {
                $('#noticia_id').val(response.id);
                $('#categoria_id').val(response.categoria_noticia_id);
                $('#titulo').val(response.titulo);
                $('#texto').val(response.texto);
                $('#link_video').val(response.link_video);
                $('#detalle').val(response.detalle);
                $('#link_video_dos').val(response.link_video_dos);

                // Mostrar el enlace al archivo si existe
                if (response.archivo) {
                    $('#archivo_link').show();
                    $('#archivo_enlace').attr('href', '{{ asset("noticias/") }}/' + response.archivo);
                } else {
                    $('#archivo_link').hide();
                }

                // Mostrar la imagen de vista previa si existe
                if (response.imagen) {
                    $('#img_preview').attr('src', '{{ asset("noticias//") }}/' + response.imagen).show();
                } else {
                    $('#img_preview').hide();
                }

                $('#myModalPubli').modal('show');
            },
            error: function(xhr) {
                alert('Error al obtener los datos de la noticia');
            }
        });
    }

    function eliminarNoticia(id) {
        if (confirm('¿Estás seguro de eliminar esta noticia?')) {
            $.ajax({
                url: '{{ url("admin/web/noticia") }}/' + id,
                type: 'DELETE',
                data: {
                    "_token": "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#noticia_' + id).remove();
                    alert('Noticia eliminada exitosamente');
                },
                error: function(xhr) {
                    alert('Error al eliminar la noticia');
                }
            });
        }
    }

    function guardarnoticia(e) {
        e.preventDefault();

        var formData = new FormData($('#noticiaForm')[0]);
        var id = $('#noticia_id').val();
        var url = id ? '{{ url("admin/web/noticia") }}/' + id : '{{ route("noticia.store") }}';

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#myModalPubli').modal('hide');
                alert('Noticia guardada exitosamente');
                location.reload(); // Recarga la página para reflejar los cambios
            },
            error: function(xhr) {
                alert('Error al guardar la noticia');
            }
        });
    }

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

@endsection