<template>
  <div
    class="text-neutral-lighter flex grid grid-cols-12 items-center justify-between"
  >
    <div class="max-md:align-center col-span-12 md:col-span-6">
      <div class="mb-2 flex">
        <icon icon="lit" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span v-if="route.type === 'before_coffin'">
          <b>Transport avant et après mise en bière</b></span
        >
        <span v-if="route.type === 'after_coffin'">
          <b>Transport après mise en bière</b></span
        >
      </div>
      <div class="col-span-6 mb-2 flex">
        <icon icon="voiture" class="text-primary-light mr-3 h-6 w-6"></icon>
        <b>Véhicule prévu :</b> {{ route.vehicle.name }} ({{
          route.vehicle.license_plate
        }})
      </div>
      <div class="mb-2">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <b>Chauffeur prévu :</b> {{ route.operator.identifier }}
      </div>
    </div>
    <div class="col-span-12 md:col-span-6">
      <div class="mb-2 flex">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span class="font-bold">Client :</span> {{ route.client.name }}
      </div>
      <div class="mb-2 flex">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span class="font-bold">Tél : </span>{{ route.client.phone }}
      </div>
    </div>
  </div>

  <div class="align-item-center col-span-12 mt-5 flex justify-center">
    <div @click="modalEndConfirmedIsOpen = true">
      <a
        class="bg-secondary mb-2 flex items-center justify-between gap-3 rounded p-3 px-5 font-bold text-white"
        target="_blank"
      >
        <i class="pi pi-thumbs-up"></i>
        <span class="grow text-center">Terminer le trajet</span>
      </a>
    </div>
  </div>
  <Dialog
    dismissable-mask
    :visible="modalEndConfirmedIsOpen"
    modal
    class="max-md:w-full"
    :pt="{
      header: { style: ' display:none' },
      content: { style: 'padding: 0 !important;border-radius: 10px ' },
      root: {
        style: 'padding: 20px',
      },
    }"
  >
    <div class="flex h-full flex-col justify-between p-10">
      <div class="mb-5 flex items-center justify-end">
        <button
          class="bg-background-3 text-primary flex h-8 w-8 items-center justify-center rounded-full"
          @click="modalEndConfirmedIsOpen = false"
        >
          <span class="font-bold">X</span>
        </button>
      </div>
      <div class="mb-6">
        Veuillez vous assurer que le trajet <br />
        s'est déroulé conformément à vos attentes avant de procéder à la
        confirmation.
      </div>
      <div @click="completedRoute">
        <a
          class="bg-secondary mb-2 flex items-center justify-between gap-3 rounded p-3 px-5 font-bold text-white"
          target="_blank"
        >
          <i class="pi pi-thumbs-up"></i>
          <span class="grow text-center">Terminer le trajet</span>
        </a>
      </div>
    </div>
  </Dialog>
</template>
<script setup>
const { $api, $toast } = useNuxtApp();
const props = defineProps({
  route: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const modalEndConfirmedIsOpen = ref(false);

const completedRoute = () => {
  $api
    .call(
      "post",
      $api.route("reservation.completed", { reservation: props.reservation.id })
    )
    .then(() => {
      modalIsOpen.value = false;
      $event("reservation.completed");
    })
    .catch((e) => {
      if (e.response) {
        if (e.response.data.message) {
          $toast.error(e.response.data.message);
          error.value = e.response.data.message;
        } else {
          if (e.response.data.error) {
            $toast.error(e.response.data.error);
            error.value = e.response.data.error;
          }
        }
      }
    });
};
</script>
