<template>
    <div class="layout-px-spacing dash_1">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget widget-recent-orders">
                    <div class="widget-heading align-center">
                        <div class="col-4 col-md-4 col-sm-4">
                            <h4>{{ titulo_fecha }}</h4>
                        </div>
                        <div class="col-2 col-md-2 col-sm-2">
                            <flat-pickr
                                v-model="filtro.fecha_proceso"
                                :config="optionsFecha"
                                :class="[
                                    'form-control flatpickr active'
                                ]"
                                style="padding-top: 6px; padding-bottom: 6px; margin-left: 2px; margin-right: 2px;"
                            ></flat-pickr>
                        </div>
                        <div class="col-6 col-md-6 col-sm-6">
                            <button class="btn btn-black" style="margin-left: 10px; margin-right: 2px;" :disabled="habilitar_hoy" @click="cambiar_a_hoy">
                                Hoy
                            </button>
                            <button class="btn btn-black" style="margin-left: 2px; margin-right: 2px;" @click="cambiar_dia_antes">
                                <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-chevron-left" data-v-5522efca=""><polyline points="15 18 9 12 15 6"></polyline></svg>
                            </button>
                            <button class="btn btn-black" style="margin-left: 2px; margin-right: 2px;" @click="cambiar_dia_depues">
                                <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-chevron-right" data-v-5522efca=""><polyline points="9 18 15 12 9 6"></polyline></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 layout-spacing">
                <div class="widget widget-recent-orders">
                    <div class="widget-heading">
                        <h5>Resumen de Citas por hora</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="resumen_horas[index].ver?'nav-link active':'nav-link'" @click="reset_horarios(index)" style="cursor: pointer;">
                                    <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="resumen_horas[index].ver?'tab-pane fade show active':'tab-pane fade'" v-for="(item, index) in resumen_horas">
                                <div class="row">
                                    <div :class="is('Cliente')?'col-md-12 col-sm-12 col-12':'col-md-9 col-sm-12 col-9'">
                                        <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">{{ is('Cliente')?'Aprobado':'Confirmación' }}</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Asistencia</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Cliente</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Telefono</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Terapista</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Sucursal</div>
                                                            </th>
                                                            <th>
                                                                <div class="th-content">Reagendar</div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <template v-for="sesionitem in item.sesiones">
                                                            <tr>
                                                                <td v-if="!is('Cliente')">
                                                                    <button :class="sesionitem.asistencia_cumplida=='SI'?'btn btn-success':'btn btn-warning'"  @click="calcular_citas_edicion(sesionitem.tiempo_asignado_temp,sesionitem.aprobado)?getCitaId(sesionitem.id,'asistencia_cumplida'):''">
                                                                        <svg v-if="sesionitem.asistencia_cumplida=='SI'" 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-check" data-v-5522efca=""><polyline points="20 6 9 17 4 12"></polyline></svg>
                                                                        <svg v-if="sesionitem.asistencia_cumplida=='NO'" 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-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                                                        &nbsp{{ sesionitem.asistencia_cumplida }}
                                                                    </button>
                                                                </td>
                                                                <td v-if="!is('Cliente')">
                                                                    <button :class="sesionitem.asistencia=='SI'?'btn btn-success':'btn btn-warning'"  @click="calcular_citas_edicion(sesionitem.tiempo_asignado_temp,sesionitem.aprobado)?getCitaId(sesionitem.id,'asistencia'):''">
                                                                        <svg v-if="sesionitem.asistencia=='SI'" 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-check" data-v-5522efca=""><polyline points="20 6 9 17 4 12"></polyline></svg>
                                                                        <svg v-if="sesionitem.asistencia=='NO'" 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-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                                                        &nbsp{{ sesionitem.asistencia }}
                                                                    </button>
                                                                </td>
                                                                <td v-if="is('Cliente')">
                                                                    <button :class="sesionitem.aprobado=='SI'?'btn btn-success':'btn btn-warning'" >
                                                                        <svg v-if="sesionitem.aprobado=='SI'" 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-check" data-v-5522efca=""><polyline points="20 6 9 17 4 12"></polyline></svg>
                                                                        <svg v-if="sesionitem.aprobado=='NO'" 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-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                                                        &nbsp{{ sesionitem.aprobado }}
                                                                    </button>
                                                                </td>
                                                                <td v-if="is('Cliente')">
                                                                    <button :class="sesionitem.asistencia=='SI'?'btn btn-success':'btn btn-warning'" >
                                                                        <svg v-if="sesionitem.asistencia=='SI'" 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-check" data-v-5522efca=""><polyline points="20 6 9 17 4 12"></polyline></svg>
                                                                        <svg v-if="sesionitem.asistencia=='NO'" 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-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                                                        &nbsp{{ sesionitem.asistencia }}
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    {{ sesionitem.cliente.razonSocial }}
                                                                </td>
                                                                <td>
                                                                    {{ sesionitem.cliente.celular }}
                                                                </td>
                                                                <td :style="sesionitem.preferencia_terepista=='SI'||sesionitem.terapista_id==36?'color:red;':''">
                                                                    {{ sesionitem.terapista.name }}
                                                                </td>
                                                                <td>
                                                                    {{ sesionitem.sucursal.nombre }}
                                                                </td>
                                                                <td rowspan="2">
                                                                    <button :class="calcular_citas_edicion(sesionitem.tiempo_asignado_temp,sesionitem.aprobado)?'btn btn-black':'btn btn-success'" @click="getCitaId(sesionitem.id)">
                                                                        <svg v-if="calcular_citas_edicion(sesionitem.tiempo_asignado_temp,sesionitem.aprobado)==false" 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-eye" data-v-5522efca=""><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                                                        <svg v-if="calcular_citas_edicion(sesionitem.tiempo_asignado_temp,sesionitem.aprobado)" 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-calendar" data-v-5522efca=""><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr style="border-bottom:2px solid black;">
                                                                <td :colspan="sesionitem.cliente.observacion?2:3" v-if="!is('Cliente')">
                                                                    <h6>Tratamientos:</h6>
                                                                    <ul>
                                                                        <li v-for="tratamiento in sesionitem.sesion_tratamiento_puro">{{ tratamiento.tratamiento.tratamiento }}</li>
                                                                    </ul>
                                                                    <h6>Observación de cita:</h6>
                                                                    <p style="color: red;">{{ sesionitem.observaciones }}</p>
                                                                </td>
                                                                <td v-if="!is('Cliente')" v-show="sesionitem.cliente.observacion">
                                                                    <h6>Observación general:</h6>
                                                                    <p style="color: red;">{{ sesionitem.cliente.observacion }}</p>
                                                                </td>
                                                                <td colspan="2" v-if="!is('Cliente')">
                                                                    <b>Duración: </b>{{ sesionitem.duracion_temp }}<br>
                                                                    <b>Hora inicio: </b>{{ sesionitem.hora_inicio }}<br>
                                                                    <b>Hora Termino: </b>{{ sesionitem.hora_salida }}<br>
                                                                    <b>Vale: </b>{{ sesionitem.vale }}<br>
                                                                    <b>Usa expediente: </b>{{ sesionitem.usa_expediente }}
                                                                </td>
                                                                <td colspan="3" v-if="is('Cliente')">
                                                                    <h6>Tratamientos:</h6>
                                                                    <ul>
                                                                        <li v-for="tratamiento in sesionitem.sesion_tratamiento_puro">{{ tratamiento.tratamiento.tratamiento }}</li>
                                                                    </ul>
                                                                </td>
                                                                <td colspan="2" v-if="is('Cliente')">
                                                                    <b>Duración: </b>{{ sesionitem.duracion_temp }}<br>
                                                                    <b>Hora inicio: </b>{{ sesionitem.hora_inicio }}<br>
                                                                    <b>Hora Termino: </b>{{ sesionitem.hora_salida }}<br>
                                                                    <b>Vale: </b>{{ sesionitem.vale }}<br>
                                                                </td>
                                                            </tr>
                                                        </template>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-12 col-3" v-if="!is('Cliente')">
                                        <div class="widget widget-recent-orders">
                                            <div class="widget-heading">
                                                <h5>Resumen de Terapistas</h5>
                                            </div>
                                            <div class="widget-content table-responsive">
                                                <table class="table table-hover table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th><div class="th-content">terapista</div></th>
                                                            <th><div class="th-content">Citas</div></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="terapista in item.data">
                                                            <td>{{ terapista.tera }}</td>
                                                            <td>{{ terapista.cantidad }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal tratamientos -->
            <div
                id="modal_index_tratamientos_principal"
                class="modal fade"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true"
                style="z-index: 1100 !important"
            >
                <div class="modal-dialog modal-lg">
                    <div class="modal-content mailbox-popup">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                Tratamientos
                            </h5>
                            <button
                                type="button"
                                data-dismiss="modal"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                class="btn-close"
                            ></button>
                        </div>
                        <div class="modal-body">
                            <button
                                class="btn btn-black pull-left m-1"
                                @click="agregarIdsTratamiento"
                            >
                                Agregar
                            </button>
                            <div class="custom-table">
                                <v-client-table
                                    :data="obtener_tratamientos"
                                    :columns="columns_tratamientos"
                                    :options="table_option_tratamientos"
                                    ref="table_tratamientos"
                                >
                                    <template #check_id_tratamiento="props">
                                        <div class="checkbox-outline-primary custom-control custom-checkbox">
                                            <input
                                            v-model="check_id_tratamiento"
                                            variant="primary"
                                            type="checkbox"
                                            class="custom-control-input"
                                            :id="props.row.id"
                                            :value="props.row.id+'||'+props.row.tratamiento+'||'+props.row.duracion" />
                                            <label class="custom-control-label" :for="props.row.id"></label>
                                        </div>
                                    </template>
                                    <template #id="props">
                                        <button class="btn btn-sm btn-black"
                                        @click="agregarTratamiento(props.row.id,props.row.tratamiento,props.row.duracion)"
                                        >
                                            <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-log-out"
                                            >
                                                <path
                                                    d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                                ></path>
                                                <polyline
                                                    points="16 17 21 12 16 7"
                                                ></polyline>
                                                <line
                                                    x1="21"
                                                    y1="12"
                                                    x2="9"
                                                    y2="12"
                                                ></line>
                                            </svg>
                                            &nbsp{{ props.row.id }}
                                        </button>
                                    </template>
                                </v-client-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- The Modal -->
            <div
                id="addEventsModalPrincipal"
                class="modal fade"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true"
            >
                <div class="modal-dialog modal-lg">
                    <div class="modal-content mailbox-popup">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                {{ editedIndex === -1 ? "Nuevo " : (habilitar_edicion?"Editar ":"Detalle ") }}
                            </h5>
                            <button
                                type="button"
                                data-dismiss="modal"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                class="btn-close"
                            ></button>
                        </div>
                        <form class="mt-0" ref="formComponentPrincipal" @submit.stop.prevent="">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>{{ titulo_sesion }}</h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button
                                            v-if="is_tratamiento_cliente && form.vale == 'NO'"
                                            type="button"
                                            class="btn btn-success"
                                            v-show="habilitar_edicion"
                                            @click="abrirTratamientos"
                                        >
                                            Elegir tratamientos
                                        </button>
                                        <div class="form-group mb-4">
                                            <label>
                                                Tratamientos
                                            </label>
                                            <input
                                            type="hidden"
                                            :class="[
                                                cantidad_tratamientos!=0? 'is-valid': 'is-invalid',
                                            ]"
                                            v-model="cantidad_tratamientos">
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                No puede estar vacio
                                            </div>
                                            <ul v-for="item in tratamientos_vistas">
                                                <li>
                                                    <a
                                                        v-if="is_tratamiento_cliente && form.vale == 'NO'"
                                                        href="javascript:void(0);"
                                                        title="Eliminar"
                                                        data-bs-toggle="tooltip"
                                                        data-bs-placement="top"
                                                        v-show="habilitar_edicion"
                                                        @click="removerTratamiento(item.id)"
                                                    >
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            width="24"
                                                            height="24"
                                                            viewBox="0 0 24 24"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                            class="feather feather-trash"
                                                        >
                                                            <polyline
                                                                points="3 6 5 6 21 6"
                                                            ></polyline>
                                                            <path
                                                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                                            ></path>
                                                        </svg>
                                                    </a>
                                                    &nbsp{{ item.tratamiento }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label v-show="form.vale == 'SI'">Vale</label>
                                        <p v-show="form.vale_id">Folio del vale:{{ form.vale_id }}</p>
                                        <p v-show="form.vale_id && !valeEditable" class="text-warning small">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 4px;">
                                                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                                            </svg>
                                            Este vale ya está asignado y no puede ser modificado
                                        </p>
                                        <br v-show="!form.vale_id">
                                        <button
                                            type="button"
                                            class="btn btn-success"
                                            v-show="habilitar_edicion && form.vale == 'SI' && valeEditable"
                                            @click="abrirVale(false)"
                                        >
                                            Elegir
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-danger m-1"
                                            v-show="habilitar_edicion && form.vale == 'SI' && form.vale_id && valeEditable"
                                            @click="removeVale"
                                        >
                                            Remover
                                        </button>
                                        <input
                                        type="hidden"
                                        :class="[
                                            is_entrada
                                                ? !errors.vale_id
                                                    ? 'is-valid'
                                                    : 'is-invalid'
                                                : '',
                                        ]"
                                        v-model="form.vale_id">
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            Vale no puede estar vacio
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group end-date mb-4">
                                            <label for="end-date" class="">Celular</label>
                                            <input type="text" v-model="form.celular" class="form-control" placeholder="Celular" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6"  v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Vale</label>
                                            <multiselect
                                                v-model="vale_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsVale"
                                                :disabled="!valeEditable"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.vale
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeVale"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.vale">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="is('Cliente') && editedIndex !== -1">
                                        <div class="form-group">
                                            <label>Vale</label>
                                            <p>{{ form.vale }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group end-date mb-4">
                                            <label for="end-date" class="">Duración</label>
                                            <flat-pickr v-model="form.duracion" :config="{ noCalendar: true, enableTime: true, dateFormat: 'H:i', minTime:'01:00:00', maxTime:'10:00:00', minuteIncrement:30 }" class="form-control flatpickr active"></flat-pickr>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-6">
                                        <div class="form-group">
                                            <label>Sucursal</label>
                                            <multiselect
                                                v-model="sucursal_id"
                                                mode="tags"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsSucursales"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.sucursal_id
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                placeholder="Seleccione..."
                                                @update:model-value="changeSucursal"
                                                label="nombre"
                                                track-by="nombre"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.sucursal_id">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Fecha</label>
                                            <flat-pickr
                                                v-model="form.fecha_asignada"
                                                :config="optionsFechaCitas"
                                                v-show="habilitar_edicion"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.fecha_asignada
                                                            ? 'form-control flatpickr active is-valid'
                                                            : 'form-control flatpickr active is-invalid'
                                                        : 'form-control flatpickr active',
                                                ]"
                                            ></flat-pickr>
                                            <h6 v-show="!habilitar_edicion">{{ fecha_asignada }}</h6>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.fecha_asignada">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="is('Cliente')">
                                        <div class="form-group">
                                            <label>Fecha</label>
                                            <flat-pickr
                                                v-model="formDate.fecha"
                                                :config="optionsFechaSola"
                                                v-show="habilitar_edicion"
                                                :class="[
                                                    is_entrada
                                                        ? !errorsDate.fecha
                                                            ? 'form-control flatpickr active is-valid'
                                                            : 'form-control flatpickr active is-invalid'
                                                        : 'form-control flatpickr active',
                                                ]"
                                                @change="llenarHorasCliente(false, false, true)"
                                            ></flat-pickr>
                                            <h6 v-show="!habilitar_edicion">{{ formDate.fecha }}</h6>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="(item, key) in errorsDate.fecha" :key="key">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="is('Cliente')">
                                        <div class="form-group">
                                            <label>Hora</label>
                                            <multiselect
                                                v-model="horas_temp"
                                                mode="tags"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsHoras"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.fecha_asignada
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeHoras"
                                                label="name"
                                                track-by="name"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.fecha_asignada">
                                                    "El campo Hora asignada es obligatorio."
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Terapista</label>
                                            <multiselect
                                                v-model="terapista_id"
                                                mode="tags"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsTerapista"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.terapista_id
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                placeholder="Seleccione..."
                                                @update:model-value="changeTerapista"
                                                label="name"
                                                track-by="name"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.terapista_id">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="is('Cliente') && editedIndex !== -1">
                                        <div class="form-group">
                                            <label>Terapista</label>
                                            <p>{{ terapista_id.name }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Asistencia</label>
                                            <multiselect
                                                v-model="asistencia_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsAsistencia"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.asistencia
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                placeholder="Seleccione..."
                                                @update:model-value="changeAsistencia"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.asistencia">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="is('Cliente') && editedIndex !== -1">
                                        <div class="form-group">
                                            <label>Asistencia</label>
                                            <p>{{ form.asistencia }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Confirmación</label>
                                            <multiselect
                                                v-model="asistencia_cumplida_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsAsistenciaCumplida"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.asistencia_cumplida
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeAsistenciaCumplida"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.asistencia_cumplida">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Solicitada por Cliente</label>
                                            <multiselect
                                                v-model="preferencia_terepista_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsPreferenciaTerepista"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.preferencia_terepista
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changePreferenciaTerepista"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.preferencia_terepista">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6"  v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Usa expediente</label>
                                            <multiselect
                                                v-model="usa_expediente_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsUsaExpediente"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.usa_expediente
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeUsaExpediente"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.usa_expediente">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" v-if="!is('Cliente')">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label class="">Observaciones:</label>
                                            <textarea
                                                v-model="form.observaciones"
                                                class="form-control"
                                                placeholder="Agregar observación"
                                                rows="3"
                                            ></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button
                                    class="btn btn-black w-100"
                                    v-show="editedIndex  !== -1 && habilitar_edicion"
                                    @click="updateCitaPrincipal"
                                >
                                    Actualizar
                                </button>
                                <button
                                    class="btn btn-danger w-100"
                                    v-show="editedIndex  !== -1 && habilitar_edicion"
                                    @click="deleteItemPrincipal"
                                >
                                    Eliminar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- The Modal asistencia -->
            <div
                id="addEventsModalAsistencia"
                class="modal fade"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true"
            >
                <div class="modal-dialog modal-lg">
                    <div class="modal-content mailbox-popup">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                {{ vista_a=='asistencia'?"Asistencia": 'Confirmación' }}
                            </h5>
                            <button
                                type="button"
                                data-dismiss="modal"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                class="btn-close"
                            ></button>
                        </div>
                        <form class="mt-0" ref="formComponentAsistencia" @submit.stop.prevent="">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>{{ titulo_sesion }}</h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 col-6" v-show="vista_a=='asistencia'">
                                        <div class="form-group">
                                            <label>Asistencia</label>
                                            <multiselect
                                                v-model="asistencia_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsAsistencia"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.asistencia
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeAsistencia"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.asistencia">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-6" v-show="vista_a=='asistencia_cumplida'">
                                        <div class="form-group">
                                            <label>Confirmación</label>
                                            <multiselect
                                                v-model="asistencia_cumplida_id"
                                                :close-on-select="true"
                                                :searchable="true"
                                                :options="optionsAsistenciaCumplida"
                                                :class="[
                                                    is_entrada
                                                        ? !errors.asistencia_cumplida
                                                            ? 'is-valid'
                                                            : 'is-invalid'
                                                        : '',
                                                ]"
                                                selected-label=""
                                                select-label=""
                                                deselect-label=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @update:model-value="changeAsistenciaCumplida"
                                            >
                                            </multiselect>
                                            <div class="valid-feedback"></div>
                                            <div class="invalid-feedback">
                                                <li v-for="item in errors.asistencia_cumplida">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button
                                    class="btn btn-black w-100"
                                    v-show="editedIndex  !== -1 && habilitar_edicion"
                                    @click="updateCitaPrincipal('asistencia')"
                                >
                                    Actualizar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Eliminar Modal -->
            <div class="modal fade" id="deleteModalPricipal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 1100 !important">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">¿Estás seguro de eliminar esta cita?</h5>
                            <button type="button" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" class="btn-close"></button>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Cancelar</button>
                            <button type="button" class="btn btn-black" @click="deleteCitaPrincipal()">Eliminar</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- escanner vale Modal -->
            <div class="modal fade" id="valeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 1100 !important">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Examinar vale</h5>
                            <button type="button" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" class="btn-close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <h4><b>UUID:</b></h4>
                                    <input type="text" class="form-control" v-model="decodedString" placeholder="Escribe el UUID">
                                </div>
                                <div class="col-12">
                                    <ul style="color: red;" v-if="errors2.uuid">
                                        <li v-for="item in errors2.uuid">
                                            {{ item }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" data-dismiss="modal" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Cancelar</button>
                            <button type="button" class="btn btn-black" @click="examinarVale()">Verificar</button>
                        </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_resumen_horas"
        ></button>
    </div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";
import "@/assets/sass/widgets/widgets.scss";
import { useMeta } from "@/composables/use-meta";
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as SesionRepository from "@/repositories/SesionRepository";
import * as TratamientoRepository from "@/repositories/TratamientoRepository";
import * as SucursalRepository from "@/repositories/SucursalRepository";
import { useStateStore } from '@/store/StateStore';
import * as HorarioRepository from "@/repositories/HorarioRepository";

// qr
import { QrcodeStream } from 'qrcode-reader-vue3';

// loading
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/css/index.css";

const roles_is = inject('$is');

//icono
import '@/assets/sass/font-icons/fontawesome/css/regular.css';
import '@/assets/sass/font-icons/fontawesome/css/fontawesome.css';
import feather from 'feather-icons';

//tabs
import '@/assets/sass/scrollspyNav.scss';
import '@/assets/sass/components/tabs-accordian/custom-tabs.scss';

//flatpickr
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import "@/assets/sass/forms/custom-flatpickr.css";
import { Spanish } from "@/assets/sass/flatpickr/dist/l10n/es.js";
flatpickr.localize(Spanish);
import moment from "moment";
import axios from "axios";

//select2
import Multiselect from "@suadelabs/vue3-multiselect";
import "@suadelabs/vue3-multiselect/dist/vue3-multiselect.css";

useMeta({ title: "EGURROLA" });

//qr
const decodedString =ref('');
const errors2 =ref({});
const camera= ref('off');

const store = useAuthStore();
const storeState = useStateStore();

const isLoading = ref(true);

const titulo_fecha = ref('');
const resumen_horas = ref([]);
const habilitar_hoy = ref(false);
const cliente_celular = ref(null);
const cliente_id =ref(null);

const is_entrada_horario = ref(false);
const is_tratamiento_cliente = ref(false);
const errorsDate = ref({});

const optionsFecha = ref({
    enableTime: false,
    dateFormat: 'Y-m-d',
    onChange: function(selectedDates, dateStr, instance) {
        calcular_hoy();
    }
});

// filtros de calendario
const filtro = ref({
    sucursal_id: null,
    cliente: null,
    fecha_proceso: moment(new Date()).format("YYYY-MM-DD"),
    fecha_inicio: null,
    fecha_fin: null,
    filtro_terapista: null,
});


//modales
let addEventsModalAsistencia = ref(null);
let addEventsModalPrincipal = ref(null);
let modal_index_tratamientos_principal = ref(null);
let deleteModalPricipal = ref(null);
let valeModal = ref(null);
let vista_a = ref("");

// tratamientos
const columns_tratamientos = ref(['check_id_tratamiento','id','tratamiento']);
const table_option_tratamientos = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio tratamiento";
        },
        check_id_tratamiento: (h, row, index) => {
            return "#";
        }
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ['id','tratamiento'],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});
const obtener_tratamientos = ref([]);
const check_id_tratamiento= ref([]);
const cantidad_tratamientos=ref(0);

