sfp_front_vue_diarista_cliente/src/pages/search/components/ServiceTimeSelectionDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="card-border bg-surface text-text time-card">

      <!-- Fechar -->
      <q-btn
        flat round dense
        icon="mdi-close-circle-outline"
        color="grey-5"
        class="absolute-top-right q-mt-sm q-mr-sm"
        @click="onDialogCancel"
      />

      <!-- Título -->
      <q-card-section class="text-center q-pt-lg q-pb-xs">
        <div class="text-subtitle1 text-weight-bold text-text">
          {{ serviceType.label }}
          <span class="text-weight-regular text-grey-6">{{ '(' + serviceType.hoursCount + 'h)' }}</span>
        </div>
        <div class="text-caption text-grey-6 q-mt-xs">
          {{ $t('scheduling_page.time_selection.subtitle') }}
        </div>
      </q-card-section>

      <!-- Slots de horário -->
      <q-card-section class="q-pt-xs">
        <div class="row q-col-gutter-xs">
          <div
            v-for="slot in timeSlots"
            :key="slot.value"
            class="col-6"
          >
            <q-radio
              v-model="selectedSlot"
              :val="slot.value"
              :label="slot.label"
              color="primary"
              keep-color
              dense
            />
          </div>
        </div>
      </q-card-section>

      <!-- Refeição (apenas 6h e 8h) -->
      <template v-if="hasMealSection">
        <q-separator class="q-mx-md" />
        <q-card-section class="q-py-sm">
          <div class="text-body2 text-weight-bold text-text q-mb-sm text-center">
            {{ $t('scheduling_page.time_selection.meal_section') }}
          </div>
          <div class="row justify-center q-gutter-x-xl">
            <q-radio
              v-model="selectedMeal"
              val="offer"
              :label="$t('scheduling_page.time_selection.meal_offer')"
              color="primary"
              keep-color
              dense
            />
            <q-radio
              v-model="selectedMeal"
              val="no_offer"
              :label="$t('scheduling_page.time_selection.meal_no_offer')"
              color="primary"
              keep-color
              dense
            />
          </div>
        </q-card-section>
      </template>

      <!-- Botão continuar -->
      <q-card-actions class="q-px-md q-pb-xs q-pt-sm">
        <q-btn
          unelevated
          rounded
          no-caps
          :label="$t('scheduling_page.time_selection.continue')"
          color="secondary"
          class="full-width"
          @click="handleContinue"
        />
      </q-card-actions>

      <!-- Nota de pausa -->
      <div v-if="pauseNote" class="text-center text-caption text-primary q-pb-md">
        {{ pauseNote }}
      </div>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import {  useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  serviceType: { type: Object, required: true },
  provider:    { type: Object, required: true },
  selectedDate:{ type: String, required: true },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogCancel, onDialogOK } = useDialogPluginComponent();
const { t } = useI18n();

const selectedSlot = ref(null);
const selectedMeal = ref(null);

// Gera todos os slots possíveis de 7h até 20h para a duração dada
const timeSlots = computed(() => {
  const h = props.serviceType.hoursCount;
  const slots = [];
  for (let start = 7; start + h <= 20; start++) {
    const end = start + h;
    slots.push({
      value: `${start}-${end}`,
      label: `${start}h às ${end}h`,
    });
  }
  return slots;
});

const hasMealSection = computed(() =>
  props.serviceType.hoursCount >= 6
);

const pauseNote = computed(() => {
  const map = { 8: t('scheduling_page.time_selection.pause_note_8h'), 6: t('scheduling_page.time_selection.pause_note_6h'), 4: t('scheduling_page.time_selection.pause_note_4h') };
  return map[props.serviceType.hoursCount] ?? null;
});


// Função que ira pegar os valores para o banco de dados
function handleContinue(){
  if(!selectedSlot.value) {
    return;
  }
  if(hasMealSection.value && !selectedMeal.value) {
    return;
  }
  onDialogOK({
    slot: selectedSlot.value,
    meal: selectedMeal.value,
    date: props.selectedDate,
    serviceType: props.serviceType,
  })
};
</script>

<style scoped lang="scss">
.time-card {
  width: min(88vw, 360px);
}


</style>