@extends('layouts.simple.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatable-extension.css') }}">
@endsection

@section('title', 'Listado de Proyectos')

@section('main_content')
@include('operations.navigation_proyectos')

<div class="container-fluid">
    <div class="row bg-white p-3 mb-3">
        <div class="col-md-4">
            <h5 class="mb-0">Gestión de Proyectos</h5>
        </div>
        <div class="col-md-8 text-end">
            <button class="btn btn-light btn-sm" onclick="imprimir()">Descargar</button>
            <a href="{{ route('operations.basic.proyectos.create') }}" class="btn btn-primary btn-sm">Crear Nuevo Proyecto</a>
        </div>
    </div>

    <!-- Se inicia el filtro -->
    <form method="GET" action="{{ route('operations.basic.proyectos.index') }}">
      <div class="row align-items-center mb-3 d-flex">
    <!-- Filtro por Cliente -->
    <div class="col-md-3">
        <label for="filtro_cliente" class="form-label">Cliente</label>
        <select name="filtro_cliente" id="filtro_cliente" class="form-control" onchange="this.form.submit()">
            <option value="">Todos</option>
            @foreach($clientes as $id => $nombre_cliente)
                <option value="{{ $id }}" {{ request('filtro_cliente') == $id ? 'selected' : '' }}>
                    {{ $nombre_cliente }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- Filtro por Responsable -->
    <div class="col-md-3">
        <label for="filtro_responsable" class="form-label">Responsable</label>
        <select name="filtro_responsable" id="filtro_responsable" class="form-control" onchange="this.form.submit()">
            <option value="">Todos</option>
            @foreach($responsables as $id => $email)
                <option value="{{ $id }}" {{ request('filtro_responsable') == $id ? 'selected' : '' }}>
                    {{ $email }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- Filtro por Activo -->
    <div class="col-md-2">
        <label for="filtro_activo" class="form-label">Activo</label>
        <select name="filtro_activo" id="filtro_activo" class="form-control" onchange="this.form.submit()">
            <option value="">Todos</option>
            <option value="S" {{ request('filtro_activo') == 'S' ? 'selected' : '' }}>Sí</option>
            <option value="N" {{ request('filtro_activo') == 'N' ? 'selected' : '' }}>No</option>
        </select>
    </div>

    <!-- Control del Scroller -->
    <div class="col-md-2">
        <label for="per_page" class="form-label">Mostrar</label>
        <div class="d-flex align-items-center">
            <select name="per_page" id="per_page" class="form-control w-auto me-2" onchange="this.form.submit()">
                <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
            </select>
            <span>Entradas</span>
        </div>
    </div>

    <!-- Búsqueda Global -->
    <div class="col-md-2">
        <label for="search" class="form-label">Buscar</label>
        <input
            type="text"
            name="search"
            id="search"
            class="form-control"
            placeholder="Buscar"
            value="{{ request('search') }}"
        />
    </div>
</div>


    </form>

    <!-- Se acaba el filtro -->

<div id="proyectosLista">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
          <thead class="table-light">
              <tr>
                  <th>ID</th>
                  <th>Nombre</th>
                  <th>Cliente</th>
                  <th>Responsable</th>
                  <th>Número de Expediente</th>
                  <th>Activo</th> <!-- Nueva columna -->
                  <th>Acciones</th>
              </tr>
          </thead>
          <tbody>
              @forelse($proyectos as $proyecto)
                  <tr>
                      <td>{{ $proyecto->id }}</td>
                      <td>{{ $proyecto->name }}</td>
                      <td>{{ $proyecto->cliente->nombre_cliente ?? 'Sin cliente' }}</td>
                      <td>{{ $proyecto->responsable->email ?? 'Sin responsable' }}</td>
                      <td>{{ $proyecto->numero_expediente ?? '-' }}</td>
                      <td>{{ $proyecto->activo == 'S' ? 'Sí' : 'No' }}</td> <!-- Mostrar activo -->
                      <td>
                          <a href="{{ route('operations.basic.proyectos.edit', $proyecto->id) }}" class="btn btn-sm btn-primary">Editar</a>
                          <form action="{{ route('operations.basic.proyectos.destroy', $proyecto->id) }}" method="POST" class="d-inline">
                              @csrf
                              @method('DELETE')
                              <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Está seguro de eliminar este proyecto?')">Eliminar</button>
                          </form>
                      </td>
                  </tr>
              @empty
                  <tr>
                      <td colspan="7" class="text-center">No se encontraron proyectos</td>
                  </tr>
              @endforelse
          </tbody>

            <tfoot class="table-light">
                <tr>
                  <th>ID</th>
                  <th>Nombre</th>
                  <th>Cliente</th>
                  <th>Responsable</th>
                  <th>Número de Expediente</th>
                  <th>Activo</th> <!-- Nueva columna -->
                  <th>Acciones</th>
                </tr>
            </tfoot>
        </table>
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div>
                Showing {{ $proyectos->firstItem() }} to {{ $proyectos->lastItem() }} of {{ $proyectos->total() }} results
            </div>
            <div>
                {{ $proyectos->appends(request()->query())->links('pagination::bootstrap-4') }}
            </div>
        </div>

    </div>
</div>
</div>

@endsection

@section('scripts')
    <!-- DataTables Scripts -->
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.bootstrap5.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
    function eliminarCamposInnecesarios(content) {
        var tempDiv = document.createElement("div");
        tempDiv.innerHTML = content.innerHTML;

        // Eliminar columnas con encabezado 'Acciones' y cualquier botón
        var headers = tempDiv.querySelectorAll("th");
        var removeIndexes = [];

        // Buscar índices de las columnas a eliminar
        headers.forEach((th, index) => {
            var text = th.textContent.trim().toLowerCase();
            if (text === "acciones" || text === "") {
                removeIndexes.push(index);
                th.remove(); // Eliminar el <th>
            }
        });

        // Eliminar las celdas <td> correspondientes en cada fila
        var rows = tempDiv.querySelectorAll("tr");
        rows.forEach(row => {
            var cells = row.querySelectorAll("td");
            removeIndexes.forEach(i => {
                if (cells[i]) cells[i].remove();
            });
        });

        // Eliminar cualquier botón o elemento no deseado en el contenido
        var buttons = tempDiv.querySelectorAll("button, .btn, .btn-primary, .btn-danger");
        buttons.forEach(button => {
            button.remove();
        });

        // Verificar si hay contenido después de la manipulación
        if (tempDiv.innerHTML.trim() === "") {
            console.error("El contenido no es válido para generar el PDF.");
            return;
        }

        return tempDiv;

    }

    function imprimir() {
        var printContents = document.getElementById('proyectosLista');

            // Crear un contenedor fuera del flujo principal para el PDF
            var externalContainer = document.createElement('div');
            document.body.appendChild(externalContainer); // Añadir al cuerpo, pero fuera del contenido visible

            // Insertar el contenido modificado en este contenedor externo
            externalContainer.innerHTML = eliminarCamposInnecesarios(printContents).innerHTML;

            // Usar html2canvas para generar el PDF
            html2canvas(externalContainer, { scale: 3 }).then(canvas => {
                var imgData = canvas.toDataURL('image/png');
                var pdf = new jspdf.jsPDF('l', 'mm', 'a4');

                // Definir el tamaño A4 en milímetros
                var a4Width = 310;  // Ancho A4 en mm
                var a4Height = 397; // Alto A4 en mm

                // Escalar la imagen para que se ajuste al tamaño A4 sin perder calidad
                var imgWidth = a4Width - 20;  // Margen de 10mm en cada lado (puedes ajustar el margen)
                var imgHeight = (canvas.height * imgWidth) / canvas.width;

                // Si la imagen es demasiado alta, ajustar el tamaño
                if (imgHeight > a4Height - 20) {  // Margen de 10mm en la parte superior e inferior
                    imgHeight = a4Height - 20;
                    imgWidth = (canvas.width * imgHeight) / canvas.height;
                }

                // Agregar la imagen al PDF
                pdf.addImage(imgData, 'PNG', 3, 3, imgWidth, imgHeight);  // Ajustar la posición de la imagen


                pdf.save('proyectos.pdf'); // Guarda el archivo PDF

                // Limpiar el contenedor temporal después de la generación
                document.body.removeChild(externalContainer);
            }).catch(error => {
                console.error("Error al generar el PDF:", error);
            });
    }

    $(document).ready(function () {
        $('#tablas-table').DataTable({
            serverSide: true,
            processing: true,
            paging: true,
            searching: false, // Desactivar el campo de búsqueda automático
            lengthChange: false, // Desactivar el selector "Show entries" automático
            ajax: {
                url: "{{ route('operations.basic.TablasAuxiliares.index') }}",
                data: function (d) {
                    d.categoria = $('select[name="categoria"]').val(); // Enviar filtro de categoría
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'categoria', name: 'categoria' },
                { data: 'codigo', name: 'codigo' },
                { data: 'descripcion', name: 'descripcion' },
                { data: 'color', name: 'color', orderable: false, searchable: false },
                { data: 'acciones', name: 'acciones', orderable: false, searchable: false },
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.1/i18n/Spanish.json'
            },
            initComplete: function () {
                $('thead th, tfoot th').css({
                    'background-color': '#ffffff',
                    'color': '#000000',
                    'font-weight': 'bold',
                });
            },
        });

        // Recargar la tabla cuando cambie el filtro de categoría
        $('select[name="categoria"]').on('change', function () {
            $('#tablas-table').DataTable().ajax.reload();
        });

        // Sincronizar "Show entries"
        $('#entries-selector').on('change', function () {
            $('#tablas-table').DataTable().page.len($(this).val()).draw();
        });

        // Sincronizar campo de búsqueda
        $('#table-search').on('keyup', function () {
            $('#tablas-table').DataTable().search($(this).val()).draw();
        });
    });
    </script>
    <script>
        // Debounce para evitar múltiples envíos del formulario
        let debounceTimeout;
        const searchInput = document.getElementById('search');
        const searchForm = searchInput.closest('form');

        searchInput.addEventListener('input', function () {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                searchForm.submit();
            }, 500); // Espera 500ms antes de enviar el formulario
        });
    </script>
@endsection