//formulario citas
const titulo_sesion =ref('');
const fecha_asignada =ref('');
const is_entrada = ref(false);
const habilitar_edicion = ref(false);
const editedIndex = ref(-1);
const formComponentPrincipal = ref(null);
const formComponentAsistencia = ref(null);
const errors = ref({});
const form = ref(roles_is("Cliente")?{
    celular: roles_is("Cliente")?cliente_celular.value:null,
    sucursal_id: null,
    cliente_id: roles_is("Cliente")?cliente_id.value:null,
    terapista_id: null,
    duracion: '01:00',
    fecha_asignada: moment(new Date()).format("YYYY-MM-DD H:mm"),
    observaciones: null,
    asistencia: 'NO',
    preferencia_terepista: 'NO',
    vale: 'NO',
    vale_id: null,
    asistencia_cumplida: 'NO',
    usa_expediente: 'NO',
    aprobado: roles_is("Cliente")?'NO':'SI',
    observacion_cliente: '',
}:{
    celular: null,
    sucursal_id: null,
    cliente_id: null,
    terapista_id: null,
    duracion: '01:00',
    fecha_asignada: moment(new Date()).format("YYYY-MM-DD H:mm"),
    observaciones: null,
    asistencia: 'NO',
    preferencia_terepista: 'NO',
    vale: 'NO',
    vale_id: null,
    asistencia_cumplida: 'NO',
    usa_expediente: 'NO',
    observacion_cliente: '',
});

