@component('components.dashboard')
@slot('body')
@verbatim
    <div id="app">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">

                <div class="middle-content container-xxl p-0">

                    <!--  BEGIN BREADCRUMBS  -->
                    <div class="secondary-nav">
                        <div class="breadcrumbs-container" data-page-heading="Sales">
                            <header class="header navbar navbar-expand-sm">
                                <a href="javascript:void(0);" class="btn-toggle sidebarCollapse" data-placement="bottom">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                                </a>
                                <div class="d-flex breadcrumb-content">
                                    <div class="page-header">

                                        <div class="page-title"><h3> Dashboard</h3></div>

                                        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
                                            <ol class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Sales</li>
                                            </ol>
                                        </nav>

                                    </div>
                                </div>
                                <ul class="navbar-nav flex-row ms-auto breadcrumb-action-dropdown">
                                    <li class="nav-item more-dropdown">

                                    </li>
                                </ul>
                            </header>
                        </div>
                    </div>
                    <!--  END BREADCRUMBS  -->

                    <div class="row layout-top-spacing">
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                            <div class="widget-one widget">
                                <div class="widget-content">
                                    <div class="w-numeric-value">
                                        <div class="w-icon w-icon1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
                                        </div>
                                        <div class="w-content">
                                            <span class="w-value">{{dashboard.compras}}</span>
                                            <span class="w-numeric-title">Total Compras</span>
                                        </div>
                                    </div>
                                    <div class="w-chart">
                                        <div id="total-orders"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                            <div class="widget-one widget">
                                <div class="widget-content">
                                    <div class="w-numeric-value">
                                        <div class="w-icon w-icon2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                                        </div>
                                        <div class="w-content">
                                            <span class="w-value">{{dashboard.ventas}}</span>
                                            <span class="w-numeric-title">Total Ventas</span>
                                        </div>
                                    </div>
                                    <div class="w-chart">
                                        <div id="total-sales"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                            <div class="widget-one widget">
                                <div class="widget-content">
                                    <div class="w-numeric-value">
                                        <div class="w-icon w-icon3">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                        </div>
                                        <div class="w-content">
                                            <span class="w-value">{{dashboard.users}}</span>
                                            <span class="w-numeric-title">Total Usuarios</span>
                                        </div>
                                    </div>
                                    <div class="w-chart">
                                        <div id="total-usuarios"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                            <div class="widget-one widget">
                                <div class="widget-content">
                                    <div class="w-numeric-value">
                                        <div class="w-icon w-icon4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                        </div>
                                        <div class="w-content">
                                            <span class="w-value">{{dashboard.clientes}}</span>
                                            <span class="w-numeric-title">Total Clientes</span>
                                        </div>
                                    </div>
                                    <div class="w-chart">
                                        <div id="total-clientes"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget widget-chart-one p-3">
                                <div class="widget-heading">
                                    <h5 class="">Reporte Mensual</h5>
                                    <div class="task-action">

                                    </div>
                                </div>

                                <div class="widget-content">
                                    <div id="grafico_mensual"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget widget-chart-two p-3">
                                <div class="widget-heading">
                                    <h5 class="">Ventas por Categoria</h5>
                                </div>
                                <div class="widget-content">
                                    <div id="categorias" class=""></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-12 layout-spacing" style="height: 300px;">
                            <div class="widget-two">
                                <div class="widget-content">
                                    <div class="w-numeric-value">
                                        <div class="w-content">
                                            <span class="w-value">Ventas diarias</span>
                                            <span class="w-numeric-title">Ver detalle en cada columna.</span>
                                        </div>
                                        <div class="w-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                                        </div>
                                    </div>
                                    <div class="w-chart">
                                        <div id="venta_semanal"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-12 layout-spacing">
                            <div class="widget widget-three">
                                <div class="widget-heading">
                                    <h5 class="">Resumen</h5>



                                </div>
                                <div class="widget-content">

                                    <div class="order-summary">

                                        <div class="summary-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
                                            </div>
                                            <div class="w-summary-details">

                                                <div class="w-summary-info">
                                                    <h6>Ventas</h6>
                                                    <p class="summary-count">{{dashboard.sucursal.moneda}}{{Number(dashboard.sum_ventas).toFixed(2)}}</p>
                                                </div>

                                                <div class="w-summary-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-secondary" role="progressbar" :style="'width: '+dashboard.porcentaje.porcentaje_ventas+'%'" :aria-valuenow="dashboard.porcentaje.porcentaje_ventas" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="summary-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
                                            </div>
                                            <div class="w-summary-details">

                                                <div class="w-summary-info">
                                                    <h6>Compras</h6>
                                                    <p class="summary-count">{{dashboard.sucursal.moneda}}{{Number(dashboard.sum_compras).toFixed(2)}}</p>
                                                </div>

                                                <div class="w-summary-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-success" role="progressbar" :style="'width: '+dashboard.porcentaje.porcentaje_compras+'%'" :aria-valuenow="dashboard.porcentaje.porcentaje_compras" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="summary-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
                                            </div>
                                            <div class="w-summary-details">

                                                <div class="w-summary-info">
                                                    <h6>Balance</h6>
                                                    <p class="summary-count">{{dashboard.sucursal.moneda}}{{Number(dashboard.balance).toFixed(2)}}</p>
                                                </div>

                                                <div class="w-summary-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-warning" role="progressbar" :style="'width: '+dashboard.porcentaje.porcentaje_balance+'%'" :aria-valuenow="dashboard.porcentaje.porcentaje_balance" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                            <div class="widget-four">
                                <div class="widget-heading">
                                    <h5 class="">Visitantes por navegador</h5>
                                </div>
                                <div class="widget-content">
                                    <div class="vistorsBrowser">
                                        <div class="browser-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
                                            </div>
                                            <div class="w-browser-details">
                                                <div class="w-browser-info">
                                                    <h6>Chrome</h6>
                                                    <p class="browser-count">65%</p>
                                                </div>
                                                <div class="w-browser-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-primary" role="progressbar" style="width: 65%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="browser-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
                                            </div>
                                            <div class="w-browser-details">

                                                <div class="w-browser-info">
                                                    <h6>Safari</h6>
                                                    <p class="browser-count">25%</p>
                                                </div>

                                                <div class="w-browser-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-danger" role="progressbar" style="width: 35%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="browser-list">
                                            <div class="w-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                                            </div>
                                            <div class="w-browser-details">

                                                <div class="w-browser-info">
                                                    <h6>Otros</h6>
                                                    <p class="browser-count">15%</p>
                                                </div>

                                                <div class="w-browser-stats">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-gradient-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget widget-table-two">

                                <div class="widget-heading px-4 pt-3">
                                    <h5 class="">Ventas recientes</h5>
                                </div>

                                <div class="widget-content">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th><div class="th-content">Vendedor</div></th>
                                                    <th><div class="th-content">Nro Venta</div></th>
                                                    <th><div class="th-content">Fecha</div></th>
                                                    <th><div class="th-content th-heading">Total</div></th>
                                                    <th><div class="th-content">Estado</div></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <template v-for="m in dashboard.ventas_recientes">
                                                    <tr>
                                                        <td>
                                                            <div class="td-content customer-name">
                                                                <img v-if="m.img!=''" :src="m.img" alt="avatar">
                                                                <span>{{m.user.persona.nombre}}</span>
                                                            </div>
                                                        </td>
                                                        <td><div class="td-content product-brand text-primary">{{m.format_nro}}</div></td>
                                                        <td><div class="td-content product-invoice">{{m.fecha}}</div></td>
                                                        <td><div class="td-content pricing"><span class="">{{dashboard.sucursal.moneda}} {{m.total}}</span></div></td>
                                                        <td>
                                                            <div class="td-content">
                                                                <span v-if="m.is_vigente==1" class="badge badge-success">Vigente</span>
                                                                <span v-else class="badge badge-danger">Anulado</span>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                </template>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget widget-table-two">

                                <div class="widget-heading px-4 pt-3">
                                    <h5 class="">Top productos mas vendidos</h5>
                                </div>

                                <div class="widget-content">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th><div class="th-content">Producto</div></th>
                                                    <th><div class="th-content">Marca</div></th>
                                                    <th><div class="th-content">Precio</div></th>
                                                    <th><div class="th-content th-heading">Cantidad</div></th>
                                                    <th><div class="th-content">Total</div></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <template v-for="m in dashboard.top_productos">
                                                    <tr>
                                                        <td>
                                                            <div class="td-content customer-name">
                                                                <img v-if="m.producto.img" :src="m.producto.img" alt="avatar">
                                                                <span>{{m.producto.nombre}}</span>
                                                            </div>
                                                        </td>
                                                        <td><div class="td-content product-brand text-primary">{{m.producto.marca.name}}</div></td>
                                                        <td><div class="td-content product-invoice">{{dashboard.sucursal.moneda}} {{m.producto.precio_4}}</div></td>
                                                        <td><div class="td-content pricing"><span class="">{{m.cantidad}}</span></div></td>
                                                        <td><div class="td-content pricing"><span class="">{{dashboard.sucursal.moneda}} {{Number(m.producto.precio_4*m.cantidad)}}</span></div></td>

                                                    </tr>

                                                </template>


                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
