<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <title>Spesifikasi | AR Care</title>
    <meta name="author" content="PT. AR GROUP BERKAH BERSAMA">
    <meta name="robot" content="noindex">

    <meta name="google-site-verification" content="ojI9eiNaLuWftzCCX3Ha9WBdgMHCBenP6bY21AthAdk" />
    <link rel="icon" type="image/x-icon" href="care/assets/imgs/favicon.ico">

    <!-- Bootstrap + Creative Studio main styles -->
	<link rel="stylesheet" href="care/assets/css/creative-studio2.css">
    <!-- My Style -->
    <link rel="stylesheet" href="care/assets/css/style.css?version=1.2" />

    <!--@include('ar-css')-->
    <style>
        .navbar-nav{
            display:none;
        }
        
        #shopping-cart-button .quantity-bedge {
            left:1rem !important;
            top:-0.7rem !important;
        }    
    
	    .btn-book-now{
    	    color:white !important;
    	    white-space:nowrap;
    	    background-color:#74164b;
    	    border:thin solid #74164b;
    	    padding:5px 10px;
    	    border-radius:50px;
            text-decoration:none !important;
    	    cursor:pointer;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    	}
    	
    	.product-card-lg{
            margin:8px;
            margin-top:10px;
            padding:20px;
            background-color:#fff;
            border-radius:10px;
            display:block;
            box-shadow:0 0 10px 0;    	    
    	}
    	
        @media (max-width:768px){
            .navbar .navbar-nav{
                display:block;
                padding:1rem 3% !important;
            }
        }

		.fa {
			font-size: 20px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
			border-radius: 50%;
		}
		.fa-big{
			color:#fff;	
			background-color: #25d366;
			width: 50px;
			padding: 10px;
		}
		.fa-small{
			color:#25d366;	
		}
		.fa-telegram{
			color:#0099ff;	
		}
		.fa-instagram{
			color:#fff;	
			background-color: #e1306c;
		}
		.fa-facebook{
			color:#fff;	
			background-color: #1877F2;
		}
		.fa-question{
			color:orange;	
		}
		.qlwapp-account:hover{
		    /*background-color:#cecece;*/
		}
		.qlwapp-name{
		    color:#666666;
		}
		.qlwapp-name:hover{
		    color:red;
		}        
    	
    </style>

</head>

<body>
    <header>
        <!-- Navbar Start -->
        <nav class="navbar" x-data="products">
            
            <a href="#" class="navbar-logo"><img src="assets/imgs/ar-group.png" alt="logo" height="50px"/></a>
    
            <h1 style="color:white;font-weight:bold !important">AR-Care Shop</h1>
    
            <div class="navbar-nav">
                <a href="/">Home</a>
                <a href="#product">Products</a>
                <a href="#footer">Contact</a>
            </div>
    
            <div class="navbar-extra">
                <a id="shopping-cart-button" style="cursor:pointer">
                    <i data-feather="shopping-cart"></i>
                    <span class="quantity-bedge" x-show="$store.cart.quantity" x-text="$store.cart.quantity"></span>
                </a>
                <a href="#" id="hamburger-menu" aria-label="Shopping Cart"><i data-feather="menu"></i></a>
            </div>
    
            <!-- Shopping Card Start -->
                <x-shopping_cart/>
            <!-- Shopping Card End -->
    
        </nav>
        <!-- Navbar End -->
    </header>
    
    <main>
        <div class="container" x-data="products1" style="margin-top:120px">
            Specification
            <div x-text="items[0].name"></div>

            <template x-if="item0 = items[0]">
                <div class="row product-card-lg">
                    <div class="row">
                        <div class="col" style="text-align:center">
                            <div style="border-bottom:1px solid red;color:#74164b;font-size:21pt" x-text="item0.name"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6" style="font-size:12pt;text-align:center">
                            <img :src="`${item0.img}`" :alt="item0.img" style="max-height:350px">
                        </div>
                        <div class="col-md-6">
                            Specification:
                                <div x-html="item0.sizes[0].specifications"></div>
        
                            <h2 style="color:#74164b" x-text="'Harga: ' + rupiah(item0.sizes[0]?.price)"></h2>
                            <div style="margin:15px 0">
                                <span class="btn-book-now"
                                    x-show="if(item0.sizes[0]?.quantity > 0){
                                            return true;
                                        } else{
                                            return false;
                                        }" 
                                    @click.prevent="item0.price = item0.sizes[0].price;
                                                    item0.size='';
                                                    item0.weight = item0.sizes[0].weight;
                                                    $store.cart.add(item0)">
                                    Add to Cart &#8594;
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- End -->
    </main>

    <!-- Feather icons-->
        <script src="https://unpkg.com/feather-icons"></script>
    <!-- Feather Icons -->
    <script>
        feather.replace();
    </script>

    <!-- Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Midtrans -->
    <!--<script type="text/javascript" src="https://app.midtrans.com/snap/snap.js" data-client-key="Mid-client-5MMOc21fQAac7v9b"></script>-->
    <!--<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="SB-Mid-client-aHkP25H8MQ_fe9rO"></script>-->

    <!-- My Js -->
    <script src="care/assets/js/script.js?version=1.0"></script>
    <!-- App js -->
    <script src="care/assets/src/app.js?version=1.4d"></script>
    <script src="care/assets/vendors/jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="assets/vendors/themify-icons/css/themify-icons.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
</body>
    
    </div>
    
	<script type="text/javascript">

        $(document).ready(function()
        {

        	var $myPanel = $("#chat-box");
        	var $myPanelHeight = parseInt($myPanel.height());
        	$myPanel.css({"opacity":0,"bottom":"-" + $myPanelHeight + "px"});
    
        	$("#chat-btn").click(function(){
        		setTimeout(function(){
        			$myPanel.animate({
        			opacity: 1,
        			bottom: '60'
        			},500,function(){				 
        		});
        	},100);
        	});
        
        	$("#closeit").click(function(){
        		setTimeout(function(){
        			$myPanel.animate({
        			opacity: 0,
        			bottom: '-' + $myPanelHeight
        			},500,function(){				 
        		});
        	},100);
        	});
        	
        });
        
        
function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}        	
        
    
        btn = document.querySelectorAll(".qlwapp-account");
        for(let i = 0; i < btn.length; i++){
            btn[i].addEventListener("click", async function (e) {
                e.preventDefault();
                
                let phone = btn[i].getAttribute('data-phone');
                let name = btn[i].getAttribute('data-name');
        
                try {
                    const response = await fetch("user_log.php", {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body:JSON.stringify({phone:phone,name:name}),
                    });
                
                    //const response = await response.text();

                } catch (err) {
                    console.log(err.message);
                }
        
                window.open("https://api.whatsapp.com/send/?phone=" + phone + "&text=Halo AR Care.");
            });
        }

        document.addEventListener("alpine:init", () => {
            Alpine.data("products1",()=>({
                items:[],
                init(){
                    let params =  new URLSearchParams(location.search);
                    let id = params.get('id');
                        fetch('product-item?id=' + id)
                            .then(response => response.json())
                            .then(data => this.items = data);
                },
            }));
        });
    
    </script>
    
</html>