const formDate = ref({
    fecha: null,
    hora: null,
    sucursal_id: null,
});

const optionsFechaSola = ref({
    enableTime: false,
    dateFormat: 'Y-m-d',
    time_24hr: false,
    minDate: moment(new Date()).format("YYYY-MM-D"),
});

// tratamientos
const tratamientos_vistas= ref([]);

//eventos tratamiento
const removerTratamiento=(id)=>{
    isLoading.value = true;
    tratamientos_vistas.value=tratamientos_vistas.value.filter(function(val, i) {
        if(val.id==id){
            const [h1, m1] = form.value.duracion.split(":").map(Number);
            const [h2, m2] = val.duracion.split(":").map(Number);

            let totalMinutes = m1 - m2;
            let carry = Math.floor(totalMinutes / 60);
            totalMinutes = totalMinutes % 60;

            let totalHours = h1 - h2 - carry;
            totalHours = totalHours % 24;

            const formatTime = num => (num < 10 ? "0" : "") + num;
            if(totalHours>1){
                form.value.duracion = `${formatTime(totalHours)}:${formatTime(totalMinutes)}`;
            } else {
                form.value.duracion = '01:00';
            }
        }
        return val.id != id;
    });
    cantidad_tratamientos.value=tratamientos_vistas.value.length;
    isLoading.value = false;
};

