<template>
    <div class="layout-px-spacing apps-calendar">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="statbox panel box box-shadow">
                    <div class="panel-body">
                        <button
                            id="evento_recargar_reservar"
                            type="button"
                            v-show="false"
                            class="btn btn-black"
                            @click="cargando_citas"
                        ></button>
                        <div class="calendar-upper-section">
                            <div class="row">
                                <div class="col-md-8 col-12">
                                    <div
                                        class="labels text-md-start text-center"
                                        v-if="!is('Cliente')"
                                    >
                                        <p class="label label-primary">
                                            Confirmado
                                        </p>
                                        <p class="label label-warning">
                                            Sin respuesta
                                        </p>
                                        <p class="label label-success">
                                            Asistió
                                        </p>
                                        <p class="label label-danger">
                                            no asistió
                                        </p>
                                    </div>
                                    <div
                                        class="labels text-md-start text-center"
                                        v-if="is('Cliente')"
                                    >
                                        <p class="label label-success">
                                            Aprobado
                                        </p>
                                        <p class="label label-warning">
                                            No asistio
                                        </p>
                                        <p class="label label-danger">
                                            Aun no aprobado
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <FullCalendar ref="fullCalendar" :options="options">
                            <template v-slot:eventContent="arg">
                                <div class="fc-event-main-frame">
                                    <div class="fc-event-time">
                                        {{ arg.timeText }}
                                    </div>
                                    <div class="fc-event-title-container">
                                        <div class="fc-event-title fc-sticky">
                                            {{ arg.event.title }}
                                        </div>
                                    </div>

                                    <div class="calendar-tlp">
                                        <div
                                            class="p-2 bg-dark text-white text-start text-wrap"
                                        >
                                            {{
                                                arg.timeText +
                                                " : " +
                                                arg.event.title
                                            }}
                                        </div>
                                        <div class="p-2 text-start text-wrap">
                                            {{
                                                arg.event.extendedProps
                                                    ? arg.event.extendedProps
                                                          .description
                                                    : ""
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </FullCalendar>
                    </div>
                </div>
            </div>

            <!-- Modal cliente -->
            <div
                id="modal_index_cliente"
                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">Buscar cliente</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="w-100">
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="abrirVale(true)"
                                >
                                    Escanear Vale
                                </button>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="opencliente"
                                >
                                    Crear Cliente
                                </button>
                                <input
                                    v-model="search.search"
                                    class="form-control w-100 product-search"
                                    placeholder="Buscar cliente..."
                                    @keyup.enter="getClienteAll"
                                />
                            </div>
                            <div class="custom-table">
                                <v-client-table
                                    :data="obtener_clientes"
                                    :columns="columns_cliente"
                                    :options="table_option_cliente"
                                    ref="table_cliente"
                                >
                                    <template #id="props">
                                        <button class="btn btn-black" @click="openCreate(props.row.id,props.row.celular,props.row.razonSocial)">
                                            <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>

            <!-- Modal citas -->
            <div
                id="modal_index_citas"
                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">
                                {{ titulo_citas }}
                            </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="custom-table">
                                <v-client-table
                                    :data="obtener_citas"
                                    :columns="columns_citas"
                                    :options="table_option_citas"
                                    ref="table_citas"
                                >
                                    <template #id="props">
                                        <button class="btn btn-sm btn-black" :style="'background-color: '+(is('Cliente')?props.row.estatus_color_cliente:props.row.estatus_color)+' !important;'" @click="getCitaId(props.row.id)">
                                            <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>

            <!-- Modal tratamientos -->
            <div
                id="modal_index_tratamientos"
                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="addEventsModal"
                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="formComponent" @submit.stop.prevent="">
                            <div class="modal-body">
                                <div class="row" v-if="(!is('Cliente'))">
                                    <div class="col-md-12">
                                        <h3>{{ titulo_sesion }}</h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button
                                            v-if="form.vale == 'NO'"
                                            type="button"
                                            class="btn btn-success"
                                            v-show="habilitar_edicion"
                                            @click="abrirTratamientos"
                                        >
                                            Elegir tratamientos
                                        </button>
                                        <div class="col-md-12">
                                            <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
                                                            href="javascript:void(0);"
                                                            title="Eliminar"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-placement="top"
                                                            v-show="habilitar_edicion && form.vale == 'NO'"
                                                            @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>
                                    <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><br v-show="!form.vale_id">
                                        <button
                                            type="button"
                                            class="btn btn-success"
                                            v-show="habilitar_edicion && form.vale == 'SI'"
                                            @click="abrirVale(false)"
                                        >
                                            Escanear Vale
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-danger m-1"
                                            v-show="habilitar_edicion && form.vale == 'SI' && form.vale_id"
                                            @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"
                                                :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" v-if="!is('Cliente')">
                                        <div class="form-group">
                                            <label>Fecha</label>
                                            <flat-pickr
                                                v-model="form.fecha_asignada"
                                                :config="optionsFecha"
                                                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">
                                        <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=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @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="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=""
                                                placeholder="Seleccione..."
                                                :showNoOptions="false"
                                                :showNoResults="false"
                                                @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=""
                                                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-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') || !habilitar_edicion">
                                    <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 class="row" v-if="is('Cliente') && habilitar_edicion">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label class="">Observaciones:</label>
                                            <textarea
                                                v-model="form.observacion_cliente"
                                                class="form-control"
                                                placeholder="Agregar observación"
                                                rows="3"
                                            ></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button
                                    type="button"
                                    class="btn btn-black w-100"
                                    v-show="editedIndex === -1 && habilitar_edicion"
                                    @click="createCita"
                                >
                                    Guardar
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-black w-100"
                                    v-show="editedIndex  !== -1 && habilitar_edicion"
                                    @click="updateCita"
                                >
                                    Actualizar
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-danger w-100"
                                    v-show="editedIndex  !== -1 && habilitar_edicion"
                                    @click="deleteItem"
                                >
                                    Eliminar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Eliminar Modal -->
            <div class="modal fade" id="deleteModal" 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="deleteCita()">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">
                                    <qrcode-stream
                                        :camera="camera"
                                        :track="trackFunctionSelected.value"
                                        :formats="{qr_code: true}"
                                        @detect="onDetect"
                                    ></qrcode-stream>
                                </div> -->
                                <div class="col-12">
                                    <h4><b>UUID o ID/Folio:</b></h4>
                                    <input type="text" class="form-control" v-model="decodedString" placeholder="Escribe el UUID o ID/Folio del vale">
                                </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>
        <!-- Register Modal crear cliente -->
        <div
            class="modal fade"
            id="registerModalExpressCliente"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabelCliente"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabelCliente">
                        <h4 class="modal-title">{{
                            "Crear Cliente"
                        }}</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <form class="mt-0" ref="formComponentCliente" @submit.stop.prevent="">
                            <div class="form-group">
                                <label>Nombre</label>
                                <input
                                    v-model="formCliente.razonSocial"
                                    type="text"
                                    class="form-control mb-2"
                                    placeholder="Nombre"
                                    :class="[is_entrada_cliente ? (!errorsCliente.razonSocial ? 'is-valid' : 'is-invalid') : '']"
                                />
                                <div class="valid-feedback"></div>
                                <div class="invalid-feedback">
                                    <li v-for="item in errorsCliente.razonSocial">
                                        {{ item }}
                                    </li>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>RFC</label>
                                <input
                                    v-model="formCliente.rfc"
                                    placeholder="RFC"
                                    type="text"
                                    class="form-control mb-2"
                                />
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input
                                    v-model="formCliente.email"
                                    type="email"
                                    class="form-control mb-2"
                                    placeholder="Email"
                                    :class="[is_entrada_cliente ? (!errorsCliente.email ? 'is-valid' : 'is-invalid') : '']"
                                />
                                <div class="valid-feedback"></div>
                                <div class="invalid-feedback">
                                    <li v-for="item in errorsCliente.email">
                                        {{ item }}
                                    </li>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Celular</label>
                                <input
                                    v-model="formCliente.celular"
                                    type="text"
                                    class="form-control mb-4"
                                    placeholder="Celular"
                                />
                            </div>
                            <div class="form-group">
                                <label class="">Observación:</label>
                                <textarea
                                    v-model="formCliente.observacion"
                                    class="form-control mb-4"
                                    placeholder="Agregar observación"
                                    rows="3"
                                ></textarea>
                            </div>
                            <div class="form-group">
                                <button
                                    type="button"
                                    class="btn btn-black w-100"
                                    @click="createCliente"
                                >
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <loading
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"
        />
    </div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";
import "@/assets/sass/apps/calendar.scss";
import "@/assets/sass/elements/search.scss";

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

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

const roles_is = inject('$is');

//inicio
import { useStateStore } from '@/store/StateStore';
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as ClienteRepository from "@/repositories/ClienteRepository";
import * as SesionRepository from "@/repositories/SesionRepository";
import * as TratamientoRepository from "@/repositories/TratamientoRepository";
import * as HorarioRepository from "@/repositories/HorarioRepository";

// calendario
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";

//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";

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

import { useMeta } from "@/composables/use-meta";
useMeta({ title: "EGURROLA" });

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

//qr
const decodedString =ref('');
const errors2 =ref({});
const camera= ref('off');
const is_vale_directo = ref(false);
const id_cliente_publico = ref(null);
const name_cliente_publico = ref(null);

//modales
let addEventsModal = ref(null);
let modal_index_cliente = ref(null);
let modal_index_citas = ref(null);
let modal_index_tratamientos = ref(null);
let deleteModal = ref(null);
let valeModal = ref(null);
let registerModalExpressCliente = ref(null);

const table_cliente= ref();
const table_citas= ref();
const table_tratamientos= ref();

//variables de calendario
const fullCalendar = ref(null);

//table clientes
const isLoading = ref(true);
const search = ref({
    search: "",
});
const columns_cliente = ref(["id", "razonSocial", "celular"]);
const table_option_cliente = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        razonSocial: (h, row, index) => {
            return "Cliente";
        },
        celular: (h, row, index) => {
            return "Teléfono";
        },
        count_exp: (h, row, index) => {
            return "Entrar";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ["id", "razonSocial", "rfc", "celular", "email"],
    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,
    filterable: false,
});
const cliente_celular = ref(null);
const cliente_id =ref(null);

//clientes index
const obtener_clientes = ref([]);

// citas
const titulo_citas = ref('Cita');
const columns_citas = ref(roles_is('Cliente')?['id','horas','celular','sucursal','terapista','aprobado']:['id','horas','cliente','celular','sucursal','terapista']);
const table_option_citas = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio cita";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ['id','horas','cliente','celular','sucursal','terapista'],
    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_citas = 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 is_entrada_horario = ref(false);
const is_tratamiento_cliente = ref(false);
const habilitar_edicion = ref(false);
const editedIndex = ref(-1);
const formComponent = ref(null);
const errors = ref({});
const errorsDate = 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-D 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: 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-D 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,
});

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

