@extends('adminlte::page')

@section('title', 'Alojamientos')

@section('css')
    <style>
        /* Capa de bloqueo para la sincronización */
        #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') {{-- Asumo que tienes un componente para errores/éxito --}}

    <div class="row">
        <div class="col-12">
            @include('components.breadcrumbs', ['items' => ['Alojamientos' => '#']])
        </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-hotel mr-2 text-primary"></i>Alojamientos</h1>
        </div>
        <div class="col-auto">
            @can('super-admin-only')
            <a href="{{ route('alojamientos.sync_all_from_wp') }}" 
                class="btn btn-danger shadow-sm" id="btn-sync-all"
                onclick="return confirm('Esta acción traerá TODOS los alojamientos desde WordPress. Los datos locales podrían ser sobrescritos. ¿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
            <a href="{{ route('alojamientos.create') }}" class="btn btn-success shadow-sm">
                <i class="fas fa-plus-circle mr-1"></i> Añadir Alojamiento
            </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>
    <p>Por favor, no cierres la ventana. Esto puede tardar unos minutos debido a las imágenes y documentos.</p>
</div>
<div class="card shadow-sm border-0">
    <div class="card-body">
        <table id="alojamientos-table" class="table table-vcenter table-bordered table-striped responsive nowrap" style="width:100%">
            <thead class="bg-light">
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Tipo</th>
                    <th>Zona / Pueblo</th>
                    <th>Email</th>
                    <th>Teléfono</th>
                    <th>Capacidad</th>
                    <th>Precio (€)</th>
                    @if(auth()->user()->isAdmin())
                        <th>Responsable</th>
                    @endif
                    <th>Estado en Panel</th>
                    <th>Estado en WP</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($alojamientos as $aloja)
                <tr class="{{ !$aloja->active ? 'bg-light-red text-muted' : '' }}">
                    <td>{{ $aloja->id }}</td>
                    <td>
                    @if(!empty($aloja->link))
                        <a href="{{ $aloja->link }}" target="_blank" title="Visitar sitio web">
                            <strong>{!!  $aloja->name !!}</strong> 
                            <i class="fas fa-external-link-alt fa-xs text-muted ml-1"></i>
                        </a>
                    @else
                        <strong>{!!  $aloja->name !!}</strong>
                    @endif
                    </td>
                    {{-- Lógica de Taxonomías (Tipo) --}}
                    <td>
                        @if($aloja->tipo)
                            @foreach(explode(',', $aloja->tipo) as $tipoId)
                                @php $nombreTipo = \App\Models\Taxonomy::where('wp_id', $tipoId)->where('resource_type', 'tipo-alojamiento')->value('name'); @endphp
                                @if($nombreTipo)
                                    <span class="badge badge-info">{{ $nombreTipo }}</span>
                                @endif
                            @endforeach
                        @endif
                    </td>

                    {{-- Lógica de Ubicación --}}
                    <td>
                        @php
                            $nombreZona = \App\Models\Taxonomy::where('wp_id', $aloja->zona_recurso_pueblo)->value('name');
                            $nombrePueblo = \App\Models\Taxonomy::where('wp_id', $aloja->pueblo)->value('name');
                        @endphp
                        @if($nombreZona)
                            <span>{{ $nombreZona }}</span>
                            @if($nombrePueblo) <small class="text-muted mx-1">/</small> <span class="text-secondary">{{ $nombrePueblo }}</span> @endif
                        @else
                            <span class="text-muted small">Sin ubicación</span>
                        @endif
                    </td>
                    <td><a href="mailto:{{ $aloja->email }}">{{ $aloja->email ?: '-' }}</a></td>
                    <td>{{ $aloja->telefono ?: '-' }}</td>
                    <td>{{ $aloja->capacidad }}</td>
                    <td>{{ !empty($aloja->precio) ? number_format((float)$aloja->precio, 2, ',', '.') . ' €' : '-' }}</td>
                    @if(auth()->user()->isAdmin())
                        <td>{{ $aloja->usuario->name ?? 'Sin asignar' }}</td>
                    @endif
                    {{-- Estado WP con los badges que configuramos --}}
                    <td>
                        <span class="badge {{ $aloja->panel_status == 'Sin cambios' ? 'badge-light' : 'badge-danger' }}">
                            <i class="fas {{ $aloja->panel_status == 'Sin cambios' ? 'fa-check' : 'fa-exclamation-triangle' }}"></i>
                            {{ $aloja->panel_status }}
                        </span>
                        @if($aloja->panel_info)
                            <br><small class="d-block mt-1 text-muted">{{ $aloja->panel_info }}</small>
                        @endif
                    </td>
                    <td>
                        @switch($aloja->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() == $aloja->id_usuario)
                                <a href="{{ route('alojamientos.edit', $aloja->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('alojamientos.toggle', $aloja->id) }}" method="POST" class="d-inline ml-1">
                                    @csrf
                                    @method('PATCH')
                                    @if($aloja->active)
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar" onclick="return confirm('¿Desactivar este alojamiento?')">
                                            <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 alojamiento?')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    @endif
                                </form>
                            @endif

                            {{-- 3. NUEVO: Cambio de Estado en WordPress (Solo ADMIN) --}}
                            @if(auth()->user()->isAdmin() && !empty($aloja->wp_id))
                                <form action="{{ route('alojamientos.toggle_wp', $aloja->id) }}" method="POST" class="d-inline ml-1 sync-form">
                                    @csrf
                                    @if($aloja->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() == $aloja->id_usuario && !empty($aloja->wp_id))
                                <a href="{{ route('alojamientos.sync_from_wp', ['id' => $aloja->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('alojamientos.sync_to_wp', ['id' => $aloja->id]) }}" 
                                class="btn btn-sm ml-1 {{ $aloja->wp_status === 'No creado' ? 'btn-outline-success' : 'btn-outline-warning' }}" 
                                title="{{ $aloja->wp_status === 'No creado' ? 'Crear en WP' : 'Actualizar en WP' }}">
                                    <i class="fab fa-wordpress"></i>
                                    <i class="fas {{ $aloja->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(e) {
        // Mostramos el overlay
        $('#loading-overlay').fadeIn(300);
        
        // El enlace seguirá su curso natural hacia el controlador de Laravel
    });

    $('.btn-sync-individual').on('click', function(e) {
        let status = $(this).data('status');
        
        if (status === 'Con cambios') {
            if (!confirm('¡Atención! Este alojamiento tiene cambios locales. Si sincronizas con WordPress, perderás las modificaciones hechas en este panel. ¿Deseas continuar?')) {
                e.preventDefault();
            }
        }
    });

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