added theme part ns card

added CardController
added transport seeder
fixed meta input ui bug

app/Helpers/Helper.php

@@ -7,6 +7,7 @@ use App\Models\Category;
 use App\Models\Area;
 use App\Models\Part;
 use App\Models\Menu;
+use App\Models\Product;
 use Illuminate\Support\Facades\Route;
 
 
@@ -980,14 +981,17 @@ function isGuestMaxAttemptTry($action, $max = 5, $minutes = 60)
  * home url to best experience for multi lang shops
  * @return string
  */
-function homeUrl(){
+function homeUrl()
+{
     return \route('client.welcome');
 }
+
 /**
  * tag url to best experience for multi lang shops
  * @return string
  */
-function tagUrl($slug){
+function tagUrl($slug)
+{
     return route('client.tag', $slug);
 }
 
@@ -1011,3 +1015,50 @@ function usableProp($props)
 
     return $result;
 }
+
+
+/**
+ * shopping card items
+ * @return array|\Illuminate\Http\Resources\Json\AnonymousResourceCollection
+ */
+function cardItems()
+{
+    if (cardCount() == 0) {
+        return [];
+    }
+    $products = Product::whereIn('id', json_decode(\Cookie::get('card'), true))
+        ->where('status', 1)
+        ->get();
+
+    return \App\Http\Resources\ProductCardCollection::collection($products);
+}
+
+/**
+ * shopping card items count
+ * @return int
+ */
+function cardCount()
+{
+    if (!\Cookie::has('card')) {
+        return 0;
+    }
+    return count(json_decode(\Cookie::get('card'), true));
+}
+
+/**
+ * transports json
+ * @return \Illuminate\Http\Resources\Json\AnonymousResourceCollection
+ */
+function transports()
+{
+    return \App\Http\Resources\TransportCollection::collection(\App\Models\Transport::all());
+}
+
+function defTrannsport()
+{
+    if (\App\Models\Transport::where('is_default',1)->count() == 0){
+        return null;
+    }
+
+    return \App\Models\Transport::where('is_default',1)->first()->id;
+}

app/Http/Controllers/CardController.php

@@ -0,0 +1,168 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Discount;
+use App\Models\Invoice;
+use App\Models\Order;
+use App\Models\Product;
+use App\Models\Quantity;
+use App\Models\Transport;
+use Illuminate\Http\Request;
+
+class CardController extends Controller
+{
+    public function productCardToggle(Product $product)
+    {
+
+        $quantity = \request()->input('quantity', null);
+        if (\Cookie::has('card')) {
+            $cards = json_decode(\Cookie::get('card'), true);
+            $qs = json_decode(\Cookie::get('q'), true);
+            if (in_array($product->id, $cards)) {
+                $found = false;
+                foreach ($cards as $i => $card) {
+                    if ($card == $product->id && $qs[$i] == $quantity) {
+                        $found = true;
+                        break;
+                    }
+                }
+                if ($found) {
+                    $msg = "Product removed from card";
+                    unset($cards[$i]);
+                    unset($qs[$i]);
+                } else {
+                    $cards[] = $product->id;
+                    $qs[] = $quantity;
+                    $msg = "Product added to card";
+                }
+            } else {
+                $cards[] = $product->id;
+                $qs[] = $quantity;
+                $msg = "Product added to card";
+            }
+            $count = count($cards);
+            \Cookie::queue('card', json_encode($cards), 2000);
+            \Cookie::queue('q', json_encode($qs), 2000);
+        } else {
+            $count = 1;
+            $msg = "Product added to card";
+            \Cookie::queue('card', "[$product->id]", 2000);
+            \Cookie::queue('q', "[$quantity]", 2000);
+            $qs = [$quantity];
+            $cards = [$product->id];
+        }
+
+        if ($count > 0 && auth('customer')->check()) {
+            $customer = auth('customer')->user();
+            $customer->card = json_encode(['cards' => $cards, 'quantities' => $qs]);
+            $customer->save();
+        }
+
+        if (\request()->ajax()) {
+            return success(['count' => $count], $msg);
+        } else {
+            return redirect()->back()->with(['message' => $msg]);
+        }
+    }
+
+    public function index()
+    {
+        $area = 'card';
+        $title = __("Shopping card");
+        $subtitle = '';
+        return view('client.default-list', compact('area', 'title', 'subtitle'));
+    }
+
+    public function check(Request $request)
+    {
+
+        $request->validate([
+            'product_id' => ['required', 'array'],
+            'count' => ['required', 'array'],
+            'address_id' => ['required', 'exists:addresses,id'],
+            'desc' => ['nullable', 'string']
+        ]);
+        $total = 0;
+//        return $request->all();
+        $inv = new Invoice();
+        $inv->customer_id = auth('customer')->user()->id;
+        $inv->count = array_sum($request->count);
+        $inv->address_id = $request->address_id;
+        $inv->desc = $request->desc;
+        if ($request->has('transport_id')) {
+            $request->transport_id = $request->input('transport_id');
+            $t = Transport::find($request->input('transport_id'));
+            $inv->transport_price = $t->price;
+            $total += $t->price;
+        }
+        if ($request->has('discount_id')) {
+            $request->discount_id = $request->input('discount_id');
+        }
+
+        $inv->save();
+
+        foreach ($request->product_id as $i => $product) {
+            $order = new Order();
+            $order->product_id = $product;
+            $order->invoice_id = $inv->id;
+            $order->count = $request->count[$i];
+            if ($request->quantity_id[$i] != '') {
+                $order->quantity_id = $request->quantity_id[$i];
+                $q = Quantity::find($request->quantity_id[$i]);
+                $order->price_total = $q->price * $request->count[$i];
+                $order->data = $q->data;
+
+            } else {
+                $p = Product::find($request->product_id[$i]);
+                $order->price_total = $p->price * $request->count[$i];
+            }
+            $total += $order->price_total;
+            $order->save();
+        }
+
+        $inv->total_price = $total;
+        $inv->save();
+        return  [$inv,$inv->orders];
+    }
+
+
+    public static function clear()
+    {
+        \Cookie::expire('card');
+        \Cookie::expire('q');
+        return true;
+    }
+
+    public function clearing()
+    {
+        self::clear();
+        return __("Card cleared");
+    }
+
+    public function discount($code)
+    {
+        $discount = Discount::where('code', trim($code))->where(function ($query) {
+            $query->where('expire', '>=', date('Y-m-d'))
+                ->orWhereNull('expire');
+        })->first();
+        if ($discount == null) {
+            return [
+                'OK' => false,
+                'err' => __("Discount code isn't valid."),
+            ];
+        } else {
+            if ($discount->type == 'PERCENT') {
+                $human = $discount->title . '( ' . $discount->amount . '%' . ' )';
+            } else {
+                $human = '- ' . $discount->title . '( ' . $discount->amount . config('app.currency.symbol') . ' )';
+            }
+            return [
+                'OK' => true,
+                'msg' => __("Discount code is valid."),
+                'data' => $discount,
+                'human' => $human,
+            ];
+        }
+    }
+}

app/Http/Controllers/ClientController.php

@@ -89,6 +89,8 @@ class ClientController extends Controller
         return view('client.default-list', compact('area', 'products', 'title', 'subtitle'));
     }
 
