@extends('adminlte::page')

@section('title', 'Espacios Naturales')

@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' => ['Espacios Naturales' => '#']])
        </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-tree mr-2 text-primary"></i>Espacios Naturales</h1>
        </div>
        <div class="col-auto">
            @can('super-admin-only')
            <a href="{{ route('espacios-naturales.sync_all_from_wp') }}" 
                class="btn btn-danger shadow-sm" id="btn-sync-all"
                onclick="return confirm('Esta acción traerá TODOS los espacios naturales 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>
            @endcan
            <a href="{{ route('espacios-naturales.create') }}" class="btn btn-success shadow-sm">
                <i class="fas fa-plus-circle mr-1"></i> Añadir Espacio
            </a>
        </div>
    </div>
</div>
@stop

@section('content')
<div id="loading-overlay" style="display: none;">
    <div class="spinner-border text-success" role="status" style="width: 3.5rem; height: 3.5rem;">
        <span class="sr-only">Cargando...</span>
    </div>
    <h4 class="mt-3">Sincronizando Espacios Naturales...</h4>
    <p>Por favor, no cierres la ventana mientras procesamos los datos.</p>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body">
        <table id="espacios-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th>ID</th>
                    <th>Nombre / Categoría</th>
                    <th>Ubicación</th>
                    <th>Extras</th>
                    <th>Estado Panel</th>
                    <th>Estado WP</th>
                    <th class="text-center no-export">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($espacios as $esp)
                <tr class="{{ !$esp->active ? 'bg-light-red text-muted' : '' }}">
                    <td>{{ $esp->id }}</td>
                    <td>
                        @if(!empty($esp->link))
                            <a href="{{ $esp->link }}" target="_blank">
                                <strong>{!! $esp->name !!}</strong> 
                                <i class="fas fa-external-link-alt fa-xs text-muted ml-1"></i>
                            </a>
                        @else
                            <strong>{!! $esp->name !!}</strong>
                        @endif
                        <br>
                        <small class="text-muted">
                            @php
                                $catIds = array_filter(explode(',', $esp->categoria_naturaleza));
                                $nombresCats = \App\Models\Taxonomy::whereIn('wp_id', $catIds)->pluck('name')->implode(', ');
                            @endphp
                            <i class="fas fa-leaf fa-xs mr-1"></i> {{ $nombresCats ?: 'Sin categoría' }}
                        </small>
                    </td>

                    <td>
                        @php
                            $zonaId = head(explode(',', $esp->zona));
                            $puebloId = head(explode(',', $esp->pueblo));
                            $nombreZona = \App\Models\Taxonomy::where('wp_id', $zonaId)->value('name');
                            $nombrePueblo = \App\Models\Taxonomy::where('wp_id', $puebloId)->value('name');
                        @endphp
                        @if($nombreZona)
                            <span class="badge badge-outline-secondary">{{ $nombreZona }}</span>
                            @if($nombrePueblo) <br><small class="text-secondary"><i class="fas fa-map-marker-alt mr-1"></i>{{ $nombrePueblo }}</small> @endif
                        @else
                            <span class="text-muted small">Sin ubicación</span>
                        @endif
                    </td>

                    <td>
                        <div class="d-flex flex-column">
                            @if($esp->infinia)
                                <small class="text-primary"><i class="fas fa-infinity mr-1"></i> Sello Infinia</small>
                            @endif
                            @if($esp->accesibilidad)
                                <small class="text-primary"><i class="fas fa-wheelchair mr-1"></i> Accesible</small>
                            @endif
                            @if(!$esp->infinia && !$esp->accesibilidad)
                                <span class="text-muted small">-</span>
                            @endif
                        </div>
                    </td>

                    <td>
                        <span class="badge {{ $esp->panel_status == 'Sin cambios' ? 'badge-light' : 'badge-danger' }}">
                            <i class="fas {{ $esp->panel_status == 'Sin cambios' ? 'fa-check' : 'fa-exclamation-triangle' }}"></i>
                            {{ $esp->panel_status }}
                        </span>
                        @if($esp->panel_info)
                            <br><small class="d-block mt-1 text-muted">{{ $esp->panel_info }}</small>
                        @endif
                    </td>
                    <td>
                        @switch($esp->wp_status)
                            @case('Publicado')
                                <span class="badge badge-success"><i class="fas fa-globe-europe mr-1"></i> Publicado</span>
                                @break
                            @case('Borrador')
                                <span class="badge badge-warning text-white"><i class="fas fa-edit mr-1"></i> Borrador</span>
                                @break
                            @default
                                <span class="badge badge-secondary p-2"><i class="fas fa-cloud-upload-alt mr-1"></i> No creado</span>
                        @endswitch
                    </td>
                    <td class="text-center">
                        <div class="btn-group">
                            {{-- 1. Botón Editar --}}
                            @if(auth()->user()->isAdmin() || auth()->id() == $esp->id_usuario)
                                <a href="{{ route('espacios-naturales.edit', $esp->id) }}" class="btn btn-sm btn-outline-primary" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {{-- 2. Botón Activar/Desactivar --}}
                                <form action="{{ route('espacios-naturales.toggle', $esp->id) }}" method="POST" class="d-inline ml-1">
                                    @csrf
                                    @method('PATCH')
                                    @if($esp->active)
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar" onclick="return confirm('¿Desactivar este espacio natural?')">
                                            <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 espacio natural?')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    @endif
                                </form>
                            @endif

                            {{-- 3. NUEVO: Cambio de Estado en WordPress (Solo ADMIN) --}}
                            @if(auth()->user()->isAdmin() && !empty($esp->wp_id))
                                <form action="{{ route('espacios-naturales.toggle_wp', $esp->id) }}" method="POST" class="d-inline ml-1 sync-form">
                                    @csrf
                                    @if($esp->wp_status === 'Publicado')
                                        {{-- Botón para pasar a BORRADOR (Icono Candado / Color Oscuro) --}}
                                        <button type="submit" class="btn btn-sm btn-outline-secondary" style="color: #6610f2; border-color: #6610f2;" title="Pasar a Borrador en WP">
                                            <i class="fas fa-lock"></i>
                                        </button>
                                    @else
                                        {{-- Botón para PUBLICAR (Icono Mundo / Color Morado) --}}
                                        <button type="submit" class="btn btn-sm btn-outline-secondary" style="color: #6f42c1; border-color: #6f42c1;" title="Publicar en WP">
                                            <i class="fas fa-globe"></i>
                                        </button>
                                    @endif
                                </form>
                            @endif

                            {{-- 4. Sincronizar DESDE WP (Tu código) --}}
                            @if(auth()->id() == $esp->id_usuario && !empty($esp->wp_id))
                                <a href="{{ route('espacios-naturales.sync_from_wp', ['id' => $esp->wp_id]) }}" 
                                class="btn btn-sm ml-1 btn-outline-primary" 
                                title="Sincronizar desde WP">
                                    <i class="fas fa-sync-alt"></i>
                                </a>
                            @else
                                <button class="btn btn-sm btn-outline-secondary ml-1" title="Sincronizar mis datos desde WP (Solo el responsable)" disabled>
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            @endif

                            {{-- 5. Sincronizar HACIA WP (Solo Admin) (Tu código) --}}
                            @if(auth()->user()->isAdmin())
                                <a href="{{ route('espacios-naturales.sync_to_wp', ['id' => $esp->id]) }}" 
                                class="btn btn-sm ml-1 {{ $esp->wp_status === 'No creado' ? 'btn-outline-success' : 'btn-outline-warning' }}" 
                                title="{{ $esp->wp_status === 'No creado' ? 'Crear en WP' : 'Actualizar en WP' }}">
                                    <i class="fab fa-wordpress"></i>
                                    <i class="fas {{ $esp->wp_status === 'No creado' ? 'fa-plus' : 'fa-sync-alt' }} fa-xs"></i>
                                </a>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop

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

    $(document).ready(function() {
        $('#espacios-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