@extends('front.layout.app')
@section('content')

<style>
#commentSec h1.ep {
    color: #fff;
    margin-bottom: 22px;
}
.posi-set h2 {
    color: #fff;
    font-size: 15px;
    position: absolute;
    right: 29px;
    top: 50%;
    transform: translateY(-50%);
}
input.poster {
    width: 100%;
    background: #07041c;
    margin-top: 18px;
    margin-bottom: 15px;
    color: #fff;
    padding: 20px;
    outline: none;
    border: 1px solid #837b7b;
}
 /* the slides */
  .slick-slide {
      margin: 0 17px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -17px;
  }
  .contact .con-main .new-love .txt {
    padding: 0;
    margin: 0;
}
.crd{
    position: relative;
}

.crd .new_vid {
    position: absolute;
    left: -49px;
    top: 24px;
    width: 200px;
    height: 38px;
    background: #ffa700;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -40deg;
}
.wrapper {
  position: relative;
  display: inline-block;
  border: none;
  font-size: 14px;
}

.wrapper input {
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: 0;
}

.wrapper label {
  position: relative;
  float: right;
  color: #C8C8C8;
}

.wrapper label:before {
  margin: 5px;
  content: "\f005";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 18px;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.wrapper input:checked ~ label:before {
  color: #FFC107;
}

.wrapper label:hover ~ label:before {
  color: #ffdb70;
}

.wrapper label:hover:before {
  color: #FFC107;
}
    
}
</style>
<main>
    
    <section class="main-banner katie">
        <div class="banner-img">
            <div class="img-box">
                <img class="img-fluid" src="https://fitkatiekarr.com/assets/front/images/katie-banner.jpg" alt="">
            </div>
            <div class="content">
                <h2>Check Out</h2>
                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000" class="aos-init aos-animate"></p>
                <p>Get a&nbsp;sneak peek into my&nbsp;world of raw, journey of desire and satisfaction.&nbsp;😘</p>
            </div>
        </div>
    </section>

    <section class="checkout-sec chel comunity-sec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12 px-lg-4">
                    <div class="checkout-content">
                        <div class="row">
                            <div class="col-xxl-7 col-xl-8 col-lg-7 col-md-12 col-sm-12 col-12">
                                
                                <h3>billing details</h3>
                                <form action="{{ route('user.placeOrder') }}" method="post">
                                    @csrf
                                    <div class="inp-field">
                                        <label for="">First Name *</label>
                                        <input type="text" name="f_name" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->f_name : '' }}">
                                    </div>
                                    <div class="inp-field">
                                        <label for="">Last Name *</label>
                                        <input type="text" name="l_name" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->l_name : '' }}">
                                    </div>
                                    <div class="inp-field">
                                        <label for="">Company Name</label>
                                        <input type="text" name="company_name" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->company : '' }}">
                                    </div>
                                    <div class="inp-field">
                                        <label for="">Country *</label>
                                        <select class="" name="country_id">
                                            <option value="" selected disabled>Select Country</option>
                                            @if(isset($countries))
                                                @foreach($countries as $country)
                                                    <option value="{{ $country->id }}" {{ Auth::guard('customer')->user()->country_id == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="inp-field">
                                        <label for="">Address *</label>
                                        <input type="text" name="address" placeholder="Street Address" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->address : '' }}">
                                    </div>
                                    <div class="inp-field">
                                        <label for="">Phone</label>
                                        <input type="text" name="phone" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->phone : '' }}">
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-lg-6">
                                            <div class="inp-field">
                                                <label for="">Email Address *</label>
                                                <input type="email" name="email" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->email : '' }}">
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-6">
                                            <div class="inp-field">
                                                <label for="">Postal Code *</label>
                                                <input type="text" name="postal_code" value="{{ Auth::guard('customer')->user() ? Auth::guard('customer')->user()->postal_code : '' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <button class="place-order-btn" href="javascript:;">
                                        <span><i class="fa-solid fa-chevrons-right"></i></span>place order</button>
                                </form>
                            </div>
                            
                            <div class="col-xxl-5 col-xl-4 col-lg-5 col-md-12 col-sm-12 col-12 pe-lg-5">
                                <h3 style="margin-left: 28px;">Your Order</h3>
                                
                                
                                @php $total = 0 @endphp
                                @foreach((array) session('cart') as $id => $details)
                                    @php $total += $details['price'] * $details['quantity'] @endphp
                                @endforeach
                                
                                 @if(session('cart'))
                                 @foreach(session('cart') as $id => $details)
                                    <div class="info-item" style="width: 100%;">
                                        <div class="img-div" style=" width: 20%;">
                                            <img src="{{ $details['image'] }}" style=" width: 70%;">
                                        </div>
                                        <p style=" width: 60%;">{{ $details['title'] }}</p>
                                        <h6 style=" width: 20%;">$ {{ $details['price'] }}</h6>
                                    </div>
                                @endforeach
                                @endif
                              
                                <hr style="background: #fff !important; margin-bottom: 65px;">
                                
                                <!--<div class="info-item">-->
                                <!--    <h5>subtotal</h5>-->
                                <!--    <h6>$ 265.85</h6>-->
                                <!--</div>-->
                                
                                <hr style="background: #fff !important;">
                                <div class="info-item">
                                    <h4>total</h4>
                                    <h4>${{ $total }}</h4>
                                    @php Session::put('total', $total) @endphp
                                </div>
                                
                                <hr>
                                
                            </div>
                            
                            
                            
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    


@endsection