fix theme and model value

public/assets/css/plugins/magnific-popup.css

@@ -136,7 +136,7 @@ button::-moz-focus-inner {
   color: #FFF;
   font-style: normal;
   font-size: 28px;
-  font-Employer Portal: Arial, Baskerville, monospace; }
+  font-Employer-Portalal: Arial, Baskerville, monospace; }
   .mfp-close:hover,
   .mfp-close:focus {
     opacity: 1; }

public/assets/css/plugins/slick-theme.css

@@ -43,7 +43,7 @@
 .slick-prev:before,
 .slick-next:before
 {
-    font-Employer Portal: 'slick';
+    font-Employer-Portal: 'slick';
     font-size: 20px;
     line-height: 1;
 

public/assets/css/style.css

@@ -11310,4 +11310,18 @@ table tbody tr:last-child td:last-child,table tbody tr:last-child th:last-child{
 .modal-body {
       max-height: calc(100vh - 3.5rem);
 }
+}
+.flex-col{
+  flex-direction: column;
+}
+.gap-2{
+  gap: 5px;
+}
+.overflow-x-auto{
+  overflow-x: auto;
+}
+.transition-colors{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+  transition-duration: var(--default-transition-duration);
 }

src/components/DeliverySlots.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="p-4 max-w-7xl mx-auto" dir="rtl">
-    <h2 class="text-2xl font-bold mb-4 text-center">انتخاب بازه زمانی تحویل</h2>
+    <h4 class="text-2xl font-bold mb-4 text-center">انتخاب بازه زمانی تحویل</h4>
     <div v-if="loading" class="text-center p-4">در حال بارگذاری...</div>
     <div v-else-if="error" class="text-center p-4 text-red-500">{{ error }}</div>
     <div v-else class="flex overflow-x-auto gap-4 pb-4">
       <div
-        v-for="(slots, date) in groupedSlots"
-        :key="date"
-        class="flex-shrink-0 w-48 bg-white rounded-lg shadow-md p-4"
+          v-for="(slots, date) in groupedSlots"
+          :key="date"
+          class="flex-shrink-0 w-48 bg-white rounded-lg shadow-md p-4"
       >
-        <h3 class="text-lg font-semibold mb-2 text-center">
+        <h5 class=" mb-2 text-center">
           {{ formatPersianDate(date) }}
-        </h3>
-        <div class="flex flex-col gap-2">
+        </h5>
+        <div class="flex flex-col gap-2 overflow-x-auto">
           <button
-            v-for="slot in slots"
-            :key="slot.id"
-            @click="selectSlot(slot)"
-            :disabled="!isAvailable(slot)"
-            class="py-2 px-4 rounded-lg text-sm font-medium transition-colors"
-            :class="{
-              'bg-blue-500 text-white': selected === slot.id,
-              'bg-green-100 text-green-800 hover:bg-green-200': isAvailable(slot) && selected !== slot.id,
+              v-for="slot in slots"
+              :key="slot.id"
+              @click="selectSlot(slot)"
+              :disabled="!isAvailable(slot)"
+              class="py-2 px-4 rounded-lg text-sm font-medium transition-colors"
+              :class="{
+              'bg-blue-500 text-white': modelValue === slot.id,
+              'bg-green-100 text-green-800 hover:bg-green-200': isAvailable(slot) && modelValue !== slot.id,
               'bg-gray-200 text-gray-500 cursor-not-allowed': !isAvailable(slot)
             }"
           >
@@ -34,98 +34,97 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue';
+<script>
+import axios from "@/plugins/axios";
 
