@extends('layouts.admin')

@section('styles')
<style>
    /* Efecto hover suave para las tarjetas */
    .card-report {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
    }

    .card-report:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    }

    /* Círculos de fondo para los iconos */
    .icon-circle {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 1.5rem auto;
        font-size: 2.5rem;
    }

    /* Colores específicos tipo Dashboard */
    .bg-light-success {
        background-color: rgba(32, 216, 148, 0.15);
        color: #20d894;
    }

    .bg-light-danger {
        background-color: rgba(255, 62, 29, 0.15);
        color: #ff3e1d;
    }
</style>
@endsection

@section('content')

<div class="container-fluid py-4">
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Reportes /</span> Clientes
    </h4>

    <div class="row g-4">
        <div class="col-md-6 col-lg-6">
            <div class="card card-report h-100 shadow-sm">
                <div class="card-body text-center p-5">
                    <div class="icon-circle bg-light-success">
                        <i class="fas fa-users"></i>
                    </div>

                    <h4 class="card-title text-uppercase fw-bold text-dark">Todos los Clientes</h4>
                    <p class="card-text text-muted mb-4">
                        Genera un listado completo y detallado de todos los clientes registrados en el sistema hasta la fecha.
                    </p>

                    <a target="_blank" href="{{route('cliente.reportesAllClientes')}}" class="btn btn-outline-success btn-lg px-4 rounded-pill">
                        <i class="fa fa-print me-2"></i> Imprimir Reporte
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-6">
            <div class="card card-report h-100 shadow-sm">
                <div class="card-body text-center p-5">
                    <div class="icon-circle bg-light-danger">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </div>

                    <h4 class="card-title text-uppercase fw-bold text-dark">Clientes Deudores</h4>
                    <p class="card-text text-muted mb-4">
                        Filtra y genera un reporte exclusivo de los clientes que poseen saldo pendiente o deudas activas.
                    </p>

                    <a target="_blank" href="{{route('cliente.reportesDeudores')}}" class="btn btn-outline-danger btn-lg px-4 rounded-pill">
                        <i class="fa fa-print me-2"></i> Imprimir Reporte
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection