@extends('layouts.portal.layout')

@section('content')

<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">

<div class="taglineBox">
    <p class="tagline mb-4">Important information about your move with <span>You Move Me!</span></p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-11">
            <div class="d-flex justify-content-between align-items-center">
                <p class="fs-3 fw-bolder">Buy Supplies</p>
                <p class="fs-5 text-danger">FREE DELIVERY OVER $100</p>
            </div>
        </div>
        <div class="col-md-1">
            <!-- cart qty box -->
            <div class="mx-3 mt-1">
                <a href="{{ route('shop')}}" class="cartBtnLink">
                    <i class="fa-solid fa-cart-shopping position-relative">
                        <span id="cartCount"
                            class="fs-6 position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                            0
                        </span>
                    </i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Cart -->
<section id="cart" style="display:none">
    <div class="container mt-4">
        <div class="row">
            <!-- left Side -->
            <div class="col-sm-12 col-md-8">

                <table class="table">
                    <thead style="background-color: #a6ce39; color: #fff;">
                        <th></th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Qty</th>
                        <th>Total</th>
                        <th></th>
                    </thead>
                    <tbody id="cartrows">

                    </tbody>
                </table>

            </div>
            <!-- Left Side End -->

            <!-- Right Side -->
            <div class="col-sm-12 col-md-4">
                <div class="row bg-light detailCard p-3 align-items-center w-100">
                    <p class="col-8 fw-bold mb-0">Shipping:</p>
                    <p class="col-4 fw-bold mb-0" id="shipping">$ 15.99</p>
                    <p class="col-6 fw-bold mb-0">Total:</p>
                    <input class="col-2 fw-bold mb-0" id="totalQty" value=""
                        style="border:none; background-color:transparent">
                    <input class="col-4 fw-bold mb-0" id="totalBill" value=""
                        style="border:none; background-color:transparent">
                </div>

                <div class="text-center">
                    <!-- <button type="button" onclick="payNow()" class="payBtn" data-bs-toggle="modal" data-bs-target="#exampleModal"> -->
                    <button onclick="payNow()" class="payBtn">
                        Pay Now
                    </button>
                    <button type="button" class="cartBtn" onclick="cartEmpty()">
                        <i class="fa-solid fa-trash-can"></i>
                        Empty Cart
                    </button>
                </div>
            </div>
            <!-- Right Side End -->
        </div>
    </div>
</section>

<!-- product card -->
<section>
    <div class="container">
        <div class="row py-5">

            @foreach($prod as $item)
            <div class="col-sm-6 col-md-4 col-lg-3 pt-4">
                <div class="card product-card">
                    <img src="{{ asset($item->image) }}" class="card-img-top" alt="Apple Computer" />
                    <div class="card-body">
                        <div class="text-center card-detail">
                            <h6 class="card-title fw-bold">{{ $item->product_name }}</h6>
                            <p class="text-muted"
                                style="font-size:13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;">
                                {{ $item->description }}</p>
                        </div>
                        <div class="d-flex justify-content-center total fw-bold  product-price">
                            <span class="fs-5">${{ $item->price }}</span>
                        </div>
                        <div class="my-3 d-flex align-items-center justify-content-between">
                            <button type="button" onclick="decrementValue(`product{{ $item->id }}`)"
                                class="btn qty-btn">-</button>
                            <input type="text" id="product{{ $item->id }}" class="qty-input prodqty" name="quantity"
                                value="1" maxlength="2" max="20" size="1" />
                            <button type="button" onclick="incrementValue(`product{{ $item->id }}`)"
                                class="btn qty-btn">+</button>
                        </div>
                        <div class="text-center">
                            <button type="button"
                                onclick="productid({{ $item->id }}, '{{ asset($item->image) }}', '{{ $item->product_name }}', {{ $item->price }})"
                                class="btn cart-btn">
                                Add to cart
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    shop_cart_local_storage = localStorage.getItem("shop_cart");
    if (shop_cart_local_storage != undefined && shop_cart_local_storage != null && JSON.parse(
            shop_cart_local_storage).length > 0) {
        $('#cart').show();
        let arr = JSON.parse(shop_cart_local_storage);
        console.log(arr)

        for (i = 0; i < arr.length; i++) {
            let obj = arr[i];
            console.log(obj.product_id)

            id = obj.product_id;
            prodimg = obj.product_img;
            prodname = obj.product_name;
            price = obj.product_price;
            qty = obj.product_qty;


            var prevQty = $('#totalQty').val();
            // var qty = $('#product' + id).val();
            // console.log(qty);

            if (prevQty == null || prevQty == "") {
                var prevQty = 0;
                var currQty = parseFloat(qty) + parseFloat(prevQty);
                $('#totalQty').val(currQty);
            } else {
                var currQty = parseFloat(qty) + parseFloat(prevQty);
                $('#totalQty').val(currQty);
            }

            var total = price * qty;
            // console.log(total);

            var content = '';
            content += '<tr id="cart_row_' + id + '" style="background-color:#F8F9FA">';
            content += '<td>';
            if (prodimg != null)
                content += '<img src="' + prodimg + '" style="width:20px; height:20px">';
            content += '</td>';
            content += '<td id="prodname">' + prodname + '</td>';
            content += '<td id="price">$ ' + price + '</td>';
            content += '<td id="qty">' + qty + '</td>';
            content += '<td id="total">$ ' + total + '</td>';
            content += '<td><i onclick="deleteRow(this, ' + id +
                ')" class="fa-solid fa-trash-can text-danger"></i></td>';
            content += '</tr>';
            $('#cartrows').append(content);

            calTotal();
        }
    }
});

