@extends('adminlte::page')

@section('title', 'Organizadores de 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;
        }
    </style>
@stop

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

    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Eventos' => '#', 'Organizadores' => 'active']])
        </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-user-tie mr-2 text-primary"></i>Organizadores (MEC)</h1>
        </div>
        <div class="col-auto">
            @if(auth()->user()->isAdmin())
            <a href="{{ route('event-organizers.sync_all') }}" 
                class="btn btn-danger shadow-sm" id="btn-sync-all"
                onclick="return confirm('Esta acción traerá TODOS los organizadores desde WordPress. ¿Deseas continuar?')">
                <i class="fab fa-wordpress mr-1"></i> 
                <i class="fas fa-sync-alt mr-1"></i> 
                Sincronización Masiva
            </a>
            @endif

            @if(auth()->user()->isAdmin())
            <a href="{{ route('event-organizers.create') }}" class="btn btn-success shadow-sm ml-2">
                <i class="fas fa-plus-circle mr-1"></i> Añadir Organizador
            </a>
            @endif
        </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 Organizadores...</h4>
    <p>Por favor, no cierres la ventana mientras procesamos los datos con WordPress.</p>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body">
        <table id="organizers-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th style="width: 50px;">ID</th>
                    <th style="width: 80px;">WP ID</th>
                    <th>Nombre / Entidad</th>
                    <th>Contacto</th>
                    <th style="width: 150px;">Estado Sinc.</th>
                    @if(auth()->user()->isAdmin())
                        <th class="text-center no-export" style="width: 120px;">Acciones</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($organizers as $org)
                <tr class="{{ !$org->active ? 'bg-light-red text-muted' : '' }}">
                    <td>{{ $org->id }}</td>
                    <td>
                        @if($org->wp_id)
                            <span class="badge badge-secondary p-2 shadow-sm">{{ $org->wp_id }}</span>
                        @else
                            <span class="text-muted small">No vinculado</span>
                        @endif
                    </td>
                    <td>
                        <strong>{{ $org->name }}</strong>
                        @if($org->url)
                            <br><small><a href="{{ $org->url }}" target="_blank" class="text-info">{{ $org->url }}</a></small>
                        @endif
                    </td>
                    <td>
                        @if($org->email)
                            <div><i class="fas fa-envelope fa-xs text-muted mr-1"></i> {{ $org->email }}</div>
                        @endif
                        @if($org->phone)
                            <div><i class="fas fa-phone fa-xs text-muted mr-1"></i> {{ $org->phone }}</div>
                        @endif
                        @if(!$org->email && !$org->phone)
                            <span class="text-muted small italic">Sin datos de contacto</span>
                        @endif
                    </td>
                    <td>
                        @if($org->wp_id)
                            <span class="badge badge-success"><i class="fas fa-check-circle mr-1"></i> Sincronizado</span>
                        @else
                            <span class="badge badge-warning text-white"><i class="fas fa-exclamation-triangle mr-1"></i> Solo Local</span>
                        @endif
                    </td>
                    @if(auth()->user()->isAdmin())
                    <td class="text-center">
                        <div class="btn-group">
                            <a href="{{ route('event-organizers.edit', $org->id) }}" class="btn btn-sm btn-outline-primary" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>

                            {{-- Botón dinámico Activar/Desactivar --}}
                            <form action="{{ route('event-organizers.toggle', $org->id) }}" method="POST" class="d-inline ml-1">
                                @csrf
                                @method('PATCH')
                                @if($org->active)
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar" onclick="return confirm('¿Desactivar este organizador?')">
                                        <i class="fas fa-eye-slash"></i>
                                    </button>
                                @else
                                    <button type="submit" class="btn btn-sm btn-outline-success" title="Activar" onclick="return confirm('¿Activar este organizador?')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                @endif
                            </form>

                            <a href="{{ route('event-organizers.sync_to_wp', $org->id) }}" 
                               class="btn btn-sm ml-1 btn-outline-info" 
                               title="Sincronizar hacia WP"
                               onclick="return confirm('¿Enviar este organizador a WordPress?')">
                                <i class="fab fa-wordpress"></i>
                            </a>
                        </div>
                    </td>
                    @endif
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop

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

    $(document).ready(function() {
        $('#organizers-table').DataTable({
            paging:         true,
            "responsive": true,
            "autoWidth": false,
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
            },
            "dom": '<"row"<"col-md-12"B>>' + '<"row mt-2"<"col-md-6"l><"col-md-6"f>>' + 'rt' + '<"row"<"col-md-6"i><"col-md-6"p>>',
            "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: '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)' }
                }
            ],
        });
    });
</script>
@stop