@endverbatim
@endslot

@slot('script')
    <script>
      const { createApp, ref } = Vue

        createApp({

            data(){
                return{
                    message:'',
                    data:[],
                    dashboard:{
                        compras:0,
                        ventas:0,
                        sucursal:{},
                        clientes:0,
                        users:0,
                        mes_venta:[],
                        mes_compra:[],
                        venta_anual:0,
                        ventas_by_categoria:[],
                        ventas_semanal:[],
                        ventas_recientes:[],
                        top_productos:[],
                        balance:0,
                        sum_ventas:0,
                        sum_compras:0,
                        porcentaje:{
                            porcentaje_ventas:0,
                            porcentaje_compras:0,
                            porcentaje_balance:0
                        }
                    }
                }
            },
            methods:{
                async getData(path){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/"+path)
                        return res.data
                    }catch(e){

                    }finally{

                    }
                }
            },
            mounted(){
                this.$nextTick(async () => {
                    $("#module_dashboard").addClass("module_active");
                    let self = this

                    try {
                        await Promise.all([self.getData('dashboard/data')]).then((v) => {
                            this.dashboard = v[0]
                        })


                    } catch (e) {

                    } finally {

                        let dashboard = this.dashboard
                        var options1 = {
                            chart: {
                            fontFamily: 'Nunito, sans-serif',
                            height: 365,
                            type: 'area',
                            zoom: {
                                enabled: false
                            },
                            dropShadow: {
                                enabled: true,
                                opacity: 0.2,
                                blur: 10,
                                left: -7,
                                top: 22
                            },
                            toolbar: {
                                show: false
                            },
                            },
                            colors: ['#1b55e2', '#e7515a'],
                            dataLabels: {
                                enabled: false
                            },
                            markers: {
                            discrete: [{
                            seriesIndex: 0,
                            dataPointIndex: 7,
                            fillColor: '#000',
                            strokeColor: '#000',
                            size: 5
                            }, {
                            seriesIndex: 2,
                            dataPointIndex: 11,
                            fillColor: '#000',
                            strokeColor: '#000',
                            size: 4
                            }]
                            },
                            subtitle: {
                            text:"",
                            align: 'left',
                            margin: 0,
                            offsetX: 100,
                            offsetY: 20,
                            floating: false,
                            style: {
                                fontSize: '18px',
                                color:  '#4361ee'
                            }
                            },
                            title: {
                            text: "Detalle de ventas y compras",
                            align: 'left',
                            margin: 0,
                            offsetX: -10,
                            offsetY: 20,
                            floating: false,
                            style: {
                                fontSize: '18px',
                                color:  '#0e1726'
                            },
                            },
                            stroke: {
                                show: true,
                                curve: 'smooth',
                                width: 2,
                                lineCap: 'square'
                            },
                            series: [{
                                name: 'Ventas',
                                data: dashboard.mes_venta.map((i)=>{return i.total})
                            }, {
                                name: 'Compras',
                                data:  dashboard.mes_compra.map((i)=>{return i.total})
                            }],
                            labels: ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
                            xaxis: {
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            },
                            crosshairs: {
                                show: true
                            },
                            labels: {
                                offsetX: 0,
                                offsetY: 5,
                                style: {
                                    fontSize: '12px',
                                    fontFamily: 'Nunito, sans-serif',
                                    cssClass: 'apexcharts-xaxis-title',
                                },
                            }
                            },
                            yaxis: {
                            labels: {
                                formatter: function(value, index) {
                                return   dashboard.sucursal.moneda + (value)
                                },
                                offsetX: -15,
                                offsetY: 0,
                                style: {
                                    fontSize: '12px',
                                    fontFamily: 'Nunito, sans-serif',
                                    cssClass: 'apexcharts-yaxis-title',
                                },
                            }
                            },
                            grid: {
                            borderColor: '#e0e6ed',
                            strokeDashArray: 5,
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: false,
                                }
                            },
                            padding: {
                                top: -50,
                                right: 0,
                                bottom: 0,
                                left: 5
                            },
                            },
                            legend: {
                            position: 'top',
                            horizontalAlign: 'right',
                            offsetY: -50,
                            fontSize: '16px',
                            fontFamily: 'Quicksand, sans-serif',
                            markers: {
                                width: 10,
                                height: 10,
                                strokeWidth: 0,
                                strokeColor: '#fff',
                                fillColors: undefined,
                                radius: 12,
                                onClick: undefined,
                                offsetX: -5,
                                offsetY: 0
                            },
                            itemMargin: {
                                horizontal: 10,
                                vertical: 20
                            }

                            },
                            tooltip: {

                            marker: {
                                show: true,
                            },
                            x: {
                                show: false,
                            }
                            },
                            fill: {
                                type:"gradient",
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    inverseColors: !1,
                                    opacityFrom: .19,
                                    opacityTo: .05,
                                    stops: [100, 100]
                                }
                            },
                            responsive: [{
                            breakpoint: 575,
                            options: {
                                legend: {
                                    offsetY: -50,
                                },
                            },
                            }]
                        }

                        var chart1 = new ApexCharts(
                            document.querySelector("#grafico_mensual"),
                            options1
                        );

                        chart1.render();
                        var options = {
                            chart: {
                                type: 'donut',
                                width: 370,
                                height: 430
                            },
                            colors: ['#622bd7', '#e2a03f', '#e7515a', '#e2a03f'],
                            dataLabels: {
                                enabled: false
                            },
                            legend: {
                                position: 'bottom',
                                horizontalAlign: 'center',
                                fontSize: '14px',
                                markers: {
                                    width: 10,
                                    height: 10,
                                    offsetX: -5,
                                    offsetY: 0
                                },
                                itemMargin: {
                                    horizontal: 10,
                                    vertical: 30
                                }
                            },
                            plotOptions: {
                                pie: {
                                donut: {
                                    size: '75%',
                                    background: 'transparent',
                                    labels: {
                                    show: true,
                                    name: {
                                        show: true,
                                        fontSize: '29px',
                                        fontFamily: 'Nunito, sans-serif',
                                        color: undefined,
                                        offsetY: -10
                                    },
                                    value: {
                                        show: true,
                                        fontSize: '26px',
                                        fontFamily: 'Nunito, sans-serif',
                                        color: '#000',
                                        offsetY: 16,
                                        formatter: function (val) {
                                        return val
                                        }
                                    },
                                    total: {
                                        show: true,
                                        showAlways: true,
                                        label: 'Total',
                                        color: '#000',
                                        fontSize: '30px',
                                        formatter: function (w) {
                                        return w.globals.seriesTotals.reduce( function(a, b) {
                                            return a + b
                                        }, 0)
                                        }
                                    }
                                    }
                                }
                                }
                            },
                            stroke: {
                                show: true,
                                width: 15,
                                colors: '#fff'
                            },
                            series: dashboard.ventas_by_categoria.map(x => x.total),
                            labels: dashboard.ventas_by_categoria.map(x => x.categoria),

                            responsive: [
                                {
                                breakpoint: 1440, options: {
                                    chart: {
                                    width: 325
                                    },
                                }
                                },
                                {
                                breakpoint: 1199, options: {
                                    chart: {
                                    width: 380
                                    },
                                }
                                },
                                {
                                breakpoint: 575, options: {
                                    chart: {
                                    width: 320
                                    },
                                }
                                },
                            ],
                        }
                        var chart = new ApexCharts(
                            document.querySelector("#categorias"),
                            options
                        );

                        chart.render();
                        var d_2options1 = {
                        chart: {
                            height: 160,
                            type: 'bar',
                            stacked: true,
                            stackType: '100%',
                            toolbar: {
                                show: false,
                            }
                        },
                        dataLabels: {
                            enabled: false,
                        },
                        stroke: {
                            show: true,
                            width: [3, 4],
                            curve: "smooth",
                        },
                        colors: ['#e2a03f', '#e0e6ed'],
                        series: [{
                            name: 'Ventas',
                            data: dashboard.ventas_semanal.map(x => x.total)
                        }],
                        xaxis: {
                            labels: {
                                show: false,
                            },
                            categories: dashboard.ventas_semanal.map(x => x.dia),
                            crosshairs: {
                            show: false
                            }
                        },
                        yaxis: {
                            show: false
                        },
                        fill: {
                            opacity: 1
                        },
                        plotOptions: {
                            bar: {
                                horizontal: false,
                                columnWidth: '25%',
                                borderRadius: 8,
                            }
                        },
                        legend: {
                            show: false,
                        },
                        grid: {
                            show: false,
                            xaxis: {
                                lines: {
                                    show: false
                                }
                            },
                            padding: {
                            top: -20,
                            right: 0,
                            bottom: -40,
                            left: 0
                            },
                        },
                        responsive: [
                            {
                                breakpoint: 575,
                                options: {
                                    plotOptions: {
                                        bar: {
                                            borderRadius: 5,
                                            columnWidth: '35%'
                                        }
                                    },
                                }
                            },
                        ],
                    }
                        var d_2C_1 = new ApexCharts(document.querySelector("#venta_semanal"), d_2options1);
                        d_2C_1.render();
                    }


                })

            }
        }).mount('#app')
    </script>