// crear cliente
const formComponentCliente = ref(null);
const is_entrada_cliente = ref(false);
const errorsCliente = ref({});
const formCliente = ref({
    rfc: "",
    razonSocial: null,
    email: null,
    celular: null,
    observacion:''
});

//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.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.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.show();
    isLoading.value = false;
};

const optionsFecha = 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-D H:mm"),
});

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

//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;
};

// 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 changeVale = (data) => {
    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;
};

//calendar
const options = ref({
    initialView: "dayGridMonth",
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    headerToolbar: {
        start: "prev,next today",
        center: "title",
        end: "dayGridMonth",
    },
    // editable: true,
    // droppable: true,
    dayMaxEvents: true,
    selectable: true,
    eventClick: null,
    select: null,
    eventMouseEnter: null,
    eventMouseLeave: null,
    events: [],
    locale: "es",
    buttonText: {
        today: "Hoy",
        month: "Mes",
        week: "Semana",
        day: "Día",
        list: "Agenda",
    },
});

// filtros de calendario
const filtro = ref({
    sucursal_id: null,
    cliente: null,
    fecha_inicio: null,
    fecha_fin: null,
    filtro_terapista: null,
});

const edit_date = (data) => {
    search.value = {
        search:""
    };
    obtener_clientes.value=[];
    is_vale_directo.value = false;
    const fecha_procesando = new Date(data.startStr + "T20:00:00-0600");
    const fecha_inicio = new Date(data.startStr + "T08:00:00-0600");
    const fecha_fin = new Date(data.startStr + "T20:00:00-0600");
    const fecha_actual = new Date();
    if (fecha_actual <= fecha_procesando) {
        form.value.fecha_asignada=data.startStr + " "+moment(new Date()).format("H:mm");
        if(fecha_actual <= fecha_inicio){
            form.value.fecha_asignada=data.startStr + " 09:00:00";
        } else if(fecha_actual => fecha_fin){
            form.value.fecha_asignada=data.startStr + " 19:00:00";
        }
        if(roles_is("Cliente")){
            openCreate(cliente_id.value,cliente_celular.value,'Sin nombre');
        } else {
            modal_index_cliente.show();
        }
    }
};

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

