@extends('adminlte::page')

@section('title', 'Experiencias')

@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' => ['Experiencias' => '#']])
        </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-map-marked-alt mr-2 text-primary"></i>Experiencias</h1>
        </div>
            <div class="col-auto">
            @can('super-admin-only')
            <a href="{{ route('experiencias.sync_all_from_wp') }}" 
                class="btn btn-danger shadow-sm" id="btn-sync-all"
                onclick="return confirm('Esta acción traerá TODAS las experiencias desde WordPress. ¿Deseas continuar?')">
                <i class="fab fa-wordpress mr-1"></i> 
                <i class="fas fa-sync-alt mr-1"></i> 
                Sincronización Masiva desde WP
            </a>
            @endcan
            @if(auth()->user()->isAdmin() || (auth()->user()->role === 'editor' && (auth()->user()->experiencias_planes ?? false)))
                <a href="{{ route('experiencias.create') }}" class="btn btn-success shadow-sm">
                    <i class="fas fa-plus-circle mr-1"></i> Añadir Experiencia
                </a>
            @endif
        </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 Experiencias...</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="experiencias-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th>ID</th>
                    <th>Nombre / Tipo</th>
                    <th>Detalles / Proveedor</th>
                    <th>Ubicación</th>
                    @if(auth()->user()->isAdmin())
                        <th>Responsable</th>
                    @endif
                    <th>Panel</th>
                    <th>Estado WP</th>
                    <th class="text-center no-export">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($experiencias as $exp)
                <tr class="{{ !$exp->active ? 'bg-light-red text-muted' : '' }}">
                    <td>{{ $exp->id }}</td>
                    <td>
                        @if(!empty($exp->link))
                            <a href="{{ $exp->link }}" target="_blank">
                                <strong>{!! $exp->name !!}</strong> 
                                <i class="fas fa-external-link-alt fa-xs text-muted ml-1"></i>
                            </a>
                        @else
                            <strong>{!! $exp->name !!}</strong>
                        @endif
                        <br>
                        <small class="text-muted">
                            @php
                                $tipoIds = array_filter(explode(',', $exp->tipo_de_experiencia));
                                $nombresTipos = \App\Models\Taxonomy::whereIn('wp_id', $tipoIds)->pluck('name')->implode(', ');
                            @endphp
                            {{ $nombresTipos ?: 'Sin tipo definido' }}
                        </small>
                    </td>

                    <td>
                        <small>
                            <strong>Precio:</strong> {{ $exp->precio ?: 'N/A' }}<br>
                            <strong>Proveedor:</strong> <span class="text-primary">{{ $exp->proveedor ?: 'No definido' }}</span><br>
                            <strong>Temporada:</strong> 
                            @php
                                $tempIds = array_filter(explode(',', $exp->temporada));
                                $temporadas = \App\Models\Taxonomy::whereIn('wp_id', $tempIds)->pluck('name')->implode(', ');
                            @endphp
                            <span>{{ $temporadas ?: 'N/A' }}</span>
                        </small>
                    </td>

                    <td>
                        @php
                            $puebloId = head(explode(',', $exp->pueblo));
                            if (!$puebloId)
                                $puebloId = head(explode(',', $exp->zona));;
                            $nombrePueblo = \App\Models\Taxonomy::where('wp_id', $puebloId)->value('name');
                        @endphp
                        @if($nombrePueblo)
                            <span class="badge badge-light border"><i class="fas fa-map-marker-alt text-danger mr-1"></i> {{ $nombrePueblo }}</span>
                        @else
                            <span class="text-muted small">Sin ubicación</span>
                        @endif
                    </td>
                    @if(auth()->user()->isAdmin())
                        <td>{{ $exp->usuario->name ?? 'Sin asignar' }}</td>
                    @endif
                    <td>
                        <span class="badge {{ $exp->panel_status == 'Sin cambios' ? 'badge-light' : 'badge-danger' }}">
                            {{ $exp->panel_status }}
                        </span>
                        @if($exp->panel_info)
                            <br><small class="d-block mt-1 text-muted">{{ $exp->panel_info }}</small>
                        @endif
                    </td>
                    <td>
                        @switch($exp->wp_status)
                            @case('Publicado')
                                <span class="badge badge-success">Publicado</span>
                                @break
                            @case('Borrador')
                                <span class="badge badge-warning text-white">Borrador</span>
                                @break
                            @default
                                <span class="badge badge-secondary p-2">No creado</span>
                        @endswitch
                    </td>
                    <td class="text-center">
                        <div class="btn-group">
                            {{-- 1. Botón Editar --}}
                            @if(auth()->user()->isAdmin() || auth()->id() == $exp->id_usuario)
                                <a href="{{ route('experiencias.edit', $exp->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('experiencias.toggle', $exp->id) }}" method="POST" class="d-inline ml-1">
                                    @csrf
                                    @method('PATCH')
                                    @if($exp->active)
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar" onclick="return confirm('¿Desactivar esta experiencia?')">
                                            <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 esta experiencia?')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    @endif
                                </form>
                            @endif

                            {{-- 3. NUEVO: Cambio de Estado en WordPress (Solo ADMIN) --}}
                            @if(auth()->user()->isAdmin() && !empty($exp->wp_id))
                                <form action="{{ route('experiencias.toggle_wp', $exp->id) }}" method="POST" class="d-inline ml-1 sync-form">
                                    @csrf
                                    @if($exp->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() == $exp->id_usuario && !empty($exp->wp_id))
                                <a href="{{ route('experiencias.sync_from_wp', ['id' => $exp->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('experiencias.sync_to_wp', ['id' => $exp->id]) }}" 
                                class="btn btn-sm ml-1 {{ $exp->wp_status === 'No creado' ? 'btn-outline-success' : 'btn-outline-warning' }}" 
                                title="{{ $exp->wp_status === 'No creado' ? 'Crear en WP' : 'Actualizar en WP' }}">
                                    <i class="fab fa-wordpress"></i>
                                    <i class="fas {{ $exp->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() {
        $('#experiencias-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