@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">

                                       <label for="formFile" class="form-label">Please upload support documents</label>
                                       <div class="dz-default dz-message upload-area mb-5" id="myDropzone">
                                          <span>Drop files here or click to upload.</span>
                                       </div>
                                       <div class="document-preview" id="document-preview">
                                        <ul id="file-preview-list-confirm"></ul>
                                       </div>
                                       <input type="hidden" id="file_namesconfirm" name="file_namesconfirm" value="" />

                                        <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>Legal Translation</h2>
                                 </div>
                                 <div class="your_order_box">
                                    <table class="shop_table woocommerce-checkout-review-order-table">
                                       <!-- <thead>
                                          <tr>
                                             <th class="product-name">Product</th>
                                             <th class="product-total">Subtotal</th>
                                          </tr>
                                       </thead> -->
                                       <tbody>
                                          <tr class="cart_item">
                                             <td class="product-name">
                                                Document Type										
                                             </td>
                                             <td class="product-total">
                                                <span class="woocommerce-Price-amount amount">
                                                   Letters
                                                </span>					
                                             </td>
                                          </tr>
                                          <tr class="cart-subtotal">
                                             <td>From Language</td>
                                             <td>
                                                <span class="woocommerce-Price-amount amount">
                                                {{ $priceDetails[0]['from'] ?? 'Unknown' }}
                                                </span>
                                             </td>
                                          </tr>
                                          <tr class="cart-subtotal">
                                             <td>To Language</td>
                                             <td>
                                                <span class="woocommerce-Price-amount amount">
                                                {{ $priceDetails[0]['to'] ?? 'Unknown' }}
                                                </span>
                                             </td>
                                          </tr>
                                          <tr class="cart-subtotal">
                                             <td>Delivery Options</td>
                                             <td>
                                                <span class="woocommerce-Price-amount amount">
                                                   Normal
                                                </span>
                                             </td>
                                          </tr>
                                          <tr class="cart-subtotal">
                                             <td>Referral Employee</td>
                                             <td>
                                                <span class="woocommerce-Price-amount amount">
                                                   Website
                                                </span>
                                             </td>
                                          </tr>
                                          <tr class="cart-subtotal">
                                             <td>How many words</td>
                                             <td>
                                                <span class="woocommerce-Price-amount amount">
                                                {{ $wordsCount }} 
                                                </span>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </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>
                                             <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> {{ $totalPrice }}</bdi>
                                                   </span>					
                                                </td>
                                             </tr>
                                             @php
                                                $totalPrice = $totalPrice ?? 0; // Total price from booking
                                                
                                                $shippingVAT = $totalPrice * 0.05; // 5% VAT on shipping
                                                
                                                $grandTotal = $totalPrice + $shippingVAT; // Add shipping cost (with VAT) to the total price
                                             @endphp
                                             <tr class="cart_item">
                                                <td class="product-name">
                                                   Shipping								
                                                </td>
                                                <td class="product-total">
                                                   <span class="woocommerce-Price-amount amount">
                                                      <bdi><span class="woocommerce-Price-currencySymbol">AED </span>{{ $shippingVAT }}</bdi>
                                                      <span>(includes 5% VAT)</span>
                                                   </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> {{ $grandTotal }}</bdi></span>
                                                   </strong>
                                                </td>
                                             </tr>
                                          </tfoot>
                                       </table>
                                    </div>
                                 </div>


                                 <div class="_form mt-4">
                                    <div role="form" class="wpcf7">
                                    
                                       <form action="{{ route('services.saveconfirmbookingdata') }}" method="post" class="wpcf7-form init" id="booking_form">
                                          @csrf
                                          <input type="hidden" name="id" value="{{ $service->id }}">
                                          <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