@extends('layouts.dashboardnew')

@section('content')

@php
    // Cálculo único: ganancia = ventas - comisiones
    $ganancia = $total - $comisiones;
@endphp


{{-- ===================== HEADER + BOTÓN FILTRO ===================== --}}
<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-receipt fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Reporte de pagos</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Estado de las liquidaciones y pagos procesados a los usuarios.
                    </p>
                </div>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-2 align-self-start align-self-md-center">
                <button class="btn bg-white fw-semibold rounded-pill px-3 py-2 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' => 'reporte-pagos', 'tipo1' => '1'])
</div>


{{-- ===================== KPIs ===================== --}}
<div class="row g-3">

    {{-- Total Ventas --}}
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:44px;height:44px;">
                        <i class="fa-solid fa-cart-shopping fs-5"></i>
                    </div>
                    <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill small fw-semibold px-2 py-1">
                        <i class="fa-solid fa-tags"></i> Bruto
                    </span>
                </div>

                <div class="text-secondary small fw-semibold text-uppercase mb-1" style="letter-spacing:.06em;font-size:.7rem;">
                    Total ventas
                </div>
                <h4 class="fw-bold mb-0 text-dark font-monospace text-truncate">
                    @if ($moneda->mostrar_a_d)
                        {{$moneda->simbolo}} {{ $total }}
                    @else
                        {{ $total }} {{$moneda->simbolo}}
                    @endif
                </h4>
            </div>
        </div>
    </div>

    {{-- Total Comisiones --}}
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="bg-warning-subtle text-warning-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:44px;height:44px;">
                        <i class="fa-solid fa-percent fs-5"></i>
                    </div>
                    <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill small fw-semibold px-2 py-1">
                        <i class="fa-solid fa-hand-holding-dollar"></i> Generado
                    </span>
                </div>

                <div class="text-secondary small fw-semibold text-uppercase mb-1" style="letter-spacing:.06em;font-size:.7rem;">
                    Total comisiones
                </div>
                <h4 class="fw-bold mb-0 text-dark font-monospace text-truncate">
                    @if ($moneda->mostrar_a_d)
                        {{$moneda->simbolo}} {{ $comisiones }}
                    @else
                        {{ $comisiones }} {{$moneda->simbolo}}
                    @endif
                </h4>
            </div>
        </div>
    </div>

    {{-- Pagos de Comisiones --}}
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="bg-info-subtle text-info-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:44px;height:44px;">
                        <i class="fa-solid fa-money-bill-transfer fs-5"></i>
                    </div>
                    <span class="badge bg-info-subtle text-info-emphasis rounded-pill small fw-semibold px-2 py-1">
                        <i class="fa-solid fa-circle-check"></i> Pagado
                    </span>
                </div>

                <div class="text-secondary small fw-semibold text-uppercase mb-1" style="letter-spacing:.06em;font-size:.7rem;">
                    Pagos de comisiones
                </div>
                <h4 class="fw-bold mb-0 text-dark font-monospace text-truncate">
                    @if ($moneda->mostrar_a_d)
                        {{$moneda->simbolo}} {{ $montos }}
                    @else
                        {{ $montos }} {{$moneda->simbolo}}
                    @endif
                </h4>
            </div>
        </div>
    </div>

    {{-- Ganancia Empresa --}}
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden position-relative">
            <div class="position-absolute top-0 start-0 w-100 h-100 bg-success bg-opacity-10"></div>
            <div class="card-body p-4 position-relative">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="bg-success text-white rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0 shadow-sm"
                         style="width:44px;height:44px;">
                        <i class="fa-solid fa-sack-dollar fs-5"></i>
                    </div>
                    <span class="badge bg-success text-white rounded-pill small fw-semibold px-2 py-1">
                        <i class="fa-solid fa-arrow-trend-up"></i> Neto
                    </span>
                </div>

                <div class="text-success-emphasis small fw-semibold text-uppercase mb-1" style="letter-spacing:.06em;font-size:.7rem;">
                    Ganancia empresa
                </div>
                <h4 class="fw-bold mb-0 text-success-emphasis font-monospace text-truncate">
                    @if ($moneda->mostrar_a_d)
                        {{$moneda->simbolo}} {{ $ganancia }}
                    @else
                        {{ $ganancia }} {{$moneda->simbolo}}
                    @endif
                </h4>
            </div>
        </div>
    </div>

</div>


{{-- ===================== FÓRMULA EXPLICATIVA ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mt-3">
    <div class="card-body p-3 p-md-4">
        <div class="d-flex align-items-center gap-2 mb-3">
            <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                 style="width:34px;height:34px;">
                <i class="fa-solid fa-calculator"></i>
            </div>
            <h6 class="fw-bold mb-0 text-dark">Cálculo de la ganancia neta</h6>
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2 small">
            <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill px-3 py-2 fw-semibold font-monospace">
                @if ($moneda->mostrar_a_d){{$moneda->simbolo}} {{ $total }}@else{{ $total }} {{$moneda->simbolo}}@endif
            </span>
            <span class="text-secondary fw-bold">−</span>
            <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-3 py-2 fw-semibold font-monospace">
                @if ($moneda->mostrar_a_d){{$moneda->simbolo}} {{ $comisiones }}@else{{ $comisiones }} {{$moneda->simbolo}}@endif
            </span>
            <span class="text-secondary fw-bold">=</span>
            <span class="badge bg-success text-white rounded-pill px-3 py-2 fw-bold font-monospace">
                @if ($moneda->mostrar_a_d){{$moneda->simbolo}} {{ $ganancia }}@else{{ $ganancia }} {{$moneda->simbolo}}@endif
            </span>

            <span class="text-secondary ms-md-3 d-block d-md-inline mt-2 mt-md-0">
                <i class="fa-solid fa-circle-info text-primary me-1"></i>
                Ventas brutas menos comisiones pagadas a los afiliados.
            </span>
        </div>
    </div>
</div>


@endsection

@include('usuario.componentes.scripBotones')