@extends('frontend.partials.layout')
@section('content')
<section id="cart" style="background-image: url({{env('APP_URL').$cart->background}}) !important;">
    <div class="container">
        <h1>SHOPPING CART</h1>
        <div class="cart-table">
            <div class="row">
                <div class="col-lg-4 cart-col">
                    <p>Product</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <p>Price</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <p>Quantity</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <p>Total</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <a class="cart-delete-btn" href="{{route('frontend_cart_delete_all')}}">Delete all</a>
                </div>
            </div>
            <!--foreach-->
            @if(!empty($cart->items))
           @foreach($cart->items as $key => $c)

            <div class="row centered-row">
                <div class="col-lg-4 cart-col">
                    <p>{{$c['game']->name}}<br>
                                                Reservation date: {{$datetime[0]}}<br>
                        Reservation time: {{$datetime[1]}}</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <p>$ {{$c['price']}}</p>
                </div>
                <div class="col-lg-2 cart-col">
                    <p><span id="ticket-number-{{$key}}">4</span> tickets available</p>
                    <input type="number" id="qty_{{$key}}" min="1" max="{{$c['game']->ticket_amount}}" value="{{$c['player_num']}}" class="cart-qty">
                </div>
                <div class="col-lg-2 cart-col">
                    <p class="red-text">$ <span id="sum_{{$key}}">{{$c['sum_price']}}</span></p>
                </div>
                <div class="col-lg-2 cart-col">
                    <a class="cart-delete-btn" href="{{route('frontend_cart_delete', [$key])}}">Delete</a>
                </div>
            </div>
            @endforeach
            @else
                <p class="text-center">Your cart is empty!</p>
            @endif
            <!--endforeach-->
        </div>
        <div class="row">
        <div class="col-lg-6 discount-wrapper">
            <div class="promocode-wrapper">
                <p class="promocode">Promocode:</p>
                <input type="text" class="promocode-input" id="promocode-input" value="{{$cart->promocode}}" />
                <span id="promo_status"></span>
            </div>
            <div class="giftcard-wrapper">
                <p class="giftcard">Giftcard:</p>
                <input type="text" class="giftcard-input" id="giftcard-input" value="{{$cart->giftcard}}" />
                <span id="giftcard_status"></span>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="row pt15">
                <div class="col-lg-6 text-right pr">
                    <span class="sub-total">Sub-total:</span>
                </div>
                <div class="col-lg-6 text-left pl">
                    <span class="sub-total">$<span id="subtotal">{{$cart->subtotal}}</span></span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 text-right pr">
                    <span class="sub-total">Discounts:</span>
                </div>
                <div class="col-lg-6 text-left pl">
                    <span class="sub-total" >$ <span id="discounts">{{$cart->discounts}}</span></span>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-lg-6 text-right pr">
                    <span class="sub-total">Tax:</span>
                </div>
                <div class="col-lg-6 text-left pl">
                    <span class="sub-total" id="discounts">$ 00</span>
                </div>
            </div>-->
            <div class="row">
                <div class="col-lg-6 text-right pr">
                    <span class="grand-total">Grand total:</span>
                </div>
                <div class="col-lg-6 text-left pl">
                    <span class="grand-total">$ <span id="grand-total">{{$cart->total_price}}</span></span>
                </div>
            </div>
        </div>
        </div>
        <div class="row">
            <div class="col-lg-6 text-center">
                <a href="{{ env('APP_URL') }}#rooms" class="cart-button"><i class="fa fa-plus"></i> ADD MORE</a>
            </div>
            <div class="col-lg-6 text-center">
                <a href="{{route('frontend_checkout_details')}}" class="cart-button">Checkout</a>
            </div>
        </div>

    </div>

<section id="process">
    <div class="container">
        <div class="row">
            <div class="d-none d-md-block d-lg-block d-xl-block col-lg-12">
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-2">
                        <h2 class="t-button-header">
                            <a href="#" class="t-button">FIND A DATE</a>
                        </h2>
                    </div>
                    <div class="col-lg-2">
                        <h2 class="t-button-header">
                            <a href="#" class="t-button">SHOPPING CART</a>
                        </h2>
                    </div>
                    <div class="col-lg-2">
                        <h2 class="t-button-header">
                            <a href="#" class="t-button">PAYMENT INFO</a>
                        </h2>
                    </div>
                    <div class="col-lg-2">
                        <h2 class="t-button-header">
                            <a href="#" class="t-button">CONFIMATION</a>
                        </h2>
                    </div>
                    <div class="col-lg-2">
                        <h2 class="t-button-header">
                            <a href="#" class="t-button">THANK YOU</a>
                        </h2>
                    </div>
                    <div class="col-lg-1"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</section>
@endsection