const getClienteAll = async () => {
    try {
        isLoading.value = true;
        const response = await ClienteRepository.getAllSearch(search.value);
        obtener_clientes.value = response.data;
        isLoading.value = false;
    } catch (error) {
        console.log(error);
    }
};

const cargando_citas = async () => {
    try {
        isLoading.value = true;
        const fecha_inicio = fullCalendar.value.calendar.currentData.dateProfile.currentRange.start;
        filtro.value.fecha_inicio = fecha_inicio.getFullYear()+'-'+(fecha_inicio.getMonth()+1)+'-'+fecha_inicio.getDate();
        const fecha_fin = fullCalendar.value.calendar.currentData.dateProfile.currentRange.end;
        filtro.value.fecha_fin = fecha_fin.getFullYear()+'-'+(fecha_fin.getMonth()+1)+'-'+fecha_fin.getDate();
        options.value.events =[];
        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 response = await SesionRepository.getAll(filtro.value);
        options.value.events = response.data.eventos;
        optionsSucursales.value = response.data.sucursales;
        optionsTerapista.value = response.data.terapistas;
        setup_draggable();
        isLoading.value = false;
    } catch (error) {
        console.log(error);
    }
};

const ver_citas = async (data) => {
    try {
        let obj = JSON.parse(JSON.stringify(data.event));
        if(obj.title!=='No disponible'){
            isLoading.value = true;
            table_citas.value.setPage(1);
            const response = await SesionRepository.getSesionFecha(obj.id,filtro.value);
            obtener_citas.value = response.data.sesiones;
            titulo_citas.value = response.data.fecha;
            modal_index_citas.show();
            isLoading.value = false;
        }
    } catch (error) {
        console.log(error);
    }
};

