@extends('layouts/app')
@section('tituloModulo','INICIO')
@section('contenido')
<section class="section dashboard">
    <div class="row">
        <div class="col-xxl-3 col-md-3 col-12">
            <div class="card info-card azul">
                <div class="card-body">
                    <h5 class="card-title">Dominios <span>| Activos</span></h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{ $countDomAct }}</h6>
                            @php
                            $porcentajeAct = ($countDomAct * 100) / $countDomTot;
                            @endphp
                            <span class="text-success small pt-1 fw-bold">{{ $porcentajeAct }}%</span> <span class="text-muted small pt-2 ps-1">Del total del dominios</span>                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-12">
            <div class="card info-card rojo">
                <div class="card-body">
                    <h5 class="card-title">Dominios <span>| Inactivos</span></h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{ $countDomIna }}</h6>
                            @php
                            $porcentajeIna = ($countDomIna * 100) / $countDomTot;
                            @endphp
                            <span class="text-success small pt-1 fw-bold">{{ $porcentajeIna }}%</span> <span class="text-muted small pt-2 ps-1">Del total del dominios</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-12">
            <div class="card info-card verde">
                <div class="card-body">
                    <h5 class="card-title">Dominios <span>| Disponibles</span></h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{ $countDomDes }}</h6>
                            @php
                            $porcentajeDes = ($countDomDes * 100) / $countDomTot;
                            @endphp
                            <span class="text-success small pt-1 fw-bold">{{ $porcentajeDes }}%</span> <span class="text-muted small pt-2 ps-1">Del total del dominios</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-12">
            <div class="card info-card amarillo">
                <div class="card-body">
                    <h5 class="card-title">Dominios <span>| Pendiente</span></h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-globe"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{ $countDomPen }}</h6>
                            @php
                                $porcentajePen = ($countDomPen * 100) / $countDomTot;
                            @endphp
                            <span class="text-success small pt-1 fw-bold">{{ $porcentajePen }}%</span> <span class="text-muted small pt-2 ps-1">Del total del dominios</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                <h5 class="card-title">Reporte Anual 2024 <span>/Today</span></h5>
                <!-- Line Chart -->
                <div id="reportsChart"></div>
                <script>
                    document.addEventListener("DOMContentLoaded", () => {
                        new ApexCharts(document.querySelector("#reportsChart"), {
                            series: [{
                                name: 'Pendientes por pagar',
                                data: [31, 40, 28, 51, 42, 82, 56],
                            }, {
                                name: 'Pagado',
                                data: [11, 32, 45, 32, 34, 52, 41]
                            }, {
                                name: 'Vencidos',
                                data: [15, 11, 32, 18, 9, 24, 11]
                            }],
                            chart: {
                                height: 350,
                                type: 'area',
                                toolbar: {
                                    show: false
                                },
                            },
                            markers: {
                                size: 4
                            },
                            colors: ['#4154f1', '#2eca6a', '#ff771d'],
                            fill: {
                                type: "gradient",
                                gradient: {
                                    shadeIntensity: 1,
                                    opacityFrom: 0.3,
                                    opacityTo: 0.4,
                                    stops: [0, 90, 100]
                                }
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                curve: 'smooth',
                                width: 2
                            },
                            xaxis: {
                                categories: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"], // Nombres de los meses
                            },
                            tooltip: {
                                x: {
                                    format: 'MMMM' // Formato para mostrar el mes completo en el tooltip
                                },
                            }
                        }).render();
                    });
                </script>

                <!-- End Line Chart -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection