@php
$VerEditor =  auth()->user()->can('Biblioteca Digital')
@endphp
@if($VerEditor)
@extends('layouts/app')
@section('tituloModulo', 'BIBLIOTECA DIGITAL')
@section('contenido')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <label class="control-label is-required">Marca</label>
                <select class="form-select" aria-label="Default select example" name="marca" id="marca">
                    <option value="">Seleccione una marca</option>
                    @foreach($marcas as $marca)
                        <option value="{{ $marca }}">{{ $marca }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label class="control-label is-required">Modelo</label>
                <select class="form-select" aria-label="Default select example" name="modelo" id="modelo">
                    <option value="">Seleccione el modelo</option>
                    @foreach($modelos as $modelo)
                        <option value="{{ $modelo }}">{{ $modelo }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label class="control-label is-required">Año</label>
                <select class="form-select" aria-label="Default select example" name="anio" id="anio">
                    <option value="">Seleccione el año</option>
                    @foreach($anios as $anio)
                        <option value="{{ $anio }}">{{ $anio }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="datatable-wrapper datatable-loading no-footer sortable searchable fixed-columns">
            <div class="datatable-container">
                <table id="tableBl" class="table datatable-table datatable">
                    <thead>
                        <tr class="text">
                            <th data-sortable="true" scope="col">MARCA</th>
                            <th data-sortable="true" scope="col">MODELO</th>
                            <th data-sortable="true" scope="col">AÑO</th>
                            <th data-sortable="true" scope="col">VER</th>
                        </tr>
                    </thead>
                    <tbody id="documentos-tbody">
                        @foreach ($documentos as $item)
                        <tr>
                            <td data-title="MARCA">{{ $item['marca'] }}</td>
                            <td data-title="MODELO">{{ $item['modelo'] }}</td>
                            <td data-title="AÑO">{{ $item['anio_bibl'] }}</td>
                            <td data-title="VER"><a href={{ route('biblioteca.dats', $item['codigo_bibl']) }}  >Ver Documentos</a></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="datatable-bottom">
                <nav class="datatable-pagination">
                    <ul class="datatable-pagination-list"></ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const baseUrl = "{{ url('biblioteca/carpetas/dats') }}/";
    $('#marca, #modelo, #anio').on('change', function() {
    let marca = $('#marca').val();
    let modelo = $('#modelo').val();
    let anio = $('#anio').val();
    $.ajax({
        url: '{{ route("biblioteca.buscar") }}',
        method: 'GET',
        data: {
            marca: marca,
            modelo: modelo,
            anio: anio
        },
        success: function(response) {
            let documentos = response.documentos;
            let tbody = $('#documentos-tbody');
            tbody.empty();

            if (documentos.length > 0) {
                documentos.forEach(function(documento) {
                    // Generar la URL dinámica concatenando el parámetro 'codigo_bibl'
                    let verUrl = baseUrl + documento.codigo_bibl;

                    let row = `
                        <tr>
                            <td data-title="MARCA">${documento.marca}</td>
                            <td data-title="MODELO">${documento.modelo}</td>
                            <td data-title="AÑO">${documento.anio_bibl}</td>
                            <td data-title="VER"><a href="${verUrl}">Ver Documentos</a></td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            } else {
                tbody.append('<tr><td colspan="4">No se encontraron resultados</td></tr>');
            }
        },
        error: function(xhr, status, error) {
            console.error("Error en la solicitud AJAX:", error);
            alert("Ocurrió un error al realizar la búsqueda.");
            tbody.append('<tr><td colspan="4">Ocurrió un error al procesar la solicitud.</td></tr>');
        }
    });
});

</script>
@endsection
@endif