+
+
     public function galleries()
     {
         $area = 'galleries-list';
@@ -310,59 +312,7 @@ class ClientController extends Controller
     }
 
 
-    public function productCardToggle(Product $product)
-    {
 
-        $quantity = \request()->input('quantity', null);
-        if (\Cookie::has('card')) {
-            $cards = json_decode(\Cookie::get('card'), true);
-            $qs = json_decode(\Cookie::get('q'), true);
-            if (in_array($product->id, $cards)) {
-                $found = false;
-                foreach ($cards as $i => $card) {
-                    if ($card == $product->id && $qs[$i] == $quantity) {
-                        $found = true;
-                        break;
-                    }
-                }
-                if ($found) {
-                    $msg = "Product removed from card";
-                    unset($cards[$i]);
-                    unset($qs[$i]);
-                }else{
-                    $cards[] = $product->id;
-                    $qs[] = $quantity;
-                    $msg = "Product added to card";
-                }
-            } else {
-                $cards[] = $product->id;
-                $qs[] = $quantity;
-                $msg = "Product added to card";
-            }
-            $count = count($cards);
-            \Cookie::queue('card', json_encode($cards), 2000);
-            \Cookie::queue('q', json_encode($qs), 2000);
-        } else {
-            $count = 1;
-            $msg = "Product added to card";
-            \Cookie::queue('card', "[$product->id]", 2000);
-            \Cookie::queue('q', "[$quantity]", 2000);
-            $qs = [$quantity];
-            $cards = [$product->id];
-        }
-
-        if ($count > 0 && auth('customer')->check()) {
-            $customer = auth('customer')->user();
-            $customer->card = json_encode(['cards' => $cards, 'quantities' => $qs]);
-            $customer->save();
-        }
-
-        if (\request()->ajax()) {
-            return success(['count' => $count], $msg);
-        } else {
-            return redirect()->back()->with(['message' => $msg]);
-        }
-    }
 
     public function productCompareToggle(Product $product)
     {
@@ -546,4 +496,6 @@ class ClientController extends Controller
 
     }
 
+
+
 }

app/Http/Resources/ProductCardCollection.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class ProductCardCollection extends JsonResource
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+
+            'id'=> $this->id,
+            'slug' => $this->slug,
+            'name' => $this->name,
+            'price' => $this->price,
+            'image' => $this->imgUrl(),
+            'meta' => $this->fullMeta(),
+            'max' => $this->stock_quantity,
+            'qz' => QunatityCollection::collection($this->quantities),
+        ];
+    }
+}

app/Http/Resources/QunatityCollection.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class QunatityCollection extends JsonResource
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'product_name' => $this->product->name,
+            'count' => $this->count,
+            'data'=> json_decode($this->data),
+            'meta' => $this->meta,
+            'price'=>  $this->price,
+            'image' => $this->image,
+        ];
+    }
+}

app/Http/Resources/TransportCollection.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class TransportCollection extends JsonResource
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'title' => $this->title,
+            'description' => $this->description,
+            'price' => $this->price,
+            'is_default' => $this->is_default,
+            'icon' => $this->icon,
+        ];
+    }
+}

app/Models/Quantity.php

