{extends file="$layouts_admin"}


{block name="content"}

    <div class="container-xxl">

        <input type="text" hidden disabled name="url_api" id="url_api" value="{$_url}">

        {* fecha *}
            <div class="row mb-3">
                <div class="col-lg-12">
                    <input type="text" name="reportrange" class="form-control" id="reportrange" style="
                                                                                                    display: inline-block;
                                                                                                    width: 40%;
                                                                                                    float: inline-end;
                                                                                                    text-align: center;
                                                                                                    ">
                    <button class="btn btn-sm btn-primary buscarFecha">
                        Search date
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <path d="M10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 Z M21.7071068,20.2928932 C22.0976311,19.9023689 22.0976311,19.267767 21.7071068,18.8772427 L16.9497475,14.1198834 C17.3453784,13.4433673 17.5606602,12.6790962 17.5606602,11.8535534 C17.5606602,10.0227798 16.5606602,8.56066017 14.8535534,7.85355339 C13.1464466,7.14644661 11.5606602,7.85355339 10.8535534,9.56066017 C10.1464466,11.267767 10.8535534,12.8535534 12.5606602,13.5606602 C13.3852031,13.5606602 14.1494742,13.3453784 14.8259903,12.9497475 L19.5833496,17.7071068 C19.9738739,18.0976311 20.6084758,18.0976311 20.999,17.7071068 L21.7071068,20.2928932 Z" fill="#FFF" fill-rule="nonzero"/>
                            </g>
                        </svg>
                     </button>

                     <button class="btn btn-sm btn-primary buscarFechaCargando" style="display: none;" disabled>
                        Loading...
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <path d="M10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 Z M21.7071068,20.2928932 C22.0976311,19.9023689 22.0976311,19.267767 21.7071068,18.8772427 L16.9497475,14.1198834 C17.3453784,13.4433673 17.5606602,12.6790962 17.5606602,11.8535534 C17.5606602,10.0227798 16.5606602,8.56066017 14.8535534,7.85355339 C13.1464466,7.14644661 11.5606602,7.85355339 10.8535534,9.56066017 C10.1464466,11.267767 10.8535534,12.8535534 12.5606602,13.5606602 C13.3852031,13.5606602 14.1494742,13.3453784 14.8259903,12.9497475 L19.5833496,17.7071068 C19.9738739,18.0976311 20.6084758,18.0976311 20.999,17.7071068 L21.7071068,20.2928932 Z" fill="#FFF" fill-rule="nonzero"/>
                            </g>
                        </svg>
                     </button>
                </div>    
            </div>
        {* fin fecha *}


        {* esto es summary *}
        <div class="row mb-3">
            <div class="col-lg-12 ">
                <div   class="panel  ">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">
                            {$_L['Summary']}
                        </h2>

                        <div class="panel-toolbar">
                            <a href="{$_url}dashboard" data-bs-toggle="tooltip" data-original-title="{$_L['Refresh']}">
                                <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M8.43296491,7.17429118 L9.40782327,7.85689436 C9.49616631,7.91875282 9.56214077,8.00751728 9.5959027,8.10994332 C9.68235021,8.37220548 9.53982427,8.65489052 9.27756211,8.74133803 L5.89079566,9.85769242 C5.84469033,9.87288977 5.79661753,9.8812917 5.74809064,9.88263369 C5.4720538,9.8902674 5.24209339,9.67268366 5.23445968,9.39664682 L5.13610134,5.83998177 C5.13313425,5.73269078 5.16477113,5.62729274 5.22633424,5.53937151 C5.384723,5.31316892 5.69649589,5.25819495 5.92269848,5.4165837 L6.72910242,5.98123382 C8.16546398,4.72182424 10.0239806,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 L6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,8.6862915 15.3137085,6 12,6 C10.6885336,6 9.44767246,6.42282109 8.43296491,7.17429118 Z" fill="#000000" fill-rule="nonzero"/>
                                    </g>
                                    </svg>
                                </span>
                            </a>
                        </div>

                    </div>

                    <div class="panel-container show">
                        <div class="panel-content border-left-0 border-right-0 border-top-0"

                                {if !empty($config['admin_dark_theme'])}
                                    style="background: #232F47;"
                                {else}
                                    style="background: #fff;"
                                {/if}

                        >
                            <div class="row no-gutters">

                                <div class="col-lg-4 col-xl-4">

                                    <div class="p-8  mb-2 flex-grow-1" style="
                                    {if !empty($config['admin_dark_theme'])}
                                            background: #232F47;
                                    {else}
                                            background: #6A6CFF;
                                    {/if}
                                            border-radius: 8px; padding: 26px 20px; margin-left:1rem; margin-right:1rem;
                                            box-shadow: 0 0.1rem 1rem 0.25rem rgb(0 0 0 / 5%);
                                            ">

                                        <div class="d-flex align-items-center mb-3">
                                            <div class="symbol symbol-circle symbol-light-success symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md svg-icon-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
                                        <path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
                                    </svg><!--end::Svg Icon--></span>                            </div>
                                                                                </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_total_income">{formatCurrency($total_income,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Total Income']}</div>
                                            </div>
                                        </div>
                                        <!--end::Item-->

                                        <!--begin::Item-->
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="symbol symbol-circle symbol-light-danger symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md svg-icon-white">

                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right-square-fill" viewBox="0 0 16 16">
                                        <path d="M14 16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12zM5.904 5.197 10 9.293V6.525a.5.5 0 0 1 1 0V10.5a.5.5 0 0 1-.5.5H6.525a.5.5 0 0 1 0-1h2.768L5.197 5.904a.5.5 0 0 1 .707-.707z"/>
                                    </svg>
                                    </span>                            </div>
                                            </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_total_expense">{formatCurrency($total_expense,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Total Expense']}</div>
                                            </div>
                                        </div>

                                        <!--begin::Item-->
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="symbol symbol-circle symbol-light-success symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md svg-icon-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#14B981" class="bi bi-credit-card-fill" viewBox="0 0 16 16">
                                        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H0V4zm0 3v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7H0zm3 2h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1z"/>
                                    </svg>
                                </span>                            </div>
                                            </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_income_today">{formatCurrency($income_today,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Income Today']}</div>
                                            </div>
                                        </div>
                                        <!--end::Item-->
                                         
                                        <!--begin::Item-->
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="symbol symbol-circle symbol-light-warning symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md svg-icon-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
                                        <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z"/>
                                    </svg>
                                    </span>
                                                </div>
                                            </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_expense_today">{formatCurrency($expense_today,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Expense Today']}</div>
                                            </div>
                                        </div>
                                        <!--end::Item-->

                                        <!--begin::Item-->
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="symbol symbol-circle symbol-light-primary symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md ">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#5046E4" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
                                    <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z"/>
                                    </svg>
                                    </span>                            </div>
                                            </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_income_this_month">{formatCurrency($income_this_month,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Income This Month']}</div>
                                            </div>
                                        </div>
                                        <!--end::Item-->

                                        <!--begin::Item-->
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-circle symbol-light-danger symbol-40 flex-shrink-0 me-3">
                                                <div class="symbol-label">
                                <span class="svg-icon svg-icon-md svg-icon-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
                                    <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z"/>
                                    </svg>
                                    </span>
                                                </div>
                                            </div>
                                            <div class="ms-3">
                                                <h3 class="text-white enviar_expense_this_month">{formatCurrency($expense_this_month,$config['home_currency'])}</h3>
                                                <div class="font-size-sm text-white">{$_L['Expense This Month']}</div>
                                            </div>
                                        </div>

                                    </div>


                                </div>


                                <div class="col-lg-8 col-xl-8">

                                    <div style="padding-left: 0.5rem; padding-right: 1rem;">

                                        <div class="row">



                                            <div class="{if $config['leads'] && $config['companies']}col-md-4 {else} col-md-6{/if}">

                                                <a  href="{$base_url}contacts/list/">
                                                    <div class="card mb-2" style="



                                                    {if !empty($config['admin_dark_theme'])}
                                                            background-color: #213137;
                                                    {/if}

                                                            height: 130px"

                                                    >

                                                        <div class="card-body" >
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="h1 mb-0">{$customers_total}</div>


                                                                </div>
                                                                <div class="col">
                                                                    <div class="symbol symbol-circle symbol-light symbol-40 flex-shrink-0 me-3 float-end">
                                                                        <div class="symbol-label">
                                                                            <span class="svg-icon svg-icon-md svg-icon-white">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor]" class="bi bi-person-fill" viewBox="0 0 16 16">
                                                                            <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                                                            </svg>
                                                                            </span>                            
                                                                        </div>
                                                                    </div>


                                                                </div>

                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <h4 class="text-muted mt-1">{$_L['Customers']}</h4>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </a>


                                            </div>

                                            {if isset($config['companies']) && $config['companies']}

                                                <div class="{if $config['leads'] && $config['companies']}col-md-4 {else} col-md-6{/if}">

                                                    <a href="{$base_url}contacts/companies/">
                                                        <div class="card mb-2" style="

                                                        {if !empty($config['admin_dark_theme'])}
                                                                background-color: #372F29;
                                                        {/if}

                                                                height: 130px">

                                                            <div class="card-body" >
                                                                <div class="row">

                                                                    <div class="col">
                                                                        <div class="h1 mb-0">{$companies_total}</div>

                                                                    </div>
                                                                    <div class="col">
                                                                        <div class="symbol symbol-circle symbol-light symbol-40 flex-shrink-0 me-3 float-end">
                                                                            <div class="symbol-label">
                                                                                <span class="svg-icon svg-icon-md svg-icon-white">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
                                                                                    <path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
                                                                                    </svg>
                                                                                </span>                           
                                                                            </div>
                                                                        </div>

                                                                    </div>

                                                                </div>


                                                                <h4 class="text-muted mt-1">{$_L['Companies']}</h4>
                                                            </div>

                                                        </div>
                                                    </a>


                                                </div>

                                            {/if}


                                            {if isset($config['leads']) && $config['leads']}

                                                <div class="{if $config['leads'] && $config['companies']}col-md-4 {else} col-md-6{/if}">

                                                    <a href="{$base_url}leads/">

                                                        <div class="card mb-2" style="

                                                        {if !empty($config['admin_dark_theme'])}
                                                                background-color: #372533;
                                                        {/if}
                                                                height: 130px"
                                                        >
                                                            <div class="card-body">

                                                                <div class="row">
                                                                    <div class="col">

                                                                        <div class="h1  mb-0">{$leads_total}</div>

                                                                    </div>
                                                                    <div class="col">

                                                                        <div class="symbol symbol-circle symbol-light symbol-40 flex-shrink-0 me-3 float-end">
                                                                            <div class="symbol-label">
                                                                                <span class="svg-icon svg-icon-md svg-icon-white">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shift-fill" viewBox="0 0 16 16">
                                                                                    <path d="M7.27 2.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047z"/>
                                                                                    </svg>
                                                                                </span>                            
                                                                            </div>
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                                <div class="row">
                                                                    <div class="col">
                                                                        <h4 class="text-muted mt-1">{$_L['Leads']}</h4>

                                                                    </div>
                                                                </div>



                                                            </div>
                                                        </div>

                                                    </a>

                                                </div>
                                            {/if}

                                        </div>
                                    </div>


                                    <div class="position-relative">

                                        <div class="col-md-12 mt-3 grafica_summary">
                                            <div id="cash_flow_chart">

                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>

                </div>



            </div>
        </div>
        {* FIN summary *}

        




        <div class="row">


            <div class="col-lg-12">
                <div class="panel">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder  ">
                            {$_L['Income_Vs_Expense']} ( <span class="enviar_fecha_income_vs_expense"></span> )
                        </h2>
                    </div>
                    <div class="panel-container show p-3 limpiar_chart_income_vs_expense">
                        <div id="chart_income_vs_expense"></div>
                    </div>
                </div>
            </div>


            <div class="col-lg-6">
                <div id="panel-12" class="panel border-0 ">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">
                            {$_L['Recent Clients']}
                        </h2>
                    </div>
                    <div class="panel-container show p-3">
                        <div class="table-responsive">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th class="h6">
                                        {$_L['Image']}
                                    </th>

                                    <th class="h6">
                                        {$_L['Name']}
                                    </th>


                                    <th class="h6">
                                        {$_L['Created']}
                                    </th>
                                </tr>
                                </thead>

                                <tbody class="recent_clients_tabla">

                                    {foreach $recent_customers as $recent_customer}

                                    <tr>
                                        <td data-order="{$recent_customer@iteration}">
                                            <a href="{$_url}contacts/view/{$recent_customer->id}">{sp_get_contact_image($recent_customer)}</a>
                                        </td>
                                        <td>
                                            <a class="h6" href="{$base_url}contacts/view/{$recent_customer->id}">
                                                {$recent_customer->account}
                                            </a></br>
                                            {$recent_customer->email}
                                        </td>

                                        <td>
                                            {if !empty($recent_customer->created_at)}
                                                {date( $config['df'], strtotime($recent_customer->created_at))}
                                            {/if}
                                        </td>
                                    </tr>

                                {/foreach}

                                </tbody>

                                 
                            </table>

                        </div>

                    </div>
                </div>
            </div>








            <div class="col-lg-6">
                <div id="panel-3" class="panel border-0" data-panel-close="false">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">{$_L['Recent Invoices']}</h2>

                    </div>
                    <div class="panel-container show p-3">

                        <div class="table-responsive  widget-table">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th class="h6">#</th>
                                    <th class="h6">{$_L['Account']}</th>
                                    <th class="h6">{$_L['Amount']}</th>
                                    <th class="h6">{$_L['Paid']}</th>
                                    <th class="h6">Amount Due</th>                           
                                    <th class="h6">{$_L['Invoice Date']}</th>
                                    <th class="h6">{$_L['Due Date']}</th>
                                    <th class="h6">{$_L['Status']}</th>
                                </tr>
                                </thead>
                                <tbody class="invoices_table">

                                    {$Amount = 0}
                                    {$Paid = 0}
                                    {$Amount_Due = 0}

                                    {foreach $invoices as $ds}

                                        {$Amount     = $Amount + $ds['total']}
                                        {$Paid       = $Paid + $ds['credit']}
                                        {$Amount_Due = $Amount_Due + $ds['total'] - $ds['credit']}

                                        <tr class="cursor-pointer clickable-row" data-id="{$ds['id']}">
                                            <td class="text-info h6">
                                                <strong>
                                                    {$ds['invoicenum']}{if $ds['cn'] neq ''} {$ds['cn']} {else} {$ds['id']} {/if}
                                                </strong>
                                            </td>

                                             

                                            <td class="h6">

                                                <strong>{$ds['account']}</strong> <br>
                                            </td>
                                            <td class="h6">{formatCurrency($ds['total'],$ds['currency_iso_code'])}</td>

                                            <td class="text-success h6">
                                                <strong>
                                                   {formatCurrency($ds['credit'],$ds['currency_iso_code'])}
                                                </strong>
                                            </td>

                                            <td class="text-danger h6">
                                                <strong>
                                                    {formatCurrency($ds['total'] - $ds['credit'],$ds['currency_iso_code'])}
                                                    
                                                </strong>
                                            </td>

                                            <td class="h6">

                                                {if !empty($ds['date'])}
                                                    {date( $config['df'], strtotime($ds['date']))}
                                                    {else}
                                                    --
                                                {/if}


                                            </td>
                                            <td class="h6">

                                                {if !empty($ds['duedate'])}
                                                    {date( $config['df'], strtotime($ds['duedate']))}
                                                    {else}
                                                    --
                                                {/if}

                                            </td>
                                            <td class="h6">
                                                {if $ds['status'] == 'Unpaid'}

                                                    <span class="badge badge-outline badge-outline-danger">{ib_lan_get_line($ds['status'])}</span>

                                                {else}

                                                    <span class="badge badge-outline  badge-outline-success">{ib_lan_get_line($ds['status'])}</span>

                                                {/if}


                                            </td>

                                        </tr>
                                    {/foreach}


                                    <tr>
                                        <td class="borrar_total_recent_invoices"><strong>Total:</strong></td>
                                        <td></td>
                                        <td class="total_recent_invoices"><strong  >{formatCurrency($Amount, $ds['currency_iso_code'])}</strong></td>
                                        <td class="pain_recent_invoices"><strong  >{formatCurrency($Paid, $ds['currency_iso_code'])}</strong></td>
                                        <td class="amounte_due_recent_invoices"><strong  >{formatCurrency($Amount_Due, $ds['currency_iso_code'])}</strong></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>

                                </tbody>
                            </table>

                        </div>

                        <div class="panel-content">
                            <div id="invoice_stats"></div>
                        </div>

                    </div>


                </div>
            </div>

             

            {if isset($config['projects']) && $config['projects']}
                <div class="col-lg-6">
                    <div id="panel-4" class="panel border-0">
                        <div class="panel-hdr">
                            <h2 class="fw-bolder">
                                {$_L['Recent Projects']}
                            </h2>
                        </div>
                        <div class="panel-container border-0 show p-3">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>

                                    <th class="h6">
                                        {$_L['Name']}
                                    </th>
                                    <th class="h6">
                                        {$_L['Budget']}

                                    </th>
                                    <td class="h6">
                                        {$_L['Status']}
                                    </td>

                                    <th class="h6">
                                        {$_L['Due Date']}
                                    </th>

                                </tr>
                                </thead>
                                {foreach $recent_projects as $project}

                                    <tr>

                                        <td class="h6">
                                            {$project->name}
                                        </td>
                                        <td class="h6">
                                            {formatCurrency($project->budget,$project->currency)}
                                        </td>
                                        <td>
                                            {if $project->status == 'Completed'}
                                                <span class="badge badge-outline text-uppercase badge-outline-success mb-4">{$project->status}</span>
                                            {else}
                                                <span class="badge badge-outline text-uppercase badge-outline-warning mb-4">{$project->status}</span>
                                            {/if}

                                        </td>
                                        <td>
                                            {if !empty($project->due_date)}
                                                {date( $config['df'], strtotime($project->due_date))}
                                                {else}
                                                --
                                            {/if}
                                        </td>

                                    </tr>

                                {/foreach}
                            </table>
                        </div>
                    </div>
                </div>

            {/if}

            <div class="col-lg-6">
                <div id="panel-11" class="panel border-0">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">
                            Appointments
                        </h2>
                    </div>
                    <div class="panel-container show p-5">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div id="panel-7" class="panel border-0" data-panel-close="false">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder titulo_invoices_per_employee">Invoice Per Employee ( {$empleados_facturas_fechas} )</h2>

                    </div>
                    <div class="panel-container show p-3">

                        <div class="table-responsive  widget-table">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                   <!-- <th class="h6">#</th> -->
                                    <th class="h6">Employee</th>
                                   {* <th class="h6">Invoice Quantity</th>*}
                                   {* <th class="h6">Amount</th>*}
                                    <th class="h6">Paid</th>
                                   {*  <th class="h6">Amount Due</th> *}
                                </tr>
                                </thead>
                                <tbody class="invoices_empleados_table">

                                    {$Amount = 0}
                                    {$Paid = 0}
                                    {$Amount_Due = 0}
                                    {$cantidad = 0}

                                    {foreach $empleados_facturas as $ds}

                                        {$Amount     = $Amount + $ds['total_amount']}
                                        {$Paid       = $Paid + $ds['total_pain']}
                                        {$Amount_Due = $Amount_Due + $ds['total_amout_due']}
                                        {$cantidad   = $cantidad + $ds['cantidad_facturas']}

                                        <tr   >
                                          
                                            <td class="h6">
                                                <strong>{$ds['fullname']}</strong> <br>
                                            </td>
                                            
                                           <!-- <td class="h6">{$ds['cantidad_facturas']}</td> -->

                                           <!-- <td class="h6">{formatCurrency($ds['total_amount'], $ds['currency_iso_code'])}</td> -->

                                            <td class="text-success h6">
                                                <strong>
                                                   {formatCurrency($ds['total_pain'], $ds['currency_iso_code'])}
                                                </strong>
                                            </td>

                                          <!--  <td class="text-danger h6">
                                                <strong>
                                                    {formatCurrency($ds['total_amout_due'] ,$ds['currency_iso_code'])}
                                                </strong>
                                            </td>
                                            -->
                                            
                                            
                                        </tr>
                                    {/foreach}

                                    <tr   >
                                          
                                            <td class="h6">
                                                <strong>Total</strong> <br>
                                            </td>
                                            
 
 
                                            <td class="text-success h6">
                                                <strong class="pain_invoices_employee">
                                                   {formatCurrency($Paid, $ds['currency_iso_code'])}
                                                </strong>
                                            </td>

                                          

                                        </tr>

                                        


                                    <!-- <tr>
                                        <td class="borrar_total_invoices_employees"><strong>Total:</strong></td>
                                        <td></td>
                                        <td class="total_recent_invoices"><strong  >{formatCurrency($Amount, $ds['currency_iso_code'])}</strong></td>
                                        <td class="pain_recent_invoices"><strong  >{formatCurrency($Paid, $ds['currency_iso_code'])}</strong></td>
                                        <td class="amounte_due_recent_invoices"><strong  >{formatCurrency($Amount_Due, $ds['currency_iso_code'])}</strong></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    -->
                                  

                                </tbody>
                            </table>

                        </div>

              

                    </div>


                </div>
            </div>


            <!--
            <div class="col-lg-6">
                <div class="panel" id="panel-7">
                    <div class="panel-hdr">

                        <h2 class="fw-bolder">{$_L['Latest Expense']}</h2>
                    </div>

                    <div class="panel-container show p-3 ">
                        <div class="table-responsive">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th class="h6">{$_L['Date']}</th>
                                    <th class="h6">{$_L['Description']}</th>
                                    <th class="text-end h6 ">{$_L['Amount']}</th>
                                </tr>
                                </thead>
                                <tbody class="latest_expense_table">
                                {foreach $exp as $exps}
                                    <tr>
                                        <td class="text-info h6">
                                            {if !empty($exps['date'])}
                                                {date( $config['df'], strtotime($exps['date']))}
                                                {else}
                                                --
                                            {/if}
                                        </td>
                                        <td><a href="{$_url}transactions/manage/{$exps['id']}/"><strong>{$exps['description']}</strong></a> </td>
                                        <td class="text-end text-danger amount h6">{formatCurrency($exps['amount'],$config['home_currency'])}</td>
                                    </tr>
                                {/foreach}
                                </tbody>



                            </table>
                        </div>

                    </div>

                </div>

            </div>
            -->

            <!--
            <div class="col-lg-6">
                <div id="panel-2" class="panel" data-panel-fullscreen="false">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">
                            {$_L['Expense by Category']}
                        </h2>
                    </div>
                    <div class="panel-container show">

                        <div class="panel-content p-0 nuevo_expense_by_category">
                            <div id="expense_chart" class=""></div>
                        </div>

                    </div>
                </div>

            </div>
            -->

            <div class="col-md-6">
                <div class="panel" id="panel-6">
                    <div class="panel-hdr">
                        <h2 class="fw-bolder">{{__('Net Worth n Account Balances')}}</h2>
                        <div class="panel-toolbar">

                            <a href="#" id="set_goal" class="btn btn-primary btn-xs pull-right"> {{__('Set Goal')}} </a>
                        </div>


                    </div>
                    <div class="panel-container" style="min-height: 365px;">
                        <div class="panel-content">

                            <h1 class="text-center amount net_worth_h1">{formatCurrency($net_worth,$config['home_currency'])}</h1>
 
                            <div>
                                <span class="amount net_worth_span">{formatCurrency($net_worth,$config['home_currency'])}</span> {$_L['of']} <span class="amount">{$config['networth_goal']}</span>
                                <small class="float-right"><span class="amount_no_currency pg_porcentaje">{$pg}</span>%</small>

                                <div class="progress progress-small cambiar_progress_net_worth">
                                    <div style="width: {$pgb}%;" class=" progress-bar progress-bar-{$pgc}  bg-success"></div>
                                </div>

                            </div>


                            <table class="table" style="margin-top: 26px;">

                                <thead class="thead-light">
                                <tr>
                                    <th class="text-info h6"><strong>{$_L['Account']}</strong></th>

                                    <th class="text-end h6">{$_L['Balance']}</th>
                                </tr>
                                </thead>
                                <tbody class="net_worth_table">

                                    {foreach $balances['banks'] as $bank}

                                        <tr>
                                            <td class="text-info h6"><strong>{$bank->account}</strong></td>

                                            <td class="text-end h6">
                                                {if (isset($balances['balances'][$bank->id]))}
                                                    {formatCurrency($balances['balances'][$bank->id],$balances['home_currency']->iso_code)}
                                                {/if}
                                            </td>

                                        </tr>

                                    {/foreach}
                                </tbody>


                            </table>



                        </div>





                        <div>





                        </div>






                    </div>
                </div>
            </div>

            {if $config['invoicing'] && $all_data_access}


              <!--  
                <div class="col-md-6">

                    <div class="panel" id="panel-7">
                        <div class="panel-hdr">
                            <h2 class="fw-bolder">{$_L['Sales']}</h2>
                        </div>
                        <div class="panel-container">
                            <div class="panel-content">
                                <div class="ibox-content">

                                    <div id="sales_pie_graph"></div>

                                </div>
                            </div>
                        </div>

                    </div>

                    -->


                </div>

                <div class="col-md-6">
                    <div class="panel" id="panel-8">
                        <div class="panel-hdr">
                            <h2 class="fw-bolder">{$_L['Sales']}</h2>
                            <div class="panel-toolbar">
                                <a href="{$_url}invoices/list/" class="btn btn-primary btn-xs pull-right"> {$_L['Invoices']}</a>
                            </div>



                        </div>
                        <div class="panel-container">
                            <table class="table table-striped " >
                                <thead class="thead-light">
                                <tr>

                                    <th class="h6"><strong>{$_L['Name']}</strong></th>
                                    <th class="h6">{$_L['Sales Count']}</th>
                                    <th class="h6">{$_L['Amount']}</th>

                                </tr>
                                </thead>
                                <tbody class="sales_tabla">

                                {$total_sales = 0}

                                {foreach $item_sold as $sold}
                                    
                                    {$total_sales = $total_sales  + $sold['total']}

                                    <tr>

                                        <td class="text-info h6">
                                            <strong>
                                                {strTrunc($sold['name'],30)}
                                            </strong>

                                        </td>
                                        <td class="h6">{floor($sold['sold_count'])}</td>
                                        <td class="amount h6">{formatCurrency($sold['total'],$config['home_currency'])}</td>

                                    </tr>
                                {/foreach}

                                 <tr>

                                        <td class="text-info h6">
                                            <strong>
                                                Total:
                                            </strong>

                                        </td>
                                        <td class="h6"></td>
                                        <td class="amount h6">{formatCurrency($total_sales, $config['home_currency'])}</td>

                                  </tr>

                                </tbody>
                            </table>


                        </div>



                    </div>

                </div>
                <div class="col-lg-6">
                    <div class="panel" id="panel-6">
                        <div class="panel-hdr">

                            <h2 class="fw-bolder">{$_L['Latest Income']}</h2>
                        </div>
                        <div class="panel-container show p-3">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="thead-light">
                                    <tr>
                                        <th class="h6">{$_L['Date']}</th>
                                        <th class="h6">{$_L['Description']}</th>
                                        <th class="text-end h6">{$_L['Amount']}</th>
                                    </tr>
                                    </thead>
                                    <tbody class="last_income_tabla">
                                    {foreach $inc as $incs}
                                        <tr>
                                            <td class="h6 text-info">

                                                {if !empty($incs->date)}
                                                {date( $config['df'], strtotime($incs['date']))}
                                                {else}
                                                --
                                                {/if}


                                            </td>
                                            <td><a href="{$_url}transactions/manage/{$incs['id']}/"><strong>{$incs['description']}</strong></a> </td>
                                            <td class="text-end text-success amount h6">{formatCurrency($incs['amount'],$config['home_currency'])}</td>
                                        </tr>
                                    {/foreach}
                                    </tbody>



                                </table>
                            </div>

                        </div>

                    </div>

                </div>

            {/if}



        </div>
    </div>

 

