<!DOCTYPE html>
<html lang="en-US">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <title>{{$page_tittle}}</title>
   <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
		<!-- Favicon -->
		<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('front/assets/images/favicon/apple-icon-57x57.png') }}">
		<link rel="apple-touch-icon" sizes="60x60" href="{{ asset('front/assets/images/favicon/apple-icon-60x60.png') }}">
		<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('front/assets/images/favicon/apple-icon-72x72.png') }}">
		<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('front/assets/images/favicon/apple-icon-76x76.png') }}">
		<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('front/assets/images/favicon/apple-icon-114x114.png') }}">
		<link rel="apple-touch-icon" sizes="120x120" href="{{ asset('front/assets/images/favicon/apple-icon-120x120.png') }}">
		<link rel="apple-touch-icon" sizes="144x144" href="{{ asset('front/assets/images/favicon/apple-icon-144x144.png') }}">
		<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('front/assets/images/favicon/apple-icon-152x152.png') }}">
		<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('front/assets/images/favicon/apple-icon-180x180.png') }}">
		<link rel="icon" type="image/png" sizes="192x192"  href="{{ asset('front/assets/images/favicon/android-icon-192x192.png') }}">
		<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('front/assets/images/favicon/favicon-32x32.png') }}">
		<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('front/assets/images/favicon/favicon-96x96.png') }}">
		<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('front/assets/images/favicon/favicon-16x16.png') }}">
        
        <link rel='stylesheet' href='{{ asset('front/assets/css/jquery.fancybox.min.css') }}' type='text/css' media='all' />
		<link rel="manifest" href="{{ asset('front/assets/images/favicon/manifest.json') }}">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="{{ asset('front/assets/images/favicon/ms-icon-144x144.png') }}">
		<meta name="theme-color" content="#ffffff">
   <!-- Fav Icon -->
   <!-- Google Fonts -->
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Spartan%3A400%2C500%2C600%2C700%2C800%2C900%7CInter%3A300%2C400%2C500%2C600%2C700%2C800%2C900&amp;subset=latin%2Clatin-ext' type='text/css' media='all' />
   <!-- Google Fonts -->
   <!-- Style -->
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <link rel='stylesheet' href='{{ asset('front/assets/css/bootstrap.min.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/owl.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/swiper.min.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/jquery.fancybox.min.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/icomoon.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/flexslider.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/font-awesome.min.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/style.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/scss/elements/theme-css.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/custom.css') }}' type='text/css' media='all' />
   <!-- <link rel='stylesheet' id="creote-color-switcher-css" href='assets/css/scss/elements/color-switcher/color.css' type='text/css' media='all' /> -->
   <!-- Style-->
   <!----woocommerce---->
   <link rel='stylesheet' href='{{ asset('front/assets/css/woocommerce-layout.css') }}' type='text/css' media='all' />
   <link rel='stylesheet' href='{{ asset('front/assets/css/woocommerce.css') }}' type='text/css' media='all' />
  
   <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap5.css') }}" />
   <link rel="stylesheet" href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}">
   <meta name="csrf-token" content="{{ csrf_token() }}">
 
   <!----woocommerce---->
   @yield('head')
</head>

<body class="home theme-creote page-home-default-one">
   <div id="page" class="page_wapper hfeed site">
      <div id="wrapper_full" class="content_all_warpper">
         <!----page-header----->
         <!-- <div class="mini_cart_togglers fixed_cart">
            <div class="mini-cart-count">
               0
            </div>
            <i class="icon-shopping-cart"></i>
         </div> -->
         <!----header----->
         <!-- <div class="preloader-wrap">
            <div class="preloader" style="background-image:url(assets/images/preloader.gif)">
            </div>
            <div class="overlay"></div>
         </div> -->
         

         @if(Request::is('/'))

         @include('front.template.topnavhome')
            
        @else
            <!-- Header for other routes -->
            @include('front.template.topnav')
        @endif
         <!----header----->
           
         @yield('content')

         </div>
      <div class="footer_area footer_five" id="footer_contents">
         <div class="footer_widgets_wrap bg_dark_2">
            <!--===============spacing==============-->
             <div class="pd_top_75"></div>
            <!--===============spacing==============-->
            <div class="auto-container">
               <div class="row">
                  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                     <div class="footer_widgets wid_tit style_two">
                        <div class="fo_wid_title">
                           <h2>Informations</h2>
                        </div>
                     </div>
                     <div class="footer_widgets clearfix navigation_foo light_color style_one">
                        <div class="navigation_foo_box">
                           <div class="navigation_foo_inner">
                                 <ul class="menu">
                                    <li class="menu-item"><a href="{{route('services')}}">Services</a></li>
                                    <li class="menu-item"><a href="{{ route('trackstatus') }}">Track Status</a></li>
                                    <li class="menu-item"><a href="{{ route('contact') }}">Client Support</a></li>
                                    <li class="menu-item"><a href="{{ route('privacy-policy') }}">Privacy policy</a></li>
                                    <li class="menu-item"><a href="{{ route('terms-of-use') }}">Terms of use</a></li>
                                    <!-- <li class="menu-item"><a href="#">Sitemap</a></li> -->
                                    <!-- <li class="menu-item"><a href="#">Careers</a></li> -->
                                 </ul>
                           </div>
                        </div>
                     </div>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_40"></div>
                           <!--===============spacing==============-->
                  </div>
                  <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
                     <div class="footer_widgets wid_tit style_two">
                        <div class="fo_wid_title">
                           <h2>Get In Touch</h2>
                        </div>
                     </div>
                     <!-- <div class="footer_contact_list light_color type_one">
                        <div class="same_contact address">
                           <span class="icon-location2"></span>
                           <div class="content">
                              <h6 class="titles">Address</h6>
                              <p>280 Granite Run Drive Suite #200 UAE</p>
                           </div>
                        </div>
                     </div> -->
                 
                     <div class="footer_contact_list light_color type_one">
                        <div class="same_contact mail">
                           <span class="icon-mail"></span>
                           <div class="content">
                              <h6 class="titles">Mail Us</h6>
                              @php
                              $email = \App\Models\SiteDetails::where('key', 'email')->first();
                              @endphp
                              <a href="mailto:info@Luqia.ps">{{ $email->value }}</a>
                           </div>
                        </div>
                     </div>
                     <!--===============spacing==============-->
                        <div class="pd_bottom_20"></div>
                     <!--===============spacing==============-->
                     <div class="footer_contact_list light_color type_one">
                        <div class="same_contact phone">
                           <span class="icon-telephone"></span>
                           <div class="content">
                              <h6 class="titles"> Phone</h6>
                              @php
                              $phone_number = \App\Models\SiteDetails::where('key', 'phone_number')->first();
                              @endphp
                              <a href="tel:{{ $phone_number->value }} ">{{ $phone_number->value }}</a> </br>
                              @php
                              $landline_number = \App\Models\SiteDetails::where('key', 'landline_number')->first();
                              @endphp
                              <a href="tel:{{ $landline_number->value }}">{{ $landline_number->value }}</a>
                           </div>
                        </div>
                     </div>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_40"></div>
                           <!--===============spacing==============-->
                  </div>
                  <div class="col-xl-5 col-lg-6 col-md-6 col-sm-12">
                     <div class="footer_widgets wid_tit style_two">
                        <div class="fo_wid_title">
                           <h2>Subscribe Us Today</h2>
                        </div>
                     </div>
                     <!-- <div class="footer_widgets foo_subscribe light_color style_one">
                        <div class="item_subscribe with_text">
                           <p>Subscribe Us &amp; Recive Our Offers and Updates i Your Inbox Directly.</p>
                           <div class="shortcodes">
                              
                              <form class="mc4wp-form" method="post" data-name="Subscibe">
                                 <div class="mc4wp-form-fields">
                                    <input type="email" name="EMAIL" placeholder="Your email address" required="">
                                    <input type="submit" value="Sign up">
                                 </div>
                              </form>

                           </div>
                           <p>* We do not share your email id</p>
                        </div>
                     </div> -->
                     <div class="social_media_v_one light">
                        <ul>
                           <li>
                              @php
                              $whatsapp_number = \App\Models\SiteDetails::where('key', 'whatsapp_number')->first();
                              @endphp
                              <a href="https://wa.me/{{ $whatsapp_number->value }}" target="_blank"> <span class="fa fa-whatsapp"></span>
                                 <small>WhatsApp</small>
                              </a>
                           </li>
                           <li>
                               @php
                              $facebook = \App\Models\SiteDetails::where('key', 'facebook_url')->first();
                              @endphp
                              <a href="{{ $facebook->value }}" target="_blank"> <span class="fa fa-facebook"></span>
                                 <small>facebook</small>
                              </a>
                           </li>
                           <li>
                              @php
                              $instagram = \App\Models\SiteDetails::where('key', 'instagram_url')->first();
                              @endphp
                              <a href="{{ $instagram->value }}" target="_blank"> <span class="fa fa-instagram"></span>
                                 <small>Instagram</small>
                              </a>
                           </li>
                           <li>
                              <a href="{{ $email->value }}" > <span class="fa fa-envelope"></span>
                                 <small>Mail Us</small>
                              </a>
                           </li>
                        </ul>
                     </div>
                           <!--===============spacing==============-->
                           <div class="pd_bottom_40"></div>
                           <!--===============spacing==============-->
                  </div>
               </div>
            </div>
            <!--===============spacing==============-->
             <div class="pd_bottom_35"></div>
            <!--===============spacing==============-->
         </div>
         <div class="footer-copyright bg_dark_1">
            <!--===============spacing==============-->
              <div class="pd_top_15"></div>
            <!--===============spacing==============-->
            <div class="auto-container">
               <div class="footer_copy_right">
                  <div class="row">
                     <div class="col-lg-6 col-md-6 col-sm-12">
                        <ul class="list_items_new_box type_one  display_inline">
                           <li>
                              <a href="{{ route('terms-of-use') }}" class="color_white">
                                 <span class="fa fa-check-circle icon color_white"></span>
                                 Terms of use        
                              </a>
                           </li>
                           <!-- <li>
                              <a href="#" class="color_white">
                                 <span class="fa fa-check-circle icon color_white"></span>
                                 Sitemap        
                              </a>
                           </li> -->
                           <!-- <li>
                              <a href="#" class="color_white">
                                 <span class="fa fa-check-circle icon color_white"></span>
                                 Careers        
                              </a>
                           </li> -->
                        </ul>
                     </div>
                     <div class="col-lg-6 col-md-6 col-sm-12 text-md-end">
                        <div class="footer_copy_content color_white">© <script>document.write(new Date().getFullYear())</script>  <a
                           href="" class="color_white">Luqia.</a> All Rights Reserved.</div>
                     </div>
                     
                  </div>
               </div>
            </div>
            <!--===============spacing==============-->
             <div class="pd_bottom_5"></div>
            <!--===============spacing==============-->
         </div>
      </div>
   <!---==============footer end =================-->
 <!---==============mobile menu =================-->
 <div class="crt_mobile_menu">
   <div class="menu-backdrop"></div>
   <nav class="menu-box">
      <div class="close-btn"><i class="icon-close"></i></div>
      <!-- <form role="search" method="get" action="#">
         <input type="search" class="search" placeholder="Search..." value="" name="s" title="Search" />
         <button type="submit" class="sch_btn"> <i class="icon-search"></i></button>
      </form> -->
      <div class="menu-outer">
         <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
      </div>
   </nav>
