@extends('layouts.store')
@section('body')
    <section class="py-3 bg-light-grey">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/store"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-arrow-return-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
                        </svg> Back</a></li>
            </ol>
        </div>
    </section>
    <!-- ========================= SECTION CONTENT ========================= -->
    <section class="section-content padding-y">
        <div class="container">
            <div class="row">
                <main class="col-md-9">
                    <div class="card">

                        @if (count($carts) == 0)
                            <p class="p-5 text-center text-muted">No Item.</p>
                        @else
                            <table class="table table-borderless table-shopping-cart">
                                <thead class="text-muted">
                                    <tr class="small text-uppercase">
                                        <th scope="col">Product</th>
                                        <th scope="col" width="120">Quantity</th>
                                        <th scope="col" width="150">Price</th>
                                        <th scope="col" class="text-right" width="200"> </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($carts as $cart)
                                        <tr>
                                            <td>
                                                <figure class="itemside">
                                                    <div class="aside">
                                                        @if ($cart->product->featured_image)
                                                            <a href="{{ $cart->product->featured_image->getUrl() }}"
                                                                target="_blank" style="display: inline-block">
                                                                <img class="img-sm"
                                                                    src="{{ $cart->product->featured_image->getUrl() }}">
                                                            </a>
                                                        @else
                                                            <a href="#" class="img-sm"> <img
                                                                    src="{{ $cart->product->category->image->getURL('preview') }}">
                                                            </a>
                                                        @endif
                                                    </div>
                                                    <figcaption class="info">
                                                        <a href="#" class="title text-dark">{{ $cart->product->name }}</a>
                                                        {{-- <p class="text-muted small">Size: XL, Color: blue, <br> Brand: Gucci
</p> --}}
                                                    </figcaption>
                                                </figure>
                                            </td>
                                            <td>
                                                <input type="hidden" id="price{{ $cart->id }}"
                                                    value="{{ $cart->product->price_range }}">
                                                <input type="number" class="form-control"
                                                    onchange="price({{ $cart->id }})" min="1" name="qty"
                                                    id="qty{{ $cart->id }}" value="{{ $cart->qty ?? ' 1' }}">
                                            </td>
                                            <td>
                                                <div class="price-wrap">
                                                    @php
                                                        $total = (int) $cart->product->price_range * $cart->qty;
                                                        if ($total == 0) {
                                                            echo '<b>Custom Price</b>';
                                                        } else {
                                                            echo '<b id="totprice' . $cart->id . '">Rp ' . number_format($total) . '</b>';
                                                        }
                                                    @endphp
                                                    <input type="hidden" id="price">
                                                    {{-- <small class="text-muted"> $315.20 each </small> --}}
                                                </div> <!-- price-wrap .// -->
                                            </td>
                                            <td class="text-right">
                                                {{-- <a data-original-title="Save to Wishlist" title="" href=""
class="btn btn-light" data-toggle="tooltip"> <i class="fa fa-heart"></i></a> --}}
                                                <button class="btn btn-light" data-toggle="modal" data-target="#verif"
                                                    onclick="setIDs({{ $cart->id }})"> Remove</button>
                                            </td>
                                        </tr>
                                    @endforeach
                        @endif
                        </tbody>
                        </table>

                        <div class="card-body border-top">
                            @if (count($carts) != 0)
                                <button type="button" onclick="purchase()" class="btn btn-primary float-md-right"> Make
                                    Purchase <i class="fa fa-chevron-right"></i> </button>
                            @endif
                            <a href="#" class="btn btn-light"> <i class="fa fa-chevron-left"></i> Continue shopping </a>
                        </div>
                    </div> <!-- card.// -->

                    {{-- <div class="alert alert-success mt-3">
                        <p class="icontext"><i class="icon text-success fa fa-truck"></i> Free Delivery within 1-2 weeks
                        </p>
                    </div> --}}

                </main> <!-- col.// -->
                <aside class="col-md-3">
                    {{-- <div class="card mb-3">
                        <div class="card-body">
                            <form>
                                <div class="form-group">
                                    <label>Have coupon?</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="" placeholder="Coupon code">
                                        <span class="input-group-append">
                                            <button class="btn btn-primary">Apply</button>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div> <!-- card-body.// -->
                    </div> <!-- card .// --> --}}
                    <div class="card">
                        <div class="card-body">
                            <dl class="dlist-align">
                                <dt>Total price :</dt>
                                <dd class="text-right" id="total-price"></dd>
                            </dl>
                            <dl class="dlist-align">
                                <dt>PPN 10% :</dt>
                                <dd class="text-right" id="ppn"></dd>
                            </dl>
                            <dl class="dlist-align">
                                <dt>Total:</dt>
                                <dd class="text-right h5" id="pay"></dd>
                            </dl>
                            <hr>
                            <p class="text-center mb-3">
                                <img src="https://www.xendit.co/wp-content/uploads/2020/05/Partner-LogoArtboard-1-copy-1-1024x488.png"
                                    width="100%">
                            </p>

                        </div> <!-- card-body.// -->
                    </div> <!-- card .// -->
                </aside> <!-- col.// -->
            </div>

        </div> <!-- container .//  -->
    </section>
    <!-- ========================= SECTION CONTENT END// ========================= -->
    <!-- Modal -->
    <div class="modal fade" id="verif" tabindex="-1" role="dialog" aria-labelledby="verif" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete this item ?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    <button type="button" onclick="deleteCart()" class="btn btn-light">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="method" value="DELETE">
    <input type="hidden" id="token" value="{{ csrf_token() }}">

@endsection
@section('script')
    <script type="text/javascript">
        var id;
        var pay = 0;
        const token = "{!! Auth::token() !!}";
        const url = "carts/destroy";
        const data = {!! $carts !!};
        window.onload = function() {
            mount();
        };

        function mount() {

            let _totprice = 0;
            let _ppn = 0;
            data.forEach(e => {
                let _qty = $("#qty" + e.id).val();
                let _price = parseInt(_qty) * e.product.price_range;
                _totprice = _totprice + _price;
            });
            _ppn = (_totprice * (10 / 100)).toFixed(0);
            pay = parseInt(_totprice) + parseInt(_ppn);
            $("#total-price").empty();
            $("#ppn").empty();
            $("#pay").empty();
            $("#total-price").append("Rp " + _totprice.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            $("#ppn").append("Rp " + _ppn.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            $("#pay").append("Rp " + pay.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
        }

        function setIDs(_id) {
            id = _id;
        }

        function deleteCart() {
            let _token = $("#token").val();
            $.ajax({
                headers: {
                    'x-csrf-token': _token
                },
                method: 'POST',
                url: url,
                data: {
                    "id": id
                },
                success: function() {
                    location.reload();
                }
            });
        }

        function price(_id) {
            let _price = $("#price" + _id).val();
            let _qty = $("#qty" + _id).val();
            let _totprice = parseInt(_qty) * parseInt(_price);

            var ajax_load = '<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div>';

            $("#totprice" + _id).html(ajax_load).load(update(_totprice, _id));
        }

        function purchase() {
            const _orderURL = "carts/massUpdate"
            data.forEach(function(e, index) {
                data[index].qty = parseInt($("#qty" + e.id).val());
                console.log("{!! csrf_token() !!}");
            });
            $.ajax({
                headers: {
                    'x-csrf-token': "{!! csrf_token() !!}"
                },
                method: 'POST',
                url: _orderURL,
                data: {
                    "carts": data,
                    "total_price": pay
                },
                success: function(e) {
                    console.log(e);
                    window.location = "orders";
                }
            });
        }

        function update(_totprice, _id) {
            const _updateURL = "carts/" + _id;
            let _qty = $("#qty" + _id).val();
            $.ajax({
                headers: {
                    'x-csrf-token': "{!! csrf_token() !!}"
                },
                method: 'PUT',
                url: _updateURL,
                data: {
                    "qty":_qty
                },
                success: function(e) {
                    mount();
                    $("#totprice" + _id).empty();
                    $("#totprice" + _id).append("Rp " + _totprice.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,
                        "$1,"));
                    // const _orderURL = "carts"
                    // data.forEach(function(e, index) {
                    //     data[index].qty = parseInt($("#qty" + e.id).val());
                    //     console.log("{!! csrf_token() !!}");
                    // });
                }
            });
        }

        function test() {
            $("#total-price").html("OK");
        }
    </script>
@endsection