@extends('layouts.app')

@section('title', 'Detalle de Unidad')
@section('header', 'Detalle de Unidad')

@section('content')

<div class="card">
    <div class="card-body">

        {{-- Header con navegación --}}
        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <h5 class="mb-1 fw-semibold">{{ $projectName }}</h5>
                <p class="text-muted mb-1">
                    <i class="fas fa-cubes me-1"></i>
                    {{ $unitDescription }}
                </p>
                <p class="text-muted mb-0 small">
                    <i class="fas fa-hashtag me-1"></i>
                    ID Unidad Interno: {{ $unitId }}
                </p>
            </div>
            
            <div>
                <a href="javascript:history.back()" class="btn btn-outline-dark btn-sm me-2">
                    <i class="fas fa-arrow-left me-1"></i>
                    Volver
                </a>
                <a href="{{ route('projects.index') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-home me-1"></i>
                    Proyectos
                </a>
            </div>
        </div>

        {{-- Loader --}}
        <div id="loader" class="text-center py-5">
            <div class="spinner-border carza-spinner"></div>
            <p class="mt-3 text-muted">Cargando información de la unidad...</p>
        </div>

        {{-- Contenedor de detalles --}}
        <div id="detailsContainer" style="display: none;">
            <div id="errorContainer"></div>
            
            {{-- Información General --}}
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            <h6 class="card-title fw-semibold mb-3">
                                <i class="fas fa-info-circle me-2 text-primary"></i>
                                Información General
                            </h6>
                            <div class="row" id="generalInfo"></div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Campos específicos según tipo de unidad --}}
            <div class="row" id="specificFields"></div>

            {{-- Información de Inventario --}}
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            <h6 class="card-title fw-semibold mb-3">
                                <i class="fas fa-box me-2 text-primary"></i>
                                Información de Inventario
                            </h6>
                            <div class="row" id="inventoryInfo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const unitId = {{ $unitId }};
    
    if (!unitId) {
        showError('ID de unidad no válido');
        return;
    }

   // Recuperar datos del sessionStorage
    const storedData = sessionStorage.getItem('unitDetail_' + unitId);

    if (!storedData) {
        showError('No se encontraron datos para esta unidad. Por favor, vuelve a la lista e intenta de nuevo.', true);
        return;
    }

    try {
        // storedData ya es un string JSON válido
        const unitData = JSON.parse(storedData);
        
        // Ahora unitData tiene TODOS los campos originales
        console.log('Datos de la unidad:', unitData);
        
        renderUnitDetails(unitData);
        $('#loader').hide();
        $('#detailsContainer').show();
        
    } catch (e) {
        console.error('Error parsing unit data:', e);
        console.log('Raw stored data:', storedData);
        showError('Error al procesar los datos de la unidad');
    }

    function renderUnitDetails(data) {
        // data.original contiene TODOS los campos originales de la API
        const originalData = data.original || data; // Fallback por si acaso
        
        // Determinar tipo basado en los campos de originalData
        const unitType = determineUnitType(originalData);
        
        // Renderizar con originalData
        renderGeneralInfo(originalData);
        renderSpecificFields(originalData, unitType);
        renderInventoryInfo(originalData);
    }

    function determineUnitType(data) {
        if (data.departamento !== undefined) return 'departamento';
        if (data.local !== undefined) return 'local';
        if (data.manzana !== undefined && data.lote !== undefined) return 'terreno';
        
        // Por el tipo de inventario
        const tipoInv = data.inventario?.tipo_inventario?.opcion || '';
        if (tipoInv.includes('Bodega')) return 'bodega';
        if (tipoInv.includes('Cajon') || tipoInv.includes('Cajones')) return 'cajon';
        if (tipoInv.includes('Departamento')) return 'departamento';
        if (tipoInv.includes('Local')) return 'local';
        if (tipoInv.includes('Terreno')) return 'terreno';
        
        return 'generic';
    }

    function renderGeneralInfo(data) {
        let html = '';
        
        html += createInfoCard('Unidad', data.unidad || 'N/A', 'col-md-3');
        html += createInfoCard('Estatus', getStatusBadge(data.estatus), 'col-md-3');
        html += createInfoCard('Precio Lista', formatCurrency(data.precio_lista), 'col-md-3');
        
        if (data.nivel) {
            html += createInfoCard('Nivel', data.nivel, 'col-md-3');
        }
        
        $('#generalInfo').html(html);
    }

    function renderSpecificFields(data, unitType) {
        let html = '<div class="col-md-12"><div class="card bg-light border-0"><div class="card-body">';
        
        switch(unitType) {
            case 'departamento':
                html += renderDepartamentoFields(data);
                break;
            case 'local':
                html += renderLocalFields(data);
                break;
            case 'terreno':
                html += renderTerrenoFields(data);
                break;
            case 'bodega':
                html += renderBodegaFields(data);
                break;
            case 'cajon':
                html += renderCajonFields(data);
                break;
            default:
                html += renderGenericFields(data);
        }
        
        html += '</div></div></div>';
        $('#specificFields').html(html);
    }

    function renderDepartamentoFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-building me-2 text-primary"></i>Detalles del Departamento</h6><div class="row">';
        
        const fields = [
            { label: 'Departamento', value: data.departamento },
            { label: 'Tipo', value: data.tipo },
            { label: 'Programa', value: data.programa },
            { label: 'Área Interior', value: data.area_interior ? data.area_interior + ' m²' : null },
            { label: 'Área Balcón', value: data.area_balcon ? data.area_balcon + ' m²' : null },
            { label: 'Área Terraza', value: data.area_terraza ? data.area_terraza + ' m²' : null },
            { label: 'Área Total', value: data.area_total ? data.area_total + ' m²' : null }
        ];
        
        fields.forEach(field => {
            if (field.value) {
                html += createInfoCard(field.label, field.value, 'col-md-3');
            }
        });
        
        html += '</div>';
        return html;
    }

    function renderLocalFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-store me-2 text-primary"></i>Detalles del Local Comercial</h6><div class="row">';
        
        const fields = [
            { label: 'Local', value: data.local },
            { label: 'Nivel', value: data.nivel },
            { label: 'Prototipo', value: data.prototipo },
            { label: 'Total m²', value: data.total_m2 ? data.total_m2 + ' m²' : null }
        ];
        
        fields.forEach(field => {
            if (field.value) {
                html += createInfoCard(field.label, field.value, 'col-md-3');
            }
        });
        
        html += '</div>';
        return html;
    }

    function renderTerrenoFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-mountain me-2 text-primary"></i>Detalles del Terreno</h6><div class="row">';
        
        const fields = [
            { label: 'Manzana', value: data.manzana },
            { label: 'Lote', value: data.lote },
            { label: 'Área Total', value: data.area_total ? data.area_total + ' m²' : null },
            { label: 'Frente', value: data.frente },
            { label: 'Fondo', value: data.fondo },
            { label: 'Vista', value: data.vista },
            { label: 'Tipo', value: data.tipo },
            { label: 'Pendiente', value: data.de_pendiente }
        ];
        
        fields.forEach(field => {
            if (field.value) {
                html += createInfoCard(field.label, field.value, 'col-md-3');
            }
        });
        
        html += '</div>';
        return html;
    }

    function renderBodegaFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-warehouse me-2 text-primary"></i>Detalles de la Bodega</h6><div class="row">';
        
        if (data.area_total) {
            html += createInfoCard('Área Total', data.area_total + ' m²', 'col-md-4');
        }
        
        html += '</div>';
        return html;
    }

    function renderCajonFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-parking me-2 text-primary"></i>Detalles del Cajón</h6><div class="row">';
        html += '<p class="text-muted mb-0">No hay información adicional disponible para este tipo de unidad.</p>';
        html += '</div>';
        return html;
    }

    function renderGenericFields(data) {
        let html = '<h6 class="card-title fw-semibold mb-3"><i class="fas fa-tag me-2 text-primary"></i>Información Adicional</h6><div class="row">';
        
        // Excluir campos comunes que ya mostramos
        const excludeFields = ['id', 'unidad_id', 'proyecto_id', 'nivel', 'precio_lista', 'unidad', 'estatus', 'inventario'];
        let hasFields = false;
        
        for (let key in data) {
            if (!excludeFields.includes(key) && 
                typeof data[key] !== 'object' && 
                data[key] !== null && 
                data[key] !== '') {
                hasFields = true;
                html += createInfoCard(
                    key.replace(/_/g, ' ').toUpperCase(),
                    data[key],
                    'col-md-3'
                );
            }
        }
        
        if (!hasFields) {
            html += '<p class="text-muted mb-0">No hay información adicional disponible.</p>';
        }
        
        html += '</div>';
        return html;
    }

    function renderInventoryInfo(data) {
        let html = '<div class="row">';
        
        html += createInfoCard('Tipo Inventario', data.inventario?.descripcion || 'N/A', 'col-md-4');
        html += createInfoCard('Opción', data.inventario?.tipo_inventario?.opcion || 'N/A', 'col-md-4');
        
        if (data.inventario?.tipo_inventario?.capi_clave) {
            html += createInfoCard('Clave CAPI', data.inventario.tipo_inventario.capi_clave, 'col-md-4');
        }
        
        html += '</div>';
        $('#inventoryInfo').html(html);
    }

    function createInfoCard(label, value, colClass = 'col-md-4') {
        return `
            <div class="${colClass} mb-3">
                <div class="p-3 bg-white rounded border">
                    <small class="text-muted d-block mb-1">${label}</small>
                    <span class="fw-semibold">${value}</span>
                </div>
            </div>
        `;
    }

    function getStatusBadge(status) {
        if (!status) return '<span class="badge bg-secondary">N/A</span>';
        
        let badgeClass = 'bg-secondary';
        if (status.id === 1) badgeClass = 'bg-success';
        else if (status.id === 4) badgeClass = 'bg-danger';
        
        if(status.nombre)
            return `<span class="badge ${badgeClass}">${status.nombre || 'Desconocido'}</span>`;
        else
            return `<span class="badge ${badgeClass}">${status.estatus || 'Desconocido'}</span>`;
    }

    function formatCurrency(value) {
        if (!value || value === 0) return 'N/A';
        return new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN',
            minimumFractionDigits: 2
        }).format(value);
    }

    function showError(message, showRetry = false) {
        $('#loader').hide();
        
        let retryButton = showRetry ? 
            `<button class="btn btn-danger btn-sm ms-3" onclick="history.back()">
                <i class="fas fa-arrow-left"></i> Volver
            </button>` : '';
        
        $('#errorContainer').html(`
            <div class="alert alert-carza-danger alert-dismissible fade show" role="alert">
                <strong><i class="fas fa-exclamation-triangle"></i> Error:</strong> ${message}
                ${retryButton}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        $('#detailsContainer').show();
    }
});
</script>
@endpush