-// Props
-defineProps({
-  selected: {
-    type: [Number, String, null],
-    default: null
-  }
-});
-
-// Emits
-const emit = defineEmits(['update:selected']);
-
-// State
-const slots = ref([]);
-const loading = ref(true);
-const error = ref(null);
-
-// Fetch delivery slots
-const fetchSlots = async () => {
-  try {
-    loading.value = true;
-    const response = await fetch('/api/available-slots'); // Adjust API endpoint as needed
-    const result = await response.json();
-    if (result.success) {
-      // Filter slots for the next 7 days
-      const today = new Date();
-      const sevenDaysFromNow = new Date(today);
-      sevenDaysFromNow.setDate(today.getDate() + 7);
-      slots.value = result.data.filter(slot => {
-        const slotDate = new Date(slot.delivery_date);
-        return slotDate >= today && slotDate <= sevenDaysFromNow;
-      });
-    } else {
-      error.value = 'خطا در بارگذاری بازه‌های تحویل';
+export default {
+  props: {
+    modelValue: {
+      type: [Number, String, null],
+      default: null
     }
-  } catch (err) {
-    error.value = 'خطا در دریافت اطلاعات';
-  } finally {
-    loading.value = false;
-  }
-};
+  },
+  data() {
+    return {
+      slots: [],
+      loading: true,
+      error: null
+    };
+  },
+  computed: {
+    groupedSlots() {
+      const grouped = this.slots.reduce((acc, slot) => {
+        const date = slot.delivery_date;
+        if (!acc[date]) {
+          acc[date] = [];
+        }
+        acc[date].push(slot);
+        return acc;
+      }, {});
 
-// Group slots by delivery date
-const groupedSlots = computed(() => {
-  const grouped = slots.value.reduce((acc, slot) => {
-    const date = slot.delivery_date;
-    if (!acc[date]) {
-      acc[date] = [];
+      // Sort dates
+      return Object.keys(grouped)
+          .sort()
+          .reduce((obj, key) => {
+            obj[key] = grouped[key];
+            return obj;
+          }, {});
     }
-    acc[date].push(slot);
-    return acc;
-  }, {});
-  // Sort dates
-  return Object.keys(grouped)
-    .sort()
-    .reduce((obj, key) => {
-      obj[key] = grouped[key];
-      return obj;
-    }, {});
-});
+  },
+  methods: {
+    async fetchSlots() {
+      try {
+        this.loading = true;
+        let {data} = await axios.get(`/api/delivery-slots/available`)
+        const result = data
+        console.log("result ===>", result)
+        if (result.success) {
+          // Filter slots for the next 7 days
+          const today = new Date();
+          const sevenDaysFromNow = new Date(today);
+          sevenDaysFromNow.setDate(today.getDate() + 7);
+          this.slots = result.data.filter(slot => {
+            const slotDate = new Date(slot.delivery_date);
+            return slotDate >= today && slotDate <= sevenDaysFromNow;
+          });
+        } else {
+          this.error = 'خطا در بارگذاری بازه‌های تحویل';
+        }
+      } catch (err) {
+        this.error = 'خطا در دریافت اطلاعات';
+        console.log("err ===>", err)
+      } finally {
+        this.loading = false;
+      }
+    },
+    isAvailable(slot) {
+      return slot.order_count < slot.max_orders;
+    },
+    selectSlot(slot) {
+      if (this.isAvailable(slot)) {
+        console.log("slot ===>", slot)
 
-// Check if slot is available
-const isAvailable = (slot) => {
-  return slot.order_count < slot.max_orders;
-};
+        this.$emit('change', slot.id);
+      }
+    },
+    formatTime(time) {
+      return time.slice(0, 5); // e.g., "14:30:00" -> "14:30"
+    },
+    formatPersianDate(dateStr) {
+      const date = new Date(dateStr);
+      return new Intl.DateTimeFormat('fa-IR', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long'
+      }).format(date);
+    }
+  },
+  mounted() {
+    this.fetchSlots();
 
-// Handle slot selection
-const selectSlot = (slot) => {
-  if (isAvailable(slot)) {
-    emit('update:selected', slot.id);
+    console.log('hi')
   }
 };
-
-// Format time for display
-const formatTime = (time) => {
-  return time.slice(0, 5); // e.g., "14:30:00" -> "14:30"
-};
-
-// Format date for display in Persian
-const formatPersianDate = (dateStr) => {
-  const date = new Date(dateStr);
-  return new Intl.DateTimeFormat('fa-IR', {
-    weekday: 'long',
-    day: 'numeric',
-    month: 'long'
-  }).format(date);
-};
-
-// Fetch slots on component mount
-onMounted(fetchSlots);
 </script>
 
 <style scoped>

src/main.js

@@ -3,6 +3,11 @@ import './plugins/axios'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import '../public/assets/css/style.css'
+
+const requireCss = require.context('../public/assets/css/plugins', false, /\.css$/)
+
+requireCss.keys().forEach(requireCss)
 
 import Vuesax from 'vuesax' //import dependency
 import 'vuesax/dist/vuesax.css' // import css style

src/views/Panel_Views/Checkout.vue

@@ -94,7 +94,7 @@
               <button class="btn-custom secondary" @click="addressModel = true">افزودن آدرس جدید</button>
             </div>
           </div>
-          <DeliverySlots v-model:selected="delivery_id" />
+          <DeliverySlots @change="changeDelivery" />
           <div class="coupen-code-wrapper rounded-8">
             <h4 style="font-size: 24px;margin-bottom: 0.3em;">گزینه های پرداختی</h4>
 
@@ -264,7 +264,7 @@ export default {
   components: {
     modal,
     Icon,
-    numberCounter
+    numberCounter,DeliverySlots
   },
   data() {
     return {
@@ -276,7 +276,7 @@ export default {
       use_credit: false,
       Addresses: [],
       Address_Id: null,
-      delivery_id: null,
+      delivery_id: 0,
       Form_Data: {
         reciver_fname: null,
         province: null,
@@ -295,6 +295,9 @@ export default {
     }
   },
   methods: {
+    changeDelivery(value){
+      this.delivery_id=value
+    },
     async getWallet() {
       try {
         this.togglePreLoader('open')