{{-- ARCHIVO: resources/views/admin/unidades/index.blade.php --}}
{{-- VERSIÓN: 1.0 - COMPLETA 100% FUNCIONAL --}}
{{-- DESCRIPCIÓN: Lista de unidades del condominio con filtros avanzados --}}
{{-- 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">Unidades</li>
@endsection

@push('styles')
<style>
    .unidad-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;
        overflow: hidden;
        border-left: 4px solid;
    }
    
    .unidad-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .unidad-card.ocupado {
        border-left-color: #28a745;
    }
    
    .unidad-card.vacio {
        border-left-color: #6c757d;
    }
    
    .unidad-card.airbnb {
        border-left-color: #17a2b8;
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .deuda-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .area-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
        margin-right: 0.2rem;
    }
    
    .progress-thin {
        height: 6px;
    }
    
    .filter-active {
        background-color: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
    }
    
    .action-dropdown {
        min-width: 180px;
    }
    
    .unidad-code {
        font-family: 'Courier New', monospace;
        background: #f8f9fa;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-weight: bold;
    }
</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 las unidades del condominio</p>
        </div>
        <div>
            <a href="{{ route('admin.unidades.create') }}" class="btn btn-primary">
                <i class="fas fa-plus-circle me-2"></i>Nueva Unidad
            </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-home 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 Unidades</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['ocupadas'] ?? 0 }}</h5>
                            <small class="text-muted">Ocupadas</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-door-closed fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['vacias'] ?? 0 }}</h5>
                            <small class="text-muted">Vacías</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-bed fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['airbnb'] ?? 0 }}</h5>
                            <small class="text-muted">Airbnb</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-user-tie fa-lg"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $stats['con_propietario'] ?? 0 }}</h5>
                            <small class="text-muted">Con Propietario</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['con_pagos_pendientes'] ?? 0 }}</h5>
                            <small class="text-muted">Con Deuda</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filtros Avanzados --}}
    <div class="card shadow mb-4">
        <div class="card-header bg-light py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-filter me-2"></i>Filtros Avanzados
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.unidades.index') }}" class="row g-3">
                {{-- Búsqueda general --}}
                <div class="col-md-3">
                    <label class="form-label small fw-bold">Búsqueda</label>
                    <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="Código, descripción, propietario..." value="{{ request('search') }}">
                    </div>
                </div>

                {{-- Filtro por bloque --}}
                <div class="col-md-2">
                    <label class="form-label small fw-bold">Bloque</label>
                    <select name="bloque_id" class="form-select">
                        <option value="todos" {{ request('bloque_id') == 'todos' ? 'selected' : '' }}>Todos los bloques</option>
                        @foreach($bloques as $bloque)
                            <option value="{{ $bloque->id }}" {{ request('bloque_id') == $bloque->id ? 'selected' : '' }}>
                                {{ $bloque->nombre }} ({{ $bloque->codigo }})
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Filtro por estado --}}
                <div class="col-md-2">
                    <label class="form-label small fw-bold">Estado</label>
                    <select name="estado" class="form-select">
                        <option value="todos" {{ request('estado') == 'todos' ? 'selected' : '' }}>Todos los estados</option>
                        <option value="ocupado" {{ request('estado') == 'ocupado' ? 'selected' : '' }}>Ocupado</option>
                        <option value="vacio" {{ request('estado') == 'vacio' ? 'selected' : '' }}>Vacío</option>
                        <option value="airbnb" {{ request('estado') == 'airbnb' ? 'selected' : '' }}>Airbnb</option>
                    </select>
                </div>

                {{-- Filtro por tipo --}}
                <div class="col-md-2">
                    <label class="form-label small fw-bold">Tipo</label>
                    <select name="tipo" class="form-select">
                        <option value="todos" {{ request('tipo') == 'todos' ? 'selected' : '' }}>Todos los tipos</option>
                        <option value="departamento" {{ request('tipo') == 'departamento' ? 'selected' : '' }}>Departamento</option>
                        <option value="cochera" {{ request('tipo') == 'cochera' ? 'selected' : '' }}>Cochera</option>
                        <option value="deposito" {{ request('tipo') == 'deposito' ? 'selected' : '' }}>Depósito</option>
                        <option value="combinado" {{ request('tipo') == 'combinado' ? 'selected' : '' }}>Combinado</option>
                    </select>
                </div>

                {{-- Filtro por propietario --}}
                <div class="col-md-2">
                    <label class="form-label small fw-bold">Propietario</label>
                    <select name="propietario_id" class="form-select">
                        <option value="todos" {{ request('propietario_id') == 'todos' ? 'selected' : '' }}>Todos los propietarios</option>
                        @foreach($propietarios as $propietario)
                            <option value="{{ $propietario->id }}" {{ request('propietario_id') == $propietario->id ? 'selected' : '' }}>
                                {{ $propietario->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Botones de acción --}}
                <div class="col-md-1 d-flex align-items-end">
                    <div class="d-grid gap-2 w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter me-1"></i> Filtrar
                        </button>
                        @if(request()->hasAny(['search', 'bloque_id', 'estado', 'tipo', 'propietario_id', 'sort_by', 'sort_order']))
                            <a href="{{ route('admin.unidades.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i> Limpiar
                            </a>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Lista de Unidades --}}
    <div class="card shadow">
        <div class="card-header bg-light py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list me-2"></i>Lista de Unidades ({{ $unidades->total() }})
            </h6>
            <div class="d-flex align-items-center">
                <span class="me-3 small text-muted">Ordenar por:</span>
                <div class="btn-group btn-group-sm" role="group">
                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'codigo', 'sort_order' => request('sort_order', 'asc') == 'asc' ? 'desc' : 'asc']) }}" 
                       class="btn btn-outline-secondary {{ request('sort_by', 'codigo') == 'codigo' ? 'filter-active' : '' }}">
                        Código
                        @if(request('sort_by', 'codigo') == 'codigo')
                            <i class="fas fa-sort-{{ request('sort_order', 'asc') == 'asc' ? 'up' : 'down' }} ms-1"></i>
                        @endif
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'created_at', 'sort_order' => request('sort_order', 'asc') == 'asc' ? 'desc' : 'asc']) }}" 
                       class="btn btn-outline-secondary {{ request('sort_by') == 'created_at' ? 'filter-active' : '' }}">
                        Fecha
                        @if(request('sort_by') == 'created_at')
                            <i class="fas fa-sort-{{ request('sort_order', 'asc') == 'asc' ? 'up' : 'down' }} ms-1"></i>
                        @endif
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'estado', 'sort_order' => request('sort_order', 'asc') == 'asc' ? 'desc' : 'asc']) }}" 
                       class="btn btn-outline-secondary {{ request('sort_by') == 'estado' ? 'filter-active' : '' }}">
                        Estado
                        @if(request('sort_by') == 'estado')
                            <i class="fas fa-sort-{{ request('sort_order', 'asc') == 'asc' ? 'up' : 'down' }} ms-1"></i>
                        @endif
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            @if($unidades->isEmpty())
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-home fa-4x text-muted"></i>
                    </div>
                    <h5 class="text-muted mb-3">No se encontraron unidades</h5>
                    <p class="text-muted mb-4">No hay unidades que coincidan con los filtros aplicados.</p>
                    <a href="{{ route('admin.unidades.index') }}" class="btn btn-outline-primary">
                        <i class="fas fa-redo me-2"></i>Ver todas las unidades
                    </a>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="120">Código</th>
                                <th>Descripción</th>
                                <th>Bloque</th>
                                <th>Tipo</th>
                                <th>Estado</th>
                                <th>Propietario</th>
                                <th>Área (m²)</th>
                                <th>Pagos Pendientes</th>
                                <th width="100" class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($unidades as $unidad)
                                <tr class="align-middle">
                                    <td>
                                        <span class="unidad-code">{{ $unidad->codigo }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                @if($unidad->tipo == 'departamento')
                                                    <i class="fas fa-building text-primary me-2"></i>
                                                @elseif($unidad->tipo == 'cochera')
                                                    <i class="fas fa-car text-info me-2"></i>
                                                @elseif($unidad->tipo == 'deposito')
                                                    <i class="fas fa-box text-warning me-2"></i>
                                                @else
                                                    <i class="fas fa-layer-group text-success me-2"></i>
                                                @endif
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="fw-bold">{{ Str::limit($unidad->descripcion, 30) ?: 'Sin descripción' }}</div>
                                                <small class="text-muted">
                                                    @if($unidad->habitaciones)
                                                        <i class="fas fa-bed me-1"></i>{{ $unidad->habitaciones }} hab.
                                                    @endif
                                                </small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($unidad->bloque)
                                            <span class="badge bg-light text-dark">
                                                <i class="fas fa-building me-1"></i>{{ $unidad->bloque->nombre }}
                                            </span>
                                        @else
                                            <span class="text-muted">Sin bloque</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $tipoColors = [
                                                'departamento' => 'primary',
                                                'cochera' => 'info',
                                                'deposito' => 'warning',
                                                'combinado' => 'success'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $tipoColors[$unidad->tipo] ?? 'secondary' }}">
                                            {{ ucfirst($unidad->tipo) }}
                                        </span>
                                    </td>
                                    <td>
                                        @php
                                            $estadoColors = [
                                                'ocupado' => 'success',
                                                'vacio' => 'secondary',
                                                'airbnb' => 'info'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $estadoColors[$unidad->estado] ?? 'secondary' }} status-badge">
                                            {{ ucfirst($unidad->estado) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($unidad->propietario)
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <i class="fas fa-user-circle text-primary me-2"></i>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <div class="small">{{ $unidad->propietario->name }}</div>
                                                    <div class="text-muted smaller">{{ $unidad->propietario->email }}</div>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">Sin propietario</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-2">{{ $unidad->area ?? '0' }}</div>
                                            @if($unidad->area_cochera || $unidad->area_terraza || $unidad->area_jardin || $unidad->area_deposito)
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" type="button" data-bs-toggle="dropdown">
                                                        <i class="fas fa-plus-circle"></i>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        @if($unidad->area_cochera)
                                                            <div class="dropdown-item small">
                                                                <i class="fas fa-car text-info me-1"></i> Cochera: {{ $unidad->area_cochera }}m²
                                                            </div>
                                                        @endif
                                                        @if($unidad->area_terraza)
                                                            <div class="dropdown-item small">
                                                                <i class="fas fa-sun text-warning me-1"></i> Terraza: {{ $unidad->area_terraza }}m²
                                                            </div>
                                                        @endif
                                                        @if($unidad->area_jardin)
                                                            <div class="dropdown-item small">
                                                                <i class="fas fa-leaf text-success me-1"></i> Jardín: {{ $unidad->area_jardin }}m²
                                                            </div>
                                                        @endif
                                                        @if($unidad->area_deposito)
                                                            <div class="dropdown-item small">
                                                                <i class="fas fa-box text-secondary me-1"></i> Depósito: {{ $unidad->area_deposito }}m²
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        @if($unidad->pagos_pendientes_count > 0)
                                            <div class="d-flex align-items-center">
                                                <span class="badge bg-danger deuda-badge me-2">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>{{ $unidad->pagos_pendientes_count }}
                                                </span>
                                                <small class="text-danger">Pendiente</small>
                                            </div>
                                        @else
                                            <span class="badge bg-success deuda-badge">
                                                <i class="fas fa-check-circle me-1"></i>Al día
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group">
                                            <a href="{{ route('admin.unidades.show', $unidad->id) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Ver detalles"
                                               data-bs-toggle="tooltip">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.unidades.edit', $unidad->id) }}" 
                                               class="btn btn-sm btn-outline-warning"
                                               title="Editar"
                                               data-bs-toggle="tooltip">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                                                    data-bs-toggle="dropdown"
                                                    title="Más opciones">
                                                <span class="visually-hidden">Más opciones</span>
                                            </button>
                                            <div class="dropdown-menu action-dropdown">
                                                <a class="dropdown-item" href="{{ route('admin.unidades.pagos', $unidad->id) }}">
                                                    <i class="fas fa-money-bill-wave me-2"></i>Ver Pagos
                                                </a>
                                                <a class="dropdown-item" href="{{ route('admin.unidades.multas', $unidad->id) }}">
                                                    <i class="fas fa-exclamation-triangle me-2"></i>Ver Multas
                                                </a>
                                                <a class="dropdown-item" href="{{ route('admin.unidades.reservas', $unidad->id) }}">
                                                    <i class="fas fa-calendar-check me-2"></i>Ver Reservas
                                                </a>
                                                <a class="dropdown-item" href="{{ route('admin.unidades.inquilinos', $unidad->id) }}">
                                                    <i class="fas fa-user-friends me-2"></i>Ver Inquilinos
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item text-danger" 
                                                   href="#" 
                                                   onclick="confirmDelete('{{ $unidad->id }}', '¿Eliminar unidad {{ $unidad->codigo }}?')">
                                                    <i class="fas fa-trash me-2"></i>Eliminar
                                                </a>
                                                <form id="delete-form-{{ $unidad->id }}" 
                                                      action="{{ route('admin.unidades.destroy', $unidad->id) }}" 
                                                      method="POST" class="d-none">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Paginación --}}
                @if($unidades->hasPages())
                    <div class="card-footer border-top-0 bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="small text-muted">
                                Mostrando {{ $unidades->firstItem() }} a {{ $unidades->lastItem() }} de {{ $unidades->total() }} unidades
                            </div>
                            <div>
                                {{ $unidades->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
function confirmDelete(id, message) {
    if (confirm(message)) {
        document.getElementById('delete-form-' + id).submit();
    }
}

// Inicializar tooltips
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush