@extends('layouts.dashboardnew')

@section('content')


<div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
    <div class="card-body p-4 bg-info-subtle">
        <div class="row align-items-center g-3">
            <div class="col-md-7">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-3 shadow-sm" style="width:56px;height:56px;">
                        <i class="fa-solid fa-wallet text-info-emphasis fs-4"></i>
                    </div>
                    <div>
                        <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Saldo total en billetera</p>
                        <h2 class="fw-bold text-info-emphasis mb-0">
                            @if ($datos['moneda']->mostrar_a_d)
                               {{$datos['moneda']->simbolo}} {{ number_format($datos['total_billetera'], 2) }}
                            @else
                               {{ number_format($datos['total_billetera'], 2) }} {{$datos['moneda']->simbolo}}
                            @endif
                        </h2>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="bg-white rounded-3 p-3 d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted small mb-0">Usuarios con saldo</p>
                        <h5 class="fw-bold mb-0">{{ number_format($datos['cantidad_billetera']) }}</h5>
                    </div>
                    <i class="fa-solid fa-users text-info fs-3"></i>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="d-flex align-items-center gap-2 mb-3">
    <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2">
        <i class="fa-solid fa-chart-pie"></i>
    </span>
    <h5 class="fw-bold mb-0">Comisiones</h5>
</div>

@php
    // Calcular % cambio comisiones (actual vs anterior)
    $comAnt = floatval($datos['comisiones_mes_anterior'] ?? 0);
    $comAct = floatval($datos['comisiones_mes_actual'] ?? 0);
    $comPct = $comAnt > 0 ? round((($comAct - $comAnt) / $comAnt) * 100, 1) : ($comAct > 0 ? 100 : 0);

    // Calcular % cambio retiros (actual vs anterior)
    $retAnt = floatval($datos['pagos_mes_anterior'] ?? 0);
    $retAct = floatval($datos['pagos_mes_actual'] ?? 0);
    $retPct = $retAnt > 0 ? round((($retAct - $retAnt) / $retAnt) * 100, 1) : ($retAct > 0 ? 100 : 0);