const agregarTratamiento=(id,tratamiento,duracion)=>{
    isLoading.value = true;
    tratamientos_vistas.value.push({id:id,tratamiento:tratamiento,duracion:duracion});
    modal_index_tratamientos_principal.hide();
    cantidad_tratamientos.value=tratamientos_vistas.value.length;
    if(tratamientos_vistas.value.length > 1){
        const [h1, m1] = form.value.duracion.split(":").map(Number);
        const [h2, m2] = duracion.split(":").map(Number);

        let totalMinutes = m1 + m2;
        let carry = Math.floor(totalMinutes / 60);
        totalMinutes = totalMinutes % 60;

        let totalHours = h1 + h2 + carry;
        totalHours = totalHours % 24;

        const formatTime = num => (num < 10 ? "0" : "") + num;

        form.value.duracion = `${formatTime(totalHours)}:${formatTime(totalMinutes)}`;
    } else {
        form.value.duracion = duracion;
    }
    isLoading.value = false;
};

const agregarIdsTratamiento= async()=>{
    isLoading.value = true;
    if(tratamientos_vistas.value.length == 0){
        form.value.duracion = '00:00:00';
    }
    await check_id_tratamiento.value.forEach((element) => {
        const filtro= element.split("||");

        const [h1, m1] = form.value.duracion.split(":").map(Number);
        const [h2, m2] = filtro[2].split(":").map(Number);

        let totalMinutes = m1 + m2;
        let carry = Math.floor(totalMinutes / 60);
        totalMinutes = totalMinutes % 60;

        let totalHours = h1 + h2 + carry;
        totalHours = totalHours % 24;

        const formatTime = num => (num < 10 ? "0" : "") + num;

        form.value.duracion = `${formatTime(totalHours)}:${formatTime(totalMinutes)}`;

        tratamientos_vistas.value.push({id:filtro[0],tratamiento:filtro[1],duracion:filtro[2]});
    });
    cantidad_tratamientos.value=tratamientos_vistas.value.length;
    modal_index_tratamientos_principal.hide();
    isLoading.value = false;
};

