@extends('coopdigital::diseños.plantilla')

@section('tituloPlantilla', 'Estadísticas Cuentas')

@section('cssPlantilla')

    <!-- Font Awesome v5.15.4 -->
    <link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/librerias/font-awesome/5.15.4/css/fontawesome.css') }}">

    <!-- Apex Charts v3.35.1 -->
    <link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/librerias/apexcharts/3.35.1/css/apexcharts.css') }}">

    <!-- CSS -->
    <link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/css/vista/panel/estadisticasCuentas.css') }}">

@endsection

@section('contenidoPlantilla')

    <div class="page-heading">
        <h3>Estadísticas Cuentas</h3>
    </div>

    <div class="page-content">

        <section class="row">

            <div class="col-12 col-lg-12">

                <div class="row">
                    <div>
                        <h5>Ahorros</h5>
                        <div id="graficaAhorros"></div>
                    </div>
                    <div>
                        <h5>Aportaciones</h5>
                        <div id="graficaAportaciones"></div>
                    </div>

                </div>

            </div>

        </section>

    </div>

@endsection

@section('jsPlantilla')

    <!-- Apex Charts v3.35.1 -->
    <script src="{{ asset('vendor/daite/coopdigital/src/public/librerias/apexcharts/3.35.1/js/apexcharts.js') }}"></script>
    <!-- JavaScript -->
    <script src="{{ asset('vendor/daite/coopdigital/src/public/js/utilidades/herramientas.js') }}"></script>
    <script src="{{ asset('vendor/daite/coopdigital/src/public/js/utilidades/grafica.js') }}"></script>
    <script>
        const traerRegistros = "{{ route('traerEstadisticas') }}";
    </script>
    <script src="{{ asset('vendor/daite/coopdigital/src/public/js/vista/panel/estadisticasCuentas.js') }}"></script>

@endsection