@endphp

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

    {{-- Comisiones mes anterior --}}
    <div class="col-xl-4 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-secondary-subtle text-secondary-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-regular fa-calendar fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-light text-secondary fw-semibold">
                        Mes anterior
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Comisiones</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                       {{$datos['moneda']->simbolo}} {{ number_format($comAnt, 2) }}
                    @else
                       {{ number_format($comAnt, 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>

    {{-- Comisiones mes actual --}}
    <div class="col-xl-4 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-chart-pie fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $comPct >= 0 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }} fw-semibold">
                        <i class="fa-solid {{ $comPct >= 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $comPct }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Comisiones del mes</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                        {{$datos['moneda']->simbolo}} {{ number_format($comAct, 2) }}
                    @else
                        {{ number_format($comAct, 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>

    {{-- Comisiones de hoy --}}
    <div class="col-xl-4 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-bolt fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-info-subtle text-info-emphasis fw-semibold">
                        <i class="fa-regular fa-clock me-1"></i> Hoy
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Comisiones de hoy</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                        {{$datos['moneda']->simbolo}} {{ number_format($datos['comisiones_hoy'], 2) }}
                    @else
                        {{ number_format($datos['comisiones_hoy'], 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>
</div>


<div class="d-flex align-items-center gap-2 mb-3">
    <span class="badge bg-warning-subtle text-warning-emphasis rounded-3 p-2">
        <i class="fa-solid fa-money-bill-trend-up"></i>
    </span>
    <h5 class="fw-bold mb-0">Retiros</h5>
</div>

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

    {{-- Retiros mes anterior --}}
    <div class="col-xl-4 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-secondary-subtle text-secondary-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-coins fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-light text-secondary fw-semibold">
                        Mes anterior
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Retiros</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                       {{$datos['moneda']->simbolo}} {{ number_format($retAnt, 2) }}
                    @else
                       {{ number_format($retAnt, 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>

    {{-- Retiros mes actual --}}
    <div class="col-xl-4 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-money-bill-trend-up fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $retPct >= 0 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }} fw-semibold">
                        <i class="fa-solid {{ $retPct >= 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $retPct }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Retiros del mes</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                        {{$datos['moneda']->simbolo}} {{ number_format($retAct, 2) }}
                    @else
                        {{ number_format($retAct, 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>

    {{-- Retiros de hoy --}}
    <div class="col-xl-4 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-money-bills fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-info-subtle text-info-emphasis fw-semibold">
                        <i class="fa-regular fa-clock me-1"></i> Hoy
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Retiros de hoy</p>
                <h3 class="fw-bold mb-0">
                    @if ($datos['moneda']->mostrar_a_d)
                        {{$datos['moneda']->simbolo}} {{ number_format($datos['pagos_hoy'], 2) }}
                    @else
                        {{ number_format($datos['pagos_hoy'], 2) }} {{$datos['moneda']->simbolo}}
                    @endif
                </h3>
            </div>
        </div>
    </div>
</div>



<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 mb-3">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-chart-line text-info me-1"></i> Comisiones y retiros anuales
                </h5>
                <p class="text-muted small mb-0">Evolución mensual durante el año seleccionado</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <label class="small text-muted fw-semibold mb-0 me-1">Año:</label>
                <select id="yearFilter" class="form-select form-select-sm" style="width:auto;">
                    @for($i=0; $i<5; $i++)
                        <option value="{{ (date('Y') - $i) }}">{{ (date('Y') - $i) }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <div id="grafica" data-url="{{ route('chart.panel.comisiones-grafica') }}" style="min-height:420px;"></div>
    </div>
</div>



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

    {{-- Histórico de retiros --}}
    <div class="col-xl-5">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">

                <div class="d-flex justify-content-between align-items-start mb-4">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-clock-rotate-left text-info me-1"></i> Histórico de retiros
                        </h5>
                        <p class="text-muted small mb-0">Estado y montos por categoría</p>
                    </div>
                </div>

                @php
                    // Calcular el monto total para sacar % reales
                    $totalRetiros = floatval($datos['total_aprobados'] ?? 0)
                                  + floatval($datos['total_espera'] ?? 0)
                                  + floatval($datos['total_cancelados'] ?? 0);

                    $pctAprobados  = $totalRetiros > 0 ? round((floatval($datos['total_aprobados'])  / $totalRetiros) * 100, 1) : 0;
                    $pctEspera     = $totalRetiros > 0 ? round((floatval($datos['total_espera'])     / $totalRetiros) * 100, 1) : 0;
                    $pctCancelados = $totalRetiros > 0 ? round((floatval($datos['total_cancelados']) / $totalRetiros) * 100, 1) : 0;
                @endphp

                {{-- Aprobados --}}
                <div class="mb-3 pb-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="rounded-circle bg-success-subtle text-success-emphasis d-inline-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                                <i class="fa-solid fa-circle-check"></i>
                            </span>
                            <div>
                                <p class="mb-0 fw-semibold small">Aprobados</p>
                                <small class="text-muted">{{ $datos['cantidad_aprobados'] }} retiros</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <p class="mb-0 fw-bold">
                                @if ($datos['moneda']->mostrar_a_d)
                                   {{$datos['moneda']->simbolo}} {{ number_format($datos['total_aprobados'], 2) }}
                                @else
                                   {{ number_format($datos['total_aprobados'], 2) }} {{$datos['moneda']->simbolo}}
                                @endif
                            </p>
                            <small class="text-success-emphasis fw-semibold">{{ $pctAprobados }}%</small>
                        </div>
                    </div>
                    <div class="progress" style="height:6px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width:{{ $pctAprobados }}%;"></div>
                    </div>
                </div>

                {{-- En espera --}}
                <div class="mb-3 pb-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="rounded-circle bg-warning-subtle text-warning-emphasis d-inline-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                                <i class="fa-regular fa-clock"></i>
                            </span>
                            <div>
                                <p class="mb-0 fw-semibold small">En espera</p>
                                <small class="text-muted">{{ $datos['cantidad_espera'] }} retiros</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <p class="mb-0 fw-bold">
                                @if ($datos['moneda']->mostrar_a_d)
                                   {{$datos['moneda']->simbolo}} {{ number_format($datos['total_espera'], 2) }}
                                @else
                                   {{ number_format($datos['total_espera'], 2) }} {{$datos['moneda']->simbolo}}
                                @endif
                            </p>
                            <small class="text-warning-emphasis fw-semibold">{{ $pctEspera }}%</small>
                        </div>
                    </div>
                    <div class="progress" style="height:6px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width:{{ $pctEspera }}%;"></div>
                    </div>
                </div>

                {{-- Cancelados --}}
                <div class="mb-0">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="rounded-circle bg-danger-subtle text-danger-emphasis d-inline-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                                <i class="fa-solid fa-circle-xmark"></i>
                            </span>
                            <div>
                                <p class="mb-0 fw-semibold small">Cancelados</p>
                                <small class="text-muted">{{ $datos['cantidad_cancelados'] }} retiros</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <p class="mb-0 fw-bold">
                                @if ($datos['moneda']->mostrar_a_d)
                                   {{$datos['moneda']->simbolo}} {{ number_format($datos['total_cancelados'], 2) }}
                                @else
                                   {{ number_format($datos['total_cancelados'], 2) }} {{$datos['moneda']->simbolo}}
                                @endif
                            </p>
                            <small class="text-danger-emphasis fw-semibold">{{ $pctCancelados }}%</small>
                        </div>
                    </div>
                    <div class="progress" style="height:6px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width:{{ $pctCancelados }}%;"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>



    <div class="col-xl-7">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <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-receipt text-info me-1"></i> Últimos retiros
                        </h5>
                        <p class="text-muted small mb-0">Solicitudes recientes de retiro</p>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="text-uppercase small text-muted" style="letter-spacing:.5px;">
                                <th class="border-0 ps-3">Usuario</th>
                                <th class="border-0 text-end">Monto</th>
                                <th class="border-0 text-center">Fecha</th>
                                <th class="border-0 text-center">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($datos['ultimos_retiros'] as $ultimo_retiro)
                                <tr>
                                    <td class="ps-3">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="{{ $ultimo_retiro->user->avatar }}" class="rounded-circle border" style="width:42px;height:42px;object-fit:cover;">
                                            <div>
                                                <p class="mb-0 fw-semibold">{{ $ultimo_retiro->user->display_name }}</p>
                                                <small class="text-muted">ID #{{ $ultimo_retiro->iduser ?? $ultimo_retiro->user->id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end fw-bold text-info-emphasis">
                                        @if ($datos['moneda']->mostrar_a_d)
                                           {{$datos['moneda']->simbolo}} {{ number_format($ultimo_retiro->monto, 2) }}
                                        @else
                                           {{ number_format($ultimo_retiro->monto, 2) }} {{$datos['moneda']->simbolo}}
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($ultimo_retiro->fechasoli)->format('d/m/Y') }}
                                        </small>
                                    </td>
                                    <td class="text-center">
                                        @if($ultimo_retiro->estado == 1)
                                           <span class="badge bg-success-subtle text-success-emphasis rounded-pill fw-semibold">
                                               <i class="fa-solid fa-circle-check me-1"></i> Completado
                                           </span>
                                        @elseif($ultimo_retiro->estado == 0)
                                           <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill fw-semibold">
                                               <i class="fa-regular fa-clock me-1"></i> En espera
                                           </span>
                                        @elseif($ultimo_retiro->estado == 2)
                                           <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill fw-semibold">
                                               <i class="fa-solid fa-circle-xmark me-1"></i> Cancelado
                                           </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <i class="fa-solid fa-receipt text-muted fs-1 mb-2"></i>
                                        <p class="text-muted mb-0">No hay retiros recientes</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

</div>


@endsection

@push('script')

<script src ="{{ asset('assets/plugins/amcharts/grafica_panel_comisiones.js') }}"></script>

@endpush