@extends('adminlte::page')

@section('title', 'Variables del Proyecto')

@section('plugins.Datatables', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-cogs text-primary"></i> Variables del Proyecto</h1>
        <div>
            <button type="button" class="btn btn-outline-warning mr-2" id="btn-clear-cache" title="Limpiar caché de variables y TV Wall para que los cambios surtan efecto inmediatamente">
                <i class="fas fa-broom"></i> Limpiar Caché
            </button>
            @can('project-variables-crear')
                <a href="{{ route('project-variables.create') }}" class="btn btn-primary btn-premium" title="Crear Nueva Variable">
                    <i class="fas fa-plus"></i> Nueva Variable
                </a>
            @endcan
        </div>
    </div>
@stop

@section('content')
    <x-ui.card shadow="shadow-sm">
        <x-slot:header>
            <x-ui.card-header title="Listado de Variables" icon="fas fa-list text-primary" />
        </x-slot:header>

        <div class="table-responsive p-0">
            <table id="project-variables-table" class="table table-hover w-100 mb-0">
                <thead class="bg-light">
                    <tr>
                        <th title="Identificador único de la variable">Clave</th>
                        <th title="Valor actual de la variable">Valor</th>
                        <th title="Tipo de dato de la variable">Tipo</th>
                        <th title="Grupo o categoría de la variable">Grupo</th>
                        <th title="Etiqueta descriptiva de la variable">Etiqueta</th>
                        <th class="text-center" title="Indica si la variable puede ser modificada">Editable</th>
                        <th class="text-center" title="Acciones disponibles">Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </x-ui.card>

    @php
        $columns = [
            ['data' => 'key', 'name' => 'key'],
            ['data' => 'value', 'name' => 'value'],
            ['data' => 'type', 'name' => 'type'],
            ['data' => 'group', 'name' => 'group'],
            ['data' => 'label', 'name' => 'label'],
            ['data' => 'editable', 'name' => 'editable', 'orderable' => false, 'searchable' => false, 'className' => 'text-center'],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false, 'className' => 'text-center'],
        ];
    @endphp

    <x-datatable-script tableId="project-variables-table" route="/api/v1/project-variables" :columns="$columns" :order="[[0, 'asc']]" />
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
@stop

@push('js')
<script>
    $(document).ready(function() {
        $('#btn-clear-cache').on('click', function() {
            Swal.fire({
                title: '¿Limpiar caché?',
                text: 'Las variables actualizadas se reflejarán inmediatamente en el TV Wall.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#f39c12',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, limpiar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#btn-clear-cache').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Limpiando...');
                    fetch('/api/v1/project-variables/clear-cache', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json().then(data => ({ ok: response.ok, data })))
                    .then(res => {
                        if (res.ok) {
                            Swal.fire('¡Listo!', res.data.message, 'success');
                        } else {
                            Swal.fire('Error', res.data.message || 'No se pudo limpiar la caché.', 'error');
                        }
                    })
                    .catch(() => {
                        Swal.fire('Error', 'Error de conexión al limpiar caché.', 'error');
                    })
                    .finally(() => {
                        $('#btn-clear-cache').prop('disabled', false).html('<i class="fas fa-broom"></i> Limpiar Caché');
                    });
                }
            });
        });
    });
</script>
@endpush