@extends('layouts.website')
@section('title', 'Cart')
@section('content')
    <div class="main-container">

        <x-udo.breadcrumbs />
        <div class="header lg:mb-20 ">
            <div class="flex justify-center mb-5">
                <p class="uppercase text-xl tracking-widest ">checkout</p>
            </div>
            <div class="lg:flex mx-auto lg:w-[100vw] overflow-y-scroll bg-white pb-20">
                <div class="p-5 lg:p-0 payment-info lg:basis-[60vw] bg-white my-5">

                    @if (blank(authy()->billingData))
                        <div class=" text-red-500 text-center mt-10 text-4xl">
                            <p class=" text-blue-500 my-10">You have not setup your biling information</p>
                            <p>Kindly Setup your billing data once and for all</p>
                            <a href="{{ route('profile.edit') }}" class=" uppercase underline">here</a>
                        </div>
                    @else
                        <form action="{{ route('checkout.process') }}" class="lg:px-[10vw] lg:py-[2rem]" method="POST">@csrf
                            <h3 class="my-5 text-2xl">Delivery Information</h3>

                            {{-- name container --}}
                            <div class="form-group client-name-container lg:flex lg:gap-3 w-full my-5">
                                <div class="my-3 lg:my-0 first-name-field w-full">
                                    <input type="text" placeholder="First Name" class="rounded w-full"
                                        value="{{ authy()->billingData?->first_name }}" name="first_name">
                                </div>
                                <div class="last-name-field w-full">
                                    <input type="text" placeholder="Last Name" name="last_name" class="rounded w-full"
                                        value="{{ authy()->billingData?->last_name }}">
                                </div>
                            </div>

                            {{-- company field --}}
                            <div class="company-name-field w-full my-5">
                                <input type="text" placeholder="Company Name (optional)" name="company"
                                    class="rounded w-full" value="{{ authy()->billingData?->company }}">
                            </div>

                            {{-- address line 1 field --}}
                            <div class="address-field w-full my-5">
                                <input type="text" placeholder="Address" class="rounded w-full" name="address_line1"
                                    value="{{ authy()->billingData?->address_line1 }}">
                            </div>

                            {{-- address line2 field --}}
                            <div class="apt-field w-full my-5">
                                <input type="text" name="address_line2" placeholder="Apartment, Suite, etc. (optional)"
                                    class="rounded w-full" value="{{ authy()->billingData?->address_line2 }}" />
                            </div>

                            {{-- location info (city, state, zip) --}}
                            <div class="form-group client-name-container lg:flex lg:gap-3 w-full my-5">
                                <div class="my-3 lg:my-0 city-name-field w-full">
                                    <input type="text" placeholder="City" name="city" class="rounded w-full"
                                        value="{{ authy()->billingData?->city }}" />
                                </div>
                                <div class="my-3 lg:my-0 state-name-field w-full">
                                    <input type="text" placeholder="State" name="state" class="rounded w-full"
                                        value="{{ authy()->billingData?->state }}" />
                                </div>
                                <div class="my-3 lg:my-0 zip-code-field w-full">
                                    <input type="text" placeholder="Zip Code (optional)" name="zip"
                                        class="rounded w-full" value="{{ authy()->billingData?->zip }}" />
                                </div>
                            </div>

                            {{-- Phone field --}}
                            <div class="apt-field w-full my-3">
                                <input type="text" placeholder="Phone" name="phone" class="rounded w-full"
                                    value="{{ authy()->billingData?->phone }}" />
                            </div>
                            <x-udo.flat-btn type='submit' position="justify-center" btn-text="Pay N {{ \Cart::total() }}" />
                        </form>
                    @endif

                </div>

                <div
                    class="hidden lg:block cart-info lg:basis-[40vw] col-lg-4 bg-gray-100 p-10 border overflow-y-scroll  h-[60vh]">
                    <p>Items in Order</p>

                    <div class="single-product-container flex justify-between my-4 ">
                        <div class="item-info-container flex gap-3 ">
                            Item name
                        </div>

                        {{-- <div class="item-price-container text-right bg-red-700">
                            price
                        </div> --}}

                        <div class="item-price-container">
                            subtotal
                        </div>

                    </div>
                    @foreach (getCart()->content() as $item)
                        <div class="single-product-container flex justify-between my-4 ">
                            <div class="item-info-container flex gap-3 ">
                                <div class="img-container ">
                                    <img src="/images/cart/cart_image.jpg" alt="" width="50">
                                </div>
                                <div class=" uppercase flex flex-col justify-evenly">
                                    <small class="item-name self-start">
                                        {{ $item->name }}
                                    </small>
                                    <small class="item-size text-gray-500">
                                        Qty : {{ $item->qty }}
                                    </small>
                                    <small class="item-size text-gray-500">
                                        one size
                                    </small>
                                </div>
                            </div>

                            <div class="item-price-container">
                                @ ₦{{ $item->price }}
                            </div>

                            <div class="item-price-container">
                                ₦{{ $item->subtotal }}
                            </div>

                        </div>
                    @endforeach


                </div>
            </div>
        </div>
    </div>

@endsection