One Hat Cyber Team

View File Name : modern-store-dark-gray.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $card_details->title }}</title>

    {{-- CSRF Token --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Store icon and color --}}
    <link rel="icon" href="{{ url($business_card_details->profile) }}" sizes="96x96" type="image/png" />
    <link rel="apple-touch-icon" href="{{ url($business_card_details->profile) }}">

    <meta name="theme-color" content="gray" />

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="application-name" content="{{ $card_details->title }}">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-title" content="{{ $card_details->title }}">

    <!-- Tile for Win8 -->
    <meta name="msapplication-TileColor" content="gray">
    <meta name="msapplication-TileImage" content="{{ url($business_card_details->profile) }}">

    {{-- Fonts --}}
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap">

    {{-- CSS --}}
    <link href="{{ url('backend/css/tabler.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="{{ url('backend/css/slick.css') }}" rel="stylesheet" />
    <link href="{{ url('frontend/css/store.css') }}" rel="stylesheet">

    {{-- Check business details --}}
    @if ($business_card_details != null)
    <style>
    {!! $business_card_details->custom_css !!}
    </style>
    @endif

    {{-- JS --}}
    <script src="{{ url('js/jquery.min.js') }}"></script>
    <script src="{{ url('frontend/whatsapp-store/js/main.js') }}"></script>
    <script src="{{ url('vendor/sweetalert/sweetalert.all.js') }}"></script>

    {{-- SEO Tags --}}
    {!! SEOMeta::generate() !!}
    {!! OpenGraph::generate() !!}
    {!! Twitter::generate() !!}
    {!! JsonLd::generate() !!}

    {{-- Check PWA --}}
    @if ($plan_details != null)
    @if ($plan_details['pwa'] == 1)

    @laravelPWA

    <!-- Web Application Manifest -->
    <link rel="manifest" href="{{ $manifest }}">

    @endif
    @endif

    <style>
    .form-label {
        float: left;
    }
    .swal2-popup.swal2-modal.swal2-show {
        background: #151f2c;
    }
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
    }
    .navbar .navbar-nav {
        margin-right: 4px;
    }
    .custom-card-style {
        height: 100%;
        border-color: #f8f8f8 !important;
    }
    :root, [data-bs-theme="dark"] {
        --tblr-border-radius: 16px;
    }
    .pagination-card {
        border-color: #f8f8f8;
        border-radius: 16px;
        padding: 10px;
    }
    .pagination-card-footer {
        border-top: none;
    }
    .btn {
        border-radius: 12px;
    }
    .btn-primary, .btn:disabled {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .text-muted {
        color: #ffffff !important;
    }
    .rounded {
        border-radius: 16px !important;
    }
    a {
        text-decoration: none !important;
    }
    i.ti.ti-shopping-bag {
        color: #ffffff;
    }
    .ti.ti-shopping-bag-plus {
        font-size: 34px;
        margin-right: 5px;
    }
    .ti {
    font-size: 34px;
    }
    .card-body {
        margin: 0;
        padding: 10px;
    }
    .card-footer {
        margin: 0;
        padding: 10px 10px;
    }
   .logo-height {
    height:60px !important;
}

.regular_price {
    font-size: 13px;
}
.form-title {
    font-size: 15px;
}
.radius-img{
    border-radius: 18px;
}
.gobiz-wa-store-cat-text{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
</style>

    {{-- Limited Text Function --}}
    @php
    function limit_text($text) {
    $limit = 4;
    if (str_word_count($text, 0) > $limit) {
    $words = str_word_count($text, 2);
    $pos = array_keys($words);
    $text = substr($text, 0, $pos[$limit]) . '...';
    }
    return $text;
    }
    @endphp
</head>

<body data-bs-theme="dark"
    dir="{{(App::isLocale('ar') || App::isLocale('ur') || App::isLocale('he') ? 'rtl' : 'ltr')}}">
    <!-- Preloader -->
    <div class="page page-center preloader-wrapper bg-dark">
        <div class="container container-slim py-4">
            <div class="text-center">
                <div class="mb-3">
                    <img src="{{ url($business_card_details->profile) }}" height="36"
                        alt="{{ $business_card_details->title }}">
                </div>
                <div class="mb-3 h3">{{ __('Loading') }}</div>
                <div class="progress progress-sm">
                    <div class="progress-bar progress-bar-indeterminate"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Page --}}
    <div id="wrapper" class="page">


        <!-- Navbar -->
        <header class="navbar navbar-expand-md d-print-none p-2 pb-2" data-bs-theme="dark">
            <div class="container-xl">
               <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                    <a href="{{ url($business_card_details->card_url) }}">
                        <img src="{{ url($business_card_details->profile) }}"
                            alt="{{ $business_card_details->title }}" class="logo-height" />
                    </a>
                </div>
                <div class="navbar-nav flex-row order-md-last">
                    <div class="nav-item dropdown">
                        <div class="nav-item">
                            <a class="position-relative cursor-pointer text-white" data-bs-toggle="modal" data-bs-target="#cartItems">
                                <i class="ti ti-shopping-bag"></i>
                                <span class="badge bg-gray text-gray-fg badge-notification badge-pill"
                                    id="badge">0</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="page-wrapper mt-5">
            <div class="page-body">
                <div class="container-xl">
                    <!-- Banners -->
                    <div class="row">
                        {{-- Greeting message --}}
                        <div class="col-md-12 pt-6 px-1">
                            <h3 class="alert alert-important alert-gray text-white">{{ $business_card_details->sub_title }}</h3>
                        </div>

                        <div class="col-md-12">
                            <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    {{-- Cover --}}
                                    @if (is_array(json_decode($business_card_details->cover)) == true)
                                        @foreach (json_decode($business_card_details->cover) as $cover)
                                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                            <img class="d-block w-100 radius-img" alt="{{ $business_card_details->title }}" src="{{ url($cover) }}" />
                                            <div class="d-none d-md-block"></div>
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="carousel-item active">
                                            <img class="d-block w-100 radius-img" alt="{{ $business_card_details->title }}" src="{{ url($business_card_details->cover) }}" />
                                            <div class="d-none d-md-block"></div>
                                        </div>
                                    @endif
                                </div>
                                <a class="carousel-control-prev" href="#carousel-captions" role="button"
                                    data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{ __('Previous') }}</span>
                                </a>
                                <a class="carousel-control-next" href="#carousel-captions" role="button"
                                    data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{ __('Next') }}</span>
                                </a>
                            </div>
                        </div>

                        <!-- Categories -->
                        <div class="col-md-12 my-3">
                            <h2>{{ __('Categories') }}</h2>
                            <div class="row categories">
                                <div class="col-md-3 col-lg-3 px-1 cursor-pointer">
                                    <a href="{{ url()->current() }}">
                                        <div class="card card-sm custom-card-style">
                                            <div class="card-body">
                                                <div class="ratio ratio-1x1">
                                                     <svg fill="#657382" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm11 4h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm-1 6h-4v-4h4v4zM17 3c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zM7 13c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/></svg>
                                                </div>
                                                <div class="mt-2">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <h3 class="card-title text-center mb-1">
                                                                {{ __('All') }}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <!-- Foreach -->
                                @foreach ($categories as $category)
                                <div class="col-md-3 col-lg-3 px-1 cursor-pointer">
                                    <a href="{{ route('profile', $business_card_details->card_url).'?category='.strtolower($category->category_name) }}">
                                        <div class="card card-sm custom-card-style">
                                            <div class="card-body">
                                                <div class="ratio ratio-1x1">
                                                    <img src="{{ url($category->thumbnail) }}" class="rounded object-cover" alt="{{ $category->category_name }}" />
                                                </div>
                                                <div class="mt-2">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <h3 class="card-title text-center mb-1 gobiz-wa-store-cat-text">
                                                                {{ $category->category_name }}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Products -->
                        @if (count($products) > 0)
                        <div class="col-md-12 my-3">
                            <h2>{{ __('Products') }}</h2>
                            <div class="row">
                                <!-- Foreach -->
                                @foreach ($products as $product)
                                <div class="col-sm-6 col-lg-3 col-6 py-2">
                                    <div class="card custom-card-style">
                                        @php
                                        $productImages = explode(',', $product->product_image);
                                        @endphp
                                        <div id="carousel-controls" class="carousel slide mb-3" data-bs-ride="carousel">
                                            <div class="carousel-inner">
                                                @foreach ($productImages as $productImage)
                                                <div class="carousel-item {{ $loop->index == 0 ? 'active' : '' }}">
                                                    <img class="d-block w-100 rounded" id="{{ $product->product_id }}_product_image" alt="{{ $product->product_name }}" src="{{ url($productImage) }}">
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <span class="badge bg-gray text-white" id="{{ $product->product_id }}_subtitle">{{ $product->category_name }}</span>
                                            <span class="badge bg-gray text-white">{{ $product->badge }}</span>
                                            <h3 id="{{ $product->product_id }}_product_name" class="card-title mb-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $product->product_name }}">
                                                {{ limit_text($product->product_name) }}
                                            </h3>
                                            <p class="text-white mb-3">{{ $product->product_subtitle }}</p>
                                            <p class="pricing my-2 p-0"><strong><span id="{{ $product->product_id }}_currency">{{ $currency }} <span id="{{ $product->product_id }}_price">{{ $product->sales_price }}</span></span></strong></p>
                                            @if ($product->sales_price != $product->regular_price)
                                            <p class="regular_price"><del class="text-gray">{{ $currency }} {{ $product->regular_price }}</del></strong></p>
                                            @endif
                                        </div>
                                        @if ($product->product_status == "instock")
                                        <div class="card-footer">
                                            <a onclick="addToCart('{{ $product->product_id }}')" class="btn btn-gray"><i class="ti ti-shopping-bag-plus"></i> {{ __('Add') }}</a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                @endforeach

                                {{-- Paginate --}}
                                <div class="col-md-12 my-3">
                                    @if(request()->has('category'))
                                    {{ $products->appends(['category' => strtolower($category->category_name)])->links() }}
                                    @else
                                    {{ $products->links() }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="col-md-12 my-3">
                            <h2>{{ __('Products') }}</h2>
                            <div class="row">
                                <h3>{{ __('No Products Founds!') }}</h3>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <footer class="footer footer-transparent d-print-none">
                <div class="container-xl">
                    <div class="row text-center align-items-center flex-row-reverse">
                        <div class="col-lg-auto ms-lg-auto">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item"><a href="{{ $shareComponent['facebook'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-facebook-filled text-gray"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['twitter'] }}" class="link-light"><i
                                            class="ti ti-brand-twitter-filled text-gray"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['linkedin'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-linkedin text-gray"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['telegram'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-telegram text-gray"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['whatsapp'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-whatsapp text-gray"></i></a></li>
                            </ul>
                        </div>
                        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                            <ul class="list-inline list-inline-dots mb-0">
                                @if ($plan_details['hide_branding'] == 1)
                                <li class="list-inline-item">
                                    {{ __('Copyright') }} © <span id="year"></span> <a href="{{ url($business_card_details->card_url) }}" class="link-light text-gray"><strong>{{ $card_details->title }}</strong></a>. {{ __('All rights reserved.') }}
                                </li>
                                @else
                                <li class="list-inline-item">
                                    {{ __('Copyright') }} © <span id="year"></span> <a href="{{ url($business_card_details->card_url) }}" class="link-light text-gray"><strong>{{ config('app.name') }}</strong></a>. {{ __('All rights reserved.') }}
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <!-- Include PWA modal -->
    @if ($plan_details != null)
        {{-- Check PWA --}}
        @if ($plan_details['pwa'] == 1)
        @include('vendor.laravelpwa.bs_pwa_modal')
        @endif
    @endif

    {{-- Cart Items --}}
    <div class="modal modal-blur fade" id="cartItems" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Cart Items') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="row" id="cart_items"></div>
                        <a class="btn btn-gray" id="place-order" onclick="placeOrder()">{{ __('Place WhatsApp Order') }}</a>
                    </div>

                    <div id="empty-cart" class="pt-6 p-3">
                        <p class="px-4 py-4 mb-4 text-center text-white">{{ __('Your cart is empty.') }}</p>

                        <a class="btn btn-gray d-flex" data-bs-dismiss="modal" aria-label="Close">{{ __('Start Shopping') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Core -->
    <script type="text/javascript" src="{{ url('backend/js/tabler.min.js') }}"></script>
    <script type="text/javascript" src="{{ url('backend/js/slick.min.js') }}"></script>
    <script src="{{ url('frontend/whatsapp-store/js/script.js') }}"></script>
    <script src="{{ url('backend/js/data-filter.js') }}"></script>

    {{-- Check business details --}}
    @if ($business_card_details != null)
    <script>
    {!! $business_card_details->custom_js !!}
    </script>
    @endif

    <script>
        $(document).ready(function() {
        "use strict";
        $('.preloader-wrapper').fadeOut('slow');
        getData();

    });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
        "use strict";
        $(".categories").slick({
          rtl: false,
          dots: false,
          infinite: true,
          arrows: false,
          autoplay: true,
          autoplaySpeed: 2000,
          speed: 700,
          centerMode: false,
          slidesToShow: 5,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 600,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 480,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
          ],
        });
    });
    </script>
     <script>

        var cart = [];

        function getData(){
            if(!(localStorage.getItem("cart_"+ "{{ $business_card_details->card_id }}"))){
             cart = [];
             localStorage.setItem("cart_"+ "{{ $business_card_details->card_id }}", JSON.stringify(cart));
        }else{
             cart = JSON.parse(localStorage.getItem("cart_"+ "{{ $business_card_details->card_id }}" ))
        }
        updateList();
        updateBadge();
        }



        var whatsAppNumber = "{{ $enquiry_button }}";
        var whatsAppMessage = "{{ $whatsapp_msg }}";
        var currency = "{{ $currency }}";

        $("#badge").hide();
        $("#place-order").hide();
        $("#empty-cart").show();

        function addToCart(pid) {
            "use strict";
            var productName = $("#" + pid + "_product_name").text();
            var price = $("#" + pid + "_price").text();
            var product_image = $("#" + pid + "_product_image").attr("src");
            var subtitle = $("#" + pid + "_subtitle").text();

            var quantity_increment = false;
            for (let index = 0; index < cart.length; index++) {
                if (cart[index].product_id == pid) {
                    cart[index].qty = cart[index].qty + 1;
                    quantity_increment = true;
                    successAlert('{{ __("Cart updated") }}');
                    updateBadge();
                }
            }
            if (quantity_increment == false) {
                cart.push({ "product_name": $.trim(productName), "price": price, "product_id": pid, "currency": currency, "qty": 1, "product_image": product_image, "subtitle": subtitle });
                successAlert("{{ __('Item added to cart') }}");
                updateBadge();
            }
            updateList();

        }

        function updateList() {
            "use strict";
            var cart_items = "";
            var grandTotal = 0;
            for (let j = 0; j < cart.length; j++) {
                var total_price = 0;
                total_price = cart[j].qty * Number(cart[j].price);
                grandTotal += Number(total_price);
                cart_items += `
                <div class="col-md-6 col-lg-6 mb-2">
                    <div class="card">
                        <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(` + cart[j].product_image + `)"></div>
                        <div class="card-body">
                            <h4 class="text-white mb-1">`+ cart[j].product_name + `</h4>
                            <small class="text-secondary">`+ cart[j].subtitle +`</small>
                            <p class="text-white mt-1"><strong>`+ currency + ' ' + total_price +`</strong></p>
                        </div>
                        <!-- Card footer -->
                        <div class="card-footer">
                            <div class="d-flex">
                            <a onclick="reduceQty(` + j + `)" class="btn btn-gray ms-auto">-</a>
                            <a class="btn btn-white ms-auto">`+ cart[j].qty +`</a>
                            <a onclick="addQty(` + j + `)" class="btn btn-gray ms-auto">+</a>
                            <a onclick="removeFromCart(` + j + `)" class="btn btn-gray ms-auto">X</a>
                            </div>
                        </div>
                    </div>
                </div>`;
            }
            if (grandTotal > 0) {
             cart_items += '<br> <h3 class="pl-4 pt-4 pr-4 font-bold text-white">{{ __("Grand total:") }} ' + currency + ' ' + grandTotal.toFixed(2) + '</h3>';
            }
            $("#cart_items").html(cart_items);

            updateStorage();


        }

        function updateBadge() {
            "use strict";
            var badgeCount = cart.length;
            if (badgeCount > 0) {
                $("#empty-cart").hide();
                $("#badge").text(badgeCount);
                $("#badge").show();
                $("#place-order").show();
                $("#place-order").attr("class", "btn btn-gray d-flex");
            } else {
                $("#place-order").attr("class", "btn btn-gray");
                $("#place-order").hide();
                $("#badge").hide();
                $("#empty-cart").show();
            }
        }

        function reduceQty(i) {
            "use strict";
            if (cart[i].qty == 1) {
                removeFromCart(i);
            } else {
                cart[i].qty = cart[i].qty - 1;
                updateBadge();
                updateList();
            }

            updateStorage();

        }

        function addQty(i) {
            "use strict";
            cart[i].qty = cart[i].qty + 1;
            updateBadge();
            updateList();
            updateStorage();

        }

        function removeFromCart(i) {
            "use strict";
            var cartList = cart;
            cart = [];
            for (let l = 0; l < cartList.length; l++) {
                if (l == i) {
                } else {
                    cart.push(cartList[l])
                }
            }

            successAlert(`{{ __('Item Removed') }}`);

            updateStorage();
            updateBadge();
            updateList();
        }

        function placeOrder() {
            "use strict";
            Swal.fire({
                html: '<div class="card">'+
                        '<div class="card-header">'+
                            '<h2 class="form-title mb-0">{{ __("Please fill following details:") }}</h2>'+
                        '</div>'+
                        '<div class="card-body">'+
                            '<div class="row g-5">'+
                                '<div class="col-xl-12">'+
                                    '<div class="row">'+
                                        '<div class="col-md-12 col-xl-12">'+
                                            '<div class="mb-3">'+
                                                '<label class="form-label" for="cus_name">{{ __("Full Name") }} <span class="text-gray">*</span></label>'+
                                                '<input type="text" class="form-control" id="cus_name" required />'+
                                            '</div>'+
                                            '<div class="mb-3">'+
                                                '<label class="form-label" for="cus_mobile">{{ __("Mobile") }} <span class="text-gray">*</span></label>'+
                                                '<input type="text" class="form-control" id="cus_mobile" required />'+
                                            '</div>'+
                                            '<div class="mb-3">'+
                                                '<label class="form-label" for="cus_address">{{ __("Address") }} <span class="text-gray">*</span></label>'+
                                                '<input type="text" class="form-control" id="cus_address" required />'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>',
                focusConfirm: false,
                allowOutsideClick: false,
                showCancelButton: true,
                confirmButtonColor: '#657382',
                confirmButtonText: '{{ __("Confirm") }}',
                cancelButtonText: "{{ __('Close') }}",
                preConfirm: () => {
                    var customerDetails = [
                        document.getElementById('cus_name').value,
                        document.getElementById('cus_mobile').value,
                        document.getElementById('cus_address').value
                    ];
                    createWhatsAppLink(customerDetails);
                }
            })

        }

        function createWhatsAppLink(cusDetails) {
            "use strict";
            if (cusDetails[0].length >= 3 && cusDetails[0].length >= 4) {

                var productsList = "\n- - - - - - - - - - - - - - - - - - - -\n";
                productsList += "📦 *{{ __('Order Details:') }}* \n\n";

                var grandTotal = 0;
                for (let x = 0; x < cart.length; x++) {
                    var item_cost = Number(cart[x].qty) * Number(cart[x].price);
                    var cart_price = Number(cart[x].price);
                    productsList += $.trim(cart[x].product_name + " - " + cart[x].qty + " X " + currency + " " + cart_price.toFixed(2) + "  =  *" + currency + " " + item_cost.toFixed(2)) + "* \n";
                    grandTotal += Number(cart[x].price) * cart[x].qty;
                }

                productsList += "\n- - - - - - - - - - - - - - - - - - - -\n";
                productsList += `*{{ __('Total') }}*` + " :" + "*" + currency + " " + grandTotal.toFixed(2) + "*";
                productsList += "\n- - - - - - - - - - - - - - - - - - - -\n\n";

                var customerDetails = "📞 *{{ __('Customer Details:') }}* \n";
                customerDetails += `{{ __("Customer Name") }}` + " : " + cusDetails[0] + "\n";
                customerDetails += `{{ __("Contact Number") }}` + " : " + cusDetails[1] + "\n";
                customerDetails += `{{ __("Delivery Address") }}` + " : " + cusDetails[2] + "\n\n";

                var waShareContent = "🎉 *{{ __('New Order') }}* \n";
                waShareContent = waShareContent + productsList + customerDetails + "*" + whatsAppMessage + "*";

                var link = "https://api.whatsapp.com/send/?phone=" + whatsAppNumber + "&text=" + encodeURI(waShareContent);
                window.open(link, '_blank');

                successAlert('{{ __("Order Placed!") }}');
                cart = [];

                updateStorage();
            } else {
                placeOrder();
            }

        }

        function updateStorage(){
            localStorage.setItem("cart_" + "{{ $business_card_details->card_id }}", JSON.stringify(cart))
        }
    </script>
</body>

</html>