@@ -9,4 +9,70 @@ use Illuminate\Database\Eloquent\SoftDeletes;
 class Quantity extends Model
 {
     use HasFactory,SoftDeletes;
+    protected $casts = [
+        'meta',
+    ];
+
+
+    public function product(){
+        return $this->belongsTo(Product::class);
+    }
+
+    public function getMetaAttribute(){
+
+        $data = json_decode($this->data,true);
+        if ($data == null) {
+            return [];
+        }
+        $props = $this->product->category->props()->whereIn('name', array_keys($data))->get();
+        $result = [];
+        foreach ($props as $key => $prop) {
+            $result[$prop->name] =  [
+                'label' => $prop->label,
+                'human_value' => '',
+                'type' => $prop->type,
+                'value' => $data[$prop->name],
+            ];
+            switch ($prop->type) {
+                case 'color':
+                    $result[$prop->name]['human_value'] = "<div style='background:  {$data[$prop->name]}' class='color-bullet'> &nbsp; </div>";
+                    break;
+                case 'checkbox':
+                    $result[$prop->name]['human_value'] = $data[$prop->name] ? '<i class="ri-checkbox-circle-line"></i>' : '<i class="ri-close-circle-line"></i>';
+                    break;
+                case 'select':
+                case 'singlemulti':
+                    $tmp = $prop->datas;
+                    if (!is_array($data[$prop->name])) {
+                        if (isset($tmp[$data[$prop->name]])){
+                            $result[$prop->name]['human_value'] = $tmp[$data[$prop->name]];
+                        }else{
+                            $result[$prop->name]['human_value'] = '-';
+                        }
+                    } else {
+                        $result[$prop->name]['human_value'] = '';
+                        $tmp = $prop->datas;
+                        foreach ($data[$prop->name] as $k => $v) {
+                            $result[$prop->name]['human_value'] = $tmp[$v] . ', ';
+                        }
+                        $result[$prop->name]['human_value'] = trim($result[$prop->name], ' ,');
+                    }
+                    break;
+                default:
+                    if (is_array($data[$prop->name])) {
+                        $result[$prop->name]['human_value'] = '<span class="meta-tag">'.implode('</span> <span class="meta-tag">', $data[$prop->name]).'</span>';
+                    } else {
+                        if ($data[$prop->name] == '' || $data[$prop->name] == null) {
+                            $result[$prop->name]['human_value'] = '-';
+                        }else{
+                            $result[$prop->name]['human_value'] = $data[$prop->name];
+                        }
+                    }
+            }
+
+            $result[$prop->name]['human_value'] .= ' ' . $prop->unit;
+        }
+
+        return  $result;
+    }
 }

database/seeders/AreaSeeder.php

@@ -51,7 +51,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "post", "comments", "ads", "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.post',
+                'preview' => null,
                 'icon' => 'ri-file-text-line',
             ],
             [
@@ -71,7 +71,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "clip", "comments", "ads", "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.clip',
+                'preview' =>  null,
                 'icon' => 'ri-video-line',
             ],
             [
@@ -91,7 +91,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "gallery", "comments", "ads", "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.gallery',
+                'preview' =>  null,
                 'icon' => 'ri-image-line',
             ],
             [
@@ -111,7 +111,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "product", "comments", "ads", "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.product',
+                'preview' =>  null,
                 'icon' => 'ri-vip-diamond-line',
             ],
             [
@@ -131,7 +131,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "attachment", "comments", "ads"]
                 ),
                 'max' => 6,
-                'preview' => 'client.attachment',
+                'preview' =>  null,
                 'icon' => 'ri-attachment-line',
             ],
             [
@@ -151,7 +151,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "category", "ads", "products_page", "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.attachment',
+                'preview' => null,
                 'icon' => 'ri-book-3-line',
             ],
 //            [
@@ -171,7 +171,7 @@ class AreaSeeder extends Seeder
                         "parallax", "other", "group", "ads", 'posts_page', "attachments"]
                 ),
                 'max' => 6,
-                'preview' => 'client.group',
+                'preview' =>  null,
                 'icon' => 'ri-book-shelf-line',
             ],
 //            [

database/seeders/DatabaseSeeder.php

@@ -39,6 +39,7 @@ class DatabaseSeeder extends Seeder
                 PartSeeder::class,
                 InvoiceSeeder::class,
                 VisitorSeeder::class,
+                TransportSeeder::class,
                 MenuSeeder::class,
             ]
         );

database/seeders/TransportSeeder.php

@@ -2,6 +2,7 @@
 
 namespace Database\Seeders;
 
+use App\Models\Transport;
 use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 
@@ -13,5 +14,20 @@ class TransportSeeder extends Seeder
     public function run(): void
     {
         //
+        $t = new Transport();
+        $t->title = __("Motor bike delivery");
+        $t->description = "Transport just for Tehran orders (pay by customer)";
+        $t->icon = 'ri-motorbike-line';
+        $t->is_default = false;
+        $t->price = 0;
+        $t->save();
+
+        $t = new Transport();
+        $t->title = __("Post office delivery");
+        $t->description = "Transport with post around country";
+        $t->icon = 'ri-signpost-line';
+        $t->is_default = true;
+        $t->price = 30000;
+        $t->save();
     }
 }

resources/js/client-custom/assetsNode.js

@@ -22,6 +22,10 @@ app.component('mp4player', videoPlayer);
 import mp3player from "../client-vue/mp3player.vue";
 app.component('mp3player', mp3player);
 
+import NsCard from "../client-vue/NsCard.vue";
+app.component('ns-card', NsCard);
+
+
 app.use(ToastPlugin);
 app.use(store);
 app.mount('#app');

resources/js/client-custom/customerActions.js

