@extends('adminlte::page')

@section('title', 'Eventos')

@section('css')
    <style>
        #loading-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .table-vcenter td { vertical-align: middle !important; }
        .bg-light-red { background-color: #f8d7da !important; }
    </style>
@stop

@section('content_header')
<div class="container-fluid">
    @include('components.alerts')

    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => '#']])
        </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-calendar-alt mr-2 text-primary"></i>Eventos</h1>
        </div>
        <div class="col-auto">
            <a href="{{ route('eventos.create') }}" class="btn btn-success shadow-sm">
                <i class="fas fa-plus-circle mr-1"></i> Añadir Evento
            </a>
        </div>
    </div>
</div>
@stop

@section('content')
<div id="loading-overlay" style="display: none;">
    <div class="spinner-border text-primary" role="status" style="width: 3.5rem; height: 3.5rem;">
        <span class="sr-only">Cargando...</span>
    </div>
    <h4 class="mt-3">Sincronizando con WordPress...</h4>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body">
        <table id="eventos-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th>ID</th>
                    <th>Evento / Fecha</th>
                    <th>Localización / Org.</th>
                    <th>Pueblo / Categoría (Neocom)</th>
                    @if(auth()->user()->isAdmin())
                        <th>Responsable</th>
                    @endif
                    <th>Estado Panel</th>
                    <th>Estado WP</th>
                    <th class="text-center no-export">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($eventos as $evento)
                <tr class="{{ !$evento->active ? 'bg-light-red text-muted' : '' }}">
                    <td>{{ $evento->id }}</td>
                    <td>
                        @if(!empty($evento->link))
                            <a href="{{ $evento->link }}" target="_blank">
                                <strong>{!! $evento->name !!}</strong> 
                                <i class="fas fa-external-link-alt fa-xs text-muted ml-1"></i>
                            </a>
                        @else
                            <strong>{!! $evento->name !!}</strong>
                        @endif
                        <br>
                        <small class="text-primary font-weight-bold">
                            <i class="far fa-calendar-check mr-1"></i>
                            {{ $evento->start_date ? $evento->start_date->format('d/m/Y') : 'Sin fecha' }}
                            {{ $evento->end_date ? ' - ' .$evento->end_date->format('d/m/Y') : '' }}
                        </small>
                    </td>

                    <td>
                        <small>
                            <strong>Loc:</strong> {{ $evento->eventLocation->name ?? 'Sin localización' }}
                            <br>
                            <strong>Org:</strong> {{ $evento->eventOrganizer->name ?? 'Sin organizador' }}
                        </small>
                    </td>

                    <td>
                        <div class="mb-1">
                            <i class="fas fa-map-marker-alt text-danger fa-xs mr-1"></i>
                            <span class="font-weight-bold text-sm">{{ $evento->pueblos_nombres }}</span>
                        </div>
                        <div class="text-muted small">
                            <i class="fas fa-tags fa-xs mr-1"></i>
                            {{ !empty($evento->categoria_neocom_array) ? implode(', ', $evento->categoria_neocom_array) : 'Sin categorías' }}
                        </div>
                    </td>

                    @if(auth()->user()->isAdmin())
                        <td>{{ $evento->usuario->name ?? 'Sin asignar' }}</td>
                    @endif

                    <td>
                        <span class="badge {{ $evento->panel_status == 'Sin cambios' ? 'badge-light border' : 'badge-danger' }}">
                            <i class="fas {{ $evento->panel_status == 'Sin cambios' ? 'fa-check' : 'fa-exclamation-triangle' }}"></i>
                            {{ $evento->panel_status }}
                        </span>
                        @if($evento->panel_info)
                            <br><small class="d-block mt-1 text-muted">{{ $evento->panel_info }}</small>
                        @endif
                    </td>

                    <td>
                        @switch($evento->wp_status)
                            @case('Creado')
                                <span class="badge badge-success"><i class="fas fa-globe-europe mr-1"></i> Creado</span>
                                @break
                            @case('No creado')
                                <span class="badge badge-warning text-white"><i class="fas fa-edit mr-1"></i> No creado</span>
                                @break
                            @default
                                <span class="badge badge-warning text-white"><i class="fas fa-edit mr-1"></i> No creado</span>
                        @endswitch
                    </td>

                    <td class="text-center">
                        <div class="btn-group">
                            @if(auth()->user()->isAdmin() || auth()->id() == $evento->id_usuario)
                                <a href="{{ route('eventos.edit', $evento->id) }}" class="btn btn-sm btn-outline-primary" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <form action="{{ route('eventos.toggle', $evento->id) }}" method="POST" class="d-inline ml-1">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-sm {{ $evento->active ? 'btn-outline-danger' : 'btn-outline-success' }}" 
                                            title="{{ $evento->active ? 'Desactivar' : 'Activar' }}" 
                                            onclick="return confirm('¿Cambiar estado del evento?')">
                                        <i class="fas {{ $evento->active ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                    </button>
                                </form>
                            @endif

                            {{-- Solo exportación a WP (Individual) --}}
                            @if(auth()->user()->isAdmin())
                                <a href="{{ route('eventos.sync_to_wp', ['id' => $evento->id]) }}" 
                                   class="btn btn-sm ml-1 {{ $evento->wp_status === 'No creado' ? 'btn-outline-success' : 'btn-outline-warning' }} btn-sync-wp" 
                                   title="Exportar a WordPress"
                                   onclick="return confirm('¿Sincronizar este evento con WordPress?')">
                                    <i class="fab fa-wordpress mr-1"></i>
                                    <i class="fas {{ $evento->wp_status === 'No creado' ? 'fa-arrow-up' : 'fa-sync-alt' }} fa-xs"></i>
                                </a>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('.btn-sync-wp').on('click', function() {
            $('#loading-overlay').fadeIn(300);
        });

        $('#eventos-table').DataTable({
            scrollX:        true,  // Activa scroll horizontal
            scrollCollapse: true,
            paging:         true,
            fixedColumns:   {
                left: 2, right: 3
            },
            "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"
            },
        });
    });
</script>
@stop