<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: 4, 
      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>