@@ -1,4 +1,5 @@
 window.addEventListener('load', function () {
+
     const favUrl = document.querySelector('#api-fav-toggle').value;
     const compUrl = document.querySelector('#api-compare-toggle').value;
     document.querySelectorAll('.fav-btn')?.forEach(function (el) {

resources/js/client-custom/safeForm.js

@@ -5,4 +5,5 @@ window.addEventListener('load',function () {
           el.setAttribute('action',url);
       })
   },1220);
+
 })

resources/js/client-vue/NsCard.vue

@@ -0,0 +1,555 @@
+<template>
+    <div id="card">
+        <ul class="steps">
+            <li class="active">
+                <div class="circle" @click="changeIndex(0)">
+                    <i class="ri-vip-diamond-line"></i>
+                </div>
+                Shopping card
+            </li>
+            <li :class="index > 0 ?'active':''">
+                <div class="circle" @click="changeIndex(1)">
+                    <i class="ri-truck-line"></i>
+                </div>
+                Transport
+            </li>
+            <li :class="index > 1 ?'active':''">
+                <div class="circle" @click="changeIndex(2)">
+                    <i class="ri-bank-card-2-line"></i>
+                </div>
+                Payment & discount
+            </li>
+        </ul>
+        <div class="row">
+            <div class="col-lg-3">
+                <aside>
+                    <h6 class="text-center">
+                        Totol price:
+                    </h6>
+                    <h2 class="text-center" v-if="index == 0">
+                        {{ priceing(total) }}
+                    </h2>
+                    <h2 class="text-center" v-if="index == 1">
+                        {{ priceing(totalWithTransport) }}
+                    </h2>
+                    <h2 class="text-center" v-if="index == 2">
+                        {{ priceing(totalWithTransportDiscount) }}
+                    </h2>
+
+                    <hr>
+                    <i class="ri-user-line icon"></i>
+                    <slot></slot>
+                </aside>
+            </div>
+            <div class="col-lg-9">
+                <div :class="'tab' + (index == 0?'':' hide')">
+                    <table class="table">
+                        <thead>
+
+                        <tr>
+                            <th>
+                                #
+                            </th>
+                            <th>
+                                Image
+                            </th>
+                            <th>
+                                Name
+                            </th>
+                            <th class="text-center" style="width: 400px">
+                                Quantity
+                            </th>
+                            <th>
+                                Price
+                            </th>
+                            <th>
+                                Count
+                            </th>
+                            <th>
+                                -
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+
+                        <tr v-for="(item,i) in items">
+                            <td>
+                                <input type="hidden" :name="`product_id[${i}]`" :value="item.id">
+                                {{ i + 1 }}
+                            </td>
+                            <td>
+                                <img :src="item.image" :alt="item.name">
+                            </td>
+                            <td>
+                                <a :href="this.productLink + item.slug">
+                                    {{ item.name }}
+                                </a>
+                            </td>
+                            <td class="text-center">
+                                <template v-if="item.qz.length != 0">
+                                    <template v-if="qz[i] == null">
+                                        <q-index :i="i" :qz="item.qz" :base-price="item.price"
+                                                 :symbol="symbol"
+                                                 :on-change="changeQ" :xname="`quantity_id[${i}]`"></q-index>
+                                    </template>
+                                    <template v-else>
+                                        <input type="hidden" :name="`quantity_id[${i}]`" :value="item.q.id">
+                                        <q-preview :q="item.q"></q-preview>
+                                    </template>
+                                </template>
+                                <span v-else>
+                                    -
+                                    <input type="hidden" :name="`quantity_id[${i}]`">
+                                </span>
+                            </td>
+                            <th>
+                                {{ priceing(pricez[i]) }}
+                            </th>
+                            <td>
+                                <quantity :max="maxz[i]" :xname="`count[${i}]`" v-model="countz[i]"></quantity>
+                            </td>
+                            <td>
+                                <a type="button" class="btn btn-danger btn-sm text-light"
+                                   :href="this.cardLink + item.slug">
+                                    <i class="ri-close-line"></i>
+                                </a>
+                            </td>
+                        </tr>
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                            <th colspan="4">
+                                Total
+                            </th>
+                            <th colspan="4">
+                                {{ priceing(total) }}
+                            </th>
+                        </tr>
+                        </tfoot>
+
+                    </table>
+                </div>
+                <div :class="'tab' + (index == 1?'':' hide')">
+                    <div>
+                        <h5>
+                            Sent to:
+                        </h5>
+                        <div v-for="(adr,j) in addresses" class="addr">
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" :value="adr.id" :checked="j == 0"
+                                       name="address_id" :id="'adr'+j">
+                                <label class="form-check-label" :for="'adr'+j">
+                                    {{ adr.address }}
+                                </label>
+                            </div>
+                        </div>
+                        <div v-if="transports.length > 0">
+                            <h5 class="mt-3">
+                                Transport:
+                            </h5>
+                            <div v-for="(trs,j) in transports" class="addr">
+                                <span class="float-end p-2 badge bg-primary m-2">
+                                    {{ priceing(trs.price) }}
+                                </span>
+
+                                <i :class="'float-start '+trs.icon"></i>
+                                <div class="form-check">
+
+                                    <input class="form-check-input" :value="trs.id" type="radio"
+                                           v-model="transport_index" name="transport_id" :id="'t'+j">
+                                    <label class="form-check-label" :for="'t'+j">
+                                        {{ trs.title }}
+                                    </label>
+                                    <p>
+                                        {{ trs.description }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div :class="'tab' + (index == 2?'':' hide')">
+
+                    <!-- WIP translate & discount check  -->
+                    <h5 class="mt-1">
+                        Check discount
+                    </h5>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="ri-percent-line"></i></span>
+                        <input type="text" class="form-control text-center" placeholder="Discount code" :readonly="discount != null" v-model="code">
+                        <button type="button" class="input-group-text btn btn-primary" @click="discountCheck">
+                            Check
+                        </button>
+                    </div>
+                    <div v-if="discount_id != null">
+                        <input type="hidden" name="discount_id" :value="discount_id">
+                        <div class="alert alert-success">
+                            {{ discount_human }}
+                        </div>
+                    </div>
+
+                    <h4>
+                        Extra description
+                    </h4>
+                    <textarea rows="4" class="form-control" name="desc" placeholder="Your message for this order..."></textarea>
+                    <hr>
+                    <button v-if="canPay" class="btn btn-outline-primary w-100 btn-lg">
+                        <i class="ri-bank-card-2-line"></i>
+                        Pay now
+                    </button>
+                    <div v-else class="alert alert-danger">
+                        Please, Login or complete information to pay
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import QIndex from "./Qindex.vue";
+import QPreview from "./Qpreview.vue";
+import quantity from "./Quantity.vue";
+
+function commafy(num) {
+    if (typeof num !== 'string') {
+        return '';
+    }
+    let str = uncommafy(num.toString()).split('.');
+    if (str[0].length >= 4) {
+        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+    }
+    if (str[1] && str[1].length >= 4) {
+        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
+    }
+    return str.join('.');
+}
+
+function uncommafy(txt) {
+    return txt.split(',').join('');
+}
+
+export default {
+    name: "card",
+    components: {quantity, QPreview, QIndex},
+    data: () => {
+        return {
+            countz: [], // counts
+            qz: [], // qunatities
+            itemz: [], // card items
+            pricez: [], // price
+            maxz: [],
+            index: 0,
+            transport_index: null,
+            code: '',
+            discount_id: null,
+            discount_human: '',
+            discount: null,
+        }
+    },
+    props: {
+        productLink: {
+            required: true,
+        },
+        cardLink: {
+            required: true,
+        },
+        discountLink: {
+            required: true,
+        },
+        items: {
+            default: [],
+        },
+        qs: {
+            default: [],
+        },
+        symbol: {
+            default: '$',
+        },
+        addresses: {
+            default: []
+        },
+        transports: {
+            default: [],
+        },
+        canPay: {
+            type: Boolean,
+            default: false,
+        },
+        defTransport: {
+            default: null,
+        }
+    },
+    mounted() {
+        this.qz = this.qs;
+        this.transport_index = this.defTransport;
+        for (const item of this.items) {
+            this.countz.push(1);
+            this.pricez.push(item.price);
+            this.itemz.push(item);
+            this.maxz.push(item.max);
+        }
+
+        // fixed price by quantity
+        for (const i in this.itemz) {
+            if (this.qz[i] != null) {
+                for (const q of this.itemz[i].qz) {
+                    if (q.id == this.qz[i]) {
+                        this.pricez[i] = q.price;
+                        // fixed max for selected quantity
+                        this.maxz[i] = q.count;
+                        try {
+                            this.itemz[i].q = q;
+                        } catch (e) {
+                            this.itemz[i].q = {};
+                        }
+
+                    }
+                }
+
+            }
+        }
+
+
+    },
+    computed: {
+        total() {
+            let sum = 0;
+            for (const i in this.pricez) {
+                sum += this.pricez[i] * this.countz[i];
+            }
+
+            return sum;
+        },
+        totalWithTransport() {
+            let sum = 0;
+            for (const i in this.pricez) {
+                sum += this.pricez[i] * this.countz[i];
+            }
+
+            let t = 0;
+            for (const trs of this.transports) {
+                if (trs.id == this.transport_index) {
+                    t = trs.price;
+                    break;
+                }
+            }
+
+            return sum + t;
+        },
+        totalWithTransportDiscount() {
+            let sum = 0;
+            for (const i in this.pricez) {
+                sum += this.pricez[i] * this.countz[i];
+            }
+
+            let t = 0;
+            for (const trs of this.transports) {
+                if (trs.id == this.transport_index) {
+                    t = trs.price;
+                    break;
+                }
+            }
+
+
+            if (this.discount != null){
+                if (this.discount.type == 'PERCENT'){
+                    sum = (( 100 - this.discount.amount ) * sum ) / 100;
+                }else{
+                    sum -= this.discount.amount;
+                }
+            }
+            return sum + t;
+        }
+    },
+    methods: {
+        async discountCheck() {
+            const url = this.discountLink + this.code;
+            try {
+
+                let resp = await axios.get(url);
+
+                if (!resp.data.OK) {
+                    window.$toast.error(resp.data.err);
+                } else {
+                    window.$toast.success(resp.data.msg);
+                    this.discount_id = resp.data.data.id;
+                    this.discount_human = resp.data.human;
+                    this.discount = resp.data.data;
+                }
+            } catch (e) {
+                window.$toast.error(e.message);
+            }
+
+
+        },
+        changeIndex(i) {
+            this.index = i;
+            this.$forceUpdate();
+        },
+        changeQ(i, q) {
+            // console.log(i,q,'iq');
+            this.maxz[i] = q.count;
+            this.pricez[i] = q.price;
+            if (this.maxz[i] < this.countz[i]) {
+                this.countz[i] = this.maxz[i];
+            }
+        },
+        priceing(p) {
+            if (p == null || p == undefined) {
+                return '';
+            }
+            return commafy(p.toString()) + ' ' + this.symbol;
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+#card {
+
+    table {
+        margin-bottom: 5px;
+    }
+
+    img {
+        height: 64px;
+        width: 64px;
+        object-fit: cover;
+        border-radius: var(--xshop-border-radius);
+    }
+
+    table td, table th {
+        padding: 1rem;
+        vertical-align: middle;
+
+        &:first-child, &:last-child {
+            text-align: center;
+        }
+
+        &:nth-child(2) {
+            text-align: center;
+            width: 75px;
+        }
+    }
+}
+
+.steps {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    list-style: none;
+
+    li {
+        position: relative;
+        text-align: center;
+
+        .circle {
+            transition: 500ms;
+            border-radius: 50%;
+            border: 2px solid var(--xshop-secondary);
+            width: 82px;
+            height: 82px;
+            text-align: center;
+            margin: 0 auto 1rem;
+            background: var(--xshop-secondary);
+            position: relative;
+            z-index: 2;
+            cursor: pointer;
+        }
+
+        i {
+            font-size: 55px;
+            color: var(--xshop-diff2);
+            -webkit-text-stroke: 2px var(--xshop-secondary);
+            transition: 500ms;
+        }
+
+        &:before {
+            content: ' ';
+            top: 35%;
+            inset-inline-start: 0;
+            height: 1px;
+            background: var(--xshop-secondary);
+            position: absolute;
+            width: 100%;
+        }
+
+        &:after {
+            content: ' ';
+            top: 35%;
+            inset-inline-start: 0;
+            height: 1px;
+            background: var(--xshop-primary);
+            position: absolute;
+            width: 0;
+            transition: 500ms;
+        }
+
+        &.active {
+            color: var(--xshop-primary);
+
+            .circle {
+                background: var(--xshop-primary);
+                color: var(--xshop-diff);
+                border-color: var(--xshop-primary);
+
+                i {
+                    -webkit-text-stroke: 2px var(--xshop-primary);
+                }
+            }
+
+            &:after {
+                width: 100%;
+            }
+        }
+
+    }
+}
+
+aside {
+    background: var(--xshop-primary);
+    color: var(--xshop-diff2);
+    border-radius: var(--xshop-border-radius);
+    padding: 1rem;
+    min-height: 98%;
+    text-align: center;
+
+    .icon {
+        font-size: 64px;
+    }
+}
+
+.addr {
+    border-radius: var(--xshop-border-radius);
+    border: var(--xshop-primary) 1px solid;
+    margin-bottom: 7px;
+
+    label {
+        padding: 1rem;
+        display: block;
+    }
+
+    input {
+        margin: 1rem;
+    }
+
+    i {
+        font-size: 45px;
+        color: var(--xshop-secondary);
+        margin: 1rem;
+    }
+}
+
+.hide {
+    max-height: 0 !important;
+    overflow: hidden;
+}
+
+.tab {
+    max-height: 3000px;
+    overflow-y: auto;
+    transition: 300ms;
+}
+</style>

resources/js/client-vue/Qindex.vue

@@ -0,0 +1,121 @@
+<template>
+    <div id="qIndex">
+        <button type="button" v-for="(q,i) in qz" :class="getClass(i)" @click="changeIndex(i)">
+            <q-preview :q="q"></q-preview>
+            {{priceing(q.price)}}
+        </button>
+        <input type="hidden" :name="xname" v-if="xname != null" :value="id">
+    </div>
+</template>
+
+<script>
+import QPreview from "./Qpreview.vue";
+
+function commafy(num) {
+    if (typeof num !== 'string') {
+        return '';
+    }
+    let str = uncommafy(num.toString()).split('.');
+    if (str[0].length >= 4) {
+        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+    }
+    if (str[1] && str[1].length >= 4) {
+        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
+    }
+    return str.join('.');
+}
+
+function uncommafy(txt) {
+    return txt.split(',').join('');
+}
+
+export default {
+    name: "qIndex",
+    components: {QPreview},
+    data: () => {
+        return {
+            index:0,
+            id: null,
+        }
+    },
+    props: {
+        qz:{
+            required:[],
+        },
+        basePrice:{
+            default:0,
+        },
+        symbol:{
+            required: true,
+        },
+        onChange:{
+            type: Function,
+            default: function (i,q){},
+        },
+        i:{
+            default: 0,
+            type: Number,
+        },
+        xname:{
+            default: null,
+        }
+    },
+    mounted() {
+        for( const i in this.qz) {
+            const q = this.qz[i];
+           if (q.price == this.basePrice){
+               this.index = i;
+               this.id = q.id;
+           }
+        }
+
+    },
+    computed: {},
+    methods: {
+        changeIndex(i){
+            this.index = i;
+            this.onChange(this.i, this.qz[i]);
+            this.id =  this.qz[i].id;
+        },
+        priceing(p) {
+            if (p == null || p == undefined) {
+                return '';
+            }
+            return commafy(p.toString()) + ' ' + this.symbol;
+        },
+        getClass(i){
+            let cls = 'q';
+            if (i == this.index){
+                cls += ' selected';
+            }
+
+            return cls;
+        }
+    }
+}
+</script>
+
+<style scoped>
+#qIndex {
+}
+.q{
+    border: 1px solid var(--xshop-secondary);
+    border-radius: var(--xshop-border-radius);
+    margin-bottom: 4px;
+    background: transparent;
+    display: block;
+    color: var(--xshop-text);
+    width: 100%;
+    div{
+        display: inline-block;
+    }
+
+
+    &.selected{
+        background: var(--xshop-primary);
+        color: var(--xshop-diff);
+    }
+}
+
+
+</style>

resources/js/client-vue/Qpreview.vue

@@ -0,0 +1,52 @@
+<template>
+    <div id="qPreview" >
+        <div v-for="meta in q.meta" class="meta" >
+            <span v-if="meta.type != 'color'" class="ms-2">
+                {{meta.label}}
+            </span>
+            <div v-html="meta.human_value" class="ms-2"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "qPreview",
+    components: {},
+    data: () => {
+        return {}
+    },
+    props: {
+        q:{
+            required: true,
+        }
+    },
+    mounted() {
+    },
+    computed: {},
+    methods: {}
+}
+</script>
+
+<style scoped>
+#qPreview {
+}
+
+.meta{
+    display: inline-flex;
+    div{
+        display: inline-block;
+        padding: 3px 0;
+    }
+
+    span{
+        background: var(--xshop-secondary);
+        color: var(--xshop-diff2);
+        border-radius: var(--xshop-border-radius) ;
+        display: inline-block;
+        padding: 2px 3px;
+        height: 1.6em;
+    }
+}
+
+</style>

