<?php $__env->startSection('title', 'Resumen de Situación'); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-chart-pie text-primary me-2"></i>Resumen de Situación
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Consolidado de lotes por urbanización y distrito — <span class="fw-semibold"><?php echo e($fechaHoy); ?></span>
                </h2>
            </div>
            <div class="mt-3 mt-sm-0 d-flex gap-2">
                <a href="<?php echo e(route('reportes.resumen-situacion.pdf')); ?>" target="_blank" class="btn btn-sm btn-alt-danger">
                    <i class="fa fa-file-pdf me-1"></i> Exportar PDF
                </a>
                <a href="<?php echo e(route('dashboard')); ?>" class="btn btn-sm btn-alt-secondary">
                    <i class="fa fa-home"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    
    <?php
        $tg = $totalesGlobales;
        $estados = [
            ['key' => 'disp', 'label' => 'Disponibles',   'color' => 'text-success', 'icon' => 'fa-check-circle'],
            ['key' => 'proc', 'label' => 'En Proceso',    'color' => 'text-warning', 'icon' => 'fa-spinner'],
            ['key' => 'vend', 'label' => 'Vendidos',      'color' => 'text-primary', 'icon' => 'fa-home'],
            ['key' => 'tram', 'label' => 'En Trámite',    'color' => 'text-pulse',   'icon' => 'fa-file-signature'],
            ['key' => 'cons', 'label' => 'Consolidados',  'color' => 'text-info',    'icon' => 'fa-certificate'],
        ];
    ?>

    <div class="row items-push">
        <?php $__currentLoopData = $estados; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="block block-rounded block-link-shadow h-100 mb-0">
                <div class="block-content block-content-full text-center">
                    <div class="fs-sm fw-semibold text-uppercase text-muted mb-2"><?php echo e($e['label']); ?></div>
                    <div class="fs-2 fw-bold <?php echo e($e['color']); ?>"><?php echo e(number_format($tg[$e['key']])); ?></div>
                    <?php if($tg['total'] > 0): ?>
                    <div class="fs-xs fw-medium text-muted">
                        <?php echo e(round($tg[$e['key']] * 100 / $tg['total'], 1)); ?>% del total
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="block block-rounded block-link-shadow h-100 mb-0 bg-primary-darker">
                <div class="block-content block-content-full text-center">
                    <div class="fs-sm fw-semibold text-uppercase text-white-75 mb-2">Total Lotes</div>
                    <div class="fs-2 fw-bold text-white"><?php echo e(number_format($tg['total'])); ?></div>
                    <div class="fs-xs fw-medium text-white-50">Inventario Global</div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="block block-rounded block-bordered">
        <div class="block-header block-header-default">
            <h3 class="block-title fs-sm text-uppercase">
                <i class="fa fa-chart-bar me-1 text-muted"></i> Distribución por Urbanización
            </h3>
        </div>
        <div class="block-content block-content-full">
            <div style="height: 300px;">
                <canvas id="graficoPrincipal"></canvas>
            </div>
        </div>
    </div>

    
    <h2 class="content-heading">Desglose Detallado</h2>

    <?php $__currentLoopData = $urbanizaciones; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $urb): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="block block-rounded block-bordered mb-4">
        <div class="block-header block-header-default border-start border-4 border-primary">
            <h3 class="block-title fw-bold">
                <?php echo e($urb['urb']); ?>

                <span class="fs-xs fw-medium text-muted ms-2">Total: <?php echo e(number_format($urb['totales']['total'])); ?></span>
            </h3>
            <div class="block-options">
                <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
            </div>
        </div>
        
        <div class="block-content p-0">
            
            <div class="progress rounded-0" style="height: 8px;">
                <?php $__currentLoopData = $estados; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php 
                        $pct = $urb['totales']['total'] > 0 ? round($urb['totales'][$e['key']] * 100 / $urb['totales']['total'], 1) : 0;
                        // Mapeo de colores ChartJS a clases CSS de OneUI
                        $bgClass = [
                            'disp' => 'bg-success',
                            'proc' => 'bg-warning',
                            'vend' => 'bg-primary',
                            'tram' => 'bg-pulse',
                            'cons' => 'bg-info'
                        ][$e['key']];
                    ?>
                    <?php if($pct > 0): ?>
                    <div class="progress-bar <?php echo e($bgClass); ?>" role="progressbar" style="width: <?php echo e($pct); ?>%"></div>
                    <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="table-responsive">
                <table class="table table-sm table-vcenter table-hover mb-0">
                    <thead class="bg-body-extra-light fs-xs fw-bold text-uppercase">
                        <tr>
                            <th class="ps-3" style="width: 35%;">Distrito</th>
                            <th class="text-center text-success">Disponible</th>
                            <th class="text-center text-warning">En Proceso</th>
                            <th class="text-center text-primary">Vendido</th>
                            <th class="text-center text-pulse">En Trámite</th>
                            <th class="text-center text-info">Consolidado</th>
                            <th class="text-center fw-bold bg-body-light">Total</th>
                        </tr>
                    </thead>
                    <tbody class="fs-sm">
                        <?php $__currentLoopData = $urb['distritos']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dis): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td class="ps-3 fw-medium"><?php echo e($dis['nombre']); ?></td>
                            <td class="text-center"><?php echo e($dis['disp'] ?: '—'); ?></td>
                            <td class="text-center"><?php echo e($dis['proc'] ?: '—'); ?></td>
                            <td class="text-center"><?php echo e($dis['vend'] ?: '—'); ?></td>
                            <td class="text-center"><?php echo e($dis['tram'] ?: '—'); ?></td>
                            <td class="text-center"><?php echo e($dis['cons'] ?: '—'); ?></td>
                            <td class="text-center fw-bold bg-body-light"><?php echo e($dis['total']); ?></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                    <tfoot class="table-light fs-sm fw-bold border-top">
                        <tr>
                            <td class="ps-3">SUBTOTAL</td>
                            <td class="text-center"><?php echo e($urb['totales']['disp']); ?></td>
                            <td class="text-center"><?php echo e($urb['totales']['proc']); ?></td>
                            <td class="text-center"><?php echo e($urb['totales']['vend']); ?></td>
                            <td class="text-center"><?php echo e($urb['totales']['tram']); ?></td>
                            <td class="text-center"><?php echo e($urb['totales']['cons']); ?></td>
                            <td class="text-center bg-body-dark text-primary"><?php echo e($urb['totales']['total']); ?></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    
    <div class="block block-rounded bg-primary-dark">
        <div class="block-content block-content-full text-center">
            <p class="text-white fs-sm fw-bold text-uppercase mb-0">
                Gran Total Consolidado: <span class="fs-lg ms-2"><?php echo e(number_format($tg['total'])); ?> lotes registrados</span>
            </p>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