</div>
<!---==============mobile menu end =================-->
<!---==============search popup =================-->
<div id="search-popup" class="search-popup">
   <div class="close-search"><i class="fa fa-times"></i></div>
   <div class="popup-inner">
      <div class="overlay-layer"></div>
      <div class="search-form">
         <fieldset>
            <form role="search" method="get" action="#">
               <input type="search" class="search" placeholder="Search..." value="" name="s" title="Search" />
               <button type="submit" class="sch_btn"> <i class="icon-search"></i></button>
            </form>
         </fieldset>
      </div>
   </div>
</div>
<!---==============search popup end =================-->
<!---==============modal popup =================-->
<div class="modal_popup one">
   <div class="modal-popup-inner">
      <div class="close-modal"><i class="fa fa-times"></i></div>
      <div class="modal_box">
         <div class="row">
            <div class="col-lg-5 col-md-12 form_inner">
               <div class="form_content">
            
                      
                     <form class="contact-form" method="post" action="#">
                        <p>
                           <label> Your name<br />
                             <input type="text" name="name" value="" size="40"   aria-required="true" aria-invalid="false" placeholder="Enter Your Name" /> 
                             <br />
                              <i class="fa fa-user"></i><br />
                           </label>
                        </p>
                        <p><label> Your email<br />
                            <input type="email" name="email" value="" size="40" aria-required="true" aria-invalid="false"  placeholder="Enter Your Email" />
                            <br />
                           <i class="fa fa-envelope"></i><br />
                           </label>
                        </p>
                        <p>
                           <label> Subject<br />
                             <input type="text" name="subject" value="" size="40" aria-required="true" aria-invalid="false"  placeholder="Enter Your Subject" /> 
                             <br />
                              <i class="fa fa-folder"></i><br />
                           </label>
                        </p>
                        <p>
                           <label> Your message (optional)<br />
                              <textarea name="message"  cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"  aria-invalid="false" placeholder="Enter Your Message"></textarea> 
                              <br />
                              <i class="fa fa-comments"></i><br />
                           </label>
                        </p>
                        <p><input type="submit" value="Submit" /></p>
                     
                     </form>
              
               </div>
            </div>
            <div class="col-lg-7 col-md-12 about_company_inner">
               <div class="abt_content">
                  <div class="logo">
                     <img src="{{ asset('front/assets/images/logo-default.png') }}" alt="img" class="company_logo_modal">
                  </div>
                  <div class="text">
                     <p> The great explorer of the truth, the master-builder of human happiness no one rejects
                        dislikes avoids pleasure itself because it is pleasure but because know who do not those
                        how to pursue pleasures rationally encounter consequences that are extremely painful
                        desires to obtain.</p>
                     <a href="#">Read More</a>
                  </div>
                  <div class="post_contet_modal">
                     <h2> Latest News</h2>
                     <div class="post_enable">
                        <div class="modal_post_grid">
                           <a href="#">
                              <img width="852" height="812" src="{{ asset('front/assets/images/blog/blog-image-9.jpg') }}"
                                 class="main_img wp-post-image" alt="img" />
                           </a>
                        </div>
                        <div class="modal_post_grid">
                           <a href="#">
                              <img width="852" height="812" src="{{ asset('front/assets/images/blog/blog-image-8.jpg') }}"
                                 class="main_img wp-post-image" alt="img" />
                           </a>
                        </div>
                        <div class="modal_post_grid">
                           <a href="#">
                              <img width="852" height="812" src="{{ asset('front/assets/images/blog/blog-image-7.jpg') }}"
                                 class="main_img wp-post-image" alt="img" />
                           </a>
                        </div>
                        <div class="modal_post_grid">
                           <a href="#">
                              <img width="852" height="812" src="{{ asset('front/assets/images/blog/blog-image-6.jpg') }}"
                                 class="main_img wp-post-image" alt="img" />
                           </a>
                        </div>
                        <div class="modal_post_grid">
                           <a href="#">
                              <img width="852" height="812" src="{{ asset('front/assets/images/blog/blog-image-5.jpg') }}"
                                 class="main_img wp-post-image" alt="img" />
                           </a>
                        </div>
                     </div>
                  </div>
                  <div class="copright">
                     © 2024 Luqia. All Rights Reserved.
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!---==============modal popup end=================-->
<!---==============cart=================-->
<div class="side_bar_cart" id="mini_cart">
   <div class="cart_overlay"></div>
   <div class="cart_right_conten">
      <div class="close">
         <div class="close_btn_mini"><i class="icon-close"></i></div>
      </div>
      <div class="cart_content_box">
         <div class="contnet_cart_box">
            <div class="widget_shopping_cart_content">
               <p class="woocommerce-mini-cart__empty-message">No products in the cart.</p>
            </div>
         </div>
      </div>
   </div>
</div>
<!---==============cart=================-->
 
</div>

<div class="callnow-icon-bottom">
   <a href="tel:{{ $phone_number->value }}" target="_blank" class="click-a">
      <img class="shake-animation" src="{{ asset('front/assets/images/call-now.png') }}" alt="">
   </a>
</div>