const abrirTratamientos = async()=>{
    isLoading.value = true;
    check_id_tratamiento.value=[];
    const response = await TratamientoRepository.getAll({tratamientos:tratamientos_vistas.value});
    obtener_tratamientos.value=response.data;
    modal_index_tratamientos_principal.show();
    isLoading.value = false;
};

const optionsFechaCitas = ref({
    enableTime: true,
    dateFormat: 'Y-m-d H:i',
    time_24hr: false,
    minTime: '08:00:00',
    maxTime: '19:00:00',
    minuteIncrement:60,
    minDate: moment(new Date()).format("YYYY-MM-DD H:mm"),
});

//select sucursal
const sucursal_id = ref({
    id: storeState.current_state.sucursal_mode,
    nombre: storeState.current_state.sucursal_name_mode,
});
const optionsSucursales = ref([]);
const changeSucursal = (data) => {
    form.value.sucursal_id = data.id;
    if (roles_is("Cliente")) {
        if (editedIndex.value != -1) {
            llenarHorasCliente(false, true);
        } else {
            llenarHorasCliente();
        }
    }
};

// select hora cliente
const horas_temp = ref({
    id: null,
    name: '',
});
const optionsHoras = ref([]);
const changeHoras = (data) => {
    form.value.fecha_asignada = `${formDate.value.fecha} ${data.id}`;
    formDate.value.hora = data.id;
};

