@extends('layouts.app')

@section('content')

    <!-- Start Page Header Wrapper -->
    <div class="page-header-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="page-header-content">
                        <h2>Checkout</h2>
                        <nav class="page-breadcrumb">
                            <ul class="d-flex justify-content-center">
                                <li><a href="{{route('index')}}">Home</a></li>
                                <li><a href="{{route('products.userIndex')}}">Products</a></li>
                                <li><a href="{{route('checkout')}}" class="active">Checkout</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Header Wrapper -->

    <!--== Start Checkout Page Wrapper ==-->
    <div id="checkout-page-wrapper" class="pt-90 pt-md-60 pt-sm-50 pb-50 pb-md-20 pb-sm-10">
        <div class="container">
            @if(session('cart'))
                <div class="row">
                <div class="col-lg-12">
                    <div class="checkout-page-coupon-area">
                        @if(session()->has('coupon'))
                            <div class="checkoutAccordion" id="checkOutAccordion">
                            <div class="card">
                                <h3>
                                    Added Coupon Already!
                                </h3>
                            </div>
                        </div>
                        @else
                            <!-- Checkout Coupon Accordion Start -->
                            <div class="checkoutAccordion" id="checkOutAccordion">
                                <div class="card">
                                    <h3><i class="fa fa-info-circle"></i> Have a Coupon?
                                        <span data-toggle="collapse" data-target="#couponaccordion">Click here to Enter your Code</span>
                                        <em class="text-danger" id="messages"></em>
                                    </h3>

                                    <div id="couponaccordion" class="collapse" data-parent="#checkOutAccordion">
                                        <div class="card-body">
                                            <div class="apply-coupon-wrapper">
                                                <p>If you have a coupon code, please apply it below.</p>
                                                <form action="{{route('redeem.coupon')}}" method="POST" id="coupon">
                                                    @csrf
                                                    @method('PUT')

                                                    <input type="text" placeholder="Enter Your Coupon Code" name="code" required/>
                                                    <button class="btn btn-black coupon-button">Apply Coupon</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Checkout Coupon Accordion End -->
                        @endif
                    </div>
                </div>
            </div>
            @endif
                <form action="{{route('cart.checkout')}}" method="post">
                    @csrf
                    <div class="row">
                        @guest
                        <div class="col-lg-6">
                            <!-- Checkout Form Area Start -->
                            <div class="checkout-billing-details-wrap">
                                <h2>Billing Details</h2>
                                <div class="billing-form-wrap">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="name" class="required">Full Name</label>
                                                    <input type="text" id="name" name="name" placeholder="Full Name" required/>

                                                    @error('name')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="email" class="required">Email Address</label>
                                                    <input type="email" id="email" name="email" placeholder="Email Address" required/>

                                                    @error('email')
                                                        <span class="text-danger" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="pwd" class="required">Account Password</label>
                                                    <input type="password" id="pwd"  name="password" placeholder="Account Password" required/>

                                                    @error('password')
                                                        <span class="text-danger" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="single-input-item">
                                                    <label for="pwd_confirmation" class="required">Confirm Password</label>
                                                    <input type="password" id="pwd_confirmation" name="password_confirmation" placeholder="Confirm Password" required/>
                                                </div>
                                            </div>
                                        </div>



                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="single-input-item">
                                                <label for="phone">Phone</label>
                                                <input type="text" id="phone" name="phone" placeholder="Enter Phone Number"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="single-input-item">
                                                <label for="street-address">Street address</label>
                                                <input type="text" id="street-address" name="address" placeholder="Street address Line 1"/>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        @endguest

                        <div class="@guest col-lg-6 col-xl-5 ml-auto @else col-lg-6 mx-auto @endguest">
                        <!-- Checkout Page Order Details -->
                        <div class="order-details-area-wrap">
                            <h2>Your Order</h2>

                            <div class="order-details-table table-responsive">
                                <table class="table table-borderless">
                                    <thead>
                                    <tr>
                                        <th>Products</th>
                                        <th>Total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if(session('cart'))
                                        @foreach(session('cart') as $cartItem)
                                            <tr class="cart-item">
                                                <td>
                                                    <span class="product-title">{{$cartItem['name']}}</span>
                                                    <span class="product-quantity">&#215;  {{$cartItem['quantity']}}</span>
                                                </td>
                                                <td>
                                                    NGN <span>{{number_format($cartItem['cost'] * $cartItem['quantity'])}}.00 </span>
                                                </td>
                                            </tr>
                                       @endforeach
                                    @endif
                                    </tbody>

                                    <tfoot>
                                    <tr class="cart-subtotal">
                                        <th>Closest Pickup Location</th>
                                        <td>
                                            <select name="location" class="" style="text-align-last: center;">
    {{--                                            {{dd($salesPoints)}}--}}
                                                @foreach($salesPoints as $point)
                                                    <option value="{{$point->id}}">{{$point->name}}</option>
                                                @endforeach
                                            </select>
                                        </td>

                                    </tr>
                                    <tr class="cart-subtotal">
                                        <th>Subtotal</th>
                                        <td>NGN {{number_format(\App\Entities\Carts\Cart::totalPrice())}}.00</td>

                                    </tr>
                                    <tr class="cart-subtotal">
                                        <th>Delivery</th>
                                        <td>
                                            NGN {{number_format(\App\Entities\Carts\Cart::$delivery)}}.00
                                        </td>
                                    </tr>

                                    @if(session()->has('coupon'))
                                         <tr id="cart-coupon">
                                                <th>Coupon Value</th>
                                                <td>
                                                   NGN {{session('coupon')['value']}}.00
                                                </td>
                                         </tr>
                                    @endif



                                    <tr class="shipping">
                                        <th>Payment Options</th>
                                        <td>
                                            <ul class="shipping-method">
{{--                                                <li>--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" id="card" name="payment_method" value="paystack"--}}
{{--                                                               class="custom-control-input" checked/>--}}
{{--                                                        <label class="custom-control-label" for="card">Pay with Card</label>--}}
{{--                                                    </div>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" id="paypal" name="payment_method" value="paypal"--}}
{{--                                                               class="custom-control-input"/>--}}
{{--                                                        <label class="custom-control-label" for="paypal">Pay with Paypal</label>--}}
{{--                                                    </div>--}}
{{--                                                </li>--}}
                                                <li>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="cash" name="payment_method" value="cash"
                                                               class="custom-control-input" checked/>
                                                        <label class="custom-control-label" for="cash">Cash on
                                                            Delivery</label>
                                                    </div>
                                                </li>
    {{--                                            <li>--}}
    {{--                                                <div class="custom-control custom-radio">--}}
    {{--                                                    <input type="radio" id="vestpay" name="payment_method" value="paystack"--}}
    {{--                                                           class="custom-control-input" checked/>--}}
    {{--                                                    <label class="custom-control-label" for="vestpay">Pay with Vestpay</label>--}}
    {{--                                                </div>--}}
    {{--                                            </li>--}}

                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="final-total">
                                        <th>Total</th>
                                        <td>
                                            <span class="total-amount">
                                                @if(session()->has('coupon'))
                                                    <span class="currency">NGN</span> <span id="totalPlusDelivery" data-price="{{\App\Entities\Carts\Cart::totalPriceWithCoupon()}}">{{number_format(\App\Entities\Carts\Cart::totalPriceWithCoupon())}}.00 </span>
                                                @else
                                                    <span class="currency">NGN</span> <span id="totalPlusDelivery" data-price="{{\App\Entities\Carts\Cart::totalPrice() + \App\Entities\Carts\Cart::$delivery}}">{{number_format(\App\Entities\Carts\Cart::totalPrice() + \App\Entities\Carts\Cart::$delivery)}}.00 </span>
                                                @endif
                                        </span>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>

                            <div class="order-details-footer">
                                <p>Your personal data will be used to process your order, support your experience throughout
                                    this website, and for other purposes described in our
                                    <a href="{{route('policy')}}" class="text-danger">privacy policy</a>.</p>
                                <div class="custom-control custom-checkbox mt-10">
                                    <input type="checkbox" id="privacy" name="agreement" class="custom-control-input @error('agreement') is-invalid @enderror" required/>

                                    <label for="privacy" class="custom-control-label">I have read and agree to the website
                                        <a href="{{route('t&c')}}" class="text-danger">terms and conditions</a>
                                    </label>
                                </div>

                                <button class="btn btn-full btn-black mt-26">Place Order</button>
                            </div>
                        </div>
                    </div>
                    </div>
                </form>
        </div>

        </div>
    <!--== End Checkout Page Wrapper ==-->


    @include('includes.productfooter')

@endsection