<template>
  <BaseLayout>
  
      <div class="pb-6">
          <BaseContainer>
              <div class=" w-full py-3">
                  <div class="aspect-[1.376] h-10 bg-mid_gray mb-2 m-auto">Logo</div>
              </div>
              <h1 class="text-sm text-secondary font-bold my-2 text-center w-full">Trust. Verify. Succeed</h1>
              <div class="my-8 grid grid-cols-3 lg:py-10 lg:px-40">
                  <ProcessItem :status="statusJobRequest" label="Job Request" />
        <ProcessItem :status="statusVerification" label="Verification of Basic Information" />
        <ProcessItem :status="statusReview" label="Review and Report Writing" />
              </div>
  
  
              <div v-if="processed ===1" class="flex justify-center"><Button  level="primary" >Fill the Form Now<span class="mx-2">-></span></Button></div>
  
              <div  v-if="processed >1"  class="gap-3 w-full flex flex-col justify-center items-center">
                  <span class="text-primary font-bold text-lg block" >Thanks for your information</span>
                  <span class="text-sm font-medium block" >Thanks for your information</span>
                  <span class="text-xs font-medium block" >Your order ID: GA-06564-gh71</span>
                  <Button class="w-fit" level="secondary"><i class="inline-block w-4 h-4 rounded-full bg-mid_gray" /> Rate</Button>
              </div>
  
          </BaseContainer>
      </div>
     <!-- JobRequest Component -->
     <JobRequest v-if="processed ===1" />
     <Contact v-if="processed >1" />
     <!-- <Verification v-if="processed === 2" />
     <Review v-if="processed ===3" /> -->
  </BaseLayout>
  <!-- // استخدم triggerAlert لعرض الرت من اي حدث  -->
  <!-- removeAlert لمسح الالرت من الليست -->
  <button class="fixed z-30 bottom-0 bg-red-700 rounded-xl text-white p-2 " @click="triggerAlert('Your Contact details has been saved!')">زر تجربة الالرت</button>
   <!-- // انسخ الدفة مع الكمبونتت مع دوال الالرت والمتغير من تحت في اي مكان تريد عرض الرت -->
      <div class=" fixed z-10 bottom-0 py-6 px-4 flex flex-col gap-2">
  
        <div  v-for="(alert, index) in alerts" :key="index">
        <SnackBar :message="alert.message" @close="removeAlert(index)" />
        </div>
        <!-- // استخدم isDanger لعرض الرت احمر -->
        <div  v-for="(alert, index) in alerts" :key="index">
        <SnackBar :isDanger="true" :message="alert.message" @close="removeAlert(index)" />
        </div>
      </div>
  <Cookies />
  </template>
  <script>
  import BaseContainer from '../components/baseContainer.vue';
  import Button from '../components/button.vue';
  import Cookies from '../components/cookies.vue';
  import Heading from '../components/heading.vue';
  import SnackBar from '../components/snackBar.vue';
  import StyledIcon from '../components/styledIcon.vue';
  import BaseLayout from '../layouts/baseLayout.vue';
  import Contact from './homeSections/contact.vue';
  import JobRequest from './homeSections/jobRequest.vue';
  import ProcessItem from './homeSections/processItem.vue';
  import Review from './homeSections/review.vue';
  import Verification from './homeSections/verification.vue';
  
    export default {
      components: {
          BaseLayout,
          Button,
          BaseContainer,
          Heading,
          StyledIcon,
          ProcessItem,
          JobRequest,
          Review,
          Verification,
          Contact,
          SnackBar,
          Cookies
    },
      name: 'Home',
      data() {
      return {
        processed: 1, 
        alerts: []
      };
    },
    computed: {
      // Job Request status
      statusJobRequest() {
        return this.processed < 1
          ? 'init'
          : this.processed === 1
          ? 'process'
          : 'done';
      },
      // Verification of Basic Information status
      statusVerification() {
        return this.processed < 2
          ? 'init'
          : this.processed === 2
          ? 'process'
          : 'done';
      },
      // Review and Report Writing status
      statusReview() {
        return this.processed < 3
          ? 'init'
          : this.processed === 3
          ? 'process'
          : 'done';
      }
    }
  ,methods: {
      triggerAlert(message) {
        this.alerts.push({ message });
        setTimeout(() => {
          this.alerts.shift(); // Automatically remove the alert after some time
        }, 3000);
      },
      removeAlert(index) {
        this.alerts.splice(index, 1);
      }
    }
    };
  </script>