@extends('layouts.front-layout')
@section('title')
    Cart
@endsection
@section('content')

    <section class="inner-banner p-0">
        <video class="mainbanner__video" autoplay muted loop playsinline>
            <source src="{{ $setting->settingImage('home_top_banner_video') ?? '' }}" type="video/mp4">
        </video>
        <div class="container">
            <div class="inner-banner__content">
                <h1>Add To Cart</h1>
            </div>
        </div>
    </section>

    <section class="cart-section padd-y">
        <div class="container">

            <div class="product-details__title text-center">
                <h2 class="mainHead">Add To <span>Cart</span></h2>
            </div>
            <div class="row">
                @csrf
                <div class="col-12">
                    @if (session()->has('cart') && count(session('cart')) > 0)
                        @foreach (session('cart') as $id => $product)
                            <div class="cart-wrap">
                                <div class="cart-box">
                                    <figure class="cart-box-img">
                                        @php
                                            if (!empty($product)) {
                                                $products = \App\Models\Product::find($product['product_id']);
                                            }
                                        @endphp
                                        @if (isset($products))
                                            <img src="{{ $products->getFirstMediaUrl('product_image') ?? '' }}" alt="image"
                                                class="img-fluid">
                                        @endif
                                    </figure>
                                    <div class="cart-box-title">
                                        <h4>{{ $product['name'] }}</h4>
                                        <h5>&dollar;{{ number_format($product['price']) }}</h5>
                                    </div>
                                </div>
                                <div class="cart-quantity">
                                    <h5>Quantity</h5>
                                    <form class="numForm" method="POST" action="{{ route('front.cart.update', $id) }}">
                                        @csrf
                                        @method('PUT')
                                        <div class="numberone d-flex">
                                            <span class="plus" onclick="changeQuantity('add', this)"><i
                                                    class="fas fa-plus"></i></span>
                                            <input class="in-num" name="quantity"value="{{ $product['quantity'] ?? 1 }}"
                                                type="number" min="1" readonly>
                                            <span class="minus" onclick="changeQuantity('minus', this)"><i
                                                    class="fas fa-minus"></i></span>
                                        </div>
                                    </form>
                                </div>
                                <div class="cart-delete-btn">
                                    <form action="{{ route('cart.remove', $id) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="cart-delete-btn"><i class="fas fa-times"></i></button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>

            </div>
            <div class="cart-total">
                <p><em>Shipping & taxes calculated at checkout. </em></p>
                <a href="{{ route('checkout') }}" class="themeBtn">CHECK OUT</a>
            </div>
        </div>
    </section>

    <script>
        function changeQuantity(action, element) {

            var form = element.closest('form');
            var inputElement = form.querySelector('.in-num');
            var currentValue = parseInt(inputElement.value);

            if (action === 'add') {
                $('#loader-container').css('display', 'block');
                inputElement.value = currentValue + 1;
            } else if (action === 'minus' && currentValue > 1) {
                $('#loader-container').css('display', 'block');
                inputElement.value = currentValue - 1;
            }
            form.submit()

        }
    </script>
@endsection