sfp_front_vue_diarista_cliente/src/pages/schedules/SobMedidaPage.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-page class="sob-medida-page">
    <div class="page-shell">
      <span class="page-title gradient-diarista">Serviço Sob Medida</span>

     <q-card flat bordered class="figma-card compact-card">
  <div class="card-title text-center gradient-diarista">
    Seu pedido
  </div>

  <div class="field-label text-center gradient-diarista">
    Quantidade de serviço
  </div>


<div class="quantity-stepper">
  <q-btn
    round
    flat
    icon="remove"
    class="quantity-btn"
    @click="decreaseQuantity"
  />

  <span class="quantity-value gradient-diarista">
    {{ quantity }}
  </span>

  <q-btn
    round
    flat
    icon="add"
    class="quantity-btn"
    @click="increaseQuantity"
  />

</div>
 <div class="options-grid gradient-diarista">
  <div
    v-for="option in addressTypesOptions"
    :key="option.value"
    class="option-col"
  >
    <q-radio
      v-model="selectedOption"
      :val="option.value"
      :label="option.label"
      color="purple"
      dense
    />
  </div>
</div>

 <div class="field-label text-center gradient-diarista">
  Tipo de serviço
</div>

<div class="service-type-inline">
  <div
    v-for="serviceType in serviceTypes"
    :key="serviceType.id"
    class="option-col"
  >
    <q-radio
      v-model="selectedServiceType"
      :val="serviceType.id"
      :label="serviceType.description"
      color="purple"
      dense
    />
  </div>
</div>

<div class="field-label text-center gradient-diarista">Especialidade preferencial?</div>
<div class="options-grid">
<div class="options-grid">
  <div
    v-for="item in specialties"
    :key="item.id"
    class="option-col"
  >
    <q-checkbox
      v-model="selectedSpecialties"
      :val="item.id"
      :label="item.description"
      color="purple"
      dense
    />
  </div>
</div>
</div>

        <div class="field-label text-center gradient-diarista">
          Descreva detalhes do pedido
          <span class="optional">(opcional)</span>
        </div>

        <q-input
          v-model="description"
          type="textarea"
          outlined
          bg-color="white"
          color="dark"
          input-class="text-black"
          class="description-box"
          placeholder="Olá, desejo profissional dedicado que irá fazer..."
        />
      </q-card>

      <!-- Faixa -->
      <div class="section-title gradient-diarista">Faixa de preço por 8 horas</div>
<q-card flat bordered class="figma-card compact-card">
  <div class="range-container">
    <!-- bolha min -->
    <div
      class="price-pin"
      :style="{ left: minPosition + '%' }"
    >
      <span>{{ priceRange.min }}</span>
    </div>

    <!-- bolha max -->
    <div
      class="price-pin"
      :style="{ left: maxPosition + '%' }"
    >
      <span>{{ priceRange.max }}</span>
    </div>

    <q-range
      v-model="priceRange"
      :min="PRICE_LIMITS.min"
      :max="PRICE_LIMITS.max"
      color="secondary"
      class="price-range"
    />
  </div>

  <div class="range-helper gradient-diarista">
    Selecione a faixa de preço integral para receber propostas de diaristas.
  </div>
</q-card>

            <!-- Data -->
      <div class="section-title gradient-diarista">Data e hora</div>
      <q-card flat bordered class="figma-card date-card">
        <q-date
  v-model="selectedDate"
  minimal
  color="purple"
  class="figma-date calendar-custom "
/>
      </q-card>

    </div>
  </q-page>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useQuasar } from 'quasar'

import ServiceSelectionSheet from 'src/pages/search/components/ServiceSelectionSheet.vue'
import ServiceTimeSelectionDialog from 'src/pages/search/components/ServiceTimeSelectionDialog.vue'

import { createCustomSchedule } from 'src/api/customSchedules'
import { getPrimaryAddress } from 'src/api/address'
import { getPublicServiceTypes } from 'src/api/serviceTypes'
import { getPublicSpecialties } from 'src/api/specialties'
import { userStore } from 'src/stores/user'
import { calculateDailyPrices } from 'src/helpers/utils'

const $q = useQuasar()
const user = userStore()

const addressTypesOptions = computed(() => [
  { label: 'Residencial', value: 'home' },
  { label: 'Comercial', value: 'commercial' }
])

// listas vindas da API
const serviceTypes = ref([])
const specialties = ref([])

// seleções do usuário
const selectedServiceType = ref(null)
const selectedSpecialties = ref([])
const selectedOption = ref('home')

