@extends('adminlte::page')

@section('css')
    <style>
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
@stop

@section('content_header')
    <div id="loading-overlay" style="display: none;">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="sr-only">Cargando...</span>
        </div>
        <h5 class="mt-3 text-primary font-weight-bold">Sincronizando con WordPress...</h5>
        <p class="text-muted">Por favor, no cierre esta ventana.</p>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                @include('components.breadcrumbs', ['items' => ['Taxonomías' => '#']])
            </div>
        </div>
        <div class="row align-items-center justify-content-between mt-2">
            <div class="col-auto">
                <h1 class="m-0 text-dark"><i class="fas fa-tags mr-2 text-primary"></i>Taxonomías</h1>
            </div>
            <div class="col-auto">
                <form action="{{ route('taxonomies.sync') }}" method="POST" id="sync-form">
                    @csrf
                    <button type="submit" class="btn btn-danger shadow-sm">
                        <i class="fas fa-sync mr-1"></i> Sincronizar desde WordPress
                    </button>
                </form>
            </div>
        </div>
    </div>
@stop

{{-- ... cabecera anterior ... --}}

@section('content')
<div class="container-fluid">
    {{-- Mensaje de Éxito --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="icon fas fa-check-circle mr-2"></i>
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- Mensaje de Error --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <i class="icon fas fa-exclamation-triangle mr-2"></i>
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    {{-- Fila de Filtros --}}
    <div class="card card-outline card-info shadow-sm mb-3">
        <div class="card-body p-3">
            <div class="row align-items-center">
                <div class="col-md-1">
                    <label class="m-0"><i class="fas fa-filter mr-1"></i> Filtrar:</label>
                </div>
                <div class="col-md-4">
                    <select id="filter-type" class="form-control form-control-sm select2">
                        <option value="">Todos los tipos de recurso</option>
                        @foreach($types as $type)
                            <option value="{{ $type }}">{{ ucfirst(str_replace('-', ' ', $type)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-7 text-right">
                    <small class="text-muted">Mostrando registros sincronizados desde WordPress</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabla --}}
    <div class="card shadow-sm">
        <div class="card-body">
            <table id="tax-table" class="table table-bordered table-striped responsive nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>ID WP</th>
                        <th>Nombre</th>
                        <th>Tipo de Recurso</th>
                        <th>Padre (ID)</th>
                        <th>Activo</th>
                        <th>Sincronizado</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($taxonomies as $tax)
                    <tr>
                        <td>{{ $tax->id }}</td>
                        <td>{{ $tax->wp_id }}</td>
                        <td><strong>{{ $tax->name }}</strong></td>
                        <td>{{ $tax->resource_type }}</td>
                        <td>{{ $tax->parentTaxonomy->name ?? '---' }}</td>
                        <td class="text-center">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" 
                                    class="custom-control-input toggle-active" 
                                    id="active-{{ $tax->id }}" 
                                    data-id="{{ $tax->id }}"
                                    {{ $tax->active ? 'checked' : '' }}>
                                <label class="custom-control-label" for="active-{{ $tax->id }}"></label>
                            </div>
                        </td>
                        <td>{{ $tax->updated_at->format('d/m/Y H:i') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('.toggle-active').change(function() {
            let status = $(this).prop('checked') ? 1 : 0;
            let taxId = $(this).data('id');
            let checkbox = $(this);

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('taxonomies.toggle-active') }}",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'active': status,
                    'id': taxId
                },
                success: function(data) {
                    // Opcional: Mostrar un pequeño toast de éxito
                    toastr.success('Estado actualizado correctamente');
                },
                error: function(xhr) {
                    // Si falla, revertimos el estado del checkbox
                    checkbox.prop('checked', !checkbox.prop('checked'));
                    toastr.error('Error al actualizar el estado');
                }
            });
        });
        $('#sync-form').on('submit', function() {
                // Mostrar la pantalla de carga
                $('#loading-overlay').fadeIn(200);
                
                // Deshabilitar el botón para evitar doble clic
                $(this).find('button[type="submit"]')
                    .attr('disabled', true)
                    .html('<i class="fas fa-spinner fa-spin mr-1"></i> Procesando...');
            });    
        
        // Inicializar Select2
        $('.select2').select2({
            theme: 'bootstrap4',
            allowClear: true,
            placeholder: "Seleccione un tipo..."
        });

        // Inicializar DataTable
        var table = $('#tax-table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "dom": '<"row"<"col-md-12"B>>' + // Fila de botones arriba
                '<"row mt-2"<"col-md-6"l><"col-md-6"f>>' + // Paginación y Buscador
                'rt' + 
                '<"row"<"col-md-6"i><"col-md-6"p>>', // Info y Páginas
            "buttons": [
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel"></i> Excel',
                    className: 'btn btn-success btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fas fa-file-csv"></i> CSV',
                    className: 'btn btn-info btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf"></i> PDF',
                    className: 'btn btn-danger btn-sm mr-1',
                    exportOptions: { columns: ':not(.no-export)' }
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print"></i> Imprimir',
                    className: 'btn btn-secondary btn-sm',
                    exportOptions: { columns: ':not(.no-export)' }
                }
            ],
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
            },
        });

        // Lógica de filtrado al cambiar el Select2
        $('#filter-type').on('change', function() {
            var val = $(this).val();
            // Filtramos en la columna 2 (Tipo de Recurso)
            // Usamos una expresión regular exacta para evitar que "producto" coincida con "productor"
            table.column(3).search(val ? '^' + val + '$' : '', true, false).draw();
        });
    });
</script>
@stop