{/block}

{block name="script"}
    <script>

        let fecha = moment();
        let fechaFormateada = moment(fecha, 'YYYY/MM/DD').format('MMMM [del] YYYY');
        $(".enviar_fecha_income_vs_expense").html(fechaFormateada);

        var start = moment().subtract(29, 'days');
        var end = moment();

        var startDate = moment();
        var endDate = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            startDate = start;
            endDate = end;
        }

        var $reportrange = $("#reportrange");

        $reportrange.daterangepicker({
            startDate: moment(), // aqui podemos poner la variable start
            endDate: moment(), // aqui podemos poner la variable end
            ranges: {
                '{__('Today')}': [moment(), moment()],
                '{__('Yesterday')}': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '{__('Last 7 Days')}': [moment().subtract(6, 'days'), moment()],
                '{__('Last 30 Days')}': [moment().subtract(29, 'days'), moment()],
                '{__('This Month')}': [moment().startOf('month'), moment().endOf('month')],
                '{__('Last Month')}': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            locale: {
                format: 'YYYY/MM/DD'
            }
        }, cb);

        cb(moment(), moment());
        function strTrunc(str, length) {
            return str.length > length ? str.substring(0, length) + '...' : str;
        }
         
        $('.buscarFecha').on('click', function() {

 
 
                //alert('Fechas seleccionadas: ' + startDate.format('YYYY-MM-DD') + ' - ' + endDate.format('YYYY-MM-DD'));
                 let informacion = {                 
                    startDate: startDate.format('YYYY-MM-DD'),
                    endDate:   endDate.format('YYYY-MM-DD'),
                };

                $(".buscarFechaCargando").show();
                $(".buscarFecha").hide();


                const jsonString = JSON.stringify(informacion);

                /* console.log(jsonString);
                return;  */
                 
                var _url = $("#url_api").val();
                $.post(_url + 'dashboard/filtro-fecha-admin/', jsonString, function (data) {


                    

 
                    $(".buscarFechaCargando").hide();
                    $(".buscarFecha").show();

                     
                    //console.log(data);
                    //return;

                     try {
                        const info = JSON.parse(data);
                        //console.log(info.expense_cats);
                       
                        if( info.type == "success")
                        {

                            //console.log(info.recent_customers);  
                            
                            //ESTA ES LA DATA QUE NO SALE BIEN (CORREGIR) 
                            //info.item_sold
                            //ESTA ES LA DATA QUE SALE BUENA
                            //$('.invoices_table').html(info.invoices_html);

                            //

                            if (info.item_sold && Array.isArray(info.item_sold)) {
                                let sales_tabla = '';
                                var sumar_sale = 0;

                                info.item_sold.forEach(item => {
                                    sales_tabla += '<tr>';
                                    sales_tabla += '<td class="text-info h6"><strong>' + strTrunc(item.name, 30) + '</strong></td>';
                                    sales_tabla += '<td class="h6">' + Math.floor(item.sold_count) + '</td>';
                                    sales_tabla += '<td class="amount h6">' + item.total + '</td>';
                                    sales_tabla += '</tr>';

                                    //sumar_sale += item.total_sumar;
                                });


                                //ESTA ES LA DATA QUE NO SALE BIEN (CORREGIR) 
                                $('.sales_tabla').html(sales_tabla);
                                $('.sales_tabla').append('<tr>' +
                                    '<td class="text-info h6">' +
                                    '<strong>Total:</strong>' +
                                    '</td>' +
                                    '<td class="h6"></td>' +
                                    '<td class="amount h6">' + info.total_suma_sales + '</td>' +
                                '</tr>'
                                );


                                 

                                const names = info.item_sold_circular.map(item => item.name);
                                const soldCounts = info.item_sold_circular.map(item => item.sold_count);

                                var options = {
                                    series: soldCounts,
                                    chart: {
                                        height: 350,
                                        type: 'radialBar',
                                        {if !empty($config['admin_dark_theme'])}
                                        foreColor: '#fff',
                                        colors: ["#4586DB", "#C23C3E"],
                                        {else}
                                        colors: ["#7E5FF4", "#FB8141"],
                                        {/if}


                                    },
                                    plotOptions: {
                                        radialBar: {
                                            dataLabels: {
                                                name: {
                                                    fontSize: '22px',
                                                },
                                                value: {
                                                    fontSize: '16px',
                                                },
                                                total: {
                                                    show: true,
                                                    label: '{$_L['Total']}',
                                                    formatter: function (w) {
                                                        // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                                                        return info.item_sold_circular.length
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    labels: names,
                                    {if !empty($config['admin_dark_theme'])}
                                    background: '#000',
                                    {/if}
                                } 

                                
                                //var chart = new ApexCharts(document.querySelector("#sales_pie_graph"), options);
                                //chart.render(); 
                            }

                            // Actualizar la tabla de clientes recientes
                            $('.recent_clients_tabla').html(info.recent_customers_html);
                            //ESTA ES LA DATA QUE SALE BUENA
                            $('.invoices_table').html(info.invoices_html);
                            $('.borrar_total_recent_invoices').html("");

                             

                             //var totalAmount = info.Amount_recent_invoices;
                             //var painAmount  = info.Pain_recent_invoices;
                             //var amountDue   = info.Amount_Due_recent_invoices;

                             //console.log(totalAmount);
                             //console.log(painAmount);
                             //console.log(amountDue);

                            /* $('.invoices_table').append('\
                                <tr>\
                                    <td><strong>Total:</strong></td>\
                                    <td></td>\
                                    <td ><strong class="total_recent_invoices"></strong></td>\
                                    <td ><strong class="pain_recent_invoices"></strong></td>\
                                    <td ><strong class="amounte_due_recent_invoices"></strong></td>\
                                    <td></td>\
                                    <td></td>\
                                    <td></td>\
                                </tr>\
                            ');

                            // Establecer los valores de las celdas usando variables de JavaScript
                            $(".total_recent_invoices strong").text(totalAmount);
                            $(".pain_recent_invoices strong").text(painAmount);
                            $(".amounte_due_recent_invoices strong").text(amountDue); */

                            
                            //dejo est aqui porque cuando cargo invoices_table la data el evento se piertde
                            $('.clickable-row').on('click',function () {
                                window.location = base_url + 'invoices/view/' + $(this).data('id');
                            });

                            /* console.log(info.porcentajes.Unpaid.percentage);
                            console.log(info.porcentajes.Partially_Paid.percentage);
                            console.log(info.porcentajes.Paid.percentage);
                            console.log(info.porcentajes.Modify_Discount.percentage);
                            console.log(info.porcentajes.Pending_Approval.percentage);
                            console.log(info.porcentajes.Reject.percentage); */

                            var invoice_stats = $("#invoice_stats");
                            invoice_stats.html(
                                '<span class="font-12 head-font txt-dark">{$_L["Unpaid"]} <span class="float-right">' + info.porcentajes.Unpaid.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-danger" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Unpaid.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Unpaid.percentage + '%</span>\
                                    </div>\
                                </div>\
                                <span class="font-12 head-font txt-dark">{$_L["Partially Paid"]} <span class="float-right">' + info.porcentajes.Partially_Paid.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-info" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Partially_Paid.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Partially_Paid.percentage + '%</span>\
                                    </div>\
                                </div>\
                                <span class="font-12 head-font txt-dark">{$_L["Paid"]} <span class="float-right">' + info.porcentajes.Paid.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Paid.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Paid.percentage + '%</span>\
                                    </div>\
                                </div>\
                                <span class="font-12 head-font txt-dark">Pending Approval <span class="float-right">' + info.porcentajes.Pending_Approval.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Pending_Approval.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Pending_Approval.percentage + '%</span>\
                                    </div>\
                                </div>\
                                <span class="font-12 head-font txt-dark">Modify Discount <span class="float-right">' + info.porcentajes.Modify_Discount.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Modify_Discount.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Modify_Discount.percentage + '%</span>\
                                    </div>\
                                </div>\
                                <span class="font-12 head-font txt-dark">Reject <span class="float-right">' + info.porcentajes.Reject.percentage + '%</span></span>\
                                <div class="progress my-2 progress-small mt-10">\
                                    <div class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: ' + info.porcentajes.Reject.percentage + '%" role="progressbar"> \
                                        <span class="sr-only">' + info.porcentajes.Reject.percentage + '%</span>\
                                    </div>\
                                </div>'
                            );
                            invoice_stats.slideDown("slow");

                            //$('.latest_expense_table').html(info.expense_html);

                            //console.log(info.balances_data.net_worth);
                            $('.net_worth_h1').html(info.balances_data.net_worth);
                            $('.net_worth_span').html(info.balances_data.net_worth);
                            $('.pg_porcentaje').html(info.balances_data.pg);

                            let pgb = info.balances_data.pgb;
                            let pgc = info.balances_data.pgc;

                            $('.cambiar_progress_net_worth').html('<div style="width: ' + pgb + '%;" class="progress-bar progress-bar-' + pgc + ' bg-success"></div>');

                            $('.net_worth_table').html(info.balances_data.balances_html);

                            if (info.income_vs_expense && Array.isArray(info.income_vs_expense.Income) && Array.isArray(info.income_vs_expense.Expense) && Array.isArray(info.income_vs_expense.DiasMes)) 
                            {
                                /* console.log(info.income_vs_expense.Income);
                                console.log(info.income_vs_expense.Expense);
                                console.log(info.income_vs_expense.DiasMes); */

                                $('.limpiar_chart_income_vs_expense').html("<div id='chart_income_vs_expense'></div>");

                                var chart_income_vs_expense_options = {
                                    chart: {
                                        height: 400,
                                        type: 'bar',
                                        toolbar: {
                                            show: false,
                                        },
                                        {if !empty($config['admin_dark_theme'])}
                                        foreColor: '#fff',
                                        {/if}
                                    },
                                    plotOptions: {
                                        bar: {
                                            horizontal: false,
                                            columnWidth: '55%',
                                            endingShape: 'rounded'
                                        },
                                    },
                                    dataLabels: {
                                        enabled: false
                                    },
                                    stroke: {
                                        show: true,
                                        width: 0,
                                        colors: ['transparent']
                                    },
                                    series: [{
                                        name: '{$_L['Income']}',
                                        data: info.income_vs_expense.Income
                                    }, {
                                        name: '{$_L['Expense']}',
                                        data: info.income_vs_expense.Expense
                                    }],
                                    xaxis: {
                                        categories: info.income_vs_expense.DiasMes,
                                    },
                                    yaxis: {
                                        title: {
                                            text: '{$_L['Amount']}'
                                        }
                                    },
                                    colors: ["#5C34F4", "#FC9740"],
                                    fill: {
                                        opacity: 1

                                    },
                                    tooltip: {
                                        y: {
                                            formatter: function (val) {
                                                return val
                                            }
                                        }
                                    }
                                }

                                var chart_income_vs_expense = new ApexCharts(
                                    document.querySelector("#chart_income_vs_expense"),
                                    chart_income_vs_expense_options
                                );

                                chart_income_vs_expense.render();


                            }

                            $('.enviar_total_income').html(info.info_summary.total_income);
                            $('.enviar_total_expense').html(info.info_summary.total_expense);

                            $('.enviar_income_today').html(info.info_summary.income_today);
                            $('.enviar_expense_today').html(info.info_summary.expense_today);

                            $('.enviar_income_this_month').html(info.info_summary.income_this_month);
                            $('.enviar_expense_this_month').html(info.info_summary.expense_this_month);

                            $('.grafica_summary').html("<div id='cash_flow_chart'></div>");
 


                             
                            var options1 = {
                                chart: {
                                    fontFamily: 'Open Sans, sans-serif',
                                    height: 300,
                                    {if !empty($config['admin_dark_theme'])}
                                    foreColor: '#fff',
                                    {/if}
                                    toolbar: {
                                        show: false
                                    },
                                    events: {
                                        mounted: function(ctx, config) {
                                            const highest1 = ctx.getHighestValueInSeries(0);
                                            const highest2 = ctx.getHighestValueInSeries(1);

                                            ctx.addPointAnnotation({
                                                x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
                                                y: highest1,
                                                label: {
                                                    style: {
                                                        cssClass: 'd-none'
                                                    }
                                                },
                                                customSVG: {
                                                    SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#1b55e2" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                                                    cssClass: undefined,
                                                    offsetX: -8,
                                                    offsetY: 5
                                                }
                                            })

                                            ctx.addPointAnnotation({
                                                x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
                                                y: highest2,
                                                label: {
                                                    style: {
                                                        cssClass: 'd-none'
                                                    }
                                                },
                                                customSVG: {
                                                    SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                                                    cssClass: undefined,
                                                    offsetX: -8,
                                                    offsetY: 5
                                                }
                                            })
                                        },
                                    }
                                },
                                {if !empty($config['admin_dark_theme'])}
                                colors: ["#4586DB", "#C23C3E"],
                                {else}
                                colors: ["#5443EE", "#FB8141"],
                                {/if}

                                dataLabels: {
                                    enabled: false
                                },
                                stroke: {
                                    width: [0, 2, 5],
                                    curve: 'smooth'
                                },
                                fill: {
                                    opacity: [0.5, 0.25, 1],
                                    gradient: { shade: '#1449DC', shadeIntensity: .8, opacityFrom: .8, opacityTo: .25, stops: [0, 95, 100] }
                                },

                                markers: {
                                    discrete: [{
                                        seriesIndex: 0,
                                        dataPointIndex: 7,
                                        fillColor: '#000',
                                        strokeColor: '#000',
                                        size: 5
                                    }, {
                                        seriesIndex: 2,
                                        dataPointIndex: 11,
                                        fillColor: '#000',
                                        strokeColor: '#000',
                                        size: 4
                                    }]
                                },
                                subtitle: {
                                    text: '{$_L['Net Worth']}',
                                    align: 'left',
                                    margin: 0,
                                    offsetX: -10,
                                    offsetY: 35,
                                    floating: false,
                                    style: {
                                        fontSize: '14px',
                                        {if !empty($config['admin_dark_theme'])}
                                        color:  '#fff',
                                        {else}
                                        color:  '#565674',
                                        {/if}
                                    }
                                },
                                title: {
                                    text: '{formatCurrency($net_worth,$config['home_currency'])}',
                                    align: 'left',
                                    margin: 0,
                                    offsetX: -10,
                                    offsetY: 0,
                                    floating: false,
                                    style: {
                                        fontSize: '25px',
                                        {if !empty($config['admin_dark_theme'])}
                                        color:  '#fff',
                                        {else}
                                        color:  '#0e1726'
                                        {/if}
                                    },
                                },

                                series: [{
                                    type: 'area',
                                    name: 'Income',
                                    data: info.info_summary.Income,//Income

                                }, {
                                    type: 'area',
                                    name: 'Expenses',
                                    data: info.info_summary.Expense, // espense
                                }],
                                labels: info.info_summary.Months, // los meses
                                xaxis: {


                                    crosshairs: {
                                        show: true
                                    },
                                    labels: {
                                        offsetX: 0,
                                        offsetY: 5,
                                        style: {
                                            fontSize: '12px',
                                            fontFamily: 'Open Sans, sans-serif',
                                            cssClass: 'apexcharts-xaxis-title',
                                        },
                                    }
                                },
                                yaxis: {
                                    labels: {
                                        formatter: function(value, index) {
                                            return (value / 1000) + 'K'
                                        },
                                        offsetX: -22,
                                        offsetY: 0,
                                        style: {
                                            fontSize: '12px',
                                            fontFamily: 'Open Sans, sans-serif',
                                            cssClass: 'apexcharts-yaxis-title',
                                        },
                                    }
                                },
                                grid: {
                                    {if !empty($config['admin_dark_theme'])}
                                    borderColor: "#2B2C3F",
                                    {else}
                                    borderColor: "#f1f1f1",
                                    {/if}
                                    padding: {
                                        top: 10
                                    },
                                    strokeDashArray: 4,
                                    yaxis: {
                                        lines: {
                                            show: true
                                        }
                                    }

                                },
                                legend: {
                                    position: 'top',
                                    horizontalAlign: 'right',
                                    offsetY: -50,
                                    fontSize: '16px',
                                    fontFamily: 'Open Sans, sans-serif',
                                    markers: {
                                        width: 10,
                                        height: 10,
                                        strokeWidth: 0,
                                        strokeColor: '#fff',
                                        fillColors: undefined,
                                        radius: 12,
                                        onClick: undefined,
                                        offsetX: 0,
                                        offsetY: 0
                                    },
                                    itemMargin: {
                                        horizontal: 0,
                                        vertical: 20
                                    }
                                },
                                tooltip: {
                                    theme: 'dark',
                                    marker: {
                                        show: true,
                                    },
                                    x: {
                                        show: false,
                                    }
                                },
                                responsive: [{
                                    breakpoint: 575,
                                    options: {
                                        legend: {
                                            offsetY: -30,
                                        },
                                    },
                                }],
                                plotOptions: { bar: { horizontal: !1, columnWidth: "15%", endingShape: "rounded" } },
                                {if !empty($config['admin_dark_theme'])}
                                background: '#000',
                                foreColor: '#fff',
                                {/if}
                            };


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

                            chart1.render();

                            let fecha = startDate.format('YYYY/MM/DD');
                            let fechaFormateada = moment(fecha, 'YYYY/MM/DD').format('MMMM [del] YYYY');
                            $(".enviar_fecha_income_vs_expense").html(fechaFormateada);

                            $('.last_income_tabla').html(info.last_income_html);

                            // expense by category

                             
                            /* $('.nuevo_expense_by_category').html("<div id='expense_chart' class=''></div>");
                            const names_expense = info.expense_cats.map(item => item.name);
                            const total_expense = info.expense_cats.map(item => item.total_amount); */

                            //console.log(names_expense);
                            //console.log(total_expense);
                           
                            /*  var expense_chart_options = {
                                chart: {
                                    height: 403,
                                    type: 'bar',
                                    toolbar: {
                                        show: false,
                                    },
                                    {if !empty($config['admin_dark_theme'])}
                                    foreColor: '#fff',
                                    {/if}

                                },
                                colors: ["#5C34F4"],
                                xaxis: {
                                    categories: names_expense,
                                },
                                series: [{
                                    data: total_expense
                                }],
                                plotOptions: {
                                    bar: {
                                        horizontal: true,
                                        endingShape: 'rounded',

                                    }
                                },
                                grid: {
                                    {if !empty($config['admin_dark_theme'])}
                                    borderColor: "#2B2C3F"
                                    {else}
                                    borderColor: "#f1f1f1"
                                    {/if}

                                },
                                responsive: [{
                                    breakpoint: 480,
                                    options: {
                                        chart: {
                                            width: 200
                                        },
                                        legend: {
                                            position: 'bottom'
                                        }
                                    }
                                }]
                            }

                            var expense_chart = new ApexCharts(
                                document.querySelector("#expense_chart"),
                                expense_chart_options
                            );

                            expense_chart.render(); */

                            let titulo = "Invoice Per Employee ( "+startDate.format('YYYY-MM-DD') + " / " + endDate.format('YYYY-MM-DD') +" )"

                            $(".titulo_invoices_per_employee").text(titulo);
                            
                            $(".invoices_empleados_table").html(info.empleados_facturas_html);

                           /*  $(".cantidad_invoices_employee").text("3");
                            $(".amount_invoices_employee").text("amount_invoices_employee");
                            $(".pain_invoices_employee").text("pain_invoices_employee");
                            $(".amount_due_invoices_employees").text("amount_due_invoices_employees"); */
            
                             
           
                        }else{
                            toastr.error(info.message);
                        }
                    } catch (error) {
                        toastr.error(data);
                    }
                    
                });
        });

        function displayEvent(event_id=0,date=0)
        {
            $.fancybox.open({
                src  :  base_url + 'dashboard/modal-calendar/'+event_id+'/'+date,
                type : 'ajax',
                opts : {
                    afterShow : function( instance, current ) {
                        // $('[data-toggle="datepicker"]').datepicker();
                        // $start_time.timepicker();
                        // $end_time.timepicker();

                        $('#start').datepicker();
                        $('#start_time').timepicker();
                        $('#end').datepicker();

                        let eventForm = $('#eventForm');
                        eventForm.on('submit',function (e) {
                            e.preventDefault();
                            $.post( base_url + "calendar/save_event/", eventForm.serialize())
                                .done(function( data ) {



                                    if ($.isNumeric(data)) {

                                        location.reload();

                                    }

                                    else {
                                        toastr.error(data);
                                    }

                                });


                            return false;
                        });

                    }
                },
            });
        }

         

        $(function () {

            $.getJSON( "{$_url}dashboard/json_income_vs_exp", function( data ) {


                /* console.log("mi mina de datos");
                console.log(data); */

                var options1 = {
                    chart: {
                        fontFamily: 'Open Sans, sans-serif',
                        height: 300,
                        {if !empty($config['admin_dark_theme'])}
                        foreColor: '#fff',
                        {/if}
                        toolbar: {
                            show: false
                        },
                        events: {
                            mounted: function(ctx, config) {
                                const highest1 = ctx.getHighestValueInSeries(0);
                                const highest2 = ctx.getHighestValueInSeries(1);

                                ctx.addPointAnnotation({
                                    x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
                                    y: highest1,
                                    label: {
                                        style: {
                                            cssClass: 'd-none'
                                        }
                                    },
                                    customSVG: {
                                        SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#1b55e2" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                                        cssClass: undefined,
                                        offsetX: -8,
                                        offsetY: 5
                                    }
                                })

                                ctx.addPointAnnotation({
                                    x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
                                    y: highest2,
                                    label: {
                                        style: {
                                            cssClass: 'd-none'
                                        }
                                    },
                                    customSVG: {
                                        SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                                        cssClass: undefined,
                                        offsetX: -8,
                                        offsetY: 5
                                    }
                                })
                            },
                        }
                    },
                    {if !empty($config['admin_dark_theme'])}
                    colors: ["#4586DB", "#C23C3E"],
                    {else}
                    colors: ["#5443EE", "#FB8141"],
                    {/if}

                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        width: [0, 2, 5],
                        curve: 'smooth'
                    },
                    fill: {
                        opacity: [0.5, 0.25, 1],
                        gradient: { shade: '#1449DC', shadeIntensity: .8, opacityFrom: .8, opacityTo: .25, stops: [0, 95, 100] }
                    },

                    markers: {
                        discrete: [{
                            seriesIndex: 0,
                            dataPointIndex: 7,
                            fillColor: '#000',
                            strokeColor: '#000',
                            size: 5
                        }, {
                            seriesIndex: 2,
                            dataPointIndex: 11,
                            fillColor: '#000',
                            strokeColor: '#000',
                            size: 4
                        }]
                    },
                    subtitle: {
                        text: '{$_L['Net Worth']}',
                        align: 'left',
                        margin: 0,
                        offsetX: -10,
                        offsetY: 35,
                        floating: false,
                        style: {
                            fontSize: '14px',
                            {if !empty($config['admin_dark_theme'])}
                            color:  '#fff',
                            {else}
                            color:  '#565674',
                            {/if}
                        }
                    },
                    title: {
                        text: '{formatCurrency($net_worth,$config['home_currency'])}',
                        align: 'left',
                        margin: 0,
                        offsetX: -10,
                        offsetY: 0,
                        floating: false,
                        style: {
                            fontSize: '25px',
                            {if !empty($config['admin_dark_theme'])}
                            color:  '#fff',
                            {else}
                            color:  '#0e1726'
                            {/if}
                        },
                    },

                    series: [{
                        type: 'area',
                        name: 'Income',
                        data: data.Income,//Income

                    }, {
                        type: 'area',
                        name: 'Expenses',
                        data: data.Expense, // espense
                    }],
                    labels: data.Months, // los meses
                    xaxis: {


                        crosshairs: {
                            show: true
                        },
                        labels: {
                            offsetX: 0,
                            offsetY: 5,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Open Sans, sans-serif',
                                cssClass: 'apexcharts-xaxis-title',
                            },
                        }
                    },
                    yaxis: {
                        labels: {
                            formatter: function(value, index) {
                                return (value / 1000) + 'K'
                            },
                            offsetX: -22,
                            offsetY: 0,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Open Sans, sans-serif',
                                cssClass: 'apexcharts-yaxis-title',
                            },
                        }
                    },
                    grid: {
                        {if !empty($config['admin_dark_theme'])}
                        borderColor: "#2B2C3F",
                        {else}
                        borderColor: "#f1f1f1",
                        {/if}
                        padding: {
                            top: 10
                        },
                        strokeDashArray: 4,
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }

                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                        offsetY: -50,
                        fontSize: '16px',
                        fontFamily: 'Open Sans, sans-serif',
                        markers: {
                            width: 10,
                            height: 10,
                            strokeWidth: 0,
                            strokeColor: '#fff',
                            fillColors: undefined,
                            radius: 12,
                            onClick: undefined,
                            offsetX: 0,
                            offsetY: 0
                        },
                        itemMargin: {
                            horizontal: 0,
                            vertical: 20
                        }
                    },
                    tooltip: {
                        theme: 'dark',
                        marker: {
                            show: true,
                        },
                        x: {
                            show: false,
                        }
                    },
                    responsive: [{
                        breakpoint: 575,
                        options: {
                            legend: {
                                offsetY: -30,
                            },
                        },
                    }],
                    plotOptions: { bar: { horizontal: !1, columnWidth: "15%", endingShape: "rounded" } },
                    {if !empty($config['admin_dark_theme'])}
                    background: '#000',
                    foreColor: '#fff',
                    {/if}
                };


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

                chart1.render();
            });


            /* var expense_chart_options = {
                chart: {
                    height: 403,
                    type: 'bar',
                    toolbar: {
                        show: false,
                    },
                    {if !empty($config['admin_dark_theme'])}
                    foreColor: '#fff',
                    {/if}

                },
                colors: ["#5C34F4"],
                xaxis: {
                    categories: [
                        {foreach $expense_cats as $expnese_cat}
                        '{addslashes($expnese_cat["name"])}',
                        {/foreach}
                    ],
                },
                series: [{
                    data: [{foreach $expense_cats as $expnese_cat}
                        {$expnese_cat["total_amount"]},
                        {/foreach}]
                }],
                plotOptions: {
                    bar: {
                        horizontal: true,
                        endingShape: 'rounded',

                    }
                },
                grid: {
                    {if !empty($config['admin_dark_theme'])}
                    borderColor: "#2B2C3F"
                    {else}
                    borderColor: "#f1f1f1"
                    {/if}

                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            }

            var expense_chart = new ApexCharts(
                document.querySelector("#expense_chart"),
                expense_chart_options
            );

            expense_chart.render(); */


            $.getJSON( "{$_url}dashboard/json_d_chart_data/", function( data ) {

                //console.log(data);

                var chart_income_vs_expense_options = {
                    chart: {
                        height: 400,
                        type: 'bar',
                        toolbar: {
                            show: false,
                        },
                        {if !empty($config['admin_dark_theme'])}
                        foreColor: '#fff',
                        {/if}
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 0,
                        colors: ['transparent']
                    },
                    series: [{
                        name: '{$_L['Income']}',
                        data: data.Income
                    }, {
                        name: '{$_L['Expense']}',
                        data: data.Expense
                    }],
                    xaxis: {
                        categories: [
                            '01',
                            '02',
                            '03',
                            '04',
                            '05',
                            '06',
                            '07',
                            '08',
                            '09',
                            '10',
                            '11',
                            '12',
                            '13',
                            '14',
                            '15',
                            '16',
                            '17',
                            '18',
                            '19',
                            '20',
                            '21',
                            '22',
                            '23',
                            '24',
                            '25',
                            '26',
                            '27',
                            '28',
                            '29',
                            '30',
                            '31'
                        ],
                    },
                    yaxis: {
                        title: {
                            text: '{$_L['Amount']}'
                        }
                    },
                    colors: ["#5C34F4", "#FC9740"],
                    fill: {
                        opacity: 1

                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val
                            }
                        }
                    }
                }

                var chart_income_vs_expense = new ApexCharts(
                    document.querySelector("#chart_income_vs_expense"),
                    chart_income_vs_expense_options
                );

                chart_income_vs_expense.render();
            });

            $('.clickable-row').on('click',function () {
                window.location = base_url + 'invoices/view/' + $(this).data('id');
            });

            var invoice_stats = $("#invoice_stats");

            $.get( base_url + "dashboard/invoice_stats_json/", function( data ) {

                //console.log("data");
                //console.log(data);

                if(data)
                {
                    invoice_stats.html(' <span class="font-12 head-font txt-dark">{$_L['Unpaid']} <span class="float-right">'+ data.Unpaid.percentage +'%</span></span>\
                        <div class="progress my-2 progress-small mt-10">\
                        <div class="progress-bar progress-bar-danger" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: '+ data.Unpaid.percentage +'%" role="progressbar"> <span class="sr-only">'+ data.Unpaid.percentage +'%</span> </div>\
                        </div>\
                        <span class="font-12 head-font txt-dark">{$_L['Partially Paid']} <span class="float-right">'+ data['Partially Paid'].percentage +'%</span></span>\
                        <div class="progress my-2 progress-small mt-10">\
                        <div class="progress-bar progress-bar-info" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: '+ data['Partially Paid'].percentage +'%" role="progressbar"> <span class="sr-only">'+ data['Partially Paid'].percentage +'</span> </div>\
                        </div>\
                        <span class="font-12 head-font txt-dark">{$_L['Paid']} <span class="float-right">'+ data.Paid.percentage +'%</span></span>\
                        <div class="progress my-2 progress-small mt-10">\
                        <div class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: '+ data.Paid.percentage +'%" role="progressbar"> <span class="sr-only">'+ data.Paid.percentage +'</span> </div>\
                        </div>\
                        ');

                        invoice_stats.slideDown( "slow" );

                // Load Account Balances
                }


                 



            });


            $('#clx-page-content').smartPanel({
                localStorage: true,
                onChange: function () {},
                onSave: function () {},
                opacity: 1,
                deleteSettingsKey: '#deletesettingskey-options',
                settingsKeyLabel: 'Reset settings?',
                deletePositionKey: '#deletepositionkey-options',
                positionKeyLabel: 'Reset position?',
                sortable: true,
                buttonOrder: '%collapse% %fullscreen% %close%',
                buttonOrderDropdown: '%refresh% %locked% %color% %custom% %reset%',
                // customButton: true,
                // customButtonLabel: "Custom Button",
                onCustom: function () {},
                closeButton: false,
                onClosepanel: function() {
                    if (myapp_config.debugState)
                        console.log($(this).closest(".panel").attr('id') + " onClosepanel")
                },
                fullscreenButton: true,
                onFullscreen: function() {
                    if (myapp_config.debugState)
                        console.log($(this).closest(".panel").attr('id') + " onFullscreen")
                },
                collapseButton: true,
                onCollapse: function() {
                    if (myapp_config.debugState)
                        console.log($(this).closest(".panel").attr('id') + " onCollapse")
                },
                lockedButton: false,
                lockedButtonLabel: "Lock Position",
                onLocked: function() {
                    if (myapp_config.debugState)
                        console.log($(this).closest(".panel").attr('id') + " onLocked")
                },
                // refreshButton: true,
                // refreshButtonLabel: "Refresh Content",
                // onRefresh: function() {
                //     if (myapp_config.debugState)
                //         console.log($(this).closest(".panel").attr('id') + " onRefresh")
                // },
                colorButton: true,
                colorButtonLabel: "Panel Style",
                onColor: function() {
                    if (myapp_config.debugState)
                        console.log($(this).closest(".panel").attr('id') + " onColor")
                },
                panelColors: ['bg-primary-700 bg-success-gradient',
                    'bg-primary-500 bg-info-gradient',
                    'bg-primary-600 bg-primary-gradient',
                    'bg-info-600 bg-primray-gradient',
                    'bg-info-600 bg-info-gradient',
                    'bg-info-700 bg-success-gradient',
                    'bg-success-900 bg-info-gradient',
                    'bg-success-700 bg-primary-gradient',
                    'bg-success-600 bg-success-gradient',
                    'bg-danger-900 bg-info-gradient',
                    'bg-fusion-400 bg-fusion-gradient',
                    'bg-faded'],
                resetButton: true,
                resetButtonLabel: "Reset Panel",
                onReset: function() {
                    if (myapp_config.debugState)
                        console.log( $(this).closest(".panel").attr('id') + " onReset callback" )
                }
            });


            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl,
                {
                    plugins: ['dayGrid', 'list', 'timeGrid', 'interaction', 'bootstrap'],
                    themeSystem: 'bootstrap',
                    timeZone: 'UTC',
                    //dateAlignment: "month", //week, month
                    buttonText:
                        {
                            today: 'today',
                            month: 'month',
                            week: 'week',
                            day: 'day',
                            list: 'list'
                        },
                    eventTimeFormat:
                        {
                            hour: 'numeric',
                            minute: '2-digit',
                            meridiem: 'short'
                        },
                    navLinks: true,
                    header:
                        {
                            left: 'title',
                            center: '',
                            right: 'today prev,next'
                        },
                    footer:
                        {
                            left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
                            center: '',
                            right: ''
                        },
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    eventSources: [{
                        url: base_url + 'dashboard/data-calendar/',
                        type: 'GET',
                        error: function() {

                        }
                    } ],
                    viewSkeletonRender: function()
                    {
                        $('.fc-toolbar .btn-default').addClass('btn-sm');
                        $('.fc-header-toolbar h2').addClass('fs-md');
                        $('#calendar').addClass('fc-reset-order')
                    },

                    dateClick: function(info) {
                        displayEvent(0,info.dateStr);
                    },
                    eventClick: function(info) {
                        displayEvent(info.event.id);
                    }


                });

            calendar.render();

            $("#set_goal").click(function (e) {
                e.preventDefault();

                (async () => {

                    const { value: result } = await Swal.fire({
                        title: '{__('Set New Goal for Net Worth')}',
                        input: 'text',
                        inputLabel: '{__('Goal')}',
                        inputPlaceholder: '{__('Amount')}',
                    })

                    if (result) {

                        $.post( base_url + "settings/networth_goal/", { goal: result })
                            .done(function( data ) {
                                location.reload();
                            });
                    }

                })()

            });




            var options = {
                series: [
                    {foreach $item_sold as $sold}
                    {$sold['sold_count']},
                    {/foreach}
                ],
                chart: {
                    height: 350,
                    type: 'radialBar',
                    {if !empty($config['admin_dark_theme'])}
                    foreColor: '#fff',
                    colors: ["#4586DB", "#C23C3E"],
                    {else}
                    colors: ["#7E5FF4", "#FB8141"],
                    {/if}


                },
                plotOptions: {
                    radialBar: {
                        dataLabels: {
                            name: {
                                fontSize: '22px',
                            },
                            value: {
                                fontSize: '16px',
                            },
                            total: {
                                show: true,
                                label: '{$_L['Total']}',
                                formatter: function (w) {
                                    // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                                    return {count($item_sold)}
                                }
                            }
                        }
                    }
                },
                labels: [
                    {foreach $item_sold as $sold}
                    '{strTrunc(addslashes($sold['name']),30)}',
                    {/foreach}
                ],
                {if !empty($config['admin_dark_theme'])}
                background: '#000',
                {/if}
            } 

            
            //var chart = new ApexCharts(document.querySelector("#sales_pie_graph"), options);
            //chart.render();




        });
    </script>
{/block}
