@extends('layouts.app')

@section('title', 'Gestión de Edificios y Pisos')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold mb-0">Gestión de Edificios y Pisos</h2>
        <p class="text-muted small mb-0">Administra la estructura física del campus y sus niveles asignados.</p>
    </div>
    <div>
        <button class="btn btn-outline-primary rounded-pill me-2 shadow-sm" onclick="abrirModalPiso()">
            <i class="bi bi-layers me-1"></i> Nuevo Piso
        </button>
        <button class="btn btn-primary rounded-pill px-4 shadow-sm" onclick="abrirModalEdificio()" style="background-color: #435EBE;">
            <i class="bi bi-building-add me-1"></i> Nuevo Edificio
        </button>
    </div>
</div>

@if($edificios->isEmpty())
    <div class="card card-custom border-0 shadow-sm p-5 text-center bg-white">
        <i class="bi bi-building fs-1 text-muted mb-2"></i>
        <h5 class="fw-bold text-secondary">No hay edificios registrados</h5>
        <p class="text-muted small mb-3">Comienza registrando un edificio para estructurar los pisos campus.</p>
        <div>
            <button class="btn btn-primary rounded-pill px-4" onclick="abrirModalEdificio()">
                <i class="bi bi-plus-lg me-1"></i> Registrar Primer Edificio
            </button>
        </div>
    </div>
@else
    <!-- Navegación por Pestañas (Edificios) -->
    <ul class="nav nav-pills mb-3 gap-2" id="pills-tab" role="tablist">
        @foreach($edificios as $index => $edificio)
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold px-4 py-2 rounded-pill {{ $index === 0 ? 'active' : '' }}" 
                        id="pills-edificio-tab-{{ $edificio->id }}" 
                        data-bs-toggle="pill" 
                        data-bs-target="#pills-edificio-{{ $edificio->id }}" 
                        type="button" 
                        role="tab">
                    <i class="bi bi-building me-2"></i>{{ $edificio->nombre }}
                    <span class="badge bg-white text-dark ms-2 shadow-sm">{{ $edificio->pisos->count() }} pisos</span>
                </button>
            </li>
        @endforeach
    </ul>

    <!-- Contenido de cada Pestaña -->
    <div class="tab-content" id="pills-tabContent">
        @foreach($edificios as $index => $edificio)
            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" 
                 id="pills-edificio-{{ $edificio->id }}" 
                 role="tabpanel">
                
                <div class="card card-custom border-0 shadow-sm bg-white p-4 mb-4">
                    <!-- Cabecera e Información del Edificio -->
                    <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
                        <div>
                            <h4 class="fw-bold text-dark mb-1">{{ $edificio->nombre }}</h4>
                            <p class="text-muted small mb-0">{{ $edificio->descripcion ?: 'Sin descripción registrada.' }}</p>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill px-3" onclick="abrirModalPiso({{ $edificio->id }})">
                                <i class="bi bi-plus-circle me-1"></i> Agregar Piso a este Edificio
                            </button>
                            <button class="btn btn-sm btn-outline-danger rounded-pill px-3" onclick="confirmarEliminarEdificio({{ $edificio->id }}, '{{ $edificio->nombre }}')">
                                <i class="bi bi-trash me-1"></i> Eliminar Edificio
                            </button>
                        </div>
                    </div>

                    <!-- Tabla de Pisos del Edificio Específico -->
                    <h6 class="fw-bold text-secondary mb-3"><i class="bi bi-layers me-2 text-primary"></i>Pisos y Niveles Asociados</h6>
                    
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3">Nombre del Piso</th>
                                    <th>Nivel / Número</th>
                                    <th>Salas Totales</th>
                                    <th class="text-end pe-3">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($edificio->pisos->sortBy('numero') as $piso)
                                    <tr id="fila-piso-{{ $piso->id }}">
                                        <td class="ps-3 fw-semibold text-dark">
                                            <i class="bi bi-arrow-return-right text-muted me-2"></i>{{ $piso->nombre }}
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">Nivel {{ $piso->numero }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info bg-opacity-10 text-info border border-info px-2 py-1">
                                                {{ $piso->espacios_count ?? $piso->espacios()->count() }} salas
                                            </span>
                                        </td>
                                        <td class="text-end pe-3">
                                            <button class="btn btn-sm btn-outline-danger" onclick="confirmarEliminarPiso({{ $piso->id }}, '{{ $piso->nombre }}')" title="Eliminar Piso">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4 text-muted fst-italic">
                                            No hay pisos registrados en este edificio.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif

