@extends('sales.layout.guest-layout')
@section('main')
    <section class="mt-4 mb-4 position-relative">
        <div class="container-xxl">
            <form action="{{route('sales.placeorder')}}" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="row g-5 justify-content-end">
                    <div class="col-lg-9 col-md-12">
                        <div class="table-card pt-2">
                            <div class="table-responsive table-scroll mt-1">
                                <table class="table table-hover">
                                    <thead class="text-center ">
                                        <tr>
                                            <th>S.No.</th>
                                            <th>Image</th>
                                            <th>Product</th>
                                            <th>Quantity</th>
                                            <th>Unit Price</th>
                                            <th>Sale Price</th>
                                            <th>Total Sale Price</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        @if ($cart && $cart->salescartitems->count() > 0)
                                            @foreach ($cart->salescartitems as $key => $item)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td>
                                                        @if (count($item?->saleproduct->images))
                                                            <img src="{{ asset($item?->saleproduct?->images[0]->image_url) }}"
                                                                width="50" height="50">
                                                        @else
                                                            <img src="{{ asset('frontend/assets/images/default.png') }}"
                                                                class="img-fluid w-100">
                                                        @endif
                                                    </td>
                                                    <td>{{ $item->saleproduct->name }}</td>
                                                    <td>
                                                        <div class="counter">
                                                            <input class="counter__input"
                                                                id="quantity-{{ $item->id }}-{{ $cart->id }}"
                                                                readonly="" type="text"
                                                                value="{{ old('quantity.' . $item->id, $item->quantity) }}"
                                                                name="quantity[{{ $item->id }}]" size="5">

                                                            <a class="counter__incrementt" data-id="{{ $item->id }}"
                                                                href="javascript:void(0)" contenteditable="false"
                                                                style="cursor: pointer;">+</a>
                                                            <a class="counter__decrementt" data-id="{{ $item->id }}"
                                                                href="javascript:void(0)" contenteditable="false"
                                                                style="cursor: pointer;">–</a>
                                                        </div>
                                                    </td>

                                                    <td>${{ number_format($item->saleproduct->price, 2) }}</td>
                                                    <td>${{ number_format($item->saleproduct->price, 2) }}</td>
                                                    <td id="total_selling_price_{{ $item->id }}">
                                                        ${{ number_format($item->total_amount, 2) }}</td>
                                                    <td>
                                                        <a href="{{ route('sales.cart.delete', $item->id) }}"
                                                            onclick="return confirm('Do you want to remove this item from the cart?');">
                                                            <i class="fas fa-trash" style="color:red;"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="8" style="text-align: center;">
                                                    <img src="{{ asset('sales/cart_is_empty.png') }}" alt="">
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 billingSummary">
                        <div class="payment-card">
                            <div class="payment-heading">
                                <h3>Order Summary</h3>
                            </div>
                            <table class="w-100 mt-3 border-top">
                                <tbody>
                                    <tr>
                                        <td colspan="2"><strong>Total Amount </strong></td>
                                        <td colspan="1" class="totalAmount">
                                            ${{ number_format($cart->total_amount ?? 0, 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2"><strong>No. of Products</strong></td>
                                        <td colspan="1" class="number_of_product">{{ $cart->items_count ?? 0 }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2"><strong>HST Amount</strong></td>
                                        <td colspan="1" class="hstAmount">${{ number_format($cart->tax ?? 0, 2) }}</td>
                                    </tr>
                                    <tr class="border-top">
                                        <td colspan="2">
                                            <h2><strong> Grand Total</strong></h2>
                                        </td>
                                        <td colspan="1">
                                            <input type="hidden" class="grand_amount" name="grand_amount"
                                                value="{{ $cart->grand_total ?? 0 }}">
                                            <h2 class="grandAmount">${{ number_format($cart->grand_total ?? 0, 2) }}</h2>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <button class="proceed-btn mt-2" type="submit">Proceed</button>
                        </div>
                    </div>
                </div>

            </form>


        </div>
    </section>
    <style>
        /* counter start  */

        .counter__incrementt,
        .counter__decrementt {
            transition: all 0.4s ease-in-out;
        }

        .counter {
            position: relative;
            width: 6.5rem;
            height: 1.875rem;
            border-radius: 3px;
            text-align: center;
            overflow: hidden;
            margin: auto;
        }

        .counter__input {
            border: none;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            color: #2f3640;
            font-size: 14px;
            background-color: transparent;
            border: 1px solid #57B05B;
            outline: none;
        }

        .counter__incrementt,
        .counter__decrementt {
            position: absolute;
            top: 0;
            font-size: 16px;
            line-height: 30px;
            height: 30px;
            width: 30px;
            font-weight: normal;
            color: #fff;
            text-decoration: none;
            background-color: #57B05B;
        }

        .counter__incrementt:hover,
        .counter__incrementt:active,
        .counter__incrementt:focus,
        .counter__decrementt:hover,
        .counter__decrementt:active,
        .counter__decrementt:focus {
            color: #ffffff;
            text-decoration: none;
            background-color: #57B05B;
        }

        .counter__incrementt {
            right: 0;
            border-left: 1px solid #2f3640;
        }

        .counter__decrementt {
            left: 0;
            top: 0;
            border-right: 1px solid #2f3640;
            line-height: 1.6875rem;
        }

        .product_image img {
            width: 100px !important;
            height: 50px !important;
            object-fit: cover;
            object-position: center center;
        }

        tr .elseImage:hover {
            background: #fff !important;
        }

        .search-btn-1 {
            margin-top: -60px;
            margin-left: 85%;
        }

        button {
            border: none !important;
        }
    </style>
    <script>
        $(document).on('click', '.counter__incrementt, .counter__decrementt', function(e) {
            // $(".counter__incrementt, .counter__decrementt").click(function(e) {
            var cart_id = $(this).data('id');
            var $this = $(this);
            var $counter__input = $(this).parent().find(".counter__input");
            var $currentVal = parseInt($(this).parent().find(".counter__input").val());
            if ($currentVal != NaN && $this.hasClass('counter__incrementt')) {
                $realVal = $currentVal + 1;
                $counter__input.val($realVal);
                // console.log("cart_id = "+cart_id);
                $.ajax({
                    url: "{{ route('sales.cart.update') }}",
                    type: "get",
                    data: {
                        cart_id: cart_id,
                        product_qty: $realVal
                    },
                    success: function(data) {
                        c_id = data.cartData.id;
                        $(".grandAmount").html('$' + data.grand_amount);
                        $(".hstAmount").html('$' + data.hst_amount);
                        $(".totalAmount").html('$' + data.total_amount);
                        $("#total_selling_price_" + c_id).empty();
                        $("#total_selling_price_" + c_id).append('$' + data.cartData
                            .total_selling_price);
                        $(".grand_amount").val(data.grand_amount);
                        $(".hst_amount").val(data.hst_amount);
                        $(".ttl_amount").val(data.total_amount);
                    }
                });
            } else if ($currentVal != NaN && $this.hasClass('counter__decrementt')) {
                if ($currentVal > 1) {
                    $realVal = $currentVal - 1;
                    $counter__input.val($realVal);
                    // console.log("cart_id = "+cart_id);
                    $.ajax({
                        url: "{{ route('sales.cart.update') }}",
                        type: "get",
                        data: {
                            cart_id: cart_id,
                            product_qty: $realVal
                        },
                        success: function(data) {
                            c_id = data.cartData.id;
                            $(".grandAmount").html('$' + data.grand_amount);
                            $(".hstAmount").html('$' + data.hst_amount);
                            $(".totalAmount").html('$' + data.total_amount);
                            $("#total_selling_price_" + c_id).empty();
                            $("#total_selling_price_" + c_id).append('$' + data.cartData
                                .total_selling_price);
                            $(".grand_amount").val(data.grand_amount);
                            $(".hst_amount").val(data.hst_amount);
                            $(".ttl_amount").val(data.total_amount);
                        }
                    });
                }
            }
        });
    </script>

@endsection