<template>
  <div>
  <div class="flex max-md:mb-5" v-if="route.pricing.demarche_apmb == 0" style="margin-bottom:10px">


      <input
  type="checkbox"
  v-model="forfaitChecked"
  :disabled="loading"
  id="forfait_demarche_mb" style="margin-right:5px;"
/>
  
    <label for="forfait_demarche_mb" class="text-primary cursor-pointer">
     FORFAIT DEMARCHE
            <span class="font-bold">{{
              $n(route.pricing.demarche_mb, "currency")
            }}
            TTC soit {{ $n(route.pricing.demarche_mbwithouttax, "currency") }} HT
             </span>
    </label>
        </div>

    <div class="mb-5 flex gap-5 border-b-2 border-dotted pb-5">
      <div class="mb-2 flex">
        <icon icon="lit" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span v-if="route.vehicle.type === 'before_coffin'">
          Transport avant et après mise en bière</span
        >
        <span v-if="route.vehicle.type === 'after_coffin'">
          Transport après mise en bière</span
        >
      </div>
      <div class="mb-2 flex">
        <icon icon="dimensions" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span v-if="route.vehicle.is_standard_size">
          Supporte des tailles standards uniquement (&lt ou = à 195cm x
          60cm)</span
        >
        <span v-else>
          Supporte des tailles hors normes (> à 195cm x l60cm)</span
        >
      </div>
    </div>
    <div class="text-neutral-lighter flex">
      <div>
 

   <div class="mb-2 flex" style="display:none">
          <icon icon="voiture" class="text-primary-light mr-3 h-6 w-6"></icon>
          Heure de mise à disposition du défunt : {{ route.pricing.heure }}
        </div>

           <div class="mb-2 flex" style="display:none">
          <icon icon="voiture" class="text-primary-light mr-3 h-6 w-6"></icon>
          Date et heure limite d’arrivée : {{ route.pricing.dateetheure }} 
        
        </div>

        <div class="mb-2 flex">
          <icon icon="voiture" class="text-primary-light mr-3 h-6 w-6"></icon>
          Véhicule prévu : {{ route.vehicle.name }} ({{
            route.vehicle.license_plate
          }})
        </div>

        <div class="mb-2 flex">
          <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
          Chauffeur prévu : {{ route.operator.identifier }}
        </div>
        <div class="mb-2 flex">
          <icon icon="oeil" class="text-primary-light mr-3 h-6 w-6"></icon>
          <span class="text-primary mr-1 font-bold">{{ route.views }}</span>
          Apparition(s) dans les résultats de recherche
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  route: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const forfaitChecked = ref(false);

const adjustPricing = () => {
  if (forfaitChecked.value) {
    // If checked, add demarche_mb and demarche_mbwithouttax to total and totalht
   
    props.route.pricing.total_ttc += props.route.pricing.demarche_mb;
    props.route.pricing.total_ht += props.route.pricing.demarche_mbwithouttax;
     console.log(props.route.pricing,'yasirshah22');
  } else {
    // If unchecked, subtract demarche_mb and demarche_mbwithouttax from total and totalht
       
    props.route.pricing.total_ttc -= props.route.pricing.demarche_mb;
    props.route.pricing.total_ht -= props.route.pricing.demarche_mbwithouttax;
     console.log(props.route.pricing,'yasirshah33');
  }
};

// Watch for changes in the checkbox state
watch(forfaitChecked, () => {
  adjustPricing();
});

// Perform adjustment on page load based on the initial state of forfaitChecked
onMounted(() => {
  adjustPricing();
});
</script>