function productid(id, prodimg, prodname, price) {

    $('#cart').show();

    // console.log(id);
    // console.log(prodimg);
    // console.log(prodname);
    // console.log(price);

    var prevQty = $('#totalQty').val();
    var qty = $('#product' + id).val();
    // console.log(qty);

    if (prevQty == null || prevQty == "") {
        var prevQty = 0;
        var currQty = parseFloat(qty) + parseFloat(prevQty);
        $('#totalQty').val(currQty);
    } else {
        var currQty = parseFloat(qty) + parseFloat(prevQty);
        $('#totalQty').val(currQty);
    }

    var total = price * qty;
    // console.log(total);

    var content = '';
    content += '<tr id="cart_row_' + id + '" style="background-color:#F8F9FA">';
    content += '<td><img src="' + prodimg + '" style="width:20px; height:20px"></td>';
    content += '<td id="prodname">' + prodname + '</td>';
    content += '<td id="price">$ ' + price + '</td>';
    content += '<td id="qty">' + qty + '</td>';
    content += '<td id="total">$ ' + total + '</td>';
    content += '<td><i onclick="deleteRow(this, ' + id + ')" class="fa-solid fa-trash-can text-danger"></i></td>';
    content += '</tr>';
    $('#cartrows').append(content);

    calTotal();

    let obj = {
        product_id: id,
        product_img: prodimg,
        product_name: prodname,
        product_price: price,
        product_qty: qty
    }

    shop_cart_local_storage = localStorage.getItem("shop_cart");

    if (shop_cart_local_storage != undefined && shop_cart_local_storage != null && JSON.parse(shop_cart_local_storage)
        .length > 0) {
        let arr = JSON.parse(shop_cart_local_storage);
        arr.push(obj);
        localStorage.setItem("shop_cart", JSON.stringify(arr));
    } else {
        let arr = [];
        arr[0] = obj;
        localStorage.setItem("shop_cart", JSON.stringify(arr));
    }

    // console.log(JSON.parse(localStorage.getItem("shop_cart")));
}

// calcultate table row total
function calTotal() {
    var ttotal = 0;
    var totalqty = 0;
    $('#cartrows tr').each(function(i, n) {
        // debugger;
        var $row = $(n);
        var total = parseFloat($row.find('#total').text().split("$")[1].trim());
        var qty = parseInt($row.find('#qty').text());
        ttotal += total;
        totalqty += qty;
    })

    var shipping = 0;
    if ($('#cartrows tr').length > 0)
        shipping = 15.99; //fixed

    // if ttotal is greater than $100 , shipping charges will not be applied
    if (ttotal > 100) {
        $('#shipping').text('$ 0');
        var gtotal = parseFloat(ttotal);
    } else {
        $('#shipping').text('$ 15.99');
        var gtotal = parseFloat(ttotal) + parseFloat(shipping);
    }

    var fixed = gtotal.toFixed(2);
    // console.log(fixed);

    $("#totalBill").val('$ ' + fixed);
    $("#totalQty").val(totalqty);

    // Trolly CartCount
    var count = $('#cartrows tr').length;
    $('#cartCount').text(count);
}

// delete table row
function deleteRow(e, id) {
    console.log(id)
    $(e).parents("tr").remove();


    shop_cart_local_storage = localStorage.getItem("shop_cart");

    if (shop_cart_local_storage != undefined && shop_cart_local_storage != null && JSON.parse(shop_cart_local_storage)
        .length > 0) {
        let arr = JSON.parse(shop_cart_local_storage);
        console.log(arr)
        arr = arr.filter(function(el) {
            return el.product_id != id;
        });
        localStorage.setItem("shop_cart", JSON.stringify(arr));
    }

    calTotal();
}

// Empty Cart
function cartEmpty() {
    $("#cartrows").children().remove();

    calTotal();

    localStorage.removeItem("shop_cart");

}
</script>

<!-- Submit AddCart in DB Using Ajax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<script type="text/javascript">
function payNow() {

    var shippingcharges = $('#shipping').text().split('$ ')[1];
    var totalbill = $('#totalBill').val().split('$ ')[1];
    var totalqty = $('#totalQty').val();
    // console.log('shipping : ' + shippingcharges);
    // console.log('totalBill : ' + totalbill);
    // console.log('totalQty : ' + totalqty);

    var Arrayy = []
    $('#cartrows tr').each(function(i, n) {
        // debugger;
        var $row = $(n);
        var name = $row.find('#prodname').text();
        var price = parseFloat($row.find('#price').text().split("$")[1].trim());
        var qty = parseInt($row.find('#qty').text());
        var total = parseFloat($row.find('#total').text().split("$")[1].trim());

        // console.log(name);
        // console.log(price);
        // console.log(qty);
        // console.log(total);

        var ArrayData = {
            name: name,
            price: price,
            quantity: qty,
            total: total,
        };

        Arrayy.push(ArrayData);
    })

    var newobj = {
        shippingCharges: shippingcharges,
        totalBill: totalbill,
        totalQty: totalqty,
        products: Arrayy
    }
    // console.log(newobj)

    var myObj = JSON.stringify(newobj);
    console.log(myObj);

    $.ajax({
        type: "POST",
        url: "{{ route('shop.post') }}",
        data: {
            myObj,
            _token: '{{csrf_token()}}'
        },
        dataType: "json",
        success: function(data) {

            // console.log(data.success);
            // alert(data.success);
            swal({
                    title: "Message",
                    text: data.success,
                    timer: 2000,
                    showConfirmButton: false,
                    type: "success"
                })
                .then(function() {}, function() {
                    // redirect after alert has been displayed
                    localStorage.removeItem("shop_cart");
                    // location.reload();
                    window.location.replace("/portal/index");
                });
        }
    });
}
</script>

@endsection