// select terapista
const terapista_id = ref({
    id: 36,
    name: 'no asignada',
});
const optionsTerapista = ref([]);
const changeTerapista = (data) => {
    form.value.terapista_id = data.id;
};
const obtener_terapista = async ()=>{
    try {
        const response = await UserRepository.getTerapistas();
        return response;
    } catch (error) {
        console.log(error);
    }
}
const cargar_terapista = async () =>{
    const response =  await obtener_terapista();
    optionsTerapista.value = response.data;
};

// select solicitado por cliente
const preferencia_terepista_id = ref('NO');
const optionsPreferenciaTerepista = ref(['NO','SI']);
const changePreferenciaTerepista = (data) => {
    form.value.preferencia_terepista = data;
};

// select asistencia
const asistencia_id = ref('NO');
const optionsAsistencia= ref(['NO','SI']);
const changeAsistencia = (data) => {
    form.value.asistencia = data;
};

// select vale
const vale_id = ref('NO');
const optionsVale = ref(['NO','SI']);
const valeEditable = ref(true); // Controla si el vale puede ser editado
const changeVale = (data) => {
    if (!valeEditable.value) return; // No permitir cambios si no es editable
    form.value.vale = data;
    if (data !='SI') {
        form.value.vale_id = null;
    }
};

// select usa_expediente
const usa_expediente_id = ref('NO');
const optionsUsaExpediente = ref(['NO','SI']);
const changeUsaExpediente = (data) => {
    form.value.usa_expediente = data;
};

// select asistencia_cumplida
const asistencia_cumplida_id = ref('NO');
const optionsAsistenciaCumplida = ref(['NO','SI']);
const changeAsistenciaCumplida = (data) => {
    form.value.asistencia_cumplida = data;
};

const getCitaId = async (id,vista="") => {
  try {
        decodedString.value='';
        errors2.value={};
        habilitar_edicion.value = false;
        isLoading.value = true;
        const response = await SesionRepository.getSesionId(id);
        const fecha_procesando = new Date(response.data.sesion.fecha_asignada);
        const fecha_actual = new Date();
        fecha_actual.setHours(fecha_actual.getHours()-2);
        if (fecha_actual <= fecha_procesando) {
            habilitar_edicion.value = true;
        }
        if(roles_is('Cliente') && 'SI'==response.data.sesion.aprobado){
            habilitar_edicion.value = false;
        }
        if('NO'==response.data.sesion.aprobado){
            habilitar_edicion.value = true;
        }
        titulo_sesion.value=response.data.cliente.razonSocial;
        fecha_asignada.value=response.data.sesion.fecha_asignada;
        sucursal_id.value = {
            id: response.data.sucursal.id,
            nombre: response.data.sucursal.nombre,
        };
        terapista_id.value = {
            id: response.data.terapista.id,
            name: response.data.terapista.name,
        };
        asistencia_id.value = response.data.sesion.asistencia;
        usa_expediente_id.value = response.data.sesion.usa_expediente;
        asistencia_cumplida_id.value = response.data.sesion.asistencia_cumplida;
        preferencia_terepista_id.value = response.data.sesion.preferencia_terepista;
        vale_id.value = response.data.sesion.vale;
        // Determinar si el vale puede ser editado (solo si no tiene vale asignado o es una nueva sesión)
        valeEditable.value = response.data.sesion.vale_id == null;
        cantidad_tratamientos.value=response.data.tratamientos.length;
        tratamientos_vistas.value = response.data.tratamientos;
        if(roles_is('Cliente')){
            form.value = {
                celular:response.data.cliente.celular,
                sucursal_id: response.data.sucursal.id,
                cliente_id: response.data.cliente.id,
                terapista_id: response.data.terapista.id,
                duracion: response.data.sesion.duracion,
                fecha_asignada: response.data.sesion.fecha_asignada,
                observaciones: response.data.sesion.observaciones,
                asistencia: response.data.sesion.asistencia,
                asistencia_cumplida: response.data.sesion.asistencia_cumplida,
                usa_expediente: response.data.sesion.usa_expediente,
                preferencia_terepista: response.data.sesion.preferencia_terepista,
                vale: response.data.sesion.vale,
                aprobado: response.data.sesion.aprobado,
                observacion_cliente: response.data.sesion.observacion_cliente,
            };
            is_entrada_horario.value = true;
            llenarHorasCliente(true, true);
            is_tratamiento_cliente.value= false;
        } else {
            form.value = {
                celular:response.data.cliente.celular,
                sucursal_id: response.data.sucursal.id,
                cliente_id: response.data.cliente.id,
                terapista_id: response.data.terapista.id,
                duracion: response.data.sesion.duracion,
                fecha_asignada: response.data.sesion.fecha_asignada,
                observaciones: response.data.sesion.observaciones,
                asistencia: response.data.sesion.asistencia,
                asistencia_cumplida: response.data.sesion.asistencia_cumplida,
                usa_expediente: response.data.sesion.usa_expediente,
                preferencia_terepista: response.data.sesion.preferencia_terepista,
                vale: response.data.sesion.vale,
                vale_id: response.data.sesion.vale_id,
                observacion_cliente: response.data.sesion.observacion_cliente,
            };
            is_tratamiento_cliente.value= true;
        }
        errors.value = {};
        editedIndex.value = id;
        if(vista!='') {
            vista_a.value=vista;
            addEventsModalAsistencia.show();
        } else {
            addEventsModalPrincipal.show();
        }
        isLoading.value = false;
  } catch (error) {
        console.log(error);
  }
};

