{{-- ARCHIVO: resources/views/admin/bloques/index.blade.php --}}
{{-- VERSIÓN: 1.0 - COMPLETA 100% FUNCIONAL --}}
{{-- DESCRIPCIÓN: Lista de bloques/edificios del condominio --}}
{{-- COMPATIBILIDAD: Laravel 11.47 --}}
{{-- FECHA: 2024-12-09 --}}

@extends('layouts.admin')

@section('title', $pageTitle)
@section('page-icon', $pageIcon)

@section('breadcrumb')
    @parent
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Bloques</li>
@endsection

@push('styles')
<style>
    .bloque-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;
        overflow: hidden;
        border-left: 4px solid;
    }
    
    .bloque-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .bloque-card.activo {
        border-left-color: #28a745;
    }
    
    .bloque-card.inactivo {
        border-left-color: #6c757d;
        opacity: 0.8;
    }
    
    .bloque-card.mantenimiento {
        border-left-color: #ffc107;
    }
    
    .ocupacion-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .stats-mini {
        font-size: 0.85rem;
    }
    
    .progress-thin {
        height: 6px;
    }
    
    .filter-active {
        background-color: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
    }
    
    .action-dropdown {
        min-width: 180px;
    }
</style>
@endpush

@section('content')
@if(isset($error))
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-triangle me-2"></i>
        {{ $error }}
    </div>
