@extends('layouts.front-end.app')

@section('title', 'Checkout page')

@push('css_or_js')
@endpush

@section('content')
    <!-- Start Breadcamp -->
    <div class="cs_height_40 cs_height_lg_30"></div>
    <div class="container">
        <div class="cs_breadcamp_wrap cs_style_1 cs_accent_light_bg cs_bg_filed cs_radius_8"
            data-src="{{ asset('assets/front-end/images/shop_banner.jpg') }}">
            <div>
                <h1 class="cs_breadcamp_title cs_fs_54 cs_semibold">Complete Your Beauty Order</h1>
                <ol class="breadcrumb cs_fs_18 mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Cart</li>
                </ol>
            </div>
        </div>
    </div>
    <!-- End Breadcamp -->
    <div class="cs_height_120 cs_height_lg_70"></div>
    <div class="container">
        <form action="{{ route('checkout-complete')}}" method="POST">
            @csrf
        <div class="row cs_gap_y_40">
            <div class="col-lg-7">
                <h2 class="cs_fs_36 cs_secondary_font cs_medium mb-0">BILLING DETAILS</h2>
                <div class="cs_height_16 cs_height_lg_16"></div>
                <p class="cs_light cs_primary_color mb-0">Please enter your billing details:</p>
                <div class="cs_height_35 cs_height_lg_30"></div>
                <div class="row">
                    <div class="col-lg-6">
                        <label class="cs_semibold">First Name<span>*</span></label>
                        <input type="text" class="cs_form_field" name="first_name" placeholder="Enter your first name">
                        @error('first_name')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-6">
                        <label class="cs_semibold">Last Name</label>
                        <input type="text" class="cs_form_field" name="last_name" placeholder="Enter your last name">
                        @error('last_name')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-6">
                        <label class="cs_semibold">Email Address</label>
                        <input type="email" class="cs_form_field" name="email" placeholder="Enter your email">
                        @error('email')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-6">
                        <label class="cs_semibold">Phone<span>*</span></label>
                        <input type="text" class="cs_form_field" name="phone" placeholder="Enter your phone">
                        @error('phone')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-12">
                        <label class="cs_semibold">Address<span>*</span></label>
                        <textarea cols="30" rows="3" class="cs_form_field" name="address" placeholder="Enter your address"></textarea>
                        @error('address')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-6">
                        <label class="cs_semibold">City<span>*</span></label>
                        <input type="text" class="cs_form_field" name="city" placeholder="Enter your city">
                        @error('city')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-6">
                        <label class="cs_semibold">ZIP/Postal Code<span>*</span></label>
                        <input type="text" class="cs_form_field" name="zip_code" placeholder="Enter zip code">
                        @error('zip_code')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                    <div class="col-lg-12">
                        <label class="cs_semibold">Order Note</label>
                        <textarea cols="30" rows="3" class="cs_form_field" name="order_note" placeholder="Enter your order note"></textarea>
                        @error('order_note')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                        <div class="cs_height_30 cs_height_lg_20"></div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-lg-5 offset-xxl-1">
                <div class="cs_order_card cs_accent_light_bg cs_radius_10">
                    <h3 class="cs_fs_24 cs_medium cs_secondary_font mb-0">ORDER SUMMARY</h3>
                    <div class="cs_height_8 cs_height_lg_8"></div>
                    @php($coupon_dis = 0)
                    @php($sub_total = 0)
                    @php($total_tax = 0)
                    @php($total_shipping_cost = 0)
                    @php($total_discount_on_product = 0)
                    @if (session()->has('cart') && count(session()->get('cart')) > 0)
                        <ul class="cs_mp_0 cs_order_summary">
                            @foreach (session()->get('cart') as $key => $cartItem)
                                <li>
                                    <div class="cs_order_summary_list_title">
                                        <h3 class="mb-0 cs_secondary_font cs_semibold cs_fs_16">
                                            {{ Str::limit($cartItem['name'], 30) }}</h3>
                                        <h3 class="mb-0 cs_secondary_font cs_semibold cs_fs_16 cs_accent_color">
                                            {{ \App\CPU\Helpers::currency_converter($cartItem['price'] - $cartItem['discount']) }}
                                        </h3>
                                    </div>
                                    {{-- <p>Size: <span class="cs_primary_color">One Size</span></p> --}}
                                    <p>Quantity: {{ $cartItem['quantity'] }}</p>
                                </li>


                                @php($sub_total += $cartItem['price'] * $cartItem['quantity'] - $cartItem['quantity'] * $cartItem['discount'])
                                @php($total_tax += $cartItem['tax'] * $cartItem['quantity'])
                                @php($total_shipping_cost += $cartItem['shipping_cost'])
                                @php($total_discount_on_product += $cartItem['discount'] * $cartItem['quantity'])
                            @endforeach
                        </ul>
                    @endif
                    <div class="cs_height_40 cs_height_lg_30"></div>
                    @if (session()->has('coupon_discount'))
                        @php($coupon_dis = session('coupon_discount'))
                    @endif
                    <ul class="cs_card_price_list cs_type_1 cs_mp_0">
                        <li>
                            <span class="cs_light">Subtotal</span>
                            <span
                                class="cs_semibold cs_primary_color cs_semibold">{{ \App\CPU\Helpers::currency_converter($sub_total) }}</span>
                        </li>
                        <li>
                            <span class="cs_light">Shipping Fee</span>
                            <span
                                class="cs_semibold cs_primary_color cs_semibold">{{ \App\CPU\Helpers::currency_converter($total_shipping_cost) }}</span>
                        </li>
                        <li>
                            <span class="cs_light">Total Discount</span>
                            <span
                                class="cs_semibold cs_primary_color cs_semibold">-{{ \App\CPU\Helpers::currency_converter($total_discount_on_product) }}</span>
                        </li>
                        <li class="cs_total_price">
                            <span class="cs_fs_18 cs_primary_color">Total</span>
                            <span
                                class="cs_fs_18 cs_primary_color">{{ \App\CPU\Helpers::currency_converter($sub_total + $total_tax + $total_shipping_cost - $coupon_dis) }}</span>
                        </li>
                    </ul>
                    <div class="cs_height_50 cs_height_lg_40"></div>
                    <h3 class="cs_secondary_font cs_fs_24 cs_medium mb-0">PAYMENT METHOD</h3>
                    <div class="cs_height_8 cs_height_lg_8"></div>
                    <p class="mb-0 cs_light">Choose your preferred payment method:</p>
                    <div class="cs_height_20 cs_height_lg_20"></div>
                    <ul class="cs_payment_method_list cs_mp_0">

                        <li>
                            <div class="cs_custom_checkbox cs_style_1 cs_light">
                                <input name="payment_method" type="radio" value="online_payment">
                                <span>Online Payment</span>
                                @error('payment_method')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                            </div>
                        </li>
                        <li>
                            <div class="cs_custom_checkbox cs_style_1 cs_light">
                                <input name="payment_method" type="radio" value="cash_on_delivery">
                                <span>Cash on Delevery</span>
                                @error('payment_method')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                            </div>
                        </li>
                    </ul>
                    <div class="cs_height_40 cs_height_lg_30"></div>
                    <button class="cs_btn cs_style_1 cs_fs_18 w-100" type="submit"><span>PLACE ORDER</span></button>
                </div>
            </div>
        </div>
    </form>
    </div>
@endsection