const updateCitaPrincipal = async (vista='') => {
    try {
        isLoading.value = true;
        is_entrada.value = true;
        if(vista==='asistencia') {
            form.value.fecha_asignada=fecha_asignada.value;
            console.log(form.value.fecha_asignada,'cambio de fecha');
        }
        form.value.tratamientos_vistas = tratamientos_vistas.value;
        form.value.cantidad_tratamientos = cantidad_tratamientos.value;
        const response = await SesionRepository.updateSesion(
            form.value,
            editedIndex.value
        );
        showMessage('Guardado correctamente');
        addEventsModalPrincipal.hide();
        addEventsModalAsistencia.hide();
        obtener_resumen_horas();
    } catch (error) {
        if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
        isLoading.value = false;
    }
};

const deleteItemPrincipal = () => {
  deleteModalPricipal.show();
};

const deleteCitaPrincipal = async () => {
  try {
    isLoading.value = true;
    const response = await SesionRepository.deleteSesion(editedIndex.value);
    showMessage('Eliminado correctamente');
    addEventsModalPrincipal.hide();
    deleteModalPricipal.hide();
    obtener_resumen_horas();
  } catch (error) {
    if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    console.log(error);
    isLoading.value = false;
  }
};

const llenarHorasCliente = async (is_entrada_modal=false, is_update=false, is_static_fecha=false) => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        if (sucursal_id.value.id != 0) {
            formDate.value.sucursal_id = sucursal_id.value.id;
        } else {
            formDate.value.sucursal_id = null;
        }
        if (is_entrada_horario.value) {
            if (is_entrada_modal && !is_static_fecha) {
                const fecha_hora = form.value.fecha_asignada.split(' ');
                formDate.value.fecha = fecha_hora[0];
                formDate.value.hora = fecha_hora[1];
            }
            const response = await HorarioRepository.getDisponibles(
                formDate.value
            );
            optionsHoras.value = response.data;
            if (is_update) {
                const fecha_hora = form.value.fecha_asignada.split(' ');
                const result = optionsHoras.value.find(item => item.id == fecha_hora[1]);
                if (result != undefined) {
                    formDate.value.hora = fecha_hora[1];
                    horas_temp.value.id = fecha_hora[1];
                    horas_temp.value.name = result.name;

                    const fecha_procesando = new Date(fecha_hora[0]);
                    const fecha_actual = new Date();
                    fecha_actual.setHours(fecha_actual.getHours()-2);
                    if (fecha_actual >= fecha_procesando) {
                        formDate.value.hora = null;
                        horas_temp.value.id = null;
                        horas_temp.value.name = null;
                        optionsHoras.value = [];
                    }
                }

            } else {
                form.value.fecha_asignada = '';
            }
        }
        isLoading.value=false;
    } catch (error) {
        if (axios.isAxiosError(error))
            errorsDate.value = error.response.data.errors;
            errors.value = error.response.data.errors;
       isLoading.value=false;
       optionsHoras.value = [];
    }
};

const obtener_user = async () => {
    try {
        const response = await UserRepository.getuser();
        return response;
    } catch (error) {
        console.log(error);
    }
};

