@extends('layouts.frontend.app')

@section('content')
<style>
    .card{
        background: #eee;
        padding: 30px;
    }
    .about-section-four .text-column{
        margin-bottom: 35px;
    }
</style>

<section class="page-banner">
    <div class="image-layer" style="background-image: url(/frontend/images/background/banner-bg-1.jpg);"></div>

    <div class="auto-container">
        <div class="breadcrumb-box">
            <div class="auto-container">
                <ul class="bread-crumb clearfix">
                    <li><a href="{{url('/')}}">Home</a></li>
                    <li class="active">Order Review</li>
                </ul>
            </div>
        </div>
    </div>

</section>
<section class="about-section-four">

        <div class="auto-container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/checkout')}}">Checkout</a></li>
                <li class="breadcrumb-item active" aria-current="page">Order Summary</li>
            </ol>
        </nav>	
        	<div class="row clearfix">
                
				<div class="text-column col-lg-6 col-md-6 col-sm-12">
                    <div class="card">
						
                        <div class="card-box">

                            <h5 class="text-muted text-uppercase m-t-0 m-b-20"><b>Billing Address</b></h5>

                            <div class="p-20">

                                <p>
                                    <strong>{{$userInformation->name}}</strong><br>
                                    {{$userInformation->address}}, <br>
                                    {{$userInformation->city}} {{$userInformation->zip_code}}<br>
                                    Phone: {{$userInformation->phone}} 
                                </p>

                            </div>     

                        </div>
					</div>
				</div>
                <!--Text Column-->
                <div class="text-column col-lg-6 col-md-6 col-sm-12">
                    <div class="card">
                        <div class="card-box">

                            <h5 class="text-muted text-uppercase m-t-0 m-b-20"><b>Shipping Address</b></h5>

                            <div class="p-20">

                                <p>
                                    <strong>{{$shippingDetails->name}}</strong><br>
                                    {{$shippingDetails->address}}, <br>
                                    {{$shippingDetails->city}} {{$shippingDetails->zip_code}}
                                    Phone: {{$shippingDetails->phone}} 
                                </p>

                            </div>     

                        </div>
                    </div>
                </div>
                <div class="text-column col-lg-12 col-md-12 col-sm-12">
                
                            <h5 class="text-muted text-uppercase m-t-0 m-b-20"><b>Order Items</b></h5>
                            <table id="cart" class="table table-hover table-condensed">
                                <thead>
                                <tr>
                                    <th style="width:50%">Product</th>
                                    <th style="width:10%">Price</th>
                                    <th style="width:10%">Size</th>
                                    <th style="width:8%">Quantity</th>
                                    <th style="width:22%" class="text-center">Subtotal</th>
                                    <th style="width:10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                                                        @foreach($userCart as $cart)	
                                    <tr>
                                        <td data-th="Product">
                                        <div class="row">
                                            <div class="col-sm-2 hidden-xs">
                                                <img src="{{URL::asset('storage/product/thumbnail/'. $cart->product_image)}}" alt="" class="img-responsive" />
                                            </div>
                                            <div class="col-sm-10">
                                            <h4 class="nomargin">{{$cart->product_name}}</h4>
                                            <h4 class="nomargin">{{$cart->productpart_name}}</h4>
                                            </div>
                                        </div>
                                        </td>
                                        <td data-th="Price">${{$cart->price}}</td>
                                        <td data-th="Size">{{$cart->size}}</td>
                                        <td data-th="Quantity">
                                        <input type="number" class="form-control text-center" value="{{$cart->quantity}}">
                                        </td>
                                        <td data-th="Subtotal" class="text-center">${{ $cart->total }}</td>
                                        
                                    </tr>
                                                                        @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2" class="hidden-xs"></td>
                                        <td class="hidden-xs text-center"><strong>Total $0</strong></td>
                                        <td>
                                            <form name="checkoutForm" id="checkoutForm" method="POST" action="{{url('/place-order')}}">@csrf                                        
                                                <input type="hidden" name="grand_total" value="{{ $total_amount }}">
                                                <input type="hidden" name="payment_method" value="Paypal">
                                                <button type="submit" class="btn btn-success btn-block">Place order</button>
                                            </form>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                </div>
            </div>
</section> 

@endsection