@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('main_content')
    <div class="container-fluid">
        <!-- Título y Breadcrumb -->
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h4>Tablas Auxiliares</h4>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">
                                <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg>
                            </a></li>
                        <li class="breadcrumb-item">Operaciones Básicas</li>
                        <li class="breadcrumb-item active">Tablas Auxiliares</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Tabla dentro de un card -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0 card-no-border">
                        <h5>Gestión de Tablas Auxiliares</h5>
                        <span>Explora, filtra y administra las tablas auxiliares de tu aplicación.</span>
                    </div>
                    <div class="card-body">
                        <!-- Filtro y Botón Crear -->
                        <!-- Filtro, Selector "Show entries", Search y Botón Crear en una fila -->
                        <div class="row align-items-center mb-4">
                            <!-- Filtro de Categoría -->
                            <div class="col-md-3">
                                <form id="filter-form" method="GET" action="{{ route('operations.basic.TablasAuxiliares.index') }}">
                                    <select name="categoria" class="form-control" onchange="document.getElementById('filter-form').submit();">
                                        <option value="">Todas las Categorías</option>
                                        @foreach($categorias as $categoria)
                                            <option value="{{ $categoria }}" {{ $filtroCategoria == $categoria ? 'selected' : '' }}>
                                                {{ $categoria }}
                                            </option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>

                            <!-- Botón Crear Nuevo -->
                            <div class="col-md-3 text-md-start mt-2 mt-md-0">
                                <a href="{{ route('operations.basic.TablasAuxiliares.create') }}" class="btn btn-primary">Crear Nuevo</a>
                            </div>

                            <!-- Espacio para el selector de "Show entries" y el campo de búsqueda -->
                            <div class="col-md-6 text-md-end mt-2 mt-md-0">
                                <div class="d-flex justify-content-end">
                                    <label class="me-2 align-self-center">Mostrar:</label>
                                    <select id="entries-selector" class="form-select form-select-sm me-2" style="width: auto;">
                                        <option value="10" selected>10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    <input type="search" class="form-control form-control-sm" placeholder="Buscar..." id="table-search" style="width: auto;">
                                </div>
                            </div>
                        </div>

                        <!-- Tabla -->
                        <div class="dt-ext table-responsive custom-scrollbar">
                            <table class="display table table-striped table-bordered" id="tablas-table">
                                <thead class="table-dark">
                                    <tr>
                                        <th>ID</th>
                                        <th>Categoría</th>
                                        <th>Código</th>
                                        <th>Descripción</th>
                                        <th>Color</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tablas as $tabla)
                                        <tr>
                                            <td>{{ $tabla->id }}</td>
                                            <td>{{ $tabla->categoria }}</td>
                                            <td>{{ $tabla->codigo }}</td>
                                            <td>{{ $tabla->descripcion }}</td>
                                            <td>
                                                <span style="background-color: {{ $tabla->color }}; display: block; width: 20px; height: 20px; border-radius: 50%;"></span>
                                            </td>
                                            <td>
                                                <ul class="action">
                                                    <!-- Íconos para Editar y Eliminar -->
                                                    <li class="edit">
                                                        <a href="{{ route('operations.basic.TablasAuxiliares.edit', $tabla->id) }}">
                                                            <i class="icon-pencil-alt"></i>
                                                        </a>
                                                    </li>
                                                    <li class="delete">
                                                        <form action="{{ route('operations.basic.TablasAuxiliares.destroy', $tabla->id) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-link p-0 text-danger">
                                                                <i class="icon-trash"></i>
                                                            </button>
                                                        </form>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>ID</th>
                                        <th>Categoría</th>
                                        <th>Código</th>
                                        <th>Descripción</th>
                                        <th>Color</th>
                                        <th>Acciones</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </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>
    $(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>
@endsection