<template>
    <div class="layout-px-spacing apps-calendar">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget widget-recent-orders">
                    <div class="widget-heading">
                        <h5>{{ titulo_fecha }}</h5>
                    </div>
                    <div class="widget-content simple-tab">
                        <ul class="nav nav-tabs mb-3 mt-3" id="simpletab" role="tablist">
                            <li class="nav-item" v-for="(item, index) in resumen_horas">
                                <a :class="index==0?'nav-link active':'nav-link'" :id="`tab${index}-tab`" data-bs-toggle="tab" :href="`#tab${index}`" role="tab" :aria-controls="`tab${index}`" aria-selected="true">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-clock"
                                    >
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <polyline points="12 6 12 12 16 14"></polyline>
                                    </svg>
                                    {{ `${item.grupo.hora} (${item.grupo_cantidad})` }}
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="simpletabContent">
                            <div :class="index==0?'tab-pane fade show active':'tab-pane fade'" :id="`tab${index}`" role="tabpanel" :aria-labelledby="`tab${index}-tab`" v-for="(item, index) in resumen_horas">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-12">
                                        <div class="widget widget-recent-orders">
                                            <div class="widget-heading">
                                                <h5>Citas</h5>
                                            </div>
                                            <div class="widget-content table-responsive">
                                                <table class="table table-hover table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>
                                                                <div class="th-content">Cliente:</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Terapista:</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Tratamientos: </div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Observación:</div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <template v-for="sesionitem in item.sesiones">
                                                            <tr>
                                                                <td>
                                                                    {{ sesionitem.cliente.razonSocial }}
                                                                </td>
                                                                <td :style="sesionitem.preferencia_terepista=='SI'||sesionitem.terapista_id==36?'color:red;':''">
                                                                    {{ sesionitem.terapista.name }}
                                                                </td>
                                                                <td>
                                                                    <ul>
                                                                        <li v-for="tratamiento in sesionitem.sesion_tratamiento_puro">{{ tratamiento.tratamiento.tratamiento }}</li>
                                                                    </ul>
                                                                </td>
                                                                <td colspan="1">
                                                                    <p style="color: red;">{{ sesionitem.observaciones }}</p>
                                                                </td>
                                                            </tr>
                                                        </template>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <loading
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"
        />
        <button
            id="evento_recargar_reservar"
            type="button"
            v-show="false"
            class="btn btn-black"
            @click="obtener_session"
        ></button>
    </div>
</template>
<style>
    html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 25px;
    }

    #calendar {
    max-width: 1100px;
    margin: 40px auto;
    }

</style>

<script setup>
import { onMounted, ref } from "vue";
import "@/assets/sass/widgets/widgets.scss";
import * as SesionRepository from "@/repositories/SesionRepository";
import { useStateStore } from '@/store/StateStore';
import { useRoute } from "vue-router";
import moment from "moment";
// loading
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/css/index.css";

const storeState = useStateStore();

const isLoading = ref(true);

const route = useRoute();

const titulo_fecha = ref('');
const resumen_horas = ref([]);

const obtener_session = async () => {
    let sucursal_id=storeState.current_state.sucursal_mode;
    if(sucursal_id=='0'){
        sucursal_id='';
    }
    if(route.params.sucursalId){
        sucursal_id=route.params.sucursalId;
    }
    try {
        isLoading.value=true;
        const response = await SesionRepository.getMonitor(sucursal_id,moment(new Date()).format("YYYY-MM-DD H:mm:ss"));
        titulo_fecha.value = response.data.fecha;
        resumen_horas.value = response.data.sesiones_resumen;
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

const startTimer= ()=>{
    setTimeout(function() {
        obtener_session();
        startTimer();
    }, 10000);
}

onMounted(() => {
    startTimer();
    obtener_session();
});

</script>
