<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="anticipation-card bg-surface" :flat="false">
      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn flat round dense icon="close" color="grey-6" size="sm" @click="onDialogCancel" />
      </div>

      <q-card-section class="q-pt-xs q-pb-xs q-px-lg">
        <div class="text-center q-mb-xs">
          <span class="text-grey-7 font14">{{ $t('provider.payments.anticipation_available') }}</span>
          <span class="text-secondary font14 fontbold q-ml-xs">{{ formatCurrency(service.total_amount) }}</span>
        </div>

        <div class="text-center q-mb-sm">
          <span class="text-grey-7 font14">{{ $t('provider.payments.anticipation_fee_label', { percent: ANTICIPATION_FEE_PERCENT }) }}</span>
          <span class="text-secondary font14 fontbold q-ml-xs">{{ '-' + formatCurrency(fee) }}</span>
        </div>

        <q-separator class="q-my-sm" />

        <div class="text-grey-7 text-center font12 q-mb-xs">
          {{ $t('provider.payments.anticipation_total_label') }}
        </div>
        <div class="anticipation-total font28 fontbold gradient-diarista text-center q-mb-md">
          {{ formatCurrency(totalAfterFee) }}
        </div>

        <div class="info-note row items-start q-gutter-x-xs q-mb-sm">
          <q-icon name="mdi-alert-outline" color="primary" size="16px" class="q-mt-xxs" />
          <span class="text-grey-7 font12 col">{{ $t('provider.payments.anticipation_note') }}</span>
        </div>
      </q-card-section>

      <q-card-section class="row q-gutter-x-sm q-pt-xs q-pb-sm q-px-lg">
        <q-btn
          unelevated
          rounded
          no-caps
          color="grey-4"
          text-color="grey-8"
          class="col"
          :label="$t('provider.payments.anticipation_btn_close')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          rounded
          no-caps
          color="secondary"
          class="col"
          :label="$t('provider.payments.anticipation_btn_anticipate')"
          @click="onDialogOK()"
        />
      </q-card-section>

      <q-card-section class="q-pt-xs q-pb-lg q-px-lg">
        <div class="text-grey-6 text-center font12">
          <strong>{{ $t('provider.payments.anticipation_remind_label') }}</strong>
          {{ ' ' + $t('provider.payments.anticipation_reminder') }}
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { formatCurrency } from 'src/helpers/utils';

const props = defineProps({
  service: {
    type: Object,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();

const ANTICIPATION_FEE_PERCENT = 3.5;
const fee = computed(() => +(props.service.total_amount * ANTICIPATION_FEE_PERCENT / 100).toFixed(2));
const totalAfterFee = computed(() => +(props.service.total_amount - fee.value).toFixed(2));
</script>

<style scoped>
.anticipation-card {
  width: 320px;
  max-width: 96vw;
  border-radius: 20px !important;
}

.anticipation-total {
  line-height: 1.2;
}

.info-note {
  background: #EFF6FF;
  border-radius: 8px;
  padding: 8px 10px;
}
</style>
