@extends('layouts.dashboardnew')

@section('content')


@php
    $totalDirectos  = count($referidosDirectos);
    $totalActivos   = collect($referidosDirectos)->where('status', '!=', '0')->count();
    $totalInactivos = collect($referidosDirectos)->where('status', '0')->count();

    $esBinaria = isset($settingEstructura) && $settingEstructura->tipoestructura == 'binaria';
    $totalIzq  = $esBinaria ? collect($referidosDirectos)->where('ladomatriz', 'izquierdo')->count() : 0;
    $totalDer  = $esBinaria ? collect($referidosDirectos)->where('ladomatriz', 'derecho')->count() : 0;
@endphp

<div class="row g-3 mb-4">

    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-info-subtle text-info-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-users fs-5"></i>
                    </div>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Total directos</p>
                <h3 class="fw-bold mb-0">{{ number_format($totalDirectos) }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-success-subtle text-success-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-user-check fs-5"></i>
                    </div>
                    @if($totalDirectos > 0)
                    <span class="badge rounded-pill bg-success-subtle text-success-emphasis fw-semibold">
                        {{ round(($totalActivos / $totalDirectos) * 100) }}%
                    </span>
                    @endif
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Activos</p>
                <h3 class="fw-bold mb-0">{{ number_format($totalActivos) }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-warning-subtle text-warning-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-user-slash fs-5"></i>
                    </div>
                    @if($totalDirectos > 0)
                    <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis fw-semibold">
                        {{ round(($totalInactivos / $totalDirectos) * 100) }}%
                    </span>
                    @endif
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Inactivos</p>
                <h3 class="fw-bold mb-0">{{ number_format($totalInactivos) }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                @if($esBinaria)
                    {{-- Estructura binaria: muestra balance izquierdo/derecho --}}
                    <p class="text-muted text-uppercase small fw-semibold mb-2" style="letter-spacing:.5px;">Balance binaria</p>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted"><i class="fa-solid fa-arrow-left me-1"></i> Izquierdo</small>
                        <span class="fw-bold">{{ $totalIzq }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted"><i class="fa-solid fa-arrow-right me-1"></i> Derecho</small>
                        <span class="fw-bold">{{ $totalDer }}</span>
                    </div>
                    <div class="progress" style="height:6px;">
                        @php $pctIzq = $totalDirectos > 0 ? ($totalIzq / $totalDirectos) * 100 : 0; @endphp
                        <div class="progress-bar bg-info" style="width:{{ $pctIzq }}%;"></div>
                        <div class="progress-bar bg-warning" style="width:{{ 100 - $pctIzq }}%;"></div>
                    </div>
                @else
                    {{-- Estructura no binaria: muestra último referido --}}
                    @php
                        $ultimo = collect($referidosDirectos)->sortByDesc('created_at')->first();
                    @endphp
                    <div class="d-flex align-items-start justify-content-between mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis rounded-3" style="width:48px;height:48px;">
                            <i class="fa-solid fa-user-plus fs-5"></i>
                        </div>
                    </div>
                    <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Último referido</p>
                    @if($ultimo)
                        <h6 class="fw-bold mb-0 text-truncate">{{ $ultimo->display_name }}</h6>
                        <small class="text-muted">
                            {{ \Carbon\Carbon::parse($ultimo->created_at)->diffForHumans() }}
                        </small>
                    @else
                        <h6 class="text-muted mb-0">—</h6>
                    @endif
                @endif
            </div>
        </div>
    </div>

</div>



{{-- ===================== HEADER + BOTÓN FILTROS (solo admin) ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
    <div class="card-body p-4 bg-primary bg-gradient text-white position-relative">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 d-inline-flex align-items-center justify-content-center border border-light border-opacity-25"
                     style="width:52px;height:52px;">
                    <i class="fa-solid fa-users-line fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Registros directos</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Lista, control y estado de los usuarios registrados directamente bajo tu red.
                    </p>
                </div>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-2 align-self-start align-self-md-center">
                <span class="badge bg-white text-primary rounded-pill fw-semibold px-3 py-2 align-self-start">
                    <i class="fa-solid fa-user-plus me-1"></i> {{ $totalDirectos }} directos
                </span>
                
                <button class="btn bg-white fw-semibold rounded-pill px-3 py-1 text-primary shadow-sm align-self-start"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#filtroIdPanel"
                            aria-expanded="false"
                            aria-controls="filtroIdPanel">
                        <i class="fa-solid fa-filter me-1"></i> Filtro
                        <i class="fa-solid fa-chevron-down ms-1 small"></i>
                </button>
                
            </div>
        </div>
    </div>
</div>


{{-- ===================== PANEL COLAPSABLE DE FILTRO ===================== --}}
<div class="collapse mb-3" id="filtroIdPanel">
    @include('usuario.componentes.filtrounificado', ['ruta' => 'buscardirectos', 'tipo1' => '1'])
</div>



<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-table-list text-info me-1"></i> Listado de directos
                </h5>
                <p class="text-muted small mb-0">Personas que se han registrado bajo tu enlace</p>
            </div>
            <span class="badge bg-info-subtle text-info-emphasis rounded-pill px-3 py-2 fw-semibold">
                {{ $totalDirectos }} {{ $totalDirectos == 1 ? 'referido' : 'referidos' }}
            </span>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle zero-configuration mb-0">
                <thead>
                    <tr class="text-uppercase small text-muted" style="letter-spacing:.5px;">
                        <th class="border-0 ps-3">ID</th>
                        <th class="border-0">Usuario</th>
                        <th class="border-0">Correo</th>
                        <th class="border-0 text-center">Estado</th>
                        <th class="border-0 text-center">Ingreso</th>
                        @if($esBinaria)
                        <th class="border-0 text-center pe-3">Lado</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach ($referidosDirectos as $referido)
                    @php
                        $iniciales = strtoupper(substr($referido->display_name ?? '?', 0, 2));
                    @endphp
                    <tr>
                        <td class="ps-3">
                            <code class="bg-light rounded-2 px-2 py-1 small text-info-emphasis">#{{ $referido->ID }}</code>
                        </td>

                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle bg-info-subtle text-info-emphasis d-inline-flex align-items-center justify-content-center fw-bold flex-shrink-0" style="width:38px;height:38px;font-size:.8rem;">
                                    {{ $iniciales }}
                                </div>
                                <p class="mb-0 fw-semibold">{{ $referido->display_name }}</p>
                            </div>
                        </td>

                        <td>
                            <small class="text-muted">
                                <i class="fa-regular fa-envelope me-1"></i>{{ $referido->user_email }}
                            </small>
                        </td>

                        <td class="text-center">
                            @if ($referido->status == '0')
                                <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-circle-pause me-1"></i> Inactivo
                                </span>
                            @else
                                <span class="badge bg-success-subtle text-success-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-circle-check me-1"></i> Activo
                                </span>
                            @endif
                        </td>

                        <td class="text-center">
                            <small class="text-muted">
                                <i class="fa-regular fa-calendar me-1"></i>
                                {{ \Carbon\Carbon::parse($referido->created_at)->format('d/m/Y') }}
                            </small>
                        </td>

                        @if($esBinaria)
                        <td class="text-center pe-3">
                            @if($referido->ladomatriz == 'izquierdo')
                                <span class="badge bg-info-subtle text-info-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-arrow-left me-1"></i> Izquierdo
                                </span>
                            @elseif($referido->ladomatriz == 'derecho')
                                <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-arrow-right me-1"></i> Derecho
                                </span>
                            @else
                                <span class="text-muted small">{{ $referido->ladomatriz ?: '—' }}</span>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
</div>

@endsection

@include('usuario.componentes.scripBotones')