<div class="whatsapp-icon-bottom">
   <a href="https://wa.me/{{ $whatsapp_number }}" target="_blank" class="click-a">
      <img src="{{ asset('front/assets/images/whatsapp-logo.png') }}" alt="">
   </a>
</div>

<!-- Back to top with progress indicator-->
<div class="prgoress_indicator">
   <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
      <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
   </svg>
</div>
<!---========================== javascript ==========================-->
<script type='text/javascript' src='{{ asset('front/assets/js/jquery-3.6.0.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/bootstrap.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/jquery.fancybox.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/jQuery.style.switcher.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/jquery.flexslider-min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/color-scheme.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/owl.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/swiper.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/isotope.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/countdown.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/simpleParallax.min.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/appear.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/jquery.countTo.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/sharer.js') }}'></script>
<script type='text/javascript' src='{{ asset('front/assets/js/validation.js') }}'></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- map script -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-CE0deH3Jhj6GN4YvdCFZS7DpbXexzGU"></script>
<script src="{{ asset('front/assets/js/gmaps.js') }}"></script>
<script src="{{ asset('front/assets/js/map-helper.js') }}"></script>
<!-- main-js -->
<script type='text/javascript' src='{{ asset('front/assets/js/creote-extension.js') }}'></script>
<script type="text/javascript" src="{{ asset('assets/js/custom.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<!---========================== javascript ==========================-->

<script>
      $(document).ready(function() {
         $('.js-example-basic-single').select2();
         $('.js-example-basic-multiple').select2();
         $('.modal .js-example-basic-multiple,.modal .js-example-basic-single').select2({
            dropdownParent: $('#instantQuote')
        });
      });
      // $('.btnNext').click(function(){
      //    $('.nav-tabs > .active').next('li').find('a').trigger('click');
      // });

      // $('.btnPrevious').click(function(){
      //    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
      // });


      function toggleTextarea() {
         const textarea = document.getElementById('addinfotextarea');
         const isYesSelected = document.querySelector('input[name="inlineRadioOptions"]:checked').value === 'yes';
         textarea.style.display = isYesSelected ? 'block' : 'none';
      }


      $(document).ready(function () {
         $('input[name="translationOption"]').on('click', function () {
         $('#hiddenDivradio').css('display', 'flex'); // Show the div when any radio is clicked
         });
      });


      $(document).ready(function () {
         $('input[name="translationOption1"]').on('click', function () {
         $('#showdelivery').css('display', 'flex'); // Show the div when any radio is clicked
         });
      });
   </script>


<script>
   $(document).ready(function () {

     $('.next-btn').on('click', function () {
       let nextTabSelector = $(this).data('next'); 
       let currenttab = $(this).data('current');

       let isValid = true;
       if (currenttab == "1") {
            
            if ($('#full_name').val() === "") {
                $('#full_name').next('.error-message').show();
                isValid = false;
            } else {
                $('#full_name').next('.error-message').hide();
            }

            const emailValue = $('#full_email').val();
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if (emailValue === "" || !emailPattern.test(emailValue)) {
                $('#full_email').next('.error-message').show(); 
                isValid = false;
            } else {
                $('#full_email').next('.error-message').hide(); 
            }
        }
        if (currenttab == "2") {
         

            if ($('#translation_from').val() === "") {
                $('.error-messagetranslation_from').show();
                isValid = false;
            } else {
                $('.error-messagetranslation_from').hide();
            }

            
            if ($('#translation_to').val().length === 0) {
                $('.error-messagetranslation_to').show();
                isValid = false;
            } else {
                $('.error-messagetranslation_to').hide();
            }

            if ($('#total_pagestranslation').val() === "" || $('#total_pagestranslation').val() < 1) {
               $('#total_pagestranslation').next('.error-message').text("Total Pages must be greater than or equal to 1").show();
                isValid = false;
            } else {
                $('#total_pagestranslation').next('.error-message').hide();
            }

            if ($('#word_counttranslation').val() === "" || $('#word_counttranslation').val() < 1) {
               $('#word_counttranslation').next('.error-message').text("Word Count must be greater than or equal to 1").show();
                $('#word_counttranslation').next('.error-message').show();
                isValid = false;
            } else {
                $('#word_counttranslation').next('.error-message').hide();
            }

            
            if ($('#file_names').val().trim()  === '') {
                $('#file-error').show();
                isValid = false;
            } else {
                $('#file-error').hide();
            }
            
        }

        if (currenttab == "3") {
            
            if (!$('input[name="inlineRadioOptions"]:checked').val()) {
               
               $('.error-messageinlineRadioOptions').show();
               isValid = false;
               return false;
            } else {
               
               $('.error-messageinlineRadioOptions').hide(); 
            }

            
            if ($('input[name="inlineRadioOptions"]:checked').val() === 'yes') {
               
               if ($('#addinfotextarea').val().trim() === "") {
                  
                     
                     $('.error-messageinlineaddinfotextarea').show();
                     isValid = false;
               } else {
                     
                     $('.error-messageinlineaddinfotextarea').hide();
               }
            }
      }

       if (currenttab == "4") {
            
            if (!$('input[name="translationmethodOptiondelievery"]:checked').val()) {
                
                $('.error-message-translationmethod').show();
                isValid = false;
                return false;
            } else {
                // Hide error message if selected
                $('.error-message-translationmethod').hide();
            }
        }


      
      if (isValid ) {
         $(nextTabSelector).tab('show'); 
      }
       
       //$(nextTabSelector).tab('show'); // Show the next tab
     });

     
     $('.prev-btn').on('click', function () {
       let prevTabSelector = $(this).data('prev'); 
       $(prevTabSelector).tab('show'); 
     });

     // Handle "Finish" Button
     $('.finish-btn').on('click', function () {
       alert('You have completed all steps!');
     });
   });
 </script>