const obtener_resumen_horas = async () => {
    try {
        isLoading.value=true;
        filtro.value.sucursal_id=null;
        if(storeState.current_state.sucursal_mode != 0){
            filtro.value.sucursal_id=storeState.current_state.sucursal_mode;
        }
        filtro.value.filtro_terapista=null;
        if(storeState.current_state.terapista_id != 0){
            filtro.value.filtro_terapista=storeState.current_state.terapista_id;
        }
        filtro.value.cliente=null;
        if(storeState.current_state.filtro_cliente != null){
            filtro.value.cliente=storeState.current_state.filtro_cliente;
        }
        const fecha=moment(new Date()).format("YYYY-MM-DD");
        const response = await SesionRepository.getResumenFecha(filtro.value.fecha_proceso,filtro.value);
        titulo_fecha.value = response.data.fecha;
        resumen_horas.value = response.data.sesiones_resumen;
        calcular_cuadro_ativo();
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

const calcular_hoy = ()=>{
    const fecha_procesando = new Date(filtro.value.fecha_proceso+"T00:00:00-0600");
    const fecha_actual = new Date(moment(new Date()).format("YYYY-MM-DD")+"T00:00:00-0600");
    habilitar_hoy.value=true;
    if(fecha_procesando < fecha_actual || fecha_procesando > fecha_actual){
        habilitar_hoy.value=false;
    }
    obtener_resumen_horas();
};
const cambiar_a_hoy = ()=>{
    filtro.value.fecha_proceso=moment(new Date()).format("YYYY-MM-DD");
};

const cambiar_dia_antes = ()=>{
    let fecha_procesando = new Date(filtro.value.fecha_proceso+"T00:00:00-0600");
    fecha_procesando.setDate(fecha_procesando.getDate()-1);
    filtro.value.fecha_proceso=moment(fecha_procesando).format("YYYY-MM-DD");
};

const cambiar_dia_depues = ()=>{
    let fecha_procesando = new Date(filtro.value.fecha_proceso+"T00:00:00-0600");
    fecha_procesando.setDate(fecha_procesando.getDate()+1);
    filtro.value.fecha_proceso=moment(fecha_procesando).format("YYYY-MM-DD");
};

const reset_horarios = (index_exterior=null) => {
    for (let index = 0; index < resumen_horas.value.length; index++) {
        if(index_exterior == index){
            resumen_horas.value[index].ver=true;
        } else {
            resumen_horas.value[index].ver=false;
        }
    }
}

const calcular_cuadro_ativo= () => {
    const limite = resumen_horas.value.length;
    for (let index = 0; index < resumen_horas.value.length; index++) {
        const hora = resumen_horas.value[index].grupo.time;
        let fecha_procesando = new Date(`${filtro.value.fecha_proceso}T${hora}-0600`);
        let fecha_procesando_fin = new Date(`${filtro.value.fecha_proceso}T${hora}-0600`);
        fecha_procesando_fin.setMinutes(fecha_procesando_fin.getMinutes()+59);
        fecha_procesando_fin.setSeconds(fecha_procesando_fin.getSeconds()+59);
        const fecha_actual = new Date();
        let fecha_solo_actual = new Date(`${moment(fecha_actual).format("YYYY-MM-DD")}T00:00:00-0600`);
        let fecha_solo_proceso = new Date(`${filtro.value.fecha_proceso}T00:00:00-0600`);
        if(limite==1){
            resumen_horas.value[index].ver= true;
            break;
        }

        if(fecha_solo_actual > fecha_solo_proceso){
            if(index===(limite-1)) {
                resumen_horas.value[index].ver= true;
                break;
            }
            resumen_horas.value[index].ver= false;
        } else if(fecha_solo_actual < fecha_solo_proceso){
            if(index===0) {
                resumen_horas.value[index].ver= true;
                break;
            }
            resumen_horas.value[index].ver= false;
        }

        if(index==0){
            let fecha_inicio = new Date(`${moment(fecha_actual).format("YYYY-MM-DD")}T${hora}-0600`);
            if(fecha_actual < fecha_inicio){
                resumen_horas.value[index].ver= true;
                break;
            }
        } else if(index===(limite-1)) {
            let fecha_fin = new Date(`${moment(fecha_actual).format("YYYY-MM-DD")}T${hora}-0600`);
            if(fecha_actual > fecha_fin){
                resumen_horas.value[index].ver= true;
                break;
            }
        }

        if(fecha_procesando <= fecha_actual && fecha_actual <=fecha_procesando_fin){
            resumen_horas.value[index].ver= true;
            break;
        }

        resumen_horas.value[index].ver= false;
    }
}

const calcular_citas_edicion= (hora,aprobado) => {
    let fecha_procesando = new Date(`${filtro.value.fecha_proceso}T${hora}-0600`);
    let fecha_actual = new Date();
    fecha_actual.setHours(fecha_actual.getHours()-2);

    let fecha_solo_actual = new Date(`${moment(fecha_actual).format("YYYY-MM-DD")}T00:00:00-0600`);
    let fecha_solo_proceso = new Date(`${filtro.value.fecha_proceso}T00:00:00-0600`);

    if(roles_is('Cliente') && aprobado == 'SI'){
        return false;
    }

    if(fecha_solo_actual > fecha_solo_proceso){
        return false;
    }

    if(fecha_procesando >= fecha_actual){
        return true;
    }
    return false;
}

const getSucursalAll = async () => {
    try {
        const response = await SucursalRepository.getAll();
        return response.data;
    } catch (error) {
        console.log(error);
    }
};

const removeVale = () => {
    decodedString.value='';
    form.value.vale_id=null;
    errors2.value={};
}

const abrirVale = () => {
    decodedString.value='';
    errors2.value={};
    valeModal.show();
}

function paintOutline(detectedCodes, ctx) {
  for (const detectedCode of detectedCodes) {
    const [firstPoint, ...otherPoints] = detectedCode.cornerPoints

    ctx.strokeStyle = 'red'

    ctx.beginPath()
    ctx.moveTo(firstPoint.x, firstPoint.y)
    for (const { x, y } of otherPoints) {
        ctx.lineTo(x, y)
    }
    ctx.lineTo(firstPoint.x, firstPoint.y)
    ctx.closePath()
    ctx.stroke()
  }
}

const trackFunctionSelected = ref({ text: 'outline', value: paintOutline });

function onDetect(detectedCodes) {
    detectedCodes.then(
        function(value) {
            decodedString.value=value.content;
        },
        function(error) { console.log(error,"error") }
    );
}

const examinarVale = async () => {
    try {
        isLoading.value = true;
        const response = await SesionRepository.getVerificarVale({uuid:decodedString.value});
        showMessage('Vale valido, se agrego correctamente');
        errors2.value={};
        isLoading.value = false;
        valeModal.hide();
        form.value.vale='SI';
        vale_id.value = 'SI';
        form.value.vale_id=response.data.id;
        tratamientos_vistas.value=[];
        cantidad_tratamientos.value=0;
        agregarTratamiento(response.data.tratamiento_id, response.data.tratamiento, response.data.duracion_tratamiento);
    } catch (error) {
        if (axios.isAxiosError(error)) errors2.value = error.response.data.errors;
        isLoading.value = false;
        showMessage('Error al verificar vale','error');
    }
}

const activarCamara = () => {
    const activar= valeModal._isShown;
    camera.value='off';
    if(activar){
        camera.value='auto';
    }
}

const showMessage = (msg = '', type = 'success') => {
    const toast = window.Swal.mixin({
        toast: true,
        position: 'top',
        showConfirmButton: false,
        timer: 3000,
    });
    toast.fire({
        icon: type,
        title: msg,
        padding: '10px 20px',
    });
};

onMounted(async () => {
    feather.replace();
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    store.current_user.role = response.roles['0'].name;
    store.current_user.tipo_cliente = response.tipo_cliente;
    const model_sucursal = await getSucursalAll();
    optionsSucursales.value = model_sucursal;
    if(!roles_is("Cliente")){
        cargar_terapista();
    }
    addEventsModalPrincipal = new window.bootstrap.Modal(
        document.getElementById("addEventsModalPrincipal")
    );
    modal_index_tratamientos_principal = new window.bootstrap.Modal(
        document.getElementById("modal_index_tratamientos_principal")
    );
    deleteModalPricipal = new window.bootstrap.Modal(
        document.getElementById("deleteModalPricipal")
    );
    addEventsModalAsistencia = new window.bootstrap.Modal(
        document.getElementById("addEventsModalAsistencia")
    );
    valeModal = new window.bootstrap.Modal(
        document.getElementById("valeModal")
    );
    document.getElementById("valeModal").addEventListener('shown.bs.modal', function () {
        activarCamara();
    });
    document.getElementById("valeModal").addEventListener('hidden.bs.modal', function () {
        activarCamara();
    });
    calcular_hoy();
    let fecha = moment(new Date());
    fecha.add(1, 'days');
    formDate.value.fecha = fecha.format("YYYY-MM-D");
    optionsFechaSola.value.minDate =  fecha.format("YYYY-MM-D");
});

</script>