const initPopup = () => {
    addEventsModal = new window.bootstrap.Modal(
        document.getElementById("addEventsModal")
    );
};

// eventos de crear citas
const openCreate = (cliente_id,celular,razonSocial) => {
    const fecha_procesado= form.value.fecha_asignada;
    initializeCreate();
    titulo_sesion.value=razonSocial;
    form.value.fecha_asignada=fecha_procesado;
    fecha_asignada.value=fecha_procesado;
    form.value.cliente_id=cliente_id;
    form.value.celular=celular;
    is_entrada.value = true;
    is_entrada_horario.value = true;
    habilitar_edicion.value = true;
    if (roles_is("Cliente")) {
        llenarHorasCliente(true);
        agregarTratamiento(369,'Sin especificar','01:00:00');
    }
    modal_index_cliente.hide();
    addEventsModal.show();
};

const initializeCreate = () => {
    decodedString.value='';
    errors2.value={};
    titulo_sesion.value='';
    fecha_asignada.value='';
    sucursal_id.value = {
        id: storeState.current_state.sucursal_mode,
        nombre: storeState.current_state.sucursal_name_mode,
    };
    terapista_id.value = {
        id: 36,
        name: 'no asignada',
    };
    preferencia_terepista_id.value = 'NO';
    vale_id.value = 'NO';
    asistencia_id.value = 'NO';
    usa_expediente_id.value = 'NO';
    asistencia_cumplida_id.value = 'NO';
    cantidad_tratamientos.value=0;
    tratamientos_vistas.value = [];
    if(roles_is("Cliente")){
        form.value = {
            celular:roles_is("Cliente")?cliente_celular.value:null,
            sucursal_id: storeState.current_state.sucursal_mode,
            cliente_id: roles_is("Cliente")?cliente_id.value:null,
            terapista_id: 36,
            duracion: '01:00',
            fecha_asignada: moment(new Date()).format("YYYY-MM-D H:mm"),
            observaciones: null,
            asistencia: 'NO',
            asistencia_cumplida: 'NO',
            usa_expediente: 'NO',
            preferencia_terepista: 'NO',
            vale: 'NO',
            vale_id: null,
            aprobado: roles_is("Cliente")?'NO':'SI',
            observacion_cliente: '',
        };
        let fecha = moment(new Date());
        fecha.add(1, 'days');
        formDate.value.fecha = fecha.format("YYYY-MM-D");
        formDate.value.hora = null;
        optionsFechaSola.value.minDate =  fecha.format("YYYY-MM-D");
        horas_temp.value = {
            id: null,
            name: '',
        };
        is_entrada_horario.value = false;
        is_tratamiento_cliente.value = false;
    } else {
        form.value = {
            celular:roles_is("Cliente")?cliente_celular.value:null,
            sucursal_id: storeState.current_state.sucursal_mode,
            cliente_id: roles_is("Cliente")?cliente_id.value:null,
            terapista_id: 36,
            duracion: '01:00',
            fecha_asignada: moment(new Date()).format("YYYY-MM-D H:mm"),
            observaciones: null,
            asistencia: 'NO',
            asistencia_cumplida: 'NO',
            usa_expediente: 'NO',
            preferencia_terepista: 'NO',
            vale: 'NO',
            vale_id: null,
            observacion_cliente: '',
        };
        is_tratamiento_cliente.value = true;
    }
    errors.value = {};
    editedIndex.value = -1;
    is_entrada.value = false;
    habilitar_edicion.value = false;
};