<script>
$(document).ready(function() {
    $('#confirm-order-btn').click(function() {
      
        let isValid = true; 

        // Validate recipient field
        if ($('#recipient').val().trim() === "") {
            $('#recipient').next('.error-messageconfirm').show();
            isValid = false;
        } else {
            $('#recipient').next('.error-messageconfirm').hide();
        }

         const cityValue = $('#city').val().trim(); 

         if (cityValue === "") {
            $('.error-messageconfirmcity').show();
            isValid = false;
         } else {
            $('.error-messageconfirmcity').hide();
         }


        
        if ($('#zipcode').val().trim() === "") {
            $('#zipcode').next('.error-messageconfirm').show();
            isValid = false;
        } else {
            $('#zipcode').next('.error-messageconfirm').hide();
        }

        if ($('#address').val().trim() === "") {
            $('#address').next('.error-messageconfirm').show();
            isValid = false;
        } else {
            $('#address').next('.error-messageconfirm').hide();
        }

        if ($('#appartment').val().trim() === "") {
            $('#appartment').next('.error-messageconfirm').show();
            isValid = false;
        } else {
            $('#appartment').next('.error-messageconfirm').hide();
        }

        if ($('#phone').val().trim() === "") {
            $('#phone').next('.error-messageconfirm').show();
            isValid = false;
        } else {
            $('#phone').next('.error-messageconfirm').hide();
        }

       

        if (isValid) {

            $.ajax({
                url: '{{ route('services.bookingdata') }}', 
                method: 'POST',
                data: {
                  service_id: $('#servicedetail_id').val(),
                    recipient: $('#recipient').val(),
                    city: cityValue,
                    zipcode: $('#zipcode').val(),
                    address: $('#address').val(),
                    appartment: $('#appartment').val(),
                    phone: $('#phone').val(),
                    additional_info: $('#addinfotextarea').val(),
                    full_name: $('#full_name').val(),
                     full_email: $('#full_email').val(),
                     translation_from: $('#translation_from').val(),
                     translation_to: $('#translation_to').val(),
                     total_pagestranslation: $('#total_pagestranslation').val(),
                     word_counttranslation: $('#word_counttranslation').val(),
                     file_names: $('#file_names').val(),
                     inlineRadioOptions: $('input[name="inlineRadioOptions"]:checked').val(),
                     addinfotextarea: $('#addinfotextarea').val().trim(),
                    _token: $('meta[name="csrf-token"]').attr('content') 
                },
                success: function(response) {
                    
                    console.log('Order confirmed:', response);
                    window.location.href = response.redirect_url; 
                },
                error: function(error) {
                    
                    console.log('Error:', error);
                }
            });
        }
    });
});
</script>
 <script>
    
    $('#file').on('change', function(event) {
        const files = event.target.files;
      
        uploadFiles(files);
    });


    function uploadFiles(files) {
        const formData = new FormData();
        const validExtensions = ['pdf', 'doc', 'docx'];
         let isValid = true;

         $.each(files, function(index, file) {
            const fileExtension = file.name.split('.').pop().toLowerCase();

            if (!validExtensions.includes(fileExtension)) {
                  $('#file-errortype').text(`Invalid file type: ${file.name}. Only PDF and DOC files are allowed.`).show();
                  isValid = false;
                  return false; 
            }

            formData.append('file[]', file);
         });

         if (!isValid) {
            return; 
         }

        $.ajax({
            url: '{{ route('service.uploadfile') }}',  
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  
            },
            success: function(response) {
               $('#file-error').hide();
                console.log('Files uploaded successfully:', response);
                
                const previewList = $('#file-preview-list');

                  const existingFileNames = $('#file_names').val().split(',').filter(Boolean);

                  const allFileNames = [...new Set([...existingFileNames, ...response.files])]; 


                  $('#file_names').val(allFileNames.join(','));

                  previewList.empty();
                  allFileNames.forEach((fileName, index) => {
                     const listItem = `
                        <li id="file-item-${index}">
                              <div class="file-preview-item">
                                 ${fileName}
                                 <a href="javascript:void(0);" class="remove-file" data-filename="${fileName}">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                 </a>
                              </div>
                        </li>
                     `;
                     previewList.append(listItem);
                  });

               
            },
            error: function(error) {
                console.log('Error uploading files:', error);
            }
        });
    }

    $('#file-preview-list').on('click', '.remove-file', function() {
    const fileName = $(this).data('filename');
    const index = $(this).data('index');
    const fileInput = $('#file')[0];
    let files = Array.from(fileInput.files);

    if (index < files.length) {

        const dataTransfer = new DataTransfer();
        files.splice(index, 1); 
        $.each(files, function(i, file) {
            dataTransfer.items.add(file);
        });
        fileInput.files = dataTransfer.files; 
    } else {
        
        const existingFileNames = $('#file_names').val().split(',');
        const updatedFileNames = existingFileNames.filter(name => name !== fileName);
        $('#file_names').val(updatedFileNames.join(',')); 
    }

    $(this).closest('li').remove();

    deleteFile(fileName);
});


    function deleteFile(fileName) {
        $.ajax({
            url: '{{ route('service.deletefile') }}',  
            method: 'POST',
            data: {
                file_name: fileName,
                _token: $('meta[name="csrf-token"]').attr('content')  
            },
            success: function(response) {
                console.log('File deleted successfully:', response);
            },
            error: function(error) {
                console.log('Error deleting file:', error);
            }
        });
    }
</script>