@else
<div class="container-fluid">
    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="{{ $pageIcon }} me-2"></i>{{ $pageTitle }}
            </h1>
            <p class="mb-0 text-muted">Gestiona los bloques/edificios del condominio</p>
        </div>
        <div>
            <a href="{{ route('admin.bloques.create') }}" class="btn btn-primary">
                <i class="fas fa-plus-circle me-2"></i>Nuevo Bloque
            </a>
        </div>
    </div>

    {{-- Stats Overview --}}
    <div class="row g-3 mb-4">
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-primary bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-primary rounded-circle p-3">
                                <i class="fas fa-layer-group fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['total'] ?? 0 }}</h5>
                            <small class="text-muted">Total Bloques</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-success bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-success rounded-circle p-3">
                                <i class="fas fa-check-circle fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['activos'] ?? 0 }}</h5>
                            <small class="text-muted">Activos</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-warning bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-warning rounded-circle p-3">
                                <i class="fas fa-tools fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['mantenimiento'] ?? 0 }}</h5>
                            <small class="text-muted">Mantenimiento</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-secondary bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-secondary rounded-circle p-3">
                                <i class="fas fa-pause-circle fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['inactivos'] ?? 0 }}</h5>
                            <small class="text-muted">Inactivos</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-info bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-info rounded-circle p-3">
                                <i class="fas fa-home fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['total_unidades'] ?? 0 }}</h5>
                            <small class="text-muted">Unidades Totales</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6">
            <div class="card border-0 bg-danger bg-opacity-10">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge bg-danger rounded-circle p-3">
                                <i class="fas fa-exclamation-triangle fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['total_unidades'] - $stats['unidades_con_bloque'] }}</h5>
                            <small class="text-muted">Sin Bloque</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters and Search --}}
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.bloques.index') }}" class="row g-3">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" 
                               name="search" 
                               class="form-control" 
                               placeholder="Buscar por nombre, código, dirección..."
                               value="{{ request('search') }}">
                    </div>
                </div>
                
                <div class="col-md-3">
                    <select name="estado" class="form-select">
                        <option value="todos" {{ request('estado') == 'todos' ? 'selected' : '' }}>Todos los estados</option>
                        <option value="activo" {{ request('estado') == 'activo' ? 'selected' : '' }}>Activo</option>
                        <option value="inactivo" {{ request('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                        <option value="mantenimiento" {{ request('estado') == 'mantenimiento' ? 'selected' : '' }}>Mantenimiento</option>
                    </select>
                </div>
                
                <div class="col-md-3">
                    <select name="sort_by" class="form-select">
                        <option value="nombre" {{ request('sort_by') == 'nombre' ? 'selected' : '' }}>Nombre</option>
                        <option value="codigo" {{ request('sort_by') == 'codigo' ? 'selected' : '' }}>Código</option>
                        <option value="estado" {{ request('estado') == 'estado' ? 'selected' : '' }}>Estado</option>
                        <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Fecha creación</option>
                    </select>
                </div>
                
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group" role="group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-filter me-2"></i>Filtrar
                            </button>
                            <a href="{{ route('admin.bloques.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Limpiar
                            </a>
                        </div>
                        
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="showInactives" name="show_inactives" {{ request('show_inactives') ? 'checked' : '' }}>
                            <label class="form-check-label" for="showInactives">
                                Mostrar inactivos
                            </label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Bloques Grid --}}
    <div class="row g-4">
        @forelse($bloques as $bloque)
        <div class="col-xl-4 col-lg-6">
            <div class="card bloque-card h-100 {{ $bloque->estado }}">
                <div class="card-body">
                    {{-- Header --}}
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0 me-3">
                            <span class="badge bg-{{ $bloque->estado == 'activo' ? 'success' : ($bloque->estado == 'mantenimiento' ? 'warning' : 'secondary') }} rounded-circle p-3">
                                <i class="fas fa-building fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h5 class="card-title mb-1">
                                        <a href="{{ route('admin.bloques.show', $bloque->id) }}" 
                                           class="text-decoration-none text-dark">
                                            {{ $bloque->nombre }}
                                        </a>
                                    </h5>
                                    <p class="card-text small text-muted mb-2">
                                        <i class="fas fa-hashtag me-1"></i>{{ $bloque->codigo }}
                                        @if($bloque->direccion)
                                            <br><i class="fas fa-map-marker-alt me-1"></i>
                                            {{ Str::limit($bloque->direccion, 40) }}
                                        @endif
                                    </p>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                            type="button" 
                                            data-bs-toggle="dropdown">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu action-dropdown">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.bloques.show', $bloque->id) }}">
                                                <i class="fas fa-eye me-2"></i>Ver detalles
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.bloques.edit', $bloque->id) }}">
                                                <i class="fas fa-edit me-2"></i>Editar
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.bloques.unidades', $bloque->id) }}">
                                                <i class="fas fa-home me-2"></i>Ver unidades
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.bloques.propietarios', $bloque->id) }}">
                                                <i class="fas fa-user-tie me-2"></i>Ver propietarios
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item text-info" href="{{ route('admin.bloques.reporte-ocupacion', $bloque->id) }}">
                                                <i class="fas fa-chart-pie me-2"></i>Reporte ocupación
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item text-warning" href="{{ route('admin.bloques.pagos-pendientes', $bloque->id) }}">
                                                <i class="fas fa-money-bill-wave me-2"></i>Pagos pendientes
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            @if($bloque->estado == 'activo')
                                            <a class="dropdown-item text-warning" href="#"
                                               onclick="changeStatus({{ $bloque->id }}, 'mantenimiento')">
                                                <i class="fas fa-tools me-2"></i>Marcar mantenimiento
                                            </a>
                                            @elseif($bloque->estado == 'mantenimiento')
                                            <a class="dropdown-item text-success" href="#"
                                               onclick="changeStatus({{ $bloque->id }}, 'activo')">
                                                <i class="fas fa-check-circle me-2"></i>Activar
                                            </a>
                                            @endif
                                        </li>
                                        <li>
                                            <form id="delete-form-{{ $bloque->id }}" 
                                                  action="{{ route('admin.bloques.destroy', $bloque->id) }}" 
                                                  method="POST" 
                                                  style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                            <a class="dropdown-item text-danger" href="#"
                                               onclick="if(confirm('¿Estás seguro de eliminar este bloque? Las unidades se quedarán sin bloque asignado.')) {
                                                        event.preventDefault();
                                                        document.getElementById('delete-form-{{ $bloque->id }}').submit();
                                                       }">
                                                <i class="fas fa-trash-alt me-2"></i>Eliminar
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Stats --}}
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <div class="text-center p-2 border rounded">
                                <div class="text-primary fw-bold">{{ $bloque->unidades_count ?? 0 }}</div>
                                <small class="text-muted">Unidades</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center p-2 border rounded">
                                <div class="text-success fw-bold">{{ $bloque->unidades_ocupadas_count ?? 0 }}</div>
                                <small class="text-muted">Ocupadas</small>
                            </div>
                        </div>
                    </div>

                    {{-- Info --}}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2 stats-mini">
                            <span class="text-muted">Pisos:</span>
                            <span class="badge bg-secondary">{{ $bloque->pisos }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2 stats-mini">
                            <span class="text-muted">Unid./piso:</span>
                            <span class="badge bg-info">{{ $bloque->unidades_por_piso }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2 stats-mini">
                            <span class="text-muted">Ascensor:</span>
                            <span class="badge bg-{{ $bloque->ascensor ? 'success' : 'secondary' }}">
                                {{ $bloque->ascensor ? 'Sí' : 'No' }}
                            </span>
                        </div>
                    </div>

                    {{-- Occupancy --}}
                    @php
                        $ocupacion = $bloque->unidades_count > 0 
                            ? round(($bloque->unidades_ocupadas_count / $bloque->unidades_count) * 100, 2)
                            : 0;
                    @endphp
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted">Ocupación:</small>
                            <small class="fw-bold">{{ $ocupacion }}%</small>
                        </div>
                        <div class="progress progress-thin">
                            <div class="progress-bar bg-{{ $ocupacion > 80 ? 'success' : ($ocupacion > 50 ? 'warning' : 'info') }}" 
                                 role="progressbar" 
                                 style="width: {{ $ocupacion }}%">
                            </div>
                        </div>
                    </div>

                    {{-- Status & Actions --}}
                    <div class="d-flex justify-content-between align-items-center border-top pt-3">
                        <span class="badge bg-{{ $bloque->estado == 'activo' ? 'success' : ($bloque->estado == 'mantenimiento' ? 'warning' : 'secondary') }} p-2">
                            {{ ucfirst($bloque->estado) }}
                        </span>
                        <div>
                            <a href="{{ route('admin.bloques.unidades', $bloque->id) }}" 
                               class="btn btn-sm btn-outline-primary me-1">
                                <i class="fas fa-home"></i>
                            </a>
                            <a href="{{ route('admin.unidades.create') }}?bloque_id={{ $bloque->id }}" 
                               class="btn btn-sm btn-success">
                                <i class="fas fa-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card text-center py-5">
                <div class="card-body">
                    <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
                    <h5 class="card-title">No hay bloques registrados</h5>
                    <p class="card-text text-muted">
                        @if(request()->has('search') || request()->has('estado'))
                            No se encontraron bloques con los filtros aplicados.
                        @else
                            No hay bloques registrados en el condominio. Los bloques te permiten organizar las unidades por edificio.
                        @endif
                    </p>
                    <a href="{{ route('admin.bloques.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus-circle me-2"></i>Crear primer bloque
                    </a>
                </div>
            </div>
        </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($bloques->hasPages())
    <div class="mt-4">
        {{ $bloques->withQueryString()->links() }}
    </div>
    @endif
</div>
@endif

{{-- Change Status Modal --}}
<div class="modal fade" id="changeStatusModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-exchange-alt me-2"></i>Cambiar Estado
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="changeStatusForm" method="POST">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <input type="hidden" name="bloque_id" id="modalBloqueId">
                    <input type="hidden" name="new_status" id="modalNewStatus">
                    
                    <div class="mb-3">
                        <p id="statusMessage">¿Estás seguro de cambiar el estado de este bloque?</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observaciones (opcional)</label>
                        <textarea name="observaciones" class="form-control" rows="3" 
                                  placeholder="Motivo del cambio de estado..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Confirmar</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Change block status
function changeStatus(bloqueId, newStatus) {
    document.getElementById('modalBloqueId').value = bloqueId;
    document.getElementById('modalNewStatus').value = newStatus;
    
    const statusText = {
        'activo': 'Activo',
        'inactivo': 'Inactivo',
        'mantenimiento': 'Mantenimiento'
    };
    
    document.getElementById('statusMessage').textContent = 
        `¿Estás seguro de cambiar el estado del bloque a "${statusText[newStatus]}"?`;
    
    const modal = new bootstrap.Modal(document.getElementById('changeStatusModal'));
    modal.show();
}

// Form submission for status change
document.getElementById('changeStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const bloqueId = document.getElementById('modalBloqueId').value;
    const formData = new FormData(this);
    
    fetch(`/admin/bloques/${bloqueId}/status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error cambiando estado: ' + data.message);
        }
    })
    .catch(error => {
        alert('Error cambiando estado');
        console.error(error);
    });
});

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltips.forEach(tooltip => new bootstrap.Tooltip(tooltip));
});
</script>
@endpush