@extends('front.layout.app')
@section('content')

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>


    <section class="customization customization-cart">
        <div class="container-fluid">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{asset('home.front')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Cart</li>
            </ol>
            <h2 class="heading heading--sm heading--border text-center mb-5">CHECKOUT</h2>
            <div class="row">
                <div class="col-md-7">
                    <div class="check-biling">
                        <h2 class="biling-heading">Billing details</h2>
                        <form class="checkout-form" action="{{route('payment.cart.form')}}" method="post"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" name="fname" placeholder="First name:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="lname" placeholder="Last name:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="cname" placeholder="Company name(optional):">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="country" placeholder="Country/Region:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="address" placeholder="Street address:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="apt" placeholder="Apt, Suite, Unit:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="city" placeholder="City:*">
                                </div>
                                <div class="col-md-6">
                                    <select name="state">
                                        <option>State:*</option>
                                        <option value="state1">State1:*</option>
                                        <option value="state2">State1:*</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <input type="number" name="phone_number" placeholder="Phone:*">
                                </div>
                                <div class="col-md-6">
                                    <input type="number" name="postal_code" placeholder="Postal code:*">
                                </div>
                                <div class="col-md-12">
                                    <textarea name="instruction" placeholder="Write delivery Instructions"></textarea>
                                    <div class="check-save">
                                        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                        <label for="vehicle1">Save my details for a faster checkout</label>
                                    </div>
                                    <button class="themeBtn" type="submit">CONTINUE TO DELIVERY</button>
                                    {{--                                    <a href="{{route('success.front')}}" class="themeBtn">CONTINUE TO DELIVERY</a>--}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="order-summary">
                        <h2 class="biling-heading">ORDER SUMMARY</h2>
                        @foreach(\Illuminate\Support\Facades\Session::all()['cart'] as $item)
                            <div class="fabric-list">
                                <figure>
                                    <img src="{{asset('data/product_images/'.($item['image'] ?? ''))}}"
                                         class="img-fluid" alt="img">
                                </figure>
                                <div class="fablist-content">
                                    <h2>{{$item['name'] ?? ''}}</h2>
                                    <p>Color: <strong>Pink</strong></p>
                                    <p>Quantity: <strong>{{$item['quantity'] ?? ''}}</strong></p>
                                </div>

                                <div class="info">
                                    <h4>₦{{number_format($item['price'] ?? '')}}</h4>
                                </div>

                            </div>

                        @endforeach
                        @php
                            $total = 0;
$savedMoney = 0;
    foreach (\Illuminate\Support\Facades\Session::all()['cart'] as $item){
                                $total += $item['price'] * $item['quantity'];
                                $savedMoney += $item['old_price'] * $item['quantity'];
    }

                        @endphp
                        <div class="sub-total">
                            <ul>
                                <li>Subtotal ({{ count(session('cart')) }} Items)
                                    <strong>₦{{number_format($total,2)}}</strong></li>
                                <li>Savings <strong>-₦{{number_format($savedMoney,2)}}</strong></li>
                            </ul>
                            <ul>
                                <li>Shipping <strong>₦0.00</strong></li>
                            </ul>
                            <ul>
                                <li><strong>total</strong> <strong>₦{{number_format($total,2)}}</strong></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


{{--            <div class="row">--}}


{{--                <div class="col-md-7">--}}
{{--                    <h2 class="biling-heading">Payment method</h2>--}}
{{--                    <p>All transactions are secured & encrypted</p>--}}
{{--                    <div class="paymentWrap">--}}

{{--                        <h2 class="biling-heading">Credit card</h2>--}}
{{--                        <p>We accept all major credit cards</p>--}}
{{--                        <img src="{{asset('assets/images/payment.png')}}" class="img-fluid" alt="">--}}
{{--                        <p>Enter your card details</p>--}}
{{--                        <form class="checkout-form">--}}
{{--                            <div class="row">--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <input type="text" placeholder="Name of card:*">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <input type="number" placeholder="Card number:*">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <input type="date" placeholder="Expiry date(MM/YY):*">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <input type="text" placeholder="Security code:*">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-12">--}}

{{--                                    <div class="check-save">--}}
{{--                                        <input type="checkbox" id="card_detail" name="card_detail"--}}
{{--                                               value="Save my card details for a faster checkout">--}}
{{--                                        <label for="vehicle1">Save my card details for a faster checkout</label>--}}
{{--                                    </div>--}}
{{--                                    --}}{{--                                <button class="themeBtn">PAY NOW</button>--}}
{{--                                    <a href="{{route('success.front')}}" class="themeBtn">PAY NOW</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </form>--}}
{{--                    </div>--}}
{{--                </div>--}}


{{--            </div>--}}


        </div>
    </section>
@endsection