@extends('layouts.front-layout')
@section('title')
    CheckOut
@endsection
@section('content')
    @php
        $total = 0;
    @endphp
    <section class="main-slider innerBanner"
        id="mainSlider"style="background: url({{ pagesSingleImage('Product', 'product_top_banner_image') }}) center/cover;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="slideOne">
                        <h1>Checkout</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- End: Main Slider -->
    <div class="check-out-section chkot-pag">
        <div class="container">
            <div class="check-out-form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col-md-12">
                            <div class="shirt-heading">
                                {{-- <h4 class="checkout-heading">Miss Thang</h4> --}}
                                <ul>
                                    <li><a href="#">Information</a></li>
                                    <li><span> > </span></li>
                                    <li><a href="#">Shipping</a></li>
                                    <li><span> > </span></li>
                                    <li><a href="#">Payment</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="acount-log">
                            <h4 class="shiping-heading">CONTACT</h4>
                            <span>Have an account? <a href="#">Log in</a></span>
                        </div>
                        <form action="{{ route('checkout.order') }}" method="post" id="form">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <input type="text" class="form-control" placeholder="Email" name="email" value="{{ Auth::check() ? Auth::user()->email : '' }}">
                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="col-md-12 checkbox">
                                        <input type="checkbox" id="box-3">
                                        <label for="box-3">Receive updates, news and offers via email</label>
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <h4 class="shiping-heading">SHIPPING ADDRESS</h4>
                                    <select name="state">
                                        <option value="">Select States</option>
                                        @forelse($get_states as $state)
                                            <option value="{{ $state->state_code ? : '' }}">{{ $state->state_name ?: '' }}</option>
                                        @empty
                                            <option>States Not Found</option>
                                        @endforelse
                                    </select>
                                    @error('state')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="First name"
                                        name="first_name" value="{{ Auth::check() ? Auth::user()->first_name : '' }}">
                                    @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="Last name"
                                        name="last_name"value="{{ Auth::check() ? Auth::user()->last_name : '' }}">
                                    @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <input type="text" class="form-control" placeholder="Address"
                                        name="address"value="{{ Auth::check() ? Auth::user()->address : '' }}">
                                    @error('address')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <input type="text" class="form-control"
                                        placeholder="Appartment, Suit,etc. (optional)">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="City" name="city">
                                    @error('city')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="Zip Code" name="zip_code" pattern="\d{5}" maxlength="5"  oninput="this.value = this.value.replace(/\D/, '')"
                                    title="Please enter a valid 5-digit ZIP code.">
                                    @error('zip_code')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-12">
                                    <input type="text" class="form-control" placeholder="Phone" name="phone_number"   id="phone_number" pattern="\d{3}-\d{3}-\d{4}" maxlength="12" required
                                    title="Please enter a valid phone number in the format 123-456-7890.">
                                    @error('phone_number')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                
                              @if (!Auth::check())
                                  
                              <div class="col-md-12 checkbox checkbox12">
                                  <input type="checkbox" id="box-1" name="save_information">
                                  <label for="box-1">Save this information for next time</label>
                                </div>
                                @endif      
                              
                                <div class="col-md-12 checkbox checkbox12">
                                    <input type="checkbox" id="box-2">
                                    <label for="box-2">Receive updates, news and offers via text message</label>
                                </div>
                                {{-- @auth --}}
                                    <button class="themeBtn">CONTINUE TO
                                        SHIPPING
                                    </button>
                                
                            </div>

                    </div>

                    <div class="col-md-6 cola-shirt checkout-page">
                        @if (isset($cart_data))
                            @foreach ($cart_data as $data)
                                <div class="biling-card">
                                    <div>
                                        <figure>
                                            <img src="{{ $data['item_image'] ?: '' }}" class="img-fluid" alt="img">
                                        </figure>
                                        <div class="content">
                                            <h5>{{ $data['item_name'] ?: '' }}</h5>
                                            <p>Commissions available. Will not be exactly the same. All original
                                                work..</p>
                                            @php
                                                if ($data['item_quantity']) {
                                                    $total = $total + $data['item_quantity'] * $data['item_price'];
                                                } else {
                                                    $total = $total + $data['item_price'];
                                                }

                                            @endphp

                                            <span>
                                                @if ($data['item_quantity'])
                                                    $ {{ number_format($data['item_quantity'] * $data['item_price'], 0) }}
                                                @else
                                                    $ {{ number_format($data['item_price']), 0 }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        @endif
                        @if (isset($printifyCart))
                            @foreach ($printifyCart as $printify)
                                <div class="biling-card">
                                    <div>
                                        <figure>
                                            <img src="{{ $printify['image'] ?: '' }}" class="img-fluid" alt="img">
                                        </figure>
                                        <div class="content">
                                            <h5>{{ $printify['product_name'] ?: '' }}</h5>
                                            <p>Commissions available. Will not be exactly the same. All original
                                                work..</p>
                                            @php
                                                if ($printify['quantity']) {
                                                    $total = $total + $printify['quantity'] * $printify['price'];
                                                } else {
                                                    $total = $total + $printify['price'];
                                                }

                                            @endphp

                                            <span>
                                                @if ($printify['quantity'])
                                                    $ {{ number_format($printify['quantity'] * $printify['price'], 0) }}
                                                @else
                                                    $ {{ number_format($printify['price']), 0 }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        @endif
                        @if (isset($printFullcart))
                            @foreach ($printFullcart as $printful)
                                <div class="biling-card">
                                    <div>
                                        <figure>
                                            <img src="{{ $printful['image'] ?: '' }}" class="img-fluid" alt="img">
                                        </figure>
                                        <div class="content">
                                            <h5>{{ $printful['product_name'] ?: '' }}</h5>
                                            <p>Commissions available. Will not be exactly the same. All original
                                                work..</p>
                                            @php
                                                if ($printful['quantity']) {
                                                    $total = $total + $printful['quantity'] * $printful['price'];
                                                } else {
                                                    $total = $total + $printful['price'];
                                                }

                                            @endphp

                                            <span>
                                                @if ($printful['quantity'])
                                                    $ {{ number_format($printful['quantity'] * $printful['price'], 0) }}
                                                @else
                                                    $ {{ number_format($printful['price']), 0 }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        @endif
                        <div class="discount">


                        </div>
                        <div class="subtotal">
                            <h4>Subtotal Shipping</h4>
                            <div>
                                <span>$ {{ number_format($total) ?? '00' }}</span>
                                <h6>Calculated at next step</h6>
                            </div>
                        </div>

                        <div class="subtotal">
                            <h4>Discount</h4>
                            <div>
                                <span class="discount_price">0.00</span>
                            </div>
                        </div>

                        <ul class="total">
                            <li>
                                Total
                            </li>
                            <li>
                                <span class="update_grand_total_price"> $ {{ number_format($total) ?: '' }}</span>

                                <input type="hidden" name="get_total_price" value="{{ number_format($total) ?? '00' }}"
                                    class="get_total_price">
                            </li>
                        </ul>

                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
         document.getElementById('phone_number').addEventListener('input', function(event) {
            let value = event.target.value.replace(/\D/g, ''); // Remove non-digit characters
            if (value.length > 3 && value.length <= 6) {
                value = value.replace(/(\d{3})(\d{1,})/, '$1-$2');
            } else if (value.length > 6) {
                value = value.replace(/(\d{3})(\d{3})(\d{1,})/, '$1-$2-$3');
            }
            event.target.value = value;
        });

    </script>
@endsection