@php
    use Illuminate\Support\Str;
@endphp

<x-app-layout>
    <div class="card border-0 shadow bg-success text-white mb-4">
        <div class="card-body py-4 px-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 fw-bold mb-2 text-white">Disponibilidad de ambientes</h1>
                    <p class="mb-0 text-white-50">
                        Consulta capacidad, estado y observaciones con filtros rápidos.
                    </p>
                </div>
                <div class="col-md-4 text-center d-none d-md-block">
                    <i class="bi bi-building display-3 text-white opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <section class="mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <div class="row g-3 align-items-center">
                    <div class="col-12 col-lg">
                        <h5 class="fw-bold mb-1">Listado de ambientes</h5>
                        <p class="text-muted small mb-0">Filtra por disponibilidad y busca por nombre.</p>
                    </div>
                    <div class="col-12 col-lg-auto">
                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ route('ambientes.index', ['estado' => 'disponible']) }}"
                               class="btn {{ $estadoActivo === 'disponible' ? 'btn-success text-white shadow-sm' : 'btn-outline-success' }}">
                                Ambientes disponibles
                            </a>
                            <a href="{{ route('ambientes.index', ['estado' => 'no-disponible']) }}"
                               class="btn {{ $estadoActivo === 'no-disponible' ? 'btn-danger text-white shadow-sm' : 'btn-outline-danger' }}">
                                Ambientes no disponibles
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body pt-3">
                @if($estadoActivo === 'disponible')
                    <form method="GET" action="{{ route('ambientes.index') }}" class="mb-3">
                        <input type="hidden" name="estado" value="disponible">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-8 col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input
                                        type="text"
                                        id="search-disponible"
                                        name="q"
                                        class="form-control"
                                        placeholder="Buscar ambientes disponibles..."
                                        value="{{ request()->get('q') }}">
                                    
                                </div>
                            </div>
                        </div>
                    </form>
                @endif

                @if($estadoActivo === 'no-disponible')
                    <form method="GET" action="{{ route('ambientes.index') }}" class="mb-3">
                        <input type="hidden" name="estado" value="no-disponible">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-8 col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input
                                        type="text"
                                        id="search-no-disponible"
                                        name="q"
                                        class="form-control"
                                        placeholder="Buscar ambientes no disponibles..."
                                        value="{{ request()->get('q') }}">
                                    <button class="btn btn-outline-secondary" type="submit">Buscar</button>
                                </div>
                            </div>
                        </div>
                    </form>
                @endif

                @if ($mostrarContenido)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light text-uppercase small text-muted">
                                <tr>
                                    <th>Ambiente</th>
                                    <th>Capacidad</th>
                                    <th>Foto</th>
                                    <th>Observaciones</th>
                                    <th>Tipo</th>
                                    @if($estadoActivo === 'no-disponible')
                                        <th>Instructor</th>
                                    @endif
                                    <th class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody id="ambientes-table-body">
                                @forelse ($ambientes as $ambiente)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <span class="badge bg-light text-dark border rounded-3 px-3 py-2 text-uppercase fw-semibold">
                                                    {{ Str::limit($ambiente->Ambien_Nombre, 2, '') }}
                                                </span>
                                                <div>
                                                    <div class="fw-semibold">{{ $ambiente->Ambien_Nombre }}</div>
                                                    <small class="text-muted">ID: {{ $ambiente->id }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $ambiente->Ambien_Capacidad }}</td>
                                        <td class="text-muted small">{{ $ambiente->Ambien_Foto }}</td>
                                        <td>{{ $ambiente->Ambien_Observaciones }}</td>
                                        <td>{{ $ambiente->Tipo_A_id }}</td>
                                        @if($estadoActivo === 'no-disponible')
                                            <td>{{ $ambiente->Instruc_Nombres ?? '' }} {{ $ambiente->Instruc_Apellidos ?? '' }}</td>
                                        @endif
                                        <td class="text-center">
                                            <span class="badge rounded-pill {{ !$ambiente->Ambien_Estado ? 'text-bg-success' : 'text-bg-danger' }}">
                                                {{ !$ambiente->Ambien_Estado ? 'Disponible' : 'No disponible' }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ $estadoActivo === 'no-disponible' ? 7 : 6 }}" class="text-center text-muted py-4">
                                            No hay ambientes {{ $estadoActivo === 'disponible' ? 'disponibles' : 'no disponibles' }} para mostrar.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div id="pagination" class="mt-3">
                        {{ $ambientes->links('pagination::bootstrap-5') }}
                    </div>
                @else
                    <div class="py-5"></div>
                @endif
            </div>
        </div>
    </section>

    <x-slot name="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let timeout;

                function searchAmbientes(estado, q) {
                    fetch(`{{ route('ambientes.index') }}?estado=${estado}&q=${encodeURIComponent(q)}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        updateTable(data.ambientes, estado);
                    })
                    .catch(error => console.error('Error:', error));
                }

                function updateTable(ambientes, estado) {
                    const tbody = document.getElementById('ambientes-table-body');
                    const pagination = document.getElementById('pagination');
                    const isNoDisponible = estado === 'no-disponible';
                    const colspan = isNoDisponible ? 7 : 6;

                    if (ambientes.length === 0) {
                        tbody.innerHTML = `<tr><td colspan="${colspan}" class="text-center text-muted py-4">No hay ambientes ${estado === 'disponible' ? 'disponibles' : 'no disponibles'} para mostrar.</td></tr>`;
                        pagination.style.display = 'none';
                    } else {
                        tbody.innerHTML = ambientes.map(ambiente => `
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <span class="badge bg-light text-dark border rounded-3 px-3 py-2 text-uppercase fw-semibold">
                                            ${ambiente.Ambien_Nombre.substring(0, 2)}
                                        </span>
                                        <div>
                                            <div class="fw-semibold">${ambiente.Ambien_Nombre}</div>
                                            <small class="text-muted">ID: ${ambiente.id}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>${ambiente.Ambien_Capacidad}</td>
                                <td class="text-muted small">${ambiente.Ambien_Foto}</td>
                                <td>${ambiente.Ambien_Observaciones}</td>
                                <td>${ambiente.Tipo_A_id}</td>
                                ${isNoDisponible ? `<td>${ambiente.Instruc_Nombres || ''} ${ambiente.Instruc_Apellidos || ''}</td>` : ''}
                                <td class="text-center">
                                    <span class="badge rounded-pill ${!ambiente.Ambien_Estado ? 'text-bg-success' : 'text-bg-danger'}">
                                        ${!ambiente.Ambien_Estado ? 'Disponible' : 'No disponible'}
                                    </span>
                                </td>
                            </tr>
                        `).join('');
                        pagination.style.display = 'none';
                    }
                }

                const searchDisponible = document.getElementById('search-disponible');
                if (searchDisponible) {
                    searchDisponible.addEventListener('input', function() {
                        clearTimeout(timeout);
                        timeout = setTimeout(() => {
                            searchAmbientes('disponible', this.value);
                        }, 300);
                    });
                }

                const searchNoDisponible = document.getElementById('search-no-disponible');
                if (searchNoDisponible) {
                    searchNoDisponible.addEventListener('input', function() {
                        clearTimeout(timeout);
                        timeout = setTimeout(() => {
                            searchAmbientes('no-disponible', this.value);
                        }, 300);
                    });
                }
            });
        </script>
    </x-slot>
</x-app-layout>