<!-- Modal Nuevo Edificio -->
<div class="modal fade" id="modalEdificio" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Registrar Nuevo Edificio</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEdificio">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="nombre_edificio" class="form-label fw-semibold">Nombre del Edificio <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nombre_edificio" name="nombre" placeholder="Ej: Edificio Nuevo / Edificio Antiguo" required>
                    </div>
                    <div class="mb-3">
                        <label for="descripcion" class="form-label fw-semibold">Descripción / Observaciones</label>
                        <textarea class="form-control" name="descripcion" rows="2" placeholder="Ej: Sector facultativo principal"></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary px-4" style="background-color: #435EBE;">Guardar Edificio</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Nuevo Piso -->
<div class="modal fade" id="modalPiso" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Registrar Nuevo Piso</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formPiso">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="piso_edificio_id" class="form-label fw-semibold">Edificio Perteneciente <span class="text-danger">*</span></label>
                        <select class="form-select" id="piso_edificio_id" name="edificio_id" required>
                            @foreach($edificios as $edificio)
                                <option value="{{ $edificio->id }}">{{ $edificio->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="piso_nombre" class="form-label fw-semibold">Nombre del Piso <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="piso_nombre" name="nombre" placeholder="Ej: Piso 1 / Subterráneo" required>
                    </div>
                    <div class="mb-3">
                        <label for="piso_numero" class="form-label fw-semibold">Número de Piso / Nivel <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="piso_numero" name="numero" value="1" required>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary px-4" style="background-color: #435EBE;">Guardar Piso</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const modalEdificio = new bootstrap.Modal(document.getElementById('modalEdificio'));
    const modalPiso = new bootstrap.Modal(document.getElementById('modalPiso'));

    function abrirModalEdificio() { modalEdificio.show(); }
    
    function abrirModalPiso(edificioId = null) { 
        if (edificioId) {
            $('#piso_edificio_id').val(edificioId);
        }
        modalPiso.show(); 
    }

    $('#formEdificio').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route("edificios.store") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                modalEdificio.hide();
                Swal.fire('¡Éxito!', res.message, 'success').then(() => location.reload());
            },
            error: function(xhr) {
                let mensajeError = xhr.responseJSON?.message || 'Error al guardar edificio.';
                if (xhr.responseJSON?.errors) {
                    mensajeError = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                }
                Swal.fire({
                    title: 'Error al Guardar',
                    html: mensajeError,
                    icon: 'error'
                });
            }
        });
    });

    $('#formPiso').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route("pisos.store") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                modalPiso.hide();
                Swal.fire('¡Éxito!', res.message, 'success').then(() => location.reload());
            },
            error: function(xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Error al guardar piso.', 'error');
            }
        });
    });

    function confirmarEliminarEdificio(id, nombre) {
        Swal.fire({
            title: '¿Eliminar Edificio?',
            text: `¿Deseas eliminar "${nombre}"? Se eliminarán todos sus pisos asociados.`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/edificios/${id}`,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function(res) {
                        Swal.fire('Eliminado', res.message, 'success').then(() => location.reload());
                    }
                });
            }
        });
    }

    function confirmarEliminarPiso(id, nombre) {
        Swal.fire({
            title: '¿Eliminar Piso?',
            text: `¿Deseas eliminar "${nombre}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/pisos/${id}`,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function(res) {
                        Swal.fire('Eliminado', res.message, 'success');
                        $(`#fila-piso-${id}`).remove();
                    }
                });
            }
        });
    }
</script>
@endpush