<script>
$(document).ready(function () {
    $('#quoteForm').submit(function (e) {
        
        e.preventDefault();  
        
        var formData = $(this).serialize(); 

        $.ajax({
            url: '{{ route('services.quote') }}',
            type: 'POST',
            data: formData,
            success: function(response) {
               Swal.fire({
                  iconHtml: `<img src="{{ asset('front/assets/images/success-circle.svg') }}" class="img-fluid">`,
                  // title: "Success!",
                  text: response.message,
                  confirmButtonText: "OK",
                  customClass: {
                     confirmButton: 'custom-ok-button-class w-sm' 
                  }
               }).then(() => {
                  $('#instantQuote').modal('hide');  
                  $('#instantQuote form')[0].reset();
                  $('#instantQuote select').val(null).trigger('change');
                  
               });
               
            },
            error: function(xhr) {
               Swal.fire({
                  text: "Something went wrong. Please try later",
                  iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                  confirmButtonText: "OK", 
                  customClass: {
                        confirmButton: 'custom-ok-button-class w-sm' 
                  }
               });
            }
        });
    });
});
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#from_lang').on('change', function() {
            var selectedFromLang = $(this).val();  

            $('#to_lang option').each(function() {
                var optionValue = $(this).val();
                if (optionValue === selectedFromLang) {
                    $(this).prop('disabled', true); 
                } else {
                    $(this).prop('disabled', false); 
                }
            });

            if ($('#to_lang').val() && $('#to_lang').val().includes(selectedFromLang)) {
                $('#to_lang').val($('#to_lang').val().filter(function(value) {
                    return value !== selectedFromLang;
                }));
            }
        });

      
        $('#from_lang').on('change', function() {
            if (!$(this).val()) {
               
                $('#to_lang option').prop('disabled', false);  
                
                
            }
            $('#to_lang').val([]).trigger('change');
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#homeRedirectForm').on('submit', function(e) {
            e.preventDefault(); 
            window.location.href = "{{ route('home') }}"; 
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function() {
        // $('#translation_from').on('change', function() {
        //     var selectedFromLang = $(this).val();  

        //     $('#translation_to option').each(function() {
        //         var optionValue = $(this).val();
        //         if (optionValue === selectedFromLang) {
        //             $(this).prop('disabled', true); 
        //         } else {
        //             $(this).prop('disabled', false); 
        //         }
        //     });

        //     if ($('#translation_to').val() && $('#translation_to').val().includes(selectedFromLang)) {
        //         $('#translation_to').val($('#translation_to').val().filter(function(value) {
        //             return value !== selectedFromLang;
        //         }));
        //     }
        // });

        $('#translation_from').on('change', function () {
            var selectedToLang = $(this).val();  
            var serviceId = $('#service_id').val();

            // Fetch languages dynamically from the server
            $.ajax({
                url: '{{ route('services.gettranlationlanguages') }}', // Replace with your route
                type: 'GET',
                dataType: 'json',
                data: {
                    service_id: serviceId,
                    translation_to: selectedToLang
                },
                success: function (response) {
                    // Clear existing options
                    $('#translation_to').empty();

                    // Populate options from the response
                    $.each(response.languages, function (index, language) {
                        $('#translation_to').append(
                            $('<option>', {
                                value: language.id,
                                text: language.name
                            })
                        );
                    });
                },
                error: function () {
                    alert('Error fetching languages.');
                }
            });
        });


      
        $('#translation_from').on('change', function() {
            if (!$(this).val()) {
               
                $('#translation_to option').prop('disabled', false);  
                
                
            }
            $('#translation_to').val([]).trigger('change');
        });
    });
</script>
<script>
   $(document).ready(function() {
    
    $('#readMoreBtn').click(function() {
        
        var myModal = new bootstrap.Modal(document.getElementById('fullDescriptionModal'));
        myModal.show();
    });
});

</script>

<script>
$(document).ready(function () {

    function fetchPrice() {
        let translationFrom = $('#translation_from').val();
        let translationTo = $('#translation_to').val();
        let service_id = $('#service_id').val();
        let words_count = $('#word_counttranslation').val();
        if ($('#word_counttranslation').val() === "") {
               $('#word_counttranslation').next('.error-message').show();
               
               return false;
         } else {
               $('#word_counttranslation').next('.error-message').hide();
         }

        if (translationFrom && translationTo.length > 0) {
            $.ajax({
                url: '{{ route('services.getserviceprice') }}', 
                type: 'POST',
                data: {
                    service_id: service_id,
                    translation_from: translationFrom,
                    translation_to: translationTo,
                    words_count: words_count,
                    _token: $('meta[name="csrf-token"]').attr('content') 
                },
                success: function (response) {
                  if (response.price_details) {
                     $('#order_total').val(response.total_price);
                     let priceDetailsHtml = '';
                     response.price_details.forEach(function(detail) {
                        priceDetailsHtml += `
                           <p> ${detail.from} - ${detail.to}: AED ${detail.price} </p>
                        `;
                     });

                     priceDetailsHtml += `
                        <p><strong>Total:</strong> AED ${response.total_price} </p>
                     `;

                     // Update the language display with page count
                     $('#languagedisplay').html(`
                        ${priceDetailsHtml}
                        <small class="text-muted">${response.words_count} Words</small>
                     `);
                  }


                  if (response.price_details) {
                     let priceDetailsHtml = '';

                     response.price_details.forEach(function(detail) {
                        priceDetailsHtml += `
                              <div class="d-flex align-items-start justify-content-between">
                                 <p>${detail.from} - ${detail.to} <br class="d-block" /></p>
                                 <p>AED ${detail.price} </p>
                              </div>
                        `;
                     });

                     let translationTypeHtml = '';
                     //if (response.translation_type_price) {
                        translationTypeHtml = `
                              <div class="d-flex align-items-start justify-content-between">
                                 <p class="translaton_type_name">
                                    Translation type <br class="d-block" />
                                    <small class="text-muted"></small>
                                 </p class="translation_type_price">
                                 <p>${response.translation_type_price} AED</p>
                              </div>
                        `;
                    //}



                     const totalSummaryHtml = `
                        <div class="d-flex align-items-start justify-content-between mt-2">
                              <h5>Total</h5>
                              <h5 class="tranlation_total">${response.total_price} AED</h5>
                        </div>
                     `;

                     // Update the summary section in the next step
                     $('#translationtypesummaray').html(`
                        ${priceDetailsHtml}
                        ${translationTypeHtml}
                        ${totalSummaryHtml}
                     `);
                     $('#summarayconfirmorder').html(`
                        ${priceDetailsHtml}
                        ${translationTypeHtml}
                        ${totalSummaryHtml}
                     `);
                     
                  }


               
                },
                error: function () {
                    
                    Swal.fire({
                           text: "Error fetching price. Please try again.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                    });
                }
            });
        } else {
            $('#languagedisplay').text('');
        }
    }

    // Event listeners
    $('#translation_from').on('change', fetchPrice);
    $('#translation_to').on('change', fetchPrice);
});

</script>
 
<script>
$(document).on('change', 'input[name="translationOption"]', function () {
    const selectedOption = $(this).val();

    
    $.ajax({
        url: '{{ route('services.translationtypedetails') }}', 
        method: 'POST',
        data: {
            translationOption: selectedOption,
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        },
        success: function (response) {
            if (response.success) {
                const options = response.data;

                $('#hiddenDivradio').html('');
                $('#showdelivery').html('');

                options.forEach(function(option, index) {
                    let priceDisplay = '';
                    if (option.price_type === 'rush_fee') {
                        priceDisplay =  `${option.percentage}% RUSH FEE` ;
                    } else if (option.price_type === 'free') {
                        priceDisplay = 'FREE';
                    } else if (option.price_type === 'fixed') {
                        priceDisplay = `AED 
                        ${option.price}`;
                    }
                    const radioName =  'translationOptiondelievery';

                    let optionHtml = `
                        <li>
                            <label class="option-card">
                                <input type="radio" class="form-check-input" name="${radioName}" value="${option.id}" />
                                <span>
                                    <h5 class="card-title">${option.title} <span class="price-badge">${priceDisplay}</span></h5>
                                    <p class="card-text">${option.description}</p>
                                </span>
                            </label>
                            <input type="hidden" id="deliveryOptionTitle_${option.id}" name="deliveryOptionTitle[]" value="${option.title}" />
                        <input type="hidden" id="deliveryOptionPrice_${option.id}" name="deliveryOptionPrice[]" value="${option.price || 0}" />
                        <input type="hidden" id="deliveryOptionPercentage_${option.id}" name="deliveryOptionPercentage[]" value="${option.price_type === 'rush_fee' ? option.percentage : ''}" />
                        </li>
                        
                    `;
                   // if (index < 2) {

                        $('#hiddenDivradio').append(optionHtml);
                   // } else {

                       // $('#showdelivery').append(optionHtml);
                    //}
                });

                if (options.length === 0) {
                    $('#hiddenDivradio').html('<p>No options available for the selected translation type.</p>');
                }
            } else {
                
                Swal.fire({
                           text: "Failed to load translation options.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                    });
            }
        },
        error: function (xhr) {
            alert(xhr.responseJSON.message || 'An error occurred.');
        },
    });
});

$(document).on('change', 'input[name="translationOptiondelievery"]', function () {
    const selectedOption = $(this).val();

    
    $.ajax({
        url: '{{ route('services.translationtydelievery') }}', 
        method: 'POST',
        data: {
            translationOption: selectedOption,
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        },
        success: function (response) {
            if (response.success) {
                const options = response.data;

                //$('#hiddenDivradio').html('');
                $('#showdelivery').html('');

                options.forEach(function(option, index) {
                    let priceDisplay = '';
                    if (option.price_type === 'rush_fee') {
                        priceDisplay =  `${option.percentage}% RUSH FEE` ;
                    } else if (option.price_type === 'free') {
                        priceDisplay = 'FREE';
                    } else if (option.price_type === 'fixed') {
                        priceDisplay = `AED${option.price}`;
                    }
                    const radioName =  'translationmethodOptiondelievery';

                    let optionHtml = `
                        <li>
                            <label class="option-card">
                                <input type="radio" class="form-check-input" name="${radioName}" value="${option.title}" />
                                <span>
                                    <h5 class="card-title">${option.title} <span class="price-badge">${priceDisplay}</span></h5>
                                    <p class="card-text">${option.description}</p>
                                </span>
                            </label>
                            <input type="hidden" id="deliverymethodOptionTitle_${option.title.replace(/[^a-zA-Z0-9]/g, '_')}" name="deliverymethodOptionTitle_[]" value="${option.title}" />
                            <input type="hidden" id="deliverymethodOptionPrice_${option.title.replace(/[^a-zA-Z0-9]/g, '_')}" name="deliverymethodOptionPrice_[]" value="${option.price || 0}" />
                            <input type="hidden" id="deliverymethodOptionTPercentage_${option.title.replace(/[^a-zA-Z0-9]/g, '_')}" name="deliverymethodOptionTPercentage_[]" value="${option.price_type === 'rush_fee' ? option.percentage : ''}" />
                        </li>
                    `;
                   // if (index < 2) {

                        $('#showdelivery').append(optionHtml);
                   // } else {

                       // $('#showdelivery').append(optionHtml);
                    //}
                });
                $('#showdelivery').css('display', 'flex'); 

                if (options.length === 0) {
                    $('#showdelivery').html('<p>No options available for the selected translation type.</p>');
                }
            } else {
                Swal.fire({
                           text: "Failed to load translation options.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                    });
                
            }
        },
        error: function (xhr) {
            alert(xhr.responseJSON.message || 'An error occurred.');
        },
    });
});

$(document).ready(function () {
    $('input[name="translationOption"]').on('click', function () {
        // Get the selected translation option details
        const selectedOptionSlug = $(this).val();
        
        // Find the <li> containing the selected option
        const selectedOption = $(`input[name="translationOption"][value="${selectedOptionSlug}"]`).closest('li');
        
        // Get the hidden input values for title, price, and percentage
        const title = selectedOption.find('input[name="translationOptionTitle[]"]').val();
        const price = parseFloat(selectedOption.find('input[name="translationOptionPrice[]"]').val());
        const percentage = parseFloat(selectedOption.find('input[name="translationOptionPercentage[]"]').val()) || 0;
        var totalPrice = $('#order_total').val();
        
        
        
        // Send AJAX request to calculate the total price
        $.ajax({
            url: '{{ route('services.gettranslationprice') }}', 
            method: 'POST',
            data: {
                translationPrice: price, // Translation price per word
                translationOptionSlug: selectedOptionSlug, // Translation option slug
                title:title,
                totalPrice:totalPrice,
                percentage: percentage // Rush fee percentage (if any)
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            success: function (response) {
                if (response.success) {
                    // Get the calculated total price and delivery price
                    const totalPrice = response.totalPrice;
                     const translationPrice = response.translationPrice;
       
                     const translationType = response.translationtype;
                     const translationamount = response.translationamount;
                     $('#translationamount').val(response.translationamount);
                     
                    // Display the calculated total price
                    $('.translaton_type_name').html(`
                           Translation type: <br class="d-block">
                           <small class="text-muted">${translationType}</small>
                     `);

                     // Update the translation price
                     
                    // $('#translationtypesummaray .translaton_type_name .d-flex:eq(1) p:last').html(translationPrice);
                    $('#translationtypesummaray .translaton_type_name').next('p').html('AED ' + translationPrice);
                    $('#summarayconfirmorder .translaton_type_name').next('p').html('AED ' + translationPrice);


                    // $('#summarayconfirmorder .translaton_type_name .d-flex:eq(1) p:last').html(translationPrice);
                       // Remove existing delivery_type and add new one
                        if ($('#translationtypesummaray .delivery_type').length > 0) {
                            $('#translationtypesummaray .delivery_type').remove();
                        }
                        $(`<div class="d-flex align-items-start justify-content-between delivery_type">
                            <p>
                                Delivery type: <br class="d-block">
                                <small class="text-muted"></small>
                            </p>
                            <p></p>
                        </div>`).insertAfter($('#translationtypesummaray .d-flex:eq(1)'));

                        if ($('#summarayconfirmorder .delivery_type').length > 0) {
                            $('#summarayconfirmorder .delivery_type').remove();
                        }
                        $(`<div class="d-flex align-items-start justify-content-between delivery_type">
                            <p>
                                Delivery type: <br class="d-block">
                                <small class="text-muted"></small>
                            </p>
                            <p></p>
                        </div>`).insertAfter($('#summarayconfirmorder .d-flex:eq(1)'));

                        // Remove existing delivery_method and add new one
                        if ($('#translationtypesummaray .delivery_method').length > 0) {
                            $('#translationtypesummaray .delivery_method').remove();
                        }
                        $(`<div class="d-flex align-items-start justify-content-between delivery_method">
                            <p>
                                Delivery method: <br class="d-block">
                                <small class="text-muted"></small>
                            </p>
                            <p></p>
                        </div>`).insertAfter($('#translationtypesummaray .d-flex:eq(2)')); // Adjust index as needed

                        if ($('#summarayconfirmorder .delivery_method').length > 0) {
                            $('#summarayconfirmorder .delivery_method').remove();
                        }
                        $(`<div class="d-flex align-items-start justify-content-between delivery_method">
                            <p>
                                Delivery method: <br class="d-block">
                                <small class="text-muted"></small>
                            </p>
                            <p></p>
                        </div>`).insertAfter($('#summarayconfirmorder .d-flex:eq(2)')); // Adjust index as needed


                     // Update the total price
                     $('.tranlation_total').html(`AED ${totalPrice}`);

                    
                    // Optionally, display delivery price if applicable (to be updated from another request)

                } else {
                    
                    Swal.fire({
                           text: "Failed to calculate total price.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                    });
                }
            },
            error: function (xhr) {
                alert(xhr.responseJSON.message || 'An error occurred.');
            }
        });
    });
});

$(document).ready(function () {
    $(document).on('change', 'input[name="translationOptiondelievery"]', function () {
            const selectedOptionId = $(this).val();
            

            const title = $(`#deliveryOptionTitle_${selectedOptionId}`).val();
            const price = parseFloat($(`#deliveryOptionPrice_${selectedOptionId}`).val()) || 0;
            const percentage = parseFloat($(`#deliveryOptionPercentage_${selectedOptionId}`).val()) || 0;
            var totalPrice = $('#order_total').val();
            var translationamount = $('#translationamount').val();

            console.log("Selected Title:", title);
            console.log("Price:", price);
            console.log("Percentage:", percentage);

            $.ajax({
                url: '{{ route("services.getdelieveryselectionprice") }}', // Adjust route name
                method: 'POST',
                data: {
                    delieverytypeprice: price,
                    translationOptionSlug: selectedOptionId,
                    percentage: percentage,
                    title: title,
                    totalPrice: totalPrice,
                    translationamount: translationamount,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                success: function (response) {
                    if (response.success) {
                        $('#delieveryselectionamount').val(response.deliveryselectionamount);
                        $('#delieveryselectionamount').val(response.deliveryselectionamount);
                        $('#translationtypesummaray .delivery_type small').text(response.deliveryselection); 
                        $('#translationtypesummaray .delivery_type p:last').text('AED ' + response.deliveryselectionamount); 
                        $('#summarayconfirmorder .delivery_type small').text(response.deliveryselection); 
                        $('#summarayconfirmorder .delivery_type p:last').text('AED ' + response.deliveryselectionamount); 


                        $('#translationtypesummaray .delivery_method small').text(''); 
                        $('#translationtypesummaray .delivery_method p:last').text(''); 
                        $('#summarayconfirmorder .delivery_method small').text(''); 
                        $('#summarayconfirmorder .delivery_method p:last').text(''); 

                        $('.tranlation_total').html(`AED ${response.totalPrice}`);

                        
                    
                        
                    } else {
                        Swal.fire({
                           text: "Failed to update total price.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                        });

                    }
                },
                error: function (xhr) {
                    alert(xhr.responseJSON.message || 'An error occurred.');
                },
            });
    });
});

$(document).ready(function () {
    $(document).on('change', 'input[name="translationmethodOptiondelievery"]', function () {
        
            const selectedOptionId = $(this).val();
            const formattedTitle =selectedOptionId.replace(/[^a-zA-Z0-9]/g, '_');
    
            const title = $(`#deliverymethodOptionTitle_${formattedTitle}`).val();
            const price = parseFloat($(`#deliverymethodOptionPrice_${formattedTitle}`).val()) || 0;
            const percentage = parseFloat($(`#deliverymethodOptionTPercentage_${formattedTitle}`).val()) || 0;
            var totalPrice = $('#order_total').val();
            var translationamount = $('#translationamount').val();
            var delieveryselectionamount = $('#delieveryselectionamount').val();

            console.log("Selected Title:", title);
            console.log("Price:", price);
            console.log("Percentage:", percentage);

            $.ajax({
                url: '{{ route("services.getdelieverymethodprice") }}', // Adjust route name
                method: 'POST',
                data: {
                    delieverytypeprice: price,
                    translationOptionSlug: selectedOptionId,
                    percentage: percentage,
                    title: title,
                    totalPrice: totalPrice,
                    translationamount: translationamount,
                    delieveryselectionamount: delieveryselectionamount
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                success: function (response) {
                    if (response.success) {
                        // $('#delieveryselectionamount').val(response.deliveryselectionamount);
                        // $('#delieveryselectionamount').val(response.deliveryselectionamount);
                        // $('#translationtypesummaray .delivery_type small').text(response.deliveryselection); 
                        // $('#translationtypesummaray .delivery_type p:last').text(response.deliveryselectionamount); 
                        // $('#summarayconfirmorder .delivery_type small').text(response.deliveryselection); 
                        // $('#summarayconfirmorder .delivery_type p:last').text(response.deliveryselectionamount); 
                        // Check if the response.deliveryselection is not already added
                        // Check if the specific <small> element with the deliveryselection is already present
                        // $('#translationtypesummaray .delivery_type p:first').find(' span.text-mutedoption').remove();

                        // // Now, append the new content
                        // $('#translationtypesummaray .delivery_type p:first').append(`
                            
                        //     <span class="text-mutedoption">,${response.deliveryselection}</span>
                        // `);
                        // $('#summarayconfirmorder .delivery_type p:first').find(' span.text-mutedoption').remove();

                        // // Now, append the new content
                        // $('#summarayconfirmorder .delivery_type p:first').append(`
                            
                        //     <span class="text-mutedoption">,${response.deliveryselection}</span>
                        // `);
                        $('#translationtypesummaray .delivery_method small').text(response.deliveryselection); 
                        $('#translationtypesummaray .delivery_method p:last').text('AED ' + response.deliveryselectionamount); 
                        $('#summarayconfirmorder .delivery_method small').text(response.deliveryselection); 
                        $('#summarayconfirmorder .delivery_method p:last').text('AED ' + response.deliveryselectionamount); 
                        


                        $('.tranlation_total').html(`AED ${response.totalPrice}`);

                        
                    
                        
                    } else {
                        
                        Swal.fire({
                           text: "Failed to update total price.",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                        });
                    }
                },
                error: function (xhr) {
                    alert(xhr.responseJSON.message || 'An error occurred.');
                },
            });
    });
});





// $(document).on('change', '#hiddenDivradio input[type="radio"]', function () {
//     if ($(this).prop('checked')) {
//       $('#showdelivery').css('display', 'flex'); 
         
//     }
// });
$(document).ready(function () {
    $('#showdelivery').hide(); 
});


</script>



   <script>
$(document).ready(function () {
    $('#booking_form').submit(function (e) {
        e.preventDefault(); 

        $('.error-message').remove();

        let isValid = true; 

        if (!$('#terms_and_condition').is(':checked')) {
            const errorMessage = $('<span class="error-message" style="color: red; font-size: 14px;">You must agree to the terms and conditions.</span>');
            $('#terms_and_condition').closest('.form-check').append(errorMessage);
            isValid = false;
        }

        const fieldsToValidate = [
            { id: 'first_name', message: 'First name is required.' },
            { id: 'last_name', message: 'Last name is required.' },
            { id: 'country', message: 'Please select a country.' },
            { id: 'street_address', message: 'Street address is required.' },
            { id: 'city', message: 'City is required.' },
            { id: 'phone', message: 'Phone number is required.' },
            { id: 'email', message: 'Email address is required.' }
        ];

        fieldsToValidate.forEach(function (field) {
            const value = $('#' + field.id).val().trim();
            if (!value) {
                const errorMessage = $('<span class="error-message" style="color: red; font-size: 14px;">' + field.message + '</span>');

                $('#' + field.id).after(errorMessage);
                isValid = false;
            }
        });

        if (!isValid) {
            return;
        }

        const formData = {
            _token: $('input[name="_token"]').val(),
            id: $('input[name="id"]').val(),
            first_name: $('#first_name').val(),
            last_name: $('#last_name').val(),
            company_name: $('#company_name').val(),
            country: $('#country').val(),
            street_address: $('#street_address').val(),
            apartment: $('#apartment').val(),
            city: $('#city').val(),
            state: $('#state').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            file_namesconfirm : $('#file_namesconfirm').val(),
           // deliver_to_different_address: $('#deliver_to_different_address').is(':checked'),
            order_notes: $('#order_notes').val()
        };
       

        $.ajax({
            url: "{{ route('services.saveconfirmbookingdata') }}",
            type: "POST",
            data: formData,
            success: function (response) {
                window.location.href = "{{ url('/thank-you') }}/" + response.booking_id;
            },
            error: function (xhr) {
                alert('An error occurred while submitting the form.');
                console.error(xhr.responseText);
            }
        });
    });
});



$(document).ready(function () {
    $('#booking_formservice').submit(function (e) {
        e.preventDefault(); 

        $('.error-message').remove();

        let isValid = true; 

        if (!$('#terms_and_condition').is(':checked')) {
            const errorMessage = $('<span class="error-message" style="color: red; font-size: 14px;">You must agree to the terms and conditions.</span>');
            $('#terms_and_condition').closest('.form-check').append(errorMessage);
            isValid = false;
        }

        const fieldsToValidate = [
            { id: 'first_name', message: 'First name is required.' },
            { id: 'last_name', message: 'Last name is required.' },
            { id: 'country', message: 'Please select a country.' },
            { id: 'street_address', message: 'Street address is required.' },
            { id: 'city', message: 'City is required.' },
            { id: 'phone', message: 'Phone number is required.' },
            { id: 'email', message: 'Email address is required.' }
        ];

        fieldsToValidate.forEach(function (field) {
            const value = $('#' + field.id).val().trim();
            if (!value) {
                const errorMessage = $('<span class="error-message" style="color: red; font-size: 14px;">' + field.message + '</span>');

                $('#' + field.id).after(errorMessage);
                isValid = false;
            }
        });

        if (!isValid) {
            return;
        }

        const formData = {
            _token: $('input[name="_token"]').val(),
            id: $('input[name="id"]').val(),
            total: $('input[name="total"]').val(),
            first_name: $('#first_name').val(),
            last_name: $('#last_name').val(),
            company_name: $('#company_name').val(),
            country: $('#country').val(),
            street_address: $('#street_address').val(),
            apartment: $('#apartment').val(),
            city: $('#city').val(),
            state: $('#state').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            file_namesconfirm : $('#file_namesconfirm').val(),
           // deliver_to_different_address: $('#deliver_to_different_address').is(':checked'),
            order_notes: $('#order_notes').val()
        };
       

        $.ajax({
            url: "{{ route('services.booking.storeBillingDetails') }}",
            type: "POST",
            data: formData,
            success: function (response) {
                
                window.location.href = "{{ url('/thank-youservicebooking') }}/" + response.booking_id;
            },
            error: function (xhr) {
                alert('An error occurred while submitting the form.');
                console.error(xhr.responseText);
            }
        });
    });
});


</script>

<script>
$(document).ready(function () {
    $('#contact-form').validate({
        rules: {
            name: {
                required: true,
                maxlength: 255
            },
            email: {
                required: true,
                email: true,
                maxlength: 255
            },
            subject: {
                maxlength: 255
            },
            message: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name.",
                maxlength: "Name cannot be more than 255 characters."
            },
            email: {
                required: "Please enter your email.",
                email: "Please enter a valid email address.",
                maxlength: "Email cannot be more than 255 characters."
            },
            subject: {
                maxlength: "Subject cannot be more than 255 characters."
            },
            message: {
                required: "Please enter a message."
            }
        },
        errorElement: "span", // Set the error element to div
        errorClass: "error-message", // Set the error class to error-message
        errorPlacement: function (error, element) {
            // Place the error message in the closest parent .form-group
            error.appendTo(element.closest('.form-group'));
        },
        submitHandler: function (form) {
            // Send the form data via AJAX after validation
            $.ajax({
                url: $(form).attr('action'),
                type: $(form).attr('method'),
                data: $(form).serialize(),
                success: function (response) {
                    if (response.status === 'success') {
                     Swal.fire({
                           iconHtml: `<img src="{{ asset('front/assets/images/success-circle.svg') }}" class="img-fluid">`,
                           // title: "Success!",
                           text: response.message,
                           confirmButtonText: "OK",
                           customClass: {
                              confirmButton: 'custom-ok-button-class w-sm' 
                           }
                        }).then(() => {
                           $('#contact-form')[0].reset();
                           
                        });
                          // Reset the form
                    } else {
                        Swal.fire({
                           text: "Something went wrong. Please try later",
                           iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                           confirmButtonText: "OK", 
                           customClass: {
                                 confirmButton: 'custom-ok-button-class w-sm' 
                           }
                        });
                    }
                }
            });
            return false;  // Prevent default form submission
        }
    });
});

</script>   
@if(Route::is('services.confirmbooking*'))
<script>
     Dropzone.autoDiscover = false;

     Dropzone.autoDiscover = false;

const myDropzone = new Dropzone("#myDropzone", {
    url: "{{ route('service.uploadfile') }}",  // File upload endpoint
    previewsContainer: "#document-preview", // Set the container for previews
    maxFilesize: 1,  // Max file size in MB
    acceptedFiles: ".doc, .docx, .pdf",  // Allowed file types (doc, docx, pdf)
    addRemoveLinks: true,  // Allow removing files
    autoProcessQueue: true,  // Automatically process the queue when files are added
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  // CSRF token for security
    },
    paramName: "file[]",
    init: function() {
        const dzInstance = this;

        // When a file is successfully uploaded
        this.on("success", function(file, response) {
            console.log("File uploaded successfully:", response);

            // Update the hidden input with the new file names

            const existingFileNames = $('#file_namesconfirm').val().split(',').filter(Boolean);

            // Combine existing and new file names, ensuring no duplicates
            const allFileNames = [...new Set([...existingFileNames, ...response.files])];

            // Update the hidden input field with the new list of file names
            $('#file_namesconfirm').val(allFileNames.join(','));

            // Clear the preview list and add the new file names
           
        });

        // When a file is removed from the queue
        this.on("removedfile", function(file) {
            console.log("File removed:", file);

            // Get the current file names from the hidden input
            const existingFileNames = $('#file_namesconfirm').val().split(',').filter(Boolean);

            // Remove the file name from the list (if it exists)
            const updatedFileNames = existingFileNames.filter(name => name !== file.name);

            // Update the hidden input with the remaining file names
            $('#file_namesconfirm').val(updatedFileNames.join(','));

            // Optionally, update the preview list if needed
            $('#file-preview-list-confirm').find(`#file-item-${file.name}`).remove();
        });

        // Optionally, handle error
        this.on("error", function(file, errorMessage) {
            console.log("Error uploading file:", errorMessage);
        });
    }
});


    </script>


    <script>
    $(document).ready(function() {
        
        $('.dz-remove').on('click', function() {
            // Get the file name from the hidden input
            var fileName = $('#file_namesconfirm').val();

            // If the file name is present in the input
            if (fileName) {
                // Remove the file name (or clear the input)
                $('#file_namesconfirm').val('');
            }

            // Optionally, you can also remove the file preview
            $(this).closest('.dz-preview').remove();
        });
    });

    </script>

@endif
@if(Route::is('services.detail*'))
<script>
//    $(document).ready(function () {
//       let fieldConditions = @json($fieldConditions); // Fetch conditions from backend

//       if (fieldConditions && fieldConditions.length > 0) { // Ensure fieldConditions is not empty
//          function applyConditions() {
//             fieldConditions.forEach(condition => {
//                let triggerField = $(`[name="booking_fields[${condition.target_field_id}]"]`);
//                let targetField = $(`[data-field-id="${condition.field_id}"]`);

//                if (triggerField.length === 0 || targetField.length === 0) return;

//                function checkCondition() {
//                   let selectedValue = triggerField.val();
//                   if (selectedValue == condition.value) {
//                      targetField.show();  // Show field if condition is met
//                   } else {
//                      targetField.hide();  // Hide field if condition is not met
//                   }
//                }

//                // Attach event listeners
//                triggerField.on("change", checkCondition);
//                checkCondition(); // Apply on page load
//             });
//          }

//          applyConditions();
//       }
//    });
$(document).ready(function () {
    let fieldConditions = @json($fieldConditions); // Fetch conditions from backend

    // Ensure fieldConditions is not empty
    if (fieldConditions && fieldConditions.length > 0) {

        // Function to handle the conditions
        function applyConditions() {
            let fieldsToShow = {};
            let commonFields = {}; // Object to track common fields

            // Loop through each field condition
            fieldConditions.forEach(function (condition) {
                let triggerField = $(`[name="booking_fields[${condition.target_field_id}]"]`);
                let targetField = $(`[data-field-id="${condition.field_id}"]`);
                let targetInputs = targetField.find('input, select, textarea');

                if (triggerField.length === 0 || targetField.length === 0) {
                    console.log(`Trigger or Target field not found for condition: ${JSON.stringify(condition)}`);
                    return;
                }

                // Add field to fieldsToShow if it's not already added
                if (!fieldsToShow[condition.field_id]) {
                    fieldsToShow[condition.field_id] = [];
                }
                fieldsToShow[condition.field_id].push(condition.value);

                // Keep track of common fields
                if (commonFields[condition.field_id]) {
                    commonFields[condition.field_id].push(condition.value);
                } else {
                    commonFields[condition.field_id] = [condition.value];
                }

                // Function to check condition
                function checkCondition() {
                    let selectedValue = triggerField.val(); // Get selected value from trigger field
                    console.log(`Checking condition - Selected Value: ${selectedValue} | Condition Value: ${condition.value}`);

                    // Show the target field if it meets the condition or is in common fields
                    if (selectedValue == condition.value || commonFields[condition.field_id].includes(selectedValue)) {
                        targetField.show();
                        targetInputs.attr("required", true);
                        console.log(`Show target field ${condition.field_id}`);
                    } else {
                        targetField.hide();
                        targetInputs.removeAttr("required");
                        console.log(`Hide target field ${condition.field_id}`);
                    }
                }

                // Initially check condition (on page load)
                checkCondition();

                // Attach change event listener to the trigger field
                triggerField.on("change", function () {
                    checkCondition(); // Re-check the condition whenever the select value changes
                });
            });

            // Hide fields that do not match any condition
            for (let fieldId in fieldsToShow) {
                let targetField = $(`[data-field-id="${fieldId}"]`);
                let targetInputs = targetField.find('input, select, textarea');

                // Get the selected value
                let selectedValue = $(`[name="booking_fields[${fieldId}]"]`).val();
                console.log(`Field ${fieldId}: Selected Value: ${selectedValue}`);

                // If the selected value does not match any condition for that field, hide it
                if (!fieldsToShow[fieldId].includes(selectedValue)) {
                    targetField.hide();
                    targetInputs.removeAttr("required");
                    console.log(`Field ${fieldId} is not matching any condition. Hiding it.`);
                }
            }
        }

        // Apply conditions when the page loads
        applyConditions();
    } else {
        console.log('No field conditions found.');
    }
});










</script>
<script>
function previewImage(event, imgId) {
    var input = event.target;
    var reader = new FileReader();
    
    reader.onload = function() {
        var img = document.getElementById(imgId);
        img.src = reader.result;
        img.style.display = "block";
    };
    
    reader.readAsDataURL(input.files[0]);
}
function previewFile(event, linkId, removeId, allowedTypes) {
    var input = event.target;
    var file = input.files[0];

    if (!file) return;

    // Ensure allowedTypes is always a string
    allowedTypes = allowedTypes || "image/*, .pdf, .doc, .docx";
    var allowedTypesArray = allowedTypes.split(',').map(type => type.trim().toLowerCase());

    var maxSize = 5 * 1024 * 1024; // 5MB

    var viewLink = document.getElementById(linkId);
    var removeButton = document.getElementById(removeId);

    viewLink.style.visibility = "hidden";
    viewLink.removeAttribute("href");
    viewLink.removeAttribute("data-fancybox");

    removeButton.style.display = "none";

    var fileType = file.type.toLowerCase();
    var fileExtension = file.name.split('.').pop().toLowerCase();

    // Validate file type
    var isAllowed = allowedTypesArray.some(type => {
        return fileType.includes(type.replace('*', '')) || fileExtension.includes(type.replace('*', ''));
    });

    if (!isAllowed) {
        
        Swal.fire({
            title: "Invalid File Type!",
            text: "Allowed types: " + allowedTypes,
            iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
            confirmButtonText: "OK",
            customClass: {
                confirmButton: "custom-ok-button-class w-sm"
            }
        });
        input.value = "";
        return;
    }

    if (file.size > maxSize) {
        Swal.fire({
            title: "File Too Large!",
            text: "File size exceeds 5MB! Please upload a smaller file.",
            iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
            confirmButtonText: "OK",
            customClass: {
                confirmButton: "custom-ok-button-class w-sm"
            }
        });
        input.value = "";
        return;
    }

    var reader = new FileReader();

    reader.onload = function(e) {
        if (fileType.includes("pdf")) {
            // Open PDF in a new tab instead of FancyBox
            var blob = new Blob([file], { type: "application/pdf" });
            var blobUrl = URL.createObjectURL(blob);
            viewLink.href = blobUrl;
            viewLink.target = "_blank"; // Open in a new tab
        } else {
            // Preview images & other formats in FancyBox
            viewLink.href = e.target.result;
            viewLink.setAttribute("data-fancybox", "gallery");
        }

        viewLink.style.visibility = "visible";
        removeButton.style.display = "block"; // Show remove button
    };

    reader.readAsDataURL(file);
}


// Function to Remove Selected File
function removeSelectedFile(index) {
    var input = document.getElementById(`field_${index}`);
    var viewLink = document.getElementById(`viewFile_${index}`);
    var removeButton = document.getElementById(`removeFile_${index}`);

    input.value = ""; // Reset file input
    viewLink.style.visibility = "hidden"; // Hide view button
    removeButton.style.display = "none"; // Hide remove button
}


$(document).ready(function () {
    // Attach event listener for all text inputs
    $(document).on("input", "input.form-control", function (event) {
        var fieldLabel = $(this).closest(".form-group").find("label").text().toLowerCase();
        var fieldId = $(this).attr("id");

        if (fieldLabel.includes("email") || fieldId.includes("email")) {
            validateEmail($(this));
        } else if (fieldLabel.includes("phone") || fieldId.includes("phone")) {
            validatePhone($(this));
        }
    });

    function validateEmail(emailField) {
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        var emailError = emailField.closest(".form-group").find(".help-block");

        if (!emailPattern.test(emailField.val())) {
            emailError.text("Please enter a valid email address!").addClass("text-danger");
        } else {
            emailError.text("").removeClass("text-danger");
        }
    }

    function validatePhone(phoneField) {
        var phoneError = phoneField.closest(".form-group").find(".help-block");

        // Remove non-numeric characters
        phoneField.val(phoneField.val().replace(/[^0-9]/g, ''));

        // Limit to 15 digits
        if (phoneField.val().length > 15) {
            phoneField.val(phoneField.val().substring(0, 15));
        }

        if (phoneField.val().length < 10 || phoneField.val().length > 15) {
            phoneError.text("Phone number must be between 10-15 digits!").addClass("text-danger");
        } else {
            phoneError.text("").removeClass("text-danger");
        }
    }
});






</script>
@endif
</body>

</html>