@extends('layouts.front-layout')
@section('title')
    It’s Amazeing
@endsection
@section('content')
    <section class="inner-banner p-0">
        <video class="mainbanner__video" autoplay muted loop playsinline>
            <source src="{{ $setting->settingImage('home_top_banner_video') ?? '' }}" type="video/mp4">
        </video>
        <div class="container">
            <div class="inner-banner__content">
                <h1>Check Out</h1>
            </div>
        </div>
        <figure class="inner-banner__bottom">
            <img src="images/banner-shape.png" alt="image" class="img-fluid">
        </figure>
    </section>

    <section class="checkout-section padd-y">
        <div class="container">
            <div class="product-details__title text-center">
                <h2 class="mainHead">Check <span>Out Now</span></h2>
            </div>
            <div class="row">
                <form action="{{ route('checkout.order') }}" class="checkout__form" style="display: flex" method="post">
                    @csrf

                    <div class="col-lg-6">
                        <div class="checkout__wrap">
                            <h4>SHIPPING ADDRESS</h4>
                            <div class="row">
                                <div class="col-12">
                                    <select name="country">
                                        @forelse($get_states as $state)
                                            <option value="{{ $state->id }}"
                                                {{ isset($get_info['country']) && $get_info['country'] == $state->id ? 'selected' : '' }}>
                                                {{ $state->name }}
                                            </option>
                                        @empty
                                            <option>States Not Found</option>
                                        @endforelse
                                    </select>
                                    @error('country')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" placeholder="First name" name="first_name"
                                        value="{{ old('first_name') ?: ($get_info['email'] ?? Auth::check() ? Auth::user()->first_name : '') }}">
                                    @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" placeholder="Last name" name="last_name"
                                        value="{{ old('last_name') ?: ($get_info['last_name'] ?? Auth::check() ? Auth::user()->last_name : '') }}">
                                    @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <input type="text" placeholder="Address" name="address"
                                        value="{{ old('address') ?: ($get_info['address'] ?? Auth::check() ? Auth::user()->address : '') }}">
                                    @error('address')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <input type="email" placeholder="Email" name="email"
                                        value="{{ old('email') ?: ($get_info['email'] ?? Auth::check() ? Auth::user()->email : '') }}">
                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <input type="text" placeholder="Appartment, Suit,etc. (optional)">
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" placeholder="City" name="city"
                                        value="{{ old('city') ?: ($get_info['city'] ?? Auth::check() ? Auth::user()->city : '') }}">
                                    @error('city')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <input type="tel" placeholder="Postal Code" name="postal_code"
                                        value="{{ old('postal_code') ?: ($get_info['postal_code'] ?? Auth::check() ? Auth::user()->zip_code : '') }}">
                                    @error('postal_code')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <input type="tel" placeholder="Phone" name="phone_number" pattern="\d{10}"
                                        maxlength="10" required title="Please enter a valid 10-digit phone number."
                                        value="{{ old('phone_number') ?: ($get_info['phone_number'] ?? Auth::check() ? Auth::user()->phone_number : '') }}">
                                    @error('phone_number')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-12 mt-5">
                                    <label>Card Name</label>
                                    <input type="text" placeholder="Cardholder Name" name="card_name"
                                        value="{{ old('card_name') }}">
                                    <small class="text-danger">
                                        @error('card_name')
                                            {{ $message }}
                                        @enderror
                                    </small>
                                </div>
                                <div class="col-lg-12">
                                    <label>Card Number</label>
                                    <input type="text" name="card_number" id="card_number"
                                        placeholder="Enter card number" minlength="13" maxlength="16" pattern="\d{13,16}"
                                        title="Card number must be between 13 and 16 digits"
                                        value="{{ old('card_number') }}"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                    <small class="text-danger">
                                        @error('card_number')
                                            {{ $message }}
                                        @enderror
                                    </small>
                                </div>

                                <div class="col-lg-6">
                                    {{-- <label>MM/YY</label> --}}
                                    <input type="number" placeholder="EXP Month"
                                        name="exp_month"oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                        value="{{ old('exp_month') }}">
                                    <small class="text-danger">
                                        @error('exp_month')
                                            {{ $message }}
                                        @enderror
                                    </small>
                                </div>
                                <div class="col-lg-6">
                                    {{-- <label>Copy Code</label> --}}
                                    <input type="number" placeholder="EXP Year" name="exp_year"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                        value="{{ old('exp_year') }}">
                                    <small class="text-danger">
                                        @error('exp_year')
                                            {{ $message }}
                                        @enderror
                                    </small>
                                </div>
                                <div class="col-lg-10">
                                    {{-- <label>Name On Card</label> --}}
                                    <input type="number" placeholder="CVC" name="cvv"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                        value="{{ old('cvv') }}">
                                    <small class="text-danger">
                                        @error('cvv')
                                            {{ $message }}
                                        @enderror
                                    </small>
                                </div>
                                {{-- <div class="col-lg-5">
                                    <label>Expiry Date</label>
                                    <input type="date" placeholder="3/2005">
                                </div>
                                <div class="col-lg-5">
                                    <label>Copy Code</label>
                                    <input type="tel" placeholder="876">
                                </div> --}}
                                {{-- <div class="col-12">
                                    <button type="submit" class="themeBtn border-0 d-block mx-auto">Proceed To
                                        Payment</button>
                                </div> --}}
                                <div class="col-12">
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        <p>Save this information for next time</p>
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        <p>Receive updates, news and offers via text message</p>
                                    </label>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="themeBtn border-0">CONTINUE TO SHIP</button>
                                </div>
                            </div>
                            {{-- </form> --}}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="checkout__product--main">
                            {{--                            @dd($cart_data) --}}
                            @if (isset($cart_data) && count($cart_data) > 0)
                                @php $total = 0; @endphp
                                @foreach ($cart_data as $id => $data)
                                    @if (!empty($data))
                                        <div class="checkout__product--wrap">
                                            @php
                                                $products = \App\Models\Product::findOrFail($data['product_id']);
                                            @endphp
                                            <figure class="checkout__product--img">
                                                <img src="{{ $products->getFirstMediaUrl('product_image') }}"
                                                    alt="image" class="img-fluid">
                                            </figure>
                                            <div class="checkout__product--content">
                                                <h4>{{ $data['name'] }}</h4>
                                                <div>
                                                    <p>Maze For Kids</p>
                                                    @php
                                                        $total += ($data['quantity'] ?? 1) * $data['price'];
                                                    @endphp
                                                    <span> $
                                                        {{ number_format(($data['quantity'] ?? 1) * $data['price'], 0) }}</span>
                                                </div>

                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                                {{-- <form class="checkout__product--discount">
                                        <input type="text" placeholder="Discount Code or Gift Card">
                                        <button type="submit" class="themeBtn border-0">APPLY</button>
                                    </form> --}}
                                <div class="checkout__product--subtotal">
                                    <ul>
                                        <li>Subtotal</li>
                                        <li>$ {{ number_format($total, 2) }}</li>
                                    </ul>
                                    {{-- <ul>
                                    <li>Shipping</li>
                                    <li>Calculated at next step</li>
                                </ul> --}}
                                </div>
                                <div class="checkout__product--total">
                                    <ul>
                                        <li>Total</li>
                                        <input type="hidden" name="get_total_price"
                                            value="{{ number_format($total) ?: '' }}" class="get_total_price">
                                        <li>$ {{ number_format($total, 2) }}</li>
                                    </ul>
                                </div>
                            @else
                                <h2>Please add a product to the cart.</h2>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection