@extends('frontends.layouts.app')
@section('content')

    <section class="py-16 lg:py-24 bg-[#f6f6f6]">
        <div class="container mx-auto">
            @if($cartItems->count() !== 0)
                <form action="{{ route('checkout.store') }}" method="POST" class="checkout-content-wrapper">
                    @csrf
                    <div class="billing-details-content">
                        <h2 class="text-xl mb-4">Billing Details</h2>
                        <div class="mb-4">
                            <label class="text-sm font-medium mb-3 inline-block" for="name">Your Name <span class="mandatory">*</span></label>
                            <input class="text-md text-[#333] block w-full bg-[#13131808] rounded-xl p-4 focus:outline-0 focus:outline-none border border-transparent focus:border-primaryColor @if($errors->has('name')) error-border-for-validation @endif" type="text" name="name" id="name" placeholder="Enter your full name" value="{{ old('name') }}">
                            @if($errors->has('name'))
                                <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                            @endif
                        </div>
                        <div class="mb-4">
                            <label class="text-sm font-medium mb-3 inline-block" for="enterpriseName">Shop / Enterprise Name <span class="mandatory">*</span></label>
                            <input class="text-md text-[#333] block w-full bg-[#13131808] rounded-xl p-4 focus:outline-0 focus:outline-none border border-transparent focus:border-primaryColor @if($errors->has('enterprise_name')) error-border-for-validation @endif" type="text" name="enterprise_name" id="enterprise_name" placeholder="Enter your shop / enterprise name" value="{{ old('enterprise_name') }}">
                            @if($errors->has('enterprise_name'))
                                <div class="invalid-feedback">{{ $errors->first('enterprise_name') }}</div>
                            @endif
                        </div>
                        <div class="mb-4">
                            <label class="text-sm font-medium mb-3 inline-block" for="phone_number">Phone Number <span class="mandatory">*</span></label>
                            <input class="text-md text-[#333] block w-full bg-[#13131808] rounded-xl p-4 focus:outline-0 focus:outline-none border border-transparent focus:border-primaryColor remove-arrow @if($errors->has('phone_number')) error-border-for-validation @endif" type="text" name="phone_number" id="phone_number" minlength="11" maxlength="11" placeholder="Enter your phone number" value="{{ old('phone_number') }}" onkeydown="return event.keyCode !== 69 && event.keyCode !== 187 && event.keyCode !== 189 && event.keyCode !== 107 && event.keyCode !== 109" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;">
                            @if($errors->has('phone_number'))
                                <div class="invalid-feedback">{{ $errors->first('phone_number') }}</div>
                            @endif
                        </div>
                        <div class="mb-4">
                            <label class="text-sm font-medium mb-3 inline-block" for="name">Your Address <span class="mandatory">*</span></label>
                            <input class="text-md text-[#333] block w-full bg-[#13131808] rounded-xl p-4 focus:outline-0 focus:outline-none border border-transparent focus:border-primaryColor @if($errors->has('address')) error-border-for-validation @endif" type="text" name="address" id="address" placeholder="Enter your address..." value="{{ old('address') }}">
                            @if($errors->has('address'))
                                <div class="invalid-feedback">{{ $errors->first('address') }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="place-order-content-wrapper">
                        <div class="place-order-content">
                            <h2 class="text-xl mb-4">Your Order</h2>
                            <div class="checkout-content">
                                <div class="checkout-header checkout-content-list">
                                    <h4>Product</h4>
                                    <h4>Subtotal</h4>
                                </div>
                                <div class="checkout-cart-list">
                                    @foreach($cartItems as $item)
                                        <div class="single-cart-item" data-item-id="{{ $item['id'] }}">
                                            <input type="hidden" name="id" value="{{ $item['id'] }}">
                                            <input type="hidden" name="items[{{ $item['id'] }}][product_id]" value="{{ $item['product_id'] }}">
                                            <div class="cart-item-info-wrapper flex items-center">
                                                <button class="cartItemRemoveBtn" type="button"><i class="las la-times"></i></button>
                                                <div class="cart-item-info flex items-center">
                                                    <img src="{{ $item['img'] }}" alt="{{ $item['title'] }}">
                                                    <input type="hidden" name="items[{{ $item['id'] }}][img]" value="{{ $item['img'] }}">
                                                    <div>
                                                        <h6>{{ $item['title'] }} <span> - {{ $item['weight'] }}</span></h6>
                                                        <input type="hidden" name="items[{{ $item['id'] }}][title]" value="{{ $item['title'] }}">
                                                        <input type="hidden" name="items[{{ $item['id'] }}][weight]" value="{{ $item['weight'] }}">
                                                        <input type="hidden" name="items[{{ $item['id'] }}][price]" value="{{ $item['sales_price'] }}">
                                                        <div class="flex">
                                                            <button class="checkoutMinusBtn" type="button"><i class="las la-minus"></i></button>
                                                            <input class="checkoutQtyInput" name="items[{{ $item['id'] }}][quantity]" type="number" value="{{ $item['quantity'] }}" placeholder="1" min="1" onkeydown="return event.keyCode !== 69 &amp;&amp; event.keyCode !== 187 &amp;&amp; event.keyCode !== 189 &amp;&amp; event.keyCode !== 107 &amp;&amp; event.keyCode !== 109" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;">
                                                            <button class="checkoutPlusBtn" type="button"><i class="las la-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="singleItemSubTotalPrice">{{ $item['sales_price'] * $item['quantity'] }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="checkout-content-list price">
                                    <p>Subtotal</p>
                                    <p class="sub-total-price"><span class="subTotalPrice">{{ $subTotal }}</span> ৳</p>
                                    <input type="hidden" id="subTotalPriceInput" name="subTotalPrice" value="{{ $subTotal }}">
                                </div>
                                <div class="checkout-content-list">
                                    <p>Shipping</p>
                                    <div class="shipping-charge-list">
                                        <div class="single-shipping-charge">
                                            <label for="insideDhaka">
                                                Inside Dhaka: <span>50 ৳</span>
                                            </label>
                                            <input type="radio" name="shippingCharge" id="insideDhaka" value="50" checked>
                                        </div>
                                        <div class="single-shipping-charge">
                                            <label for="outsideDhaka">
                                                Outside Dhaka: <span>80 ৳</span>
                                            </label>
                                            <input type="radio" name="shippingCharge" id="outsideDhaka" value="80">
                                        </div>
                                    </div>
                                </div>
                                <div class="checkout-content-list price">
                                    <h4>Total</h4>
                                    <h3><span class="totalPrice">0</span> ৳</h3>
                                    <input type="hidden" name="totalPrice" id="totalPriceInput" value="">
                                </div>
                            </div>
                            <p class="note">Cash on delivery</p>
                            <div class="cashOnDeliveryNote">
                                <p>Pay with cash upon delivery.</p>
                            </div>
                            <p class="policyMsg">Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.</p>
                            <button type="submit" class="placeOrderBtn bg-primaryColor w-full text-center p-[10px] rounded-lg text-white text-xl mt-6 block">Place Order</button>
                        </div>
                    </div>
                </form>
            @elseif(session('orderSuccess'))
                <div class="checkoutSuccessContent">
                    <h1>Your Order Placed has been Successfully.</h1>
                    <p>We will contact with you as soon as.</p>
                    <p class="goBackMsg">Go to the <a href="/"> Home </a>Page</p>
                </div>
            @else
                <div class="emptyCartMsgBody">
                    <p class="emptyCartMsg">Your cart is empty.</p>
                    <p class="goBackMsg">Go to the <a href="/"> Home </a>Page</p>
                </div>
            @endif
        </div>
    </section>

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            let cartItemRemoveBtn = document.querySelectorAll('.cartItemRemoveBtn');

            let subTotalPrice = parseInt(document.querySelector('.subTotalPrice').innerText);

            let totalPrice = document.querySelector('.totalPrice');
            let totalPriceInput = document.getElementById('totalPriceInput');
            let total = 0;

            let shippingChargeInput = document.querySelectorAll('.single-shipping-charge input');
            let shippingCharge = 0;

            shippingChargeInput.forEach((radio) => {
                if(radio.checked) {
                    shippingCharge = parseInt(radio.value);
                    setTotalPrice();
                }
                radio.addEventListener('change', function (event) {
                    shippingCharge = parseInt(event.target.value);
                    setTotalPrice();
                })
            })

            function setTotalPrice() {
                total = subTotalPrice + shippingCharge;
                totalPrice.innerText = total;
                totalPriceInput.value = total;
            }

            // Qty increment decrement
            let checkoutPlusBtn  = document.querySelectorAll('.checkoutPlusBtn');
            let checkoutMinusBtn  = document.querySelectorAll('.checkoutMinusBtn');

            checkoutPlusBtn.forEach((plus) => {
                let timeoutId;
                plus.addEventListener('click', function (event) {
                    clearTimeout(timeoutId);
                    let singleItem = event.target.closest('.single-cart-item');

                    let singleItemSubTotalPriceField = singleItem.querySelector('.singleItemSubTotalPrice');
                    let singleItemSubTotalPrice = parseInt(singleItemSubTotalPriceField.innerText);

                    let input = plus.previousElementSibling;
                    let qtyValue = parseInt(input.value, 10) || 0;

                    let itemPrice = singleItemSubTotalPrice / qtyValue;

                    qtyValue++;

                    input.value = qtyValue.toString();

                    let newItemSubTotalPrice = itemPrice * qtyValue;

                    singleItemSubTotalPriceField.innerText = newItemSubTotalPrice.toString();

                    changeOfPrice();

                    timeoutId = setTimeout(() => {

                    }, 1000);
                })
            })

            checkoutMinusBtn.forEach((minus) => {
                let timeoutId;
                minus.addEventListener('click', function (event) {
                    clearTimeout(timeoutId);
                    let singleItem = event.target.closest('.single-cart-item');

                    let singleItemSubTotalPriceField = singleItem.querySelector('.singleItemSubTotalPrice');
                    let singleItemSubTotalPrice = parseInt(singleItemSubTotalPriceField.innerText);

                    let input = minus.nextElementSibling;
                    let qtyValue = parseInt(input.value, 10) || 0;

                    let itemPrice = singleItemSubTotalPrice / qtyValue;

                    if(qtyValue === 1) return;
                    qtyValue--;

                    input.value = qtyValue.toString();

                    let newItemSubTotalPrice = itemPrice * qtyValue;

                    singleItemSubTotalPriceField.innerText = newItemSubTotalPrice.toString();

                    changeOfPrice();

                    timeoutId = setTimeout(() => {

                    }, 1000);
                })
            })

            function changeOfPrice() {
                let singleItemSubTotal = document.querySelectorAll('.singleItemSubTotalPrice');

                let subTotalPriceInput = document.getElementById('subTotalPriceInput');

                let summationSubTotalPrice = 0;
                let total = 0;

                let subTotalPrice = document.querySelector('.subTotalPrice');

                singleItemSubTotal.forEach((single) => {
                    let singleSubTotalPrice = parseInt(single.innerText);
                    summationSubTotalPrice = summationSubTotalPrice + singleSubTotalPrice;
                })

                total = summationSubTotalPrice + shippingCharge;

                subTotalPrice.innerText = summationSubTotalPrice.toString();
                subTotalPriceInput.value = summationSubTotalPrice.toString();
                totalPrice.innerText = total;
                totalPriceInput.value = total;
            }

            // item removing
            cartItemRemoveBtn.forEach((remove) => {
                remove.addEventListener('click', function (event) {
                    let singleItem = event.target.closest('.single-cart-item');
                    singleItem.remove();
                    changeOfPrice();
                })
            })

        })

    </script>

@endsection