@extends('layouts.master')
@section('title') Metrica @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') SIS MUN - 1 @endslot
@slot('li_2') Pagina @endslot
@slot('title') Principal @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-lg-12">
        <div class="row justify-content-center">
            <!-- Usuarios -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Usuarios</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalUsuarios }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Total registrados
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-users font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Clientes -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Clientes</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalClientes }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Activos en el sistema
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-user-check font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Facturas -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Facturas este mes</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $facturasMes }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-info"><i class="mdi mdi-trending-up"></i></span>
                                    Emitidas en {{ now()->format('F') }}
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-file-invoice font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recaudación -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Recaudado este mes</p>
                                <h3 class="my-1 font-20 fw-bold">S/. {{ number_format($montoRecaudado, 2) }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Total ingresos
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-cash-banknote font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Medidores -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Medidores</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalMedidores }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Activos en el sistema
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-user-check font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Clase Tarifa -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Clase Tarifa</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalClaseTarifa }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Activos en el sistema
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-user-check font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Clase Urbanizacion -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Urbanizaciones</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalUrbanizacion }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Activos en el sistema
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-user-check font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Clase Conexion -->
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Conexiones</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalConexion }}</h3>
                                <p class="mb-0 text-truncate text-muted">
                                    <span class="text-success"><i class="mdi mdi-trending-up"></i></span>
                                    Activos en el sistema
                                </p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-user-check font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            

        </div>
        <!--end row-->
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Pagos Recibidos</h4>
                    </div>
                    <!--end col-->
                    
                    <!--end col-->
                </div>
                <!--end row-->
            </div>
            <!--end card-header-->
            <div class="card-body">
                <div class="">
                    <div id="ana_dash_1" class="apex-charts"></div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
    
    <!--end col-->
</div>
<!--end row-->




@endsection
@section('script')
<script src="{{URL::asset('assets/plugins/apexcharts/apexcharts.min.js')}}"></script>


<script>
document.addEventListener("DOMContentLoaded", function () {
    fetch("{{ route('dashboard.data') }}")
        .then(response => response.json())
        .then(data => {
            var options = {
                chart: {
                    type: 'bar', // 🔹 aquí lo cambiamos a barras
                    height: 350
                },
                series: [{
                    name: "Recaudación",
                    data: data.series
                }],
                xaxis: {
                    categories: data.labels
                },
                plotOptions: {
                    bar: {
                        borderRadius: 5,
                        horizontal: false, // 🔹 barras verticales
                        columnWidth: '55%'
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function (val) {
                        return "S/ " + val.toFixed(2); // 🔹 mostrar con formato moneda
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            return "S/ " + val.toFixed(2);
                        }
                    }
                },
                colors: ['#e2d989ff'] // 🔹 azul elegante
            };

            var chart = new ApexCharts(document.querySelector("#ana_dash_1"), options);
            chart.render();
        });
});
</script>



@endsection