@endslot
@slot('style')
    <style>
        .secondary-nav {
            display: initial;
        }
        .w-icon1{
            background: #9bc3ff !important;
        }
        .w-icon2{
            background: #ddf5f0 !important;
        }
        .w-icon3{
            background: #d6c3ff !important;
        }
        .w-icon4{
            background: #bee2ff !important;
        }
        .w-icon1 svg{
            color: #076bff !important;
            fill: #579aff !important;
        }
        .w-icon2 svg{
            color: #05bf62 !important;
            fill: #3acb82 !important;
        }
        .w-icon3 svg{
            color: #ab89f1 !important;
            fill: #b697f9  !important;
        }
        .w-icon4 svg{
            color: #76c2ff !important;
            fill: #9fd5ff  !important;
        }
        .widget-four {
            position: relative;
            background: #fff;
            padding: 20px;
            border-radius: 6px;
            height: 100%;
            border: 1px solid #e0e6ed;
            box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
            }
            .widget-four .widget-heading {
            margin-bottom: 25px;
            }
            .widget-four .widget-heading h5 {
            font-size: 17px;
            display: block;
            color: #0e1726;
            font-weight: 600;
            margin-bottom: 0;
            }
            .widget-four .widget-content {
            font-size: 17px;
            }
            .widget-four .widget-content .browser-list {
            display: flex;
            }
            .widget-four .widget-content .browser-list:not(:last-child) {
            margin-bottom: 30px;
            }
            .widget-four .widget-content .w-icon {
            display: inline-block;
            padding: 10px 9px;
            border-radius: 50%;
            display: inline-flex;
            align-self: center;
            height: 34px;
            width: 34px;
            margin-right: 12px;
            }
            .widget-four .widget-content .w-icon svg {
            display: block;
            width: 15px;
            height: 15px;
            }
            .widget-four .widget-content .browser-list:nth-child(1) .w-icon {
            background: #eceffe;
            }
            .widget-four .widget-content .browser-list:nth-child(2) .w-icon {
            background: #fbeced;
            }
            .widget-four .widget-content .browser-list:nth-child(3) .w-icon {
            background: #fcf5e9;
            }
            .widget-four .widget-content .browser-list:nth-child(1) .w-icon svg {
            color: #4361ee;
            }
            .widget-four .widget-content .browser-list:nth-child(2) .w-icon svg {
            color: #e7515a;
            }
            .widget-four .widget-content .browser-list:nth-child(3) .w-icon svg {
            color: #e2a03f;
            }
            .widget-four .widget-content .w-browser-details {
            width: 100%;
            align-self: center;
            }
            .widget-four .widget-content .w-browser-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1px;
            }
            .widget-four .widget-content .w-browser-info h6 {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 0;
            color: #3b3f5c;
            }
            .widget-four .widget-content .w-browser-info p {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 0;
            color: #888ea8;
            }
            .widget-four .widget-content .w-browser-stats .progress {
            margin-bottom: 0;
            height: 22px;
            padding: 4px;
            border-radius: 20px;
            }
            .widget-four .widget-content .w-browser-stats .progress .progress-bar {
            position: relative;
            }
            .widget-four .widget-content .w-browser-stats .progress .progress-bar.bg-gradient-primary {
            background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
            }
            .widget-four .widget-content .w-browser-stats .progress .progress-bar.bg-gradient-danger {
            background-image: linear-gradient(315deg, #3f0d12 0%, #a71d31 74%);
            }
            .widget-four .widget-content .w-browser-stats .progress .progress-bar.bg-gradient-warning {
            background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
            }
            .widget-four .widget-content .w-browser-stats .progress .progress-bar:before {
            content: "";
            height: 7px;
            width: 7px;
            background: #fff;
            position: absolute;
            right: 3px;
            border-radius: 50%;
            top: 3.49px;
            }

    </style>
@endslot
@endcomponent