const createCita = async () => {
    if(cantidad_tratamientos.value>0){
        try {
            isLoading.value = true;
            is_entrada.value = true;
            form.value.tratamientos_vistas = tratamientos_vistas.value;
            form.value.cantidad_tratamientos = cantidad_tratamientos.value;
            await SesionRepository.createSesion(form.value);
            showMessage('Guardado correctamente');
            initializeCreate();
            addEventsModal.hide();
            cargando_citas();
        } catch (error) {
            isLoading.value = false;
            if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
        }
    }
};

const updateCita = async () => {
    try {
        isLoading.value = true;
        is_entrada.value = true;
        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');
        initializeCreate();
        addEventsModal.hide();
        cargando_citas();
    } catch (error) {
        isLoading.value = false;
        if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    }
};

const deleteItem = () => {
  deleteModal.show();
};

const deleteCita = async () => {
  try {
    isLoading.value = true;
    const response = await SesionRepository.deleteSesion(editedIndex.value);
    showMessage('Eliminado correctamente');
    initializeCreate();
    addEventsModal.hide();
    deleteModal.hide();
    cargando_citas();
  } catch (error) {
    isLoading.value = false;
    if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    console.log(error);
  }
};


const getCitaId = async (id) => {
  try {
        isLoading.value = true;
        initializeCreate();
        decodedString.value='';
        errors2.value={};
        habilitar_edicion.value = false;
        modal_index_citas.hide();
        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;
        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);
        } 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,
            };
        }

        errors.value = {};
        editedIndex.value = id;
        addEventsModal.show();
        isLoading.value = false;
  } catch (error) {
        console.log(error);
  }
};

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 = [];
    }
}

onMounted(async () => {
    //inicio de modales
    modal_index_cliente = new window.bootstrap.Modal(
        document.getElementById("modal_index_cliente")
    );
    modal_index_citas = new window.bootstrap.Modal(
        document.getElementById("modal_index_citas")
    );
    modal_index_tratamientos = new window.bootstrap.Modal(
        document.getElementById("modal_index_tratamientos")
    );
    deleteModal = new window.bootstrap.Modal(
        document.getElementById("deleteModal")
    );
    valeModal = new window.bootstrap.Modal(
        document.getElementById("valeModal")
    );
    registerModalExpressCliente = new window.bootstrap.Modal(
        document.getElementById('registerModalExpressCliente')
    );
    // document.getElementById("valeModal").addEventListener('shown.bs.modal', function () {
    //     activarCamara();
    // });
    // document.getElementById("valeModal").addEventListener('hidden.bs.modal', function () {
    //     activarCamara();
    // });
    initPopup();
    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 cliente_publico = await obtener_cliente_publico();
    if(cliente_publico.id){
        id_cliente_publico.value = cliente_publico.id;
        name_cliente_publico.value = cliente_publico.razonSocial;
    }
    if(roles_is("Cliente")){
        cliente_id.value = response.cliente_id;
        cliente_celular.value = response.cliente.celular;
    }
    options.value.eventClick = ver_citas;
    options.value.select = edit_date;
    options.value.eventMouseEnter = event_mouse_hover;
    options.value.eventMouseLeave = event_mouse_leave;
    document.querySelector(".fc-prev-button").addEventListener("click", function (e) {
        cargando_citas();
    });
    document.querySelector(".fc-next-button").addEventListener("click", function (e) {
        cargando_citas();
    });
    document.querySelector(".fc-today-button").addEventListener("click", function (e) {
        cargando_citas();
    });
    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");
    cargando_citas();
});

