@extends('front.template.header')
@section('content')
<div id="content" class="site-content ">
            <!---about--->
            <section class="about-section">
               <!--===============spacing==============-->
               <div class="pd_top_90"></div>
               <!--===============spacing==============-->
               <div class="container">


                  <article class="clearfix service type-service status-publish has-post-thumbnail hentry">
                     <div class="row no-space">
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-5 mb-xl-0 ps-0 ps-lg-0 pe-0 pe-lg-0 pe-xl-3">

                                 <div role="form" class="wpcf7">
                                    <form action="#" method="post"  class="wpcf7-form init" enctype="multipart/form-data">

                                       

                                        <div class="heading mb-3">
                                          <h5>Billing details</h5>
                                        </div>

                                        <div class="row">
                                          <div class="col-md-6">
                                                <label for="first_name">First name</label>
                                                <input type="text" name="first_name" id="first_name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="Enter Your Name">
                                          </div>

                                          <div class="col-md-6">
                                                <label for="last_name">Last name</label>
                                                <input type="text" name="last_name" id="last_name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="Enter Your Last Name">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="company_name">Company name (optional)</label>
                                                <input type="text" name="company_name" id="company_name" value="" class="form-control wpcf7-form-control wpcf7-text" placeholder="Enter Your Company Name (optional)">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="country">Country/Region</label>
                                                <select name="country" id="country" class="wpcf7-form-control-wrap your-name">
                                                   <option value="">Choose an option</option>
                                                   @foreach($countries as $country)
                                                   <option value="{{$country->name}}">{{$country->name}}</option>
                                                   @endforeach
                                                  
                                                </select>
                                          </div>

                                          <div class="col-md-12">
                                                <label for="street_address">Street address</label>
                                                <input type="text" name="street_address" id="street_address" value="" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="House number and street name">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="apartment">Apartment, suite, unit, etc. (optional)</label>
                                                <input type="text" name="apartment" id="apartment" value="" class="form-control wpcf7-form-control wpcf7-text" placeholder="Apartment, suite, unit, etc.">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="city">Town / City</label>
                                                <input type="text" name="city" id="city" value="" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="Enter Your City">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="state">State / County (optional)</label>
                                                <input type="text" name="state" id="state" value="" class="form-control wpcf7-form-control wpcf7-text" placeholder="Enter Your State">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="phone">Phone</label>
                                                <input type="text" name="phone" id="phone" value="" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="Enter Your Phone Number">
                                          </div>

                                          <div class="col-md-12">
                                                <label for="email">Email address</label>
                                                <input type="email" name="email" id="email" value="" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="Enter Your Email Address">
                                          </div>

                                          <div class="col-md-12">
                                                <div class="form-check mb-4 d-none">
                                                   <input class="form-check-input" type="checkbox" value="1" id="deliver_to_different_address" name="deliver_to_different_address">
                                                   <label class="form-check-label" for="deliver_to_different_address">
                                                      Deliver to a different address?
                                                   </label>
                                                </div>
                                          </div>

                                          <div class="col-md-12">
                                                <label for="order_notes">Order notes (optional)</label>
                                                <textarea name="order_notes" id="order_notes" class="wpcf7-form-control wpcf7-textarea" placeholder="Notes about your order, e.g. special notes for delivery."></textarea>
                                          </div>
                                       </div>
                                    </form>
                                 </div>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_25"></div>
                        </div>
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12 ps-0 ps-lg-0 pe-0 pe-lg-0 ps-xl-3">
                           

                        <section class="contact_form_box_all type_two">
                           <div class="contact_form_box_inner">
                              <div class="contact_form_shortcode">
                                 <div class="heading">
                                    <h2>{{$service->title}}</h2>
                                 </div>
                                

                                 <div id="order_review" class="woocommerce-checkout-review-order mt-4">
                                    <div class="your_order_box">
                                       <table class="shop_table woocommerce-checkout-review-order-table">
                                          <tbody>
                                             @if(session('attribute_prices') > 0)
                                             <tr class="cart_item d-none">
                                                   <td class="product-name">Service Price</td>
                                                   <td class="product-total">
                                                      <span class="woocommerce-Price-amount amount">
                                                         <bdi><span class="woocommerce-Price-currencySymbol">AED</span> {{ number_format(session('attribute_prices'),2) }}</bdi>
                                                      </span>					
                                                   </td>
                                             </tr>
                                             @else
                                             <tr class="cart_item">
                                                   <td class="product-name">Service  Price</td>
                                                   <td class="product-total">
                                                      <span class="woocommerce-Price-amount amount">
                                                         <bdi><span class="woocommerce-Price-currencySymbol">AED</span> {{ number_format($service->price_from,2)}}</bdi>
                                                      </span>					
                                                   </td>
                                             </tr>
                                             @endif
                                             @if(session()->has('attribute_details'))
                                                   @foreach(session('attribute_details') as $attribute)
                                                   <tr class="cart_item">
                                                      <td class="product-name">{{ $attribute['name'] }} ({{$attribute['value']}})</td>
                                                      <td class="product-total">
                                                         <span class="woocommerce-Price-amount amount">
                                                               <bdi><span class="woocommerce-Price-currencySymbol">AED</span> {{ number_format($attribute['price'],2) }}</bdi>
                                                         </span>
                                                      </td>
                                                   </tr>
                                                   @endforeach
                                             @endif
                                             @if($wordCount > 0)
                                             <tr class="cart_item">
                                                <td class="product-name">
                                                   Word Count								
                                                </td>
                                                <td class="product-total">
                                                   <span class="woocommerce-Price-amount amount">
                                                         <bdi><span class="woocommerce-Price-currencySymbol"></span> {{$wordCount}}</bdi>
                                                   </span>					
                                                </td>
                                             </tr>
                                             @endif

                                             <tr class="cart_item">
                                                <td class="product-name">
                                                   Subtotal								
                                                </td>
                                                <td class="product-total">
                                                   <span class="woocommerce-Price-amount amount">
                                                      <bdi><span class="woocommerce-Price-currencySymbol">AED</span> {{number_format($totalPrice,2)}}</bdi>
                                                   </span>					
                                                </td>
                                             </tr>
                                            
                                          </tbody>
                                          <tfoot>
                                             <tr class="order-total">
                                                <th>Total</th>
                                                <td>
                                                   <strong><span class="woocommerce-Price-amount amount">
                                                      <bdi><span class="woocommerce-Price-currencySymbol">AED</span> {{number_format($totalPrice,2)}}</bdi></span>
                                                   </strong>
                                                </td>
                                             </tr>
                                          </tfoot>
                                       </table>
                                    </div>
                                 </div>


                                 <div class="_form mt-4">
                                    <div role="form" class="wpcf7">
                                    
                                       <form action="{{ route('services.booking.storeBillingDetails') }}" method="post" class="wpcf7-form init" id="booking_formservice">
                                          @csrf
                                          <input type="hidden" name="id" value="{{ $service_id }}">
                                          <input type="hidden" name="total" value="{{ $totalPrice }}">
                                          <p>Your personal data will be used to process your order, support your experience throughout 
                                             this website, and for other purposes described in our <a href="#" target="_blank">privacy policy</a>.</p>
                                          
                                          
                                             <div class="form-check mb-4 mt-3">
                                                <input class="form-check-input" type="checkbox" value="" id="terms_and_condition">
                                                <label class="form-check-label" for="cdcssd">
                                                   I have read and agree to the website <a href="#" target="_blank">terms and conditions</a>
                                                </label>
                                              </div>
                                          

                                          <div>
                                             <button type="submit" class="wpcf7-form-control has-spinner wpcf7-submit w-100" id="proceedtopayment">Proceed to the Payment</button>
                                          </div>
                              
                                       </form>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </section>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_25"></div>
                           <!--===============spacing==============-->
                           
                        </div>
                     </div>
               <!--===============spacing==============-->
               <div class="pd_bottom_70"></div>
               <!--===============spacing==============-->
            </section>
            <!---about end--->
      </div>
      @endsection