@extends('front.layouts.app')
@section('content')
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url(front/assets/images/backgrounds/page-header-bg.jpg)">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Shop</li>
                </ul>
                <h2>Cart</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Start Cart Page-->
    <section class="cart-page">
        <div class="container">
            @if(request()->session()->has('success'))
                <div class="alert alert-success text-center mb-5">
                    Thank you! ... Your order has been submitted!
                </div>
            @endif
            @if(request()->session()->has('error'))
                <div class="alert alert-danger text-center mb-5">
                    Sorry! ... Email not sent! ... contact us on <a href="tel:+96179176111">+96179176111</a>
                </div>
            @endif
            <div class="table-responsive">
                <table class="table cart-table">
                    <thead>
                    <tr>
                        <th>Item</th>
                        <th>Price</th>
                        <th>Color</th>
                        <th>Quantity</th>
                        <th>Total</th>
                        <th>Remove</th>
                    </tr>
                    </thead>
                    <tbody id="cartBody">

                    </tbody>
                </table>
            </div>

            <div class="row">
                <div class="col-xl-8 col-lg-7">
                </div>
                <div class="col-xl-4 col-lg-5">
                    <ul class="cart-total list-unstyled">
                        <li>
                            <span>Subtotal</span>
                            <span class="cart_sub_total">$0 </span>
                        </li>
                        <li>
                            <span>Shipping cost</span>
                            <span>$3</span>
                        </li>
                        <li>
                            <span>Total</span>
                            <span class="cart_total">$0</span>
                        </li>
                    </ul>

                    <form method="POST" action="{{route('arabiaMobiles.checkout')}}">
                        @csrf
                        <input type="hidden" name="cart">
                        <div class="form-group mb-2">
                            <label><b>You Name</b></label>
                            <input type="text" placeholder="Enter your full name" required class="form-control"
                                   name="full_name">
                        </div>
                        <div class="form-group mb-2">
                            <label><b>You Email</b></label>
                            <input type="text" placeholder="Enter your email" class="form-control" name="email">
                        </div>
                        <div class="form-group mb-2">
                            <label><b>You Phone</b></label>
                            <input type="text" placeholder="Enter your phone" required class="form-control"
                                   name="phone">
                        </div>
                        <div class="form-group mb-2">
                            <label><b>You Address</b></label>
                            <input type="text" placeholder="Enter your address" required class="form-control"
                                   name="address">
                        </div>
                        <button class="thm-btn mt-3">Checkout</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--End Cart Page-->

@endsection

@push('js')
    <script>

        @if(request()->session()->has('success'))
        localStorage.removeItem('shoppingCart');
        loadCart();
        @endif
    </script>
@endpush