// campos do formulário
const address = ref([])
const description = ref('')
const selectedDate = ref(null)
const quantity = ref(1)

const PRICE_LIMITS = Object.freeze({
  min: 100,
  max: 500
})

const priceRange = ref({
  min: 150,
  max: 300
})

const minPosition = computed(() =>
  ((priceRange.value.min - PRICE_LIMITS.min) /
    (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
)

const maxPosition = computed(() =>
  ((priceRange.value.max - PRICE_LIMITS.min) /
    (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
)

onMounted(async () => {
  const { data } = await getPrimaryAddress(user.user.client.id, 'client')
  address.value = data.payload

  const publicServiceTypes = await getPublicServiceTypes()
  serviceTypes.value = publicServiceTypes

  const publicSpecialties = await getPublicSpecialties()
  specialties.value = publicSpecialties
})


watch(selectedDate, (newDate, oldDate) => {
  if (!newDate || newDate === oldDate) return
  openServiceSelection()
})

function openServiceSelection () {
  $q.dialog({
    component: ServiceSelectionSheet,
    componentProps: {
      provider: calculateDailyPrices(priceRange.value.max * quantity.value),
      selectedDate: selectedDate.value
    }
  }).onOk((payload) => {
    if (payload?.serviceType) {
      openServiceTimeSelection(payload.serviceType)
    }
  })
}

function openServiceTimeSelection (serviceType) {
  $q.dialog({
    component: ServiceTimeSelectionDialog,
    componentProps: {
      serviceType,
      provider: calculateDailyPrices(priceRange.value.max * quantity.value),
      selectedDate: selectedDate.value
    }
  }).onOk(saveFinalOrder)
}

async function saveFinalOrder (payloadFinal) {
  let [startHour, endHour] = payloadFinal.slot.split('-')

  if(startHour < 10) {
    startHour = '0' + startHour
  }

  if(endHour < 10) {
    endHour = '0' + endHour
  }

  const payload = {
    client_id: user.user.client.id,
    address_id: address.value?.id,
    quantity: quantity.value,
    date: payloadFinal.date,
    period_type: String(payloadFinal.serviceType.hoursCount),
    start_time: `${startHour}:00`,
    end_time: `${endHour}:00`,
    address_type: selectedOption.value.toLowerCase(),
    service_type_id: selectedServiceType.value,
    description: description.value,
    min_price: priceRange.value.min,
    max_price: priceRange.value.max,
    offers_meal: payloadFinal.meal === 'offer',
    speciality_ids: selectedSpecialties.value
  }

  await createCustomSchedule(payload)

  $q.notify({
    type: 'positive',
    message: 'Pedido sob medida salvo com sucesso!'
  })
}

function increaseQuantity () {
  quantity.value++
}

function decreaseQuantity () {
  if (quantity.value > 1) quantity.value--
}
</script>

<style scoped lang="scss">
.sob-medida-page {
  background: #f6f5fb;
  min-height: 100vh;
  padding: 16px;
}

.page-shell {
  max-width: 420px;
  margin: 0 auto;
}

.page-title {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  width: 100%;
  margin-top: 16px;
}

.figma-card {
  border-radius: 24px;
  background: #fff;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: none;
}

.card-title,
.section-title {
  color: #7b61ff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  justify-items: center;
  margin-bottom: 12px;

  :deep(.q-radio__label),
  :deep(.q-checkbox__label) {
    color: #000 !important;
    font-size: 14px;
    font-weight: 400;
  }

  :deep(.q-checkbox__inner),
  :deep(.q-radio__inner) {
    color: #a78bfa !important;
  }
}

.section-title {
  margin-left: 16px;
}

.field-label {
  color: #7b61ff;
  font-size: 13px;
  font-weight: 600;
  margin: 18px 0 10px;
}

.optional {
  color: #9e9e9e;
  font-weight: 400;
}



.option-col {
  min-width: 0;
}

.description-box {
  margin-top: 8px;
}

.description-box :deep(textarea) {
  min-height: 90px;
  resize: none;
}

/* CARD */
.compact-card {
  border-radius: 32px;
  padding: 28px 22px;
  background: #fafafa;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.date-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 320px;
  max-width: 360px;
  margin: 0 auto 20px;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
}


/* container */
.range-container {
  position: relative;
  padding-top: 58px;
  padding-left: 10px;
  padding-right: 10px;
}

/* bolha tipo pin */
.price-pin {
  position: absolute;
  top: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(180deg, #8b7cff, #6f57db);
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(111, 87, 219, 0.28);
  z-index: 5;
}

.price-pin span {
  transform: rotate(45deg);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* RANGE */
.price-range {
  padding: 8px 0 0;
}

/* trilha */
.price-range :deep(.q-slider__track-container) {
  height: 6px;
  border-radius: 30px;
  background: #ddd7ea;
}

/* preenchimento */
.price-range :deep(.q-slider__track) {
  height: 6px;
  border-radius: 30px;
  background: linear-gradient(90deg, #d95cff, #7a5cff);
}

/* THUMB REAL FIGMA */
.price-range :deep(.q-slider__thumb) {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background: #7a5cff !important;
  border: 4px solid #ffffff;
  box-shadow: none;
}

/* remove quadrado interno do quasar */
.price-range :deep(.q-slider__thumb-shape) {
  display: none;
}

.price-range :deep(.q-slider__focus-ring) {
  display: none;
}

/* texto helper */
.range-helper {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: #6b6b6b;
}

/* transição suave */

.price-pin,
.price-range :deep(.q-slider__thumb) {
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

// quantidade 
.quantity-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 12px 0 20px;
}

.quantity-btn {
  background: #f5f0ff;
  color: #7b61ff;
  width: 38px;
  height: 38px;
}

.quantity-value {
  min-width: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.service-type-inline {
  display: grid;
  grid-template-columns: repeat(2, 160px);
  gap: 12px 24px;
  justify-content: center;
  margin: 0 auto 16px;
}
/* hover individual do balão */
.price-pin:hover {
  background: linear-gradient(180deg, #7b68ff, #5f46d8);
  box-shadow: none;
}

/* clique individual do balão */
.price-pin:active {
  background: linear-gradient(180deg, #6d52ff, #5438d6);
  box-shadow: none;
}

/* thumb hover individual */
.price-range :deep(.q-slider__thumb:hover) {
  background: #6d52ff !important;
  box-shadow: 0 0 0 18px rgba(109, 82, 255, 0.22);
}

/* thumb selecionado */
.price-range :deep(.q-slider__thumb:active) {
  background: #5e3fff !important;
  box-shadow: 0 0 0 22px rgba(94, 63, 255, 0.28);
}

/* trilha mais viva só quando mouse estiver no slider */
.price-range:hover :deep(.q-slider__track) {
  filter: brightness(0.95);
}

.calendar-custom {
  border-radius: 20px;
  background-color: white !important;

  :deep(.q-date__main) {
    background-color: white !important;
  }

  :deep(.q-date__content) {
    background-color: white !important;
  }

  :deep(.q-date__calendar) {
    background-color: white !important;
  }

  :deep(.q-date__calendar-item--out) {
    .q-btn__content {
      color: #CBD5E1 !important;
    }
  }

  :deep(.q-date__calendar-days .q-btn__content) {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #1E293B;
  }

  :deep(.q-date__calendar-weekdays > div) {
    color: #6366F1;
    font-weight: 700;
    opacity: 0.8;
  }

  :deep(.q-date__navigation) {
    .q-btn {
      color: #1E293B !important;
    }
    .q-btn__content {
      color: #1E293B !important;
    }
  }

  :deep(.q-date__nav-btn-month),
  :deep(.q-date__nav-btn-year) {
    color: #6366F1 !important;
    font-weight: 700;
  }

  :deep(.q-date__event) {
    bottom: 4px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
  }

  :deep(.q-date__today) {
    .q-btn__content {
      color: #7c4dff !important;
      background: #7c4dff15;
      border-radius: 50%;
    }
  }

  :deep(.q-date__selected) {
    .q-btn__content {
      background: #6366F1 !important;
      color: white !important;
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
    }
  }

  :deep(.q-date__view--months),
  :deep(.q-date__view--years) {
    .q-btn {
      color: #1E293B !important;
    }
  }
}


/* 🔥 labels pretas */
:deep(.q-radio__label),
:deep(.q-checkbox__label) {
  color: #000 !important;
  font-size: 14px;
  font-weight: 400;
}

:deep(.q-checkbox__inner),
:deep(.q-radio__inner) {
  color: #a78bfa !important;
}

/* 📱 celular */
@media (max-width: 480px) {
  .page-shell {
    max-width: 100%;
  }

  .figma-card {
    padding: 16px;
  }

  .figma-date {
    max-width: 100%;
  }
}

/* 📲 tablet */
@media (min-width: 768px) {
  .page-shell {
    max-width: 460px;
  }
}
</style>