const event_mouse_hover = (data) => {
    let element = data.el.querySelector(".calendar-tlp");
    element.classList.add("d-block");
};

const event_mouse_leave = (data) => {
    let element = data.el.querySelector(".calendar-tlp");
    element.classList.remove("d-block");
};

const setup_draggable = () => {
    new Draggable(document.querySelector(".fc-view"), {
        itemSelector: ".fc-event",
        eventData: function (eventEl) {
            let event = {
                title: eventEl.innerText,
                duration: "01:00",
            };
            return event;
        },
    });
};

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

const abrirVale = (temp=false) => {
    decodedString.value='';
    errors2.value={};
    valeModal.show();
    is_vale_directo.value = temp;
    if(temp){
        form.value.cliente_id = id_cliente_publico.value;
        form.value.celular = "";
        is_vale_directo.value = true;
        titulo_sesion.value= 'Cliente: '+name_cliente_publico.value;

    }
}

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 activarCamara = () => {
    const activar= valeModal._isShown;
    camera.value='off';
    if(activar){
        camera.value='auto';
    }
}

const examinarVale = async () => {
    try {
        isLoading.value = true;
        // Determinar si es UUID o ID/folio basado en el formato
        const isNumeric = /^\d+$/.test(decodedString.value);
        const params = isNumeric 
            ? { id: decodedString.value } 
            : { uuid: decodedString.value };
        
        const response = await SesionRepository.getVerificarVale(params);
        showMessage('Vale valido, se agrego correctamente');
        errors2.value={};
        isLoading.value = false;
        valeModal.hide();
        if(is_vale_directo.value){
            openCreate(id_cliente_publico.value,'','Cliente: '+name_cliente_publico.value);
        }
        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');
    }
}

// eventos crear cliente
const opencliente = () => {
    initializeCreateCliente();
    registerModalExpressCliente.show();
    modal_index_cliente.hide();
};

const createCliente = async () => {
  try {
    isLoading.value = true;
    is_entrada_cliente.value = true;
    const response = await ClienteRepository.createCliente(formCliente.value);
    showMessage('Cliente creado correctamente');
    initializeCreateCliente();
    registerModalExpressCliente.hide();
    // Abrir modal de crear cita con el cliente recién creado
    const fecha_procesado= form.value.fecha_asignada || moment(new Date()).format("YYYY-MM-D H:mm");
    initializeCreate();
    titulo_sesion.value=response.data.razonSocial;
    form.value.fecha_asignada=fecha_procesado;
    fecha_asignada.value=fecha_procesado;
    form.value.cliente_id=response.data.id;
    form.value.celular=response.data.celular;
    is_entrada.value = true;
    is_entrada_horario.value = true;
    habilitar_edicion.value = true;
    if (roles_is("Cliente")) {
        llenarHorasCliente(true);
        agregarTratamiento(369,'Sin especificar','01:00:00');
    }
    addEventsModal.show();
    isLoading.value = false;
  } catch (error) {
    isLoading.value = false;
    if (axios.isAxiosError(error)) errorsCliente.value = error.response.data.errors;
  }
};

const initializeCreateCliente = () => {
    formCliente.value = {
        rfc: "",
        razonSocial: null,
        email: null,
        celular: null,
        observacion: '',
    };
    errorsCliente.value = {};
    is_entrada_cliente.value = false;
};

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",
    });
};
</script>