// Mantengo tu lógica de ChartJS pero ajusto los colores para que coincidan con OneUI
const urbLabels = <?php echo json_encode(collect($urbanizaciones)->pluck('urb'), 15, 512) ?>;
const rawData = <?php echo json_encode($urbanizaciones, 15, 512) ?>;

// Colores estándar de OneUI (Success, Warning, Primary, Pulse, Info)
const coloresUI = {
    disp: '#abe37d', // Success light
    proc: '#f3b760', // Warning light
    vend: '#82b54b', // Primary light (o ajustado a tu tema)
    tram: '#e04f1a', // Pulse / Danger
    cons: '#4c78dd', // Info
};

new Chart(document.getElementById('graficoPrincipal'), {
    type: 'bar',
    data: {
        labels: urbLabels,
        datasets: [
            { label: 'Disponibles',   data: rawData.map(u => u.totales.disp), backgroundColor: '#82b54b' },
            { label: 'En Proceso',    data: rawData.map(u => u.totales.proc), backgroundColor: '#ffb119' },
            { label: 'Vendidos',      data: rawData.map(u => u.totales.vend), backgroundColor: '#3b82f6' },
            { label: 'En Trámite',    data: rawData.map(u => u.totales.tram), backgroundColor: '#a855f7' },
            { label: 'Consolidados',  data: rawData.map(u => u.totales.cons), backgroundColor: '#06b6d4' },
        ]
    },
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { boxWidth: 15, font: { size: 12, weight: '600' } } }
        },
        scales: {
            x: { stacked: true },
            y: { stacked: true, beginAtZero: true }
        }
    }
});
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/proyect-laravel/cosmos-app/resources/views/reportes/resumen_situacion.blade.php ENDPATH**/ ?>