@extends('front.template.header')
@section('content')
<style>
    .header_area {
        z-index: 2;
    }
    .modal-footer .btn{
        min-height: 45px;
        line-height: 45px;
        font-size: 14px;
    }
    .modal-footer .btn-secondary{
        min-width: 105px;
    }
    .text-muted.delivery-selection {
    font-size: 0.85rem; /* Smaller text size */
    color: #6c757d; /* Muted color */
}
.s_tab_btn.nav-link {
    pointer-events: none;  /* Disables clicking */
    cursor: not-allowed;   /* Optional: Changes the cursor to indicate it's disabled */
}


</style>
<div id="content" class="site-content ">
            
            <!---about--->
            <section class="about-section">
               <!--===============spacing==============-->
               <!-- <div class="pd_top_90"></div> -->
               <!--===============spacing==============-->
               <div class="container">
                  <section class="tabs_all_box tabs_all_box_start type_two mb-5">
                     <div class="tab_over_all_box">
                  <div class="tabs_header clearfix">
                  <ul class="showcase_tabs_btns nav nav-pills" id="pills-tab" role="tablist">
                     <li class="nav-item" role="presentation">
                       <a class="s_tab_btn nav-link active" id="tab1-tab" data-bs-toggle="pill" href="#tab1" role="tab">01.Contacts</a>
                     </li>
                     <li class="nav-item" role="presentation">
                       <a class="s_tab_btn nav-link" id="tab2-tab" data-bs-toggle="pill" href="#tab2" role="tab">02.Documents</a>
                     </li>
                     <li class="nav-item" role="presentation">
                       <a class="s_tab_btn nav-link" id="tab3-tab" data-bs-toggle="pill" href="#tab3" role="tab">03.Additional Information</a>
                     </li>
                     <li class="nav-item" role="presentation">
                       <a class="s_tab_btn nav-link" id="tab4-tab" data-bs-toggle="pill" href="#tab4" role="tab">04.Options</a>
                     </li>
                     <li class="nav-item" role="presentation">
                       <a class="s_tab_btn nav-link" id="tab5-tab" data-bs-toggle="pill" href="#tab5" role="tab">05.Place Order</a>
                     </li>
                   </ul>
                  </div>
               
                   <!-- Tab Content -->
                   <div class="tab-content mt-4" id="pills-tabContent">
                     <!-- Tab 1 -->
                     <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                        <div class="tab_content one">
                           <div class="row">
                               <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-0 mb-xl-0">
                                   <section class="contact_form_box_all type_one">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading mb-4">
                                                   <h4>Get started</h4>
                                                   <p>Please provide your contact details to initiate the translation request and proceed with the checkout process.</p>
                                                   <!-- <h5 class="mt-2">AED68.25 – AED397.95</h5> -->
                                               </div>
                                               <div class="_form">
                                                   <div role="form" class="wpcf7">
                                                       <div class="row gutter_15px">
                                                           <div class="col-md-6">
                                                               <div class="wpcf7-form-control-wrap your-name">
                                                                   <label>
                                                                       Full name<br />
                                                                       <input
                                                                           type="text"
                                                                           name="full_name"
                                                                           id="full_name"
                                                                           value=""
                                                                           size="40"
                                                                           class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required"
                                                                           aria-required="true"
                                                                           aria-invalid="false"
                                                                           placeholder=""
                                                                       />
                                                                       <span class="error-message" style="color: red; display: none; text-transform: none; ">Please enter your full name.</span>
                                                                   </label>
                                                               </div>
                                                           </div>
                                                           <div class="col-md-6">
                                                               <div class="wpcf7-form-control-wrap your-name">
                                                                   <label>
                                                                       Email address<br />
                                                                       <input
                                                                           type="text"
                                                                           name="full_email"
                                                                           id="full_email"
                                                                           value=""
                                                                           size="40"
                                                                           class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required"
                                                                           aria-required="true"
                                                                           aria-invalid="false"
                                                                           placeholder=""
                                                                       />
                                                                        <span class="error-message" style="color: red; display: none; text-transform: none;">Please enter a valid email address.</span>
                                                                   </label>
                                                               </div>
                                                           </div>
                                                       </div>
                                                       <div class="extra_content authour_box_two dark_color">
                                                           <div class="authour_box_content two px-5">
                                                               <div class="text ms-0">
                                                                   <p style="font-size: 14px;">
                                                                       <b>Note:</b> This form is for people who would like to quickly receive a quote and place their order in seconds. If you have any questions to ask us first, or if you prefer to receive a quote
                                                                       now and then confirm your order at a later time, that’s great too!
                                                                   </p>
                                                               </div>
                                                           </div>
                                                           <button class="theme-btn two w-100 prev-btn mt-4 mx-auto d-block" data-bs-toggle="modal" data-bs-target="#instantQuote" style="max-width: 280px">Free Instant Quote</button>
                                                       </div>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </section>
                               </div>
                               <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                   <section class="contact_form_box_all type_two inclided-details-card">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading">
                                                   <h5>What's Included</h5>
                                               </div>
                                               <div class="your_order_box">
                                                   <div class="price_plan_box style_one p-0">
                                                       <div class="bottom">
                                                           <ul>
                                                               <li>
                                                                   <span>Guaranteed Acceptance Worldwide</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> Certificate of Translation Accuracy</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> 100% Human Translation</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> Secure Document Handling</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> Electronic PDF Delivered via E-mail</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> Physical Copies Available</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                               <li>
                                                                   <span> Notarization Available</span>
                                                                   <i class="fa fa-check"></i>
                                                               </li>
                                                           </ul>
                                                       </div>
                                                   </div>
                                                   <div class="nav-btns">
                                                       <button class="theme-btn one one w-100 next-btn" data-current="1" data-next="#tab2-tab">Next:</button>
                                                   </div>
                                                   <div class="woocommerce-checkout-review-order-table">
                                                       <h6>Secure and Private</h6>
                                                       <p>All data processed by our site, including uploaded files, is encrypted. Only essential staff with signed NDAs have access to your information.</p>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </section>
                               </div>
                           </div>
                       </div>
                       
                     </div>
               
                     <!-- Tab 2 -->
                     <div class="tab-pane fade" id="tab2" role="tabpanel">

                        <div class="tab_content one">
                           <div class="row">
                               <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-0 mb-xl-0">
                                   <section class="contact_form_box_all type_one">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading mb-4">
                                                   <h4>Chose language pair and upload documents</h4>
                                                   <!--<p>Enter your contact information to begin the checkout process.</p>-->
                                                   <!-- <h5 class="mt-2">AED68.25 – AED397.95</h5> -->
                                               </div>
                                               <div class="_form">
                                                   <div role="form" class="wpcf7">
                                                       <div class="row gutter_15px">
                                                        <div class="_form">
                                                                <div class="row gutter_15px">
                                                                    <div class="col-md-6">
                                                                        <label>Total Pages</label>
                                                                        <input type="number" name="total_pagestranslation" id="total_pagestranslation" class="form-control" min="1">
                                                                        <span class="error-message" style="color: red; display: none; text-transform: none;">Please enter the total pages.</span>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <label>Word Count</label>
                                                                        <input type="number" name="word_counttranslation" id="word_counttranslation" class="form-control" required min="1">
                                                                        <span class="error-message" style="color: red; display: none; text-transform: none;">Please enter the total words.</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           <div class="col-md-6">
                                                               <div class="wpcf7-form-control-wrap your-name">
                                                                   <label> Translation From</label>
                                                                   <select id="translation_from" name="translation_from" class="wpcf7-form-control-wrap your-name js-example-basic-single" name="from-lang-type" data-attribute_name="-type" data-show_option_none="yes">
                                                                       <option value="">Choose a language</option>
                                                                       @foreach($languagesFrom as $lang)
                                                                       <option value="{{$lang->id}}">{{$lang->name}}</option>
                                                                       @endforeach
                                                                       
                                                                   </select>
                                                                   
                                                               </div>
                                                               <span class="error-messagetranslation_from" style="color: red; display: none; text-transform: none;">Please enter the translation from.</span>
                                                           </div>
                                                           <div class="col-md-6">
                                                               <div class="wpcf7-form-control-wrap your-name">
                                                                   <label> Translation To</label>
                                                                   <select id="translation_to" name="translation_to[]" class="wpcf7-form-control-wrap your-name js-example-basic-multiple" multiple="multiple" name="attribute_pa_document-type" data-attribute_name="type" data-show_option_none="yes">
                                                                       <option value="">Choose a language</option>
                                                                       @foreach($languagesToFiltered as $lang)
                                                                       <option value="{{$lang->id}}">{{$lang->name}}</option>
                                                                       @endforeach
                                                                       
                                                                   </select>
                                                                   
                                                               </div>
                                                               <span class="error-messagetranslation_to" style="color: red; display: none; text-transform: none;">Please enter the translation to.</span>
                                                           </div>
                                                       </div>
                                                       
                                                       <div class="file-up-area-wrap mt-4">
                                                           <div class="custom-input-file mb-3">
                                                               <input type="file" class="input-file" id="file" name="file[]" multiple data-multiple-caption="{count} files selected" />
                                                               <label for="file" class="btn btn-upload"> <i class="fa fa-plus me-2" aria-hidden="true"></i> Add Files </label>
                                                           </div>
                                                           <div class="document-preview">
                                                               <ul  id="file-preview-list">
                                                                  
                                                               </ul>
                                                           </div>
                                                           <input type="hidden" id="file_names" name="file_names" />
                                                           <span id="file-error" class="error-message" style="color: red; display: none; text-transform: none;">Please upload at least one file.</span>
                                                           <span id="file-errortype" class="error-message" style="color: red; display: none; text-transform: none;"></span>
                                                       </div>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </section>
                               </div>
                               <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                   <section class="contact_form_box_all type_two inclided-details-card d-none">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading">
                                                   <h5>Summary</h5>
                                               </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">
                                                                       Arabic
                                                                   </span>
                                                               </td>
                                                           </tr>
                                                           <tr class="cart-subtotal">
                                                               <td>To Language</td>
                                                               <td>
                                                                   <span class="woocommerce-Price-amount amount">
                                                                       English
                                                                   </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 documents</td>
                                                               <td>
                                                                   <span class="woocommerce-Price-amount amount">
                                                                       02
                                                                   </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">$</span>30.00</bdi>
                                                                       </span>
                                                                   </td>
                                                               </tr>
                                                               <tr class="cart_item">
                                                                   <td class="product-name">
                                                                       Shippig
                                                                   </td>
                                                                   <td class="product-total">
                                                                       <span class="woocommerce-Price-amount amount">
                                                                           <bdi><span class="woocommerce-Price-currencySymbol">$</span>10.00</bdi>
                                                                           <span>(includes $1.50 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">$</span>30.00</bdi>
                                                                           </span>
                                                                       </strong>
                                                                   </td>
                                                               </tr>
                                                           </tfoot>
                                                       </table>
                                                   </div>
                                               </div>
                       
                                               <div class="_form mt-4">
                                                   <div role="form" class="wpcf7">
                                                       <form action="thankyou.html" method="post" class="wpcf7-form init">
                                                           <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="cdcssd" />
                                                               <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">Proceed to the Payment</button>
                                                           </div>
                                                       </form>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </section>
                                   <section class="contact_form_box_all type_two inclided-details-card">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading">
                                                   <h5>Summary</h5>
                                               </div>
                                               <div class="your_order_box">
                                                   <p>The price will be estimated in the next step.</p>
                                                   <div class="nav-btns mt-2">
                                                       <!-- <button class="theme-btn one one w-100 mb-2 btnNext" type="button"></button>
                                                       <button class="theme-btn two w-100 btnPrevious" type="button"></button> -->
                                                       <button class="theme-btn one w-100 next-btn mb-2" data-current="2" data-next="#tab3-tab">Next: Additional Information</button>
                                                       <button class="theme-btn two w-100 prev-btn" data-prev="#tab1-tab">Back: Contacts</button>
                                                   </div>
                                                   <div class="woocommerce-checkout-review-order-table">
                                                       <h6>Secure and Private</h6>
                                                       <p>All data processed by our site, including uploaded files, is encrypted. Only essential staff with signed NDAs have access to your information.</p>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </section>
                               </div>
                           </div>
                       </div>
                       
                 
                       
                     </div>
               
                     <!-- Tab 3 -->
                     <div class="tab-pane fade" id="tab3" role="tabpanel">


                        <div class="tab_content one">
                                    
                           <div class="row">
                              <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-0 mb-xl-0">
                                 <section class="contact_form_box_all type_one">
                                    <div class="contact_form_box_inner">
                                       <div class="contact_form_shortcode">
                                          <div class="heading mb-4">
                                             <p>Would you like to provide any additional information for the translator (like correct spelling for names)?</p>
                                             <!-- <h5 class="mt-2">AED68.25 – AED397.95</h5> -->
                                             <div class="d-flex align-items-center gap-5 mt-3  mb-3 form-check-input-radio">
                                                <div class="form-check">
                                                   <input class="form-check-input" name="inlineRadioOptions" onclick="toggleTextarea()" type="radio" value="yes">
                                                   <label class="form-check-label" for="1">
                                                      Yes
                                                   </label>
                                                 </div>
                                                 <div class="form-check">
                                                   <input class="form-check-input" name="inlineRadioOptions" type="radio" onclick="toggleTextarea()" value="no">
                                                   <label class="form-check-label" for="2">
                                                      No
                                                   </label>
                                                 </div>
                                                
                                             </div>
                                             <span class="error-messageinlineRadioOptions" style="color: red; display: none; text-transform: none;">Please select additional information .</span>

                                             <textarea id="addinfotextarea" name="addinfotextarea" placeholder="Additional information:"></textarea>
                                             <span class="error-messageinlineaddinfotextarea" style="color: red; display: none; text-transform: none;">Please select additional information .</span>

                                             
                                              
                                          </div>
                                       </div>
                                    </div>
                                 </section>
                              </div>
                              <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                 
                                 <section class="contact_form_box_all type_two inclided-details-card">
                                    <div class="contact_form_box_inner">
                                       <div class="contact_form_shortcode">
                                          <div class="heading">
                                             <h5>Summary</h5>
                                          </div>
                                          <div class="your_order_box">
                                             <!-- <div class="d-flex align-items-start justify-content-between">
                                                <p id="languagedisplay">English - Afrikaans <br class="d-block"> <small class="text-muted">8 Page</small></p>
                                                <p id="tranlationprice">AED</p>
                                             </div> -->
                                             <div class="d-flex align-items-start justify-content-between">
                                                <div id="languagedisplay">
                                                    English - Afrikaans <br class="d-block">
                                                    <small class="text-muted">8 Pages</small>
                                                </div>
                                                
                                            </div>
                                            
                                             <div class="nav-btns mt-2">
                                                <button class="theme-btn one w-100 mb-2 next-btn" data-current="3" data-next="#tab4-tab">Next: Options </button>
                                                <button class="theme-btn two w-100 prev-btn" data-prev="#tab2-tab">Back: Documents </button>
                                             </div>
                                             <div class="woocommerce-checkout-review-order-table">
                                                <h6>Secure and Private</h6>
                                                <p>All data processed by our site, including uploaded files, is encrypted. Only essential staff with signed NDAs have access to your information.</p>
                                             </div>
                                          </div>
                                          
                                       </div>
                                    </div>
                                 </section>
                              </div>
                           </div>

                        </div>
                      
                     </div>
                     <div class="tab-pane fade" id="tab4" role="tabpanel">

                        <div class="tab_content one">
                           <div class="row">
                               <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-0 mb-xl-0">
                                   <section class="contact_form_box_all type_one">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading mb-4">
                                                   <h4>Translation type</h4>
                                               </div>
                                               <span class="error-message-translationmethod" style="color: red; display: none; text-transform: none;">Please select all options.</span>
                                               <ul class="option-card-list">
                                                   @foreach($translationcat as $cat)
                                                   <li>
                                                       <label class="option-card">
                                                           <input type="radio" class="form-check-input" name="translationOption" value="{{$cat->slug}}" />
                                                           <span>
                                                               <h5 class="card-title">{{$cat->name}} <span class="price-badge">@if($cat->price_type === 'fixed')
                                                                        AED {{ $cat->price }} {{ $cat->price_type }}
                                                                    @else
                                                                        {{ ucfirst($cat->price_type) }}
                                                                    @endif</span>
                                                                </h5>
                                                                <p class="card-text">{{$cat->description}}</p>
                                                                <input type="hidden" name="translationOptionTitle[]" value="{{ $cat->name }}" />
                                                                <input type="hidden" name="translationOptionPrice[]" value="{{ $cat->price }}" />
                                                                <input type="hidden" name="translationOptionPercentage[]" value="{{ $cat->price_type === 'rush_fee' ? $cat->percentage : '' }}" />
                                                           </span>
                                                       </label>
                                                   </li>
                                                   @endforeach
                                                  
                                                   
                                               </ul>
                       
                                               <!-- <ul class="option-card-list option-card-list-1 mt-4" id="hiddenDivradio">
                                                   <li>
                                                       <label class="option-card">
                                                           <input type="radio" class="form-check-input" name="translationOption1" value="certified" />
                                                           <span>
                                                               <h5 class="card-title">STANDARD <span class="price-badge">FREE</span></h5>
                                                               <p class="card-text">1 - 2 days Monday at 7:52 PM (latest)</p>
                                                           </span>
                                                       </label>
                                                   </li>
                                                   <li>
                                                       <label class="option-card">
                                                           <input type="radio" class="form-check-input" name="translationOption1" value="only-translation" />
                                                           <span>
                                                               <h5 class="card-title">EXPEDITED <span class="price-badge">30% RUSH FEE</span></h5>
                                                               <p class="card-text">15 - 24 hours Tomorrow at 7:52 PM (latest)</p>
                                                           </span>
                                                       </label>
                                                   </li>
                                               </ul>
                       
                                               <ul class="option-card-list option-card-list-1 mt-4" id="showdelivery">
                                                   <li>
                                                       <label class="option-card">
                                                           <input type="radio" class="form-check-input" name="translationOption2" value="certified" />
                                                           <span>
                                                               <h5 class="card-title">DIGITAL DELIVERY <span class="price-badge">FREE</span></h5>
                                                               <p class="card-text">Arrives to your email immediately when completed.</p>
                                                           </span>
                                                       </label>
                                                   </li>
                                                   <li>
                                                       <label class="option-card">
                                                           <input type="radio" class="form-check-input" name="translationOption2" value="only-translation" />
                                                           <span>
                                                               <h5 class="card-title">DIGITAL & PHYSICAL COPY <span class="price-badge">$12.95</span></h5>
                                                               <p class="card-text">2-day express shipping via USPS. This price is for domestic shipping only, international shipping may incur a small fee.</p>
                                                           </span>
                                                       </label>
                                                   </li>
                                               </ul> -->
                                               <ul class="option-card-list option-card-list-1 mt-4" id="hiddenDivradio">
                                                    <!-- Options will be appended dynamically here -->
                                                </ul>

                                                <ul class="option-card-list option-card-list-1 mt-4" id="showdelivery">
                                                    <!-- Options will be appended dynamically here -->
                                                </ul>

                                           </div>
                                       </div>
                                    </section>
                                 </div>
                                       <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                           <section class="contact_form_box_all type_two inclided-details-card">
                                               <div class="contact_form_box_inner">
                                                   <div class="contact_form_shortcode">
                                                       <div class="heading">
                                                           <h5>Summary</h5>
                                                       </div>
                                                       <div class="your_order_box">
                                                        
                                                        <div id="translationtypesummaray">
                                                                <!-- Dynamically updated summary will go here -->
                                                            </div>

                                                           <div class="nav-btns mt-2">
                                                               <button class="theme-btn one one w-100 mb-2 next-btn" data-current="4" data-next="#tab5-tab">Next: Place Order</button>
                                                               <button class="theme-btn two w-100 prev-btn" data-prev="#tab3-tab">Back: Additional Information</button>
                                                           </div>
                                                           <hr />
                       
                                                           <div class="woocommerce-checkout-review-order-table">
                                                               <h6>Secure and Private</h6>
                                                               <p>All data processed by our site, including uploaded files, is encrypted. Only essential staff with signed NDAs have access to your information.</p>
                                                           </div>
                                                       </div>
                                                   </div>
                                               </div>
                                           </section>
                                       </div>
                                   
                               </div>
                           </div>
                       </div>
                       
                     <div class="tab-pane fade" id="tab5" role="tabpanel">
                        <div class="tab_content one">
                           <div class="row">
                               <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-xs-12 mb-5 mb-lg-0 mb-xl-0">
                                   <section class="contact_form_box_all type_one">
                                       <div class="contact_form_box_inner">
                                           <div class="contact_form_shortcode">
                                               <div class="heading mb-4">
                                                   <h4>Shipping Information</h4>
                                                   <p>You will receive an E-mail once your order has been shipped.</p>
                                               </div>
                                               <input type="hidden" name="service_id" id="service_id" value="{{$service->service_type_id}}">
                                               <input type="hidden" name="servicedetail_id" id="servicedetail_id" value="{{$service->id}}">
                                               <input type="hidden" name="order_total" id="order_total" value="">
                                               <input type="hidden" name="translationamount" id="translationamount" value="">
                                               <input type="hidden" name="delieveryselectionamount" id="delieveryselectionamount" value="">
                                               <input type="hidden" name="delieverymethodnamount" id="delieverymethodnamount" value="">
                                               <div class="row">
                                                   <div class="col-12">
                                                       <label>
                                                           Recipient<br />
                                                           <input type="text" name="recipient" id="recipient" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="" />
                                                           <span class="error-messageconfirm" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                        </label>
                                                   </div>
                                                   <div class="col-12 mb-4">
                                                       <div class="wpcf7-form-control-wrap your-name">
                                                           <label class="mb-1"> City</label>
                                                           <select name="city" id="city" class="wpcf7-form-control-wrap your-name js-example-basic-single">
                                                                <option value="">Choose City</option>
                                                                @foreach($cities as $city)
                                                                <option value="{{$city->name}}">{{$city->name}}</option>
                                                                @endforeach
                                                                
                                                            </select>
                                                          
                                                       </div>
                                                       <span class="error-messageconfirmcity" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                   </div>
                                                   <div class="col-12">
                                                       <label>
                                                           Zip Code<br />
                                                           <input type="number" name="zipcode" id="zipcode" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="" />
                                                           <span class="error-messageconfirm" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                        </label>
                                                   </div>
                                                   <div class="col-12">
                                                       <label>
                                                           Address<br />
                                                           <input type="text" name="address" id="address" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="" />
                                                           <span class="error-messageconfirm" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                        </label>
                                                   </div>
                                                   <div class="col-12">
                                                       <label>
                                                           Apartment<br />
                                                           <input type="text" name="appartment" id="appartment" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="" />
                                                           <span class="error-messageconfirm" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                        </label>
                                                   </div>
                                                   <div class="col-12">
                                                       <label>
                                                           Phone Number<br />
                                                           <input type="number" name="phone" id="phone" value="" size="40" class="form-control wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="" />
                                                           <span class="error-messageconfirm" style="color: red; display: none; text-transform: none;">This field is required.</span>
                                                        </label>
                                                   </div>
                                               </div>
                                             </div>
                                          </div>
                                    </section>
                                 </div>

                                               <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                   <section class="contact_form_box_all type_two inclided-details-card">
                                                       <div class="contact_form_box_inner">
                                                           <div class="contact_form_shortcode">
                                                               <div class="heading">
                                                                   <h5>Summary</h5>
                                                               </div>
                                                               <div class="your_order_box">
                                                                <div id="summarayconfirmorder">
                                                                    <!-- Dynamically updated summary will go here -->
                                                                    </div>
                                                                   <!-- <div class="d-flex align-items-start justify-content-between">
                                                                       <p>
                                                                           English - Afrikaans <br class="d-block" />
                                                                           <small class="text-muted">8 Page</small>
                                                                       </p>
                                                                       <p>$ 45.90</p>
                                                                   </div>
                       
                                                                   <div class="d-flex align-items-start justify-content-between">
                                                                       <p>
                                                                           Translation type <br class="d-block" />
                                                                           <small class="text-muted">NOTARIZED</small>
                                                                       </p>
                                                                       <p>$ 29.50</p>
                                                                   </div>
                                                                   <div class="d-flex align-items-start justify-content-between">
                                                                       <p>
                                                                           Turaround time <br class="d-block" />
                                                                           <small class="text-muted">1 - 2 days Monday at 8:20 PM (latest)</small>
                                                                       </p>
                                                                   </div>
                                                                   <div class="d-flex align-items-start justify-content-between mt-2">
                                                                       <h5>Total</h5>
                                                                       <h5>$88.35</h5>
                                                                   </div> -->
                       
                                                                   <div class="nav-btns mt-2">
                                                                       <a href="javascript:void(0);" id="confirm-order-btn" class="theme-btn one one w-100 mb-2">Confirm Order </a>
                                                                       <button class="theme-btn two w-100 prev-btn" data-prev="#tab4-tab">Back: Options</button>
                                                                   </div>
                                                                  
                                                                   <div class="woocommerce-checkout-review-order-table">
                                                                       <h6>Secure and Private</h6>
                                                                       <p>All data processed by our site, including uploaded files, is encrypted. Only essential staff with signed NDAs have access to your information.</p>
                                                                   </div>
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </section>
                                               </div>
                                           </div>
                                       </div>
                                   
                               </div>
                           </div>
                       </div>
                       
                     </div>
                   </div>
                 </div>
                 </div>
            </section>

               
               <!--===============spacing==============-->
               <div class="pd_bottom_70"></div>
               <!--===============spacing==============-->
            </section>


            <div class="modal fade" id="instantQuote" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog  modal-dialog-centered">
                    <div class="modal-content">
                    <form id="quoteForm">
                        @csrf
                        <input type="hidden" name="service_id" value="{{$service->id}}">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Free Instant Quote</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="contact_form_shortcode">
                                <div class="_form">
                                    <div role="form" class="wpcf7">
                                        <div class="row gutter_15px">
                                            <div class="col-md-6">
                                                <label>Full Name</label>
                                                <input type="text" name="name" class="form-control" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Email Address</label>
                                                <input type="email" name="email" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="_form">
                                    <div class="row gutter_15px">
                                        <div class="col-md-12">
                                            <label>Translation From</label>
                                            <select id="from_lang" name="from_lang" class="form-control js-example-basic-single" required>
                                                <option value="">Choose a language</option>
                                                @foreach($languages as $lang)
                                                <option value="{{$lang->name}}">{{$lang->name}}</option>
                                                @endforeach
                                                
                                            </select>
                                        </div>
                                        <div class="col-md-12">
                                            <label>Translation To</label>
                                            <select id="to_lang" name="to_lang[]" class="form-control js-example-basic-multiple" multiple required>
                                                @foreach($languages as $lang)
                                                <option value="{{$lang->name}}">{{$lang->name}}</option>
                                                @endforeach
                                                
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="_form">
                                    <div class="row gutter_15px">
                                        <div class="col-md-6">
                                            <label>Total Pages</label>
                                            <input type="number" name="total_pages" class="form-control" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Word Count</label>
                                            <input type="number" name="word_count" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary theme-btn two" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary theme-btn one">Get Quote</button>
                        </div>
                    </form>

                    </div>
                </div>
            </div>
      @endsection