{% set userRole = userData.role %}
<input type="hidden" id="userRole" value="{{userRole}}">
<main id="main">
    <div class="container-all">
        <template v-if="userType == 'Executive' || userType == 'Producer'">
            <div v-show="!isLoading">
                <div class="content-title col-12">
                    <div class="title-text ">
                        <span>Activity Dashboard</span>
                    </div>
                    <div class="grey-line lg-line"></div>
                </div>
                <div class="row" id="contentAll">
                    <div class="col-lg-5 col-sm-12" id="left_side">
                        <template v-if="showPrincipalChart == 'bySales'">
                            <div class="content-information-header" style="margin-top:10px;">
                                <div class="content-items">
                                    <div class="content-sections-header defaults-fields">
                                        <div class="select-currency">
                                            <label for="">Policies currency:</label>
                                            <select name="form_type_currency" id="form_type_currency" class="browser-default" v-model="type_currency">
                                                <option value="USD">USD</option>
                                                <option value="MXN">MXN</option>
                                            </select>
                                        </div>
                                        <div class="select-period">
                                            <label for="">Period:</label>
                                            <select name="form_period" id="form_period" class="browser-default" v-model="type_period">
                                                <option value="">Select</option>
                                                <option value="monthly">Monthly</option>
                                                <option value="annual">Annual</option>
                                                <option value="custom">Custom</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="content-sections-header content-custom-fields hide">
                                        <div class="custom-select-items">
                                            <div class="custom-item-title">
                                                Custom period
                                            </div>
                                            <div class="content-custom-selects">
                                                <div class="custom-select">
                                                    <label for="">Start</label>
                                                    <select id="form_custom_start" class="browser-default">
                                                       
                                                    </select>
                                                </div>
                                                <div class="custom-select">
                                                    <label for="">End</label>
                                                    <select id="form_custom_end" class="browser-default">
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="custom-select-items">
                                            <div class="custom-item-title">
                                                Years
                                            </div>
                                            <div class="content-custom-selects">
                                                <div class="custom-select">
                                                    <label for="">Principal</label>
                                                    <select id="form_custom_first_year" class="browser-default">
                                                       
                                                    </select>
                                                </div>
                                                <span>vs</span>
                                                <div class="custom-select">
                                                    <label for="">Last</label>
                                                    <select id="form_custom_second_year" class="browser-default">
                                                       
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content-sections-header content-custom-fields hide">
                                        <div class="custom-content-buttons">
                                            <button type="button" @click="handleChangeRequestFields('default')">Cancel</button>
                                            <button class="button-green" @click="getSicasInfo('custom')" type="button">Request</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="content-information-header" style="margin-top:10px;">
                                <div class="content-header-sales">
                                    <div class="header-sales-item">
                                        <div class="sales-item-period">
                                            May 2022
                                        </div>
                                        <div class="sales-item-values">
                                            <div class="item-values-item">
                                                <span class="blue-text">$1,225</span><span class="small-text">USD</span>
                                            </div>
                                            <div class="item-values-item">
                                                <span class="blue-text">85</span><span class="small-text">Policies</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content-vs">VS</div>
                                    <div class="header-sales-item">
                                        <div class="sales-item-period">
                                            May 2023
                                        </div>
                                        <div class="sales-item-values">
                                            <div class="item-values-item">
                                                <span class="blue-text">$1,329.12</span><span class="small-text">USD</span>
                                            </div>
                                            <div class="item-values-item">
                                                <span class="blue-text">95</span><span class="small-text">Policies</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div style="padding: 20px 0;"><div class="grey-line full-line"></div></div>
                        <div class="content-chart-content">
                            <div class="content-chart-header">
                                <div class="chart-header-text">
                                    <span class="chart-header-title"></span>
                                    <span class="small-text chart-header-period"></span>
                                </div>
                            </div>
                            <div class="content-show-chart" v-show="showChart == 'byPremiums'">
                                <div class="chart-container">
                                    <canvas id="chartByPremiums"></canvas>
                                </div>
                            </div>
                            <div class="content-show-chart" v-show="showChart == 'byProducts'">
                                <div class="chart-container">
                                    <div class="row" style="height:100%">
                                        <div class="col-lg-6 col-sm-12" style="height:100%;display: flex; justify-content: center; align-items:center;">
                                            <div class="row" style="height:100%; margin-bottom: 0;">
                                                <div class="col-12 content-chart-info-text" id="products_sales_actual_period">
                                                    <div class="period_title text-bold"></div>
                                                    <div class="period_value" style="display: flex; justify-content: center; align-items:center;"><div class="period_value_txt blue-text"></div><div class="period_value_type small-text"></div></div>
                                                </div>
                                                <div class="col-12 content-chart-info">
                                                    <canvas id="chartByProductsActual"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-12" style="height:100%;display: flex; justify-content: center; align-items:center;">
                                            <div class="row" style="height:100%; margin-bottom: 0;">
                                                <div class="col-12 content-chart-info-text" id="products_sales_last_period">
                                                   <div class="period_title text-bold"></div>
                                                    <div class="period_value" style="display: flex; justify-content: center; align-items:center;"><div class="period_value_txt blue-text"></div><div class="period_value_type small-text"></div></div>
                                                </div>
                                                <div class="col-12 content-chart-info">
                                                    <canvas id="chartByProductsLast"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-show-chart" v-show="showChart == 'byStatus'">
                                <div class="chart-container" style="display: flex; justify-content: center; align-items:center;">
                                    <div class="row" style="height:100%; width: 100%;margin-bottom: 0;">
                                        <div class="col-lg-8 col-sm-12" style="height:100%;display: flex; justify-content: center; align-items: center;">
                                            <canvas id="salesByPeriodsByStatusCanvas"></canvas>
                                        </div>
                                        <div class="col-lg-4 col-sm-12" style="height:100%;display: flex; flex-direction:column; align-item: flex-start; justify-content: center;" id="status_sales_info">
                                            <div class="charttxt_title text-bold"></div>
                                            <div class="subtitle_value" style="display: flex; justify-content: flex-start; align-items:center;"><div class="subtitle_value_txt blue-text"></div><div class="subtitle_value_type small-text"></div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-buttons">
                                <div class="buttom-items">
                                    <input class="with-gap default-input" name="SelectCharts" type="radio" id="byPremiums" checked @click="changeChart('byPremiums')"/>
                                    <label for="byPremiums">By dates</label>
                                </div>
                                <div class="buttom-items">
                                    <input class="with-gap default-input" name="SelectCharts" type="radio" id="byProducts" @click="changeChart('byProducts')"/>
                                    <label for="byProducts">By products</label>
                                </div>
                                <div class="buttom-items">
                                    <input class="with-gap default-input" name="SelectCharts" type="radio" id="byStatus" @click="changeChart('byStatus')"/>
                                    <label for="byStatus">By status</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-sm-12" id="right_side">
                        <div class="row" style="margin: 0 !important" id="chartsContainer">

                        </div>
                    </div>
                    <div class="col-12" style="padding: 20px 0;"><div class="grey-line full-line"></div></div>
                    <div class="col-12 content-policies-table">
                        <div class="policies-table-title">
                            Issued policies by period
                        </div>
                        <div class="table-navigacion-products">
                            <template v-for="(product, index) in tableConfig.policyProducts">
                                <div :class="(tableConfig.selectedProduct == product ? 'product-active' : '') + ' product-nav-item'" @click="handleChangeTableProduct(product)">
                                    [[product]]
                                    <div class="vertical-line"></div>
                                </div>
                            </template>
                        </div>
                        <div class="col-12">
                            <table class="tableIssuedPoliciesByProduct" id="tableIssuedPoliciesByProduct">
                                <thead>
                                    <tr>
                                        <td class="blue-text text-bold" width="30%">Insured Name</td>
                                        <td class="blue-text text-bold" width="15%">Policy Number</td>
                                        <td class="blue-text text-bold" width="20%">Insurance Company</td>
                                        <td class="blue-text text-bold" width="15%">Issued Date</td>
                                        <td class="blue-text text-bold" width="10%">Efective Date</td>
                                        <td class="blue-text text-bold" width="15%">Total Premium</td>
                                        <td class="blue-text text-bold" width="10%">Status</td>
                                    </tr>
                                </thead>
                                <tbody> 
                                    <template v-if="Object.keys(tableConfig.policiesForTable).length > 0">
                                        <tr class="table-policy-item" v-for="policy in tableConfig.policiesForTable">
                                            <td>[[policy.NombreCompleto]]</td>
                                            <td>[[policy.Documento]]</td>
                                            <td>[[policy.CiaNombre]]</td>
                                            <td>[[policy.FEmision | dateFormat]]</td>
                                            <td>[[policy.FDesde | dateFormat]]</td>
                                            <td>$[[policy.PrimaTotal | number]] [[policy.Moneda | currencyType]]</td>
                                            <td><span :class="policy.Status_TXT | getStatusClass">[[policy.Status_TXT]]</span></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row hide" id="contentError">
                    <div class="col-12 text-center">
                        <div class="error-img">
                           <img src="{{asset('images/icons/desierto.gif')}}" />
                        </div>
                        <span>[[mainError]]</span>
                    </div>
                </div>
            </div>
            <div v-show="isLoading">
                <div class="row">
                    <div class="col l7 m12 s12">
                        <div class="ph-item">
                            <div class="ph-col-12">
                                <div class="ph-row">
                                    <div class="ph-col-6 big"></div>
                                    <div class="ph-col-2 empty"></div>
                                    <div class="ph-col-2 big"></div>
                                    <div class="ph-col-2 empty"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-12" id="left_side_loading">
                        <div class="row" style="height:100%;margin-bottom:0;">
                            <div class="col-12">
                                <div class="ph-item">
                                    <div class="ph-col-12">
                                        <div class="ph-row">
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2 empty big"></div>
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2 empty big"></div>
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2 empty big"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 principal-chart-loading">
                                <div class="ph-item">
                                    <div class="ph-picture"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col l6 m12" id="right_side_loading">
                        <div class="row">
                            <div class="col-12">
                                 <div class="ph-item">
                                    <div class="ph-col-12">
                                        <div class="ph-row">
                                            <div class="ph-col-4 big"></div>
                                            <div class="ph-col-6 empty big"></div>
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2"></div>
                                        </div>
                                        <div class="ph-picture"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="ph-item">
                                    <div class="ph-col-12">
                                        <div class="ph-row">
                                            <div class="ph-col-4 big"></div>
                                            <div class="ph-col-6 empty big"></div>
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2"></div>
                                        </div>
                                        <div class="ph-picture"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="ph-item">
                                    <div class="ph-col-12">
                                        <div class="ph-row">
                                            <div class="ph-col-4 big"></div>
                                            <div class="ph-col-6 empty big"></div>
                                            <div class="ph-col-2 big"></div>
                                            <div class="ph-col-2"></div>
                                        </div>
                                        <div class="ph-picture"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                         <div class="ph-item">
                            <div class="ph-col-12">
                                <div class="ph-row">
                                    <div class="ph-col-4 big"></div>
                                    <div class="ph-col-8 empty big"></div>
                                </div>
                                <div class="ph-picture"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </template>
        <template v-else-if="userType == 'Admin'">
        
        </template>
    </div>
    <div class="confirm-loading-info" v-show="!loadDashboard">
        <button type="button" @click="loadDashboardInfo()"><span class="material-icons">analytics</span>Click to load dashboard information</button>
    </div>
</main>