resources/js/client-vue/Quantity.vue

@@ -1,18 +1,33 @@
 <template>
-    <div id="quantity">
+    <div class="quantity">
-
+        <div class="val">
+            {{val}}
+        </div>
+        <div class="border-end-0 btns">
+            <i class="ri-arrow-up-s-line"
+               @mousedown="startIncrement"
+               @mouseup="stopChange"
+               @mouseleave="stopChange"></i>
+            <i class="ri-arrow-down-s-line"
+               @mousedown="startDecrement"
+               @mouseup="stopChange"
+               @mouseleave="stopChange"></i>
+        </div>
+        <input type="hidden" :name="xname" v-if="xname != null" :value="val">
     </div>
 </template>
 
 <script>
 export default {
     name: "quantity",
-    components: {},
+    data: () => ({
-    data: () => {
+        val: 1,
-        return {
+        interval: null,
-            modelValue: 1,
+        timeout: null,
-        }
+        changeSpeed: 100, // milliseconds between each change
-    },
+        startDelay: 1000, // 1 second delay before rapid change starts
+    }),
+    emits: ['update:modelValue'],
     props: {
         min: {
             default: 1,
@@ -24,21 +39,85 @@ export default {
         },
         xname: {
             default: null,
-            type: null|String,
+            type: [null, String],
         },
-
+        modelValue: {
-
+            type: Number,
+            default: 1,
+        },
+    },
+    methods: {
+        inc() {
+            if (this.val < this.max) {
+                this.val++;
+                this.$emit('update:modelValue', this.val);
+            }
+        },
+        dec() {
+            if (this.val > this.min) {
+                this.val--;
+                this.$emit('update:modelValue', this.val);
+            }
         },
-    mounted() {
+        startIncrement() {
+            this.inc(); // Immediate first increment
+            this.timeout = setTimeout(() => {
+                this.interval = setInterval(this.inc, this.changeSpeed);
+            }, this.startDelay);
+        },
+        startDecrement() {
+            this.dec(); // Immediate first decrement
+            this.timeout = setTimeout(() => {
+                this.interval = setInterval(this.dec, this.changeSpeed);
+            }, this.startDelay);
+        },
+        stopChange() {
+            clearTimeout(this.timeout);
+            clearInterval(this.interval);
+        },
+    },
+    beforeUnmount() {
+        this.stopChange();
     },
-    computed: {},
-    methods: {}
 }
 </script>
 
 <style scoped>
-#quantity {
+.quantity {
     direction: ltr;
-    border: 1px solid gray;
+    border: 1px solid rgba(128, 128, 128, 0.56);
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    width: 90px;
+    height: 50px;
+    border-radius: var(--xshop-border-radius);
+
+    .val{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 17px;
+    }
+
+    i{
+        display: block;
+        transition: 377ms;
+
+        &:first-child{
+            border-bottom:  1px solid rgba(128, 128, 128, 0.56);
+        }
+
+        &:hover{
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+        }
+    }
+
+    .btns{
+        border: 1px solid rgba(128, 128, 128, 0.56);
+        border-bottom: 0;
+        border-top: 0;
+        text-align: center;
+    }
 }
 </style>

resources/js/components/MetaInput.vue

@@ -78,7 +78,8 @@
                                 <input type="number" :id="prop.name" v-model="q.data[prop.name]" class="form-control">
                             </template>
                             <template v-if="prop.type == 'checkbox'">
-                                <div class="form-check form-switch">
+                                <br>
+                                <div class="form-check form-switch mt-2">
                                     <input class="form-check-input" v-model="q.data[prop.name]" type="checkbox"
                                            role="switch"
                                            :id="prop.name">

resources/sass/client-custom/_general.scss

@@ -71,3 +71,10 @@ body{
     display: none;
 }
 
+
+.color-bullet{
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    border: 1px solid gray;
+}

resources/views/segments/card/NsCard/NsCard.blade.php

@@ -0,0 +1,45 @@
+<section class='NsCard'>
+    <div class="container-fluid">
+        @include('components.err')
+        @if(cardCount() == 0 )
+            <div class="alert alert-info">
+                {{__("There is nothing added to card!")}}
+            </div>
+        @else {{--  count 0--}}
+        <form method="post" class="safe-from" >
+
+            <input type="hidden" class="safe-url" data-url="{{route('client.card.check')}}">
+            @csrf
+            <ns-card
+            :items='@json(cardItems())'
+            :qs='{{\Cookie::get("q")}}'
+            symbol="{{config('app.currency.symbol')}}"
+            @if(auth('customer')->check())
+                :addresses='@json(auth('customer')->user()->addresses)'
+            @endif
+            card-link="{{route('client.product-card-toggle','')}}/"
+            discount-link="{{route('client.card.discount','')}}/"
+            product-link="{{route('client.product','')}}/"
+            :transports='@json(transports())'
+            :def-transport="{{defTrannsport()}}"
+            :can-pay="{{!auth('customer')->check() || auth('customer')->user()->mobile == null ||  auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0?'false':'true'}}"
+            >
+                <br>
+                @if(!auth('customer')->check())
+                    <a href="{{ route('client.sign-in') }}" class="btn btn-danger text-light btn-lg w-100">
+                        {{__("You need to sign in/up to continue")}}
+                    </a>
+                @else
+                    {{__("Welcome back")}}: <strong> {{auth('customer')->user()->name}} </strong>
+                    @if(auth('customer')->user()->mobile == null ||  auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0)
+                        <a href="{{ route('client.profile') }}" class="btn btn-danger text-light btn-lg w-100">
+                            {{__("You need complete your information")}}
+                        </a>
+                    @endif
+                @endif
+            </ns-card>
+        @endif {{--  count 0--}}
+
+        </form>
+    </div>
+</section>

resources/views/segments/card/NsCard/NsCard.json

@@ -0,0 +1,10 @@
+{
+    "name": "NsCard",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/card/NsCard/NsCard.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class NsCard
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/card/NsCard/NsCard.scss

@@ -0,0 +1,15 @@
+.NsCard {
+    padding: 2rem 0;
+
+    .ri-checkbox-circle-line{
+        color: green;
+    }
+    .ri-close-circle-line{
+        color: red;
+    }
+    .ri-checkbox-circle-line, .ri-close-circle-line{
+        font-size: 20px;
+        position: relative;
+        top: -6px;
+    }
+}

routes/web.php

@@ -371,6 +371,11 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class])
     Route::get('/compare', [\App\Http\Controllers\ClientController::class,'compare'])->name('compare');
     Route::get('/galleries', [\App\Http\Controllers\ClientController::class,'galleries'])->name('galleries');
     Route::get('/videos', [\App\Http\Controllers\ClientController::class,'clips'])->name('clips');
+    Route::post('/card/check', [\App\Http\Controllers\CardController::class,'check'])->name('card.check');
+    Route::get('/card/discount/{code}', [\App\Http\Controllers\CardController::class,'discount'])->name('card.discount');
+    Route::get('/card', [\App\Http\Controllers\CardController::class,'index'])->name('card');
+    Route::get('/cardClear',[\App\Http\Controllers\CardController::class,'clearing'])->name('card.clear');
+    Route::get('/profile', [\App\Http\Controllers\ClientController::class,'profile'])->name('profile');
     Route::get('/products', [\App\Http\Controllers\ClientController::class,'products'])->name('products');
     Route::get('/attachments', [\App\Http\Controllers\ClientController::class,'attachments'])->name('attachments');
     Route::get('/attachment/{attachment}', [\App\Http\Controllers\ClientController::class,'attachment'])->name('attachment');
@@ -385,7 +390,7 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class])
 
     Route::get('product/fav/toggle/{product}', [\App\Http\Controllers\ClientController::class, 'ProductFavToggle'])->name('product-fav-toggle');
     Route::get('product/compare/toggle/{product}', [\App\Http\Controllers\ClientController::class, 'productCompareToggle'])->name('product-compare-toggle');
-    Route::get('card/toggle/{product}', [\App\Http\Controllers\ClientController::class, 'productCardToggle'])->name('product-card-toggle');
+    Route::get('card/toggle/{product}', [\App\Http\Controllers\CardController::class, 'productCardToggle'])->name('product-card-toggle');
 
     Route::post('/comment/submit', [\App\Http\Controllers\ClientController::class,'submitComment'])->name('comment.submit');
 });
@@ -403,13 +408,13 @@ Route::get('login/as/{mobile}',function ($mobile){
 Route::get('test',function (){
 //    return \Resources\Views\Segments\PreloaderCircle::onAdd();
 //   return $product->getAllMeta();
-    $cards = json_decode(\Cookie::get('card'), true);
+//    return \App\Models\Quantity::whereId(1)->first()->meta;
-    $qs = json_decode(\Cookie::get('q'), true);
+    return [json_decode(\Cookie::get('card')),json_decode(\Cookie::get('q'))];
-
-    return [$cards,$qs];
 })->name('test');
 
 
+
+
 Route::get('whoami',function (){
     if (!auth('customer')->check()){
         return 'You are nothing';