xr@extends('front.layout.main')

@section('content')


    <main class="app-main">
    <div id="widget-modal" class="modal">
            <div class="modal__content">
            <div class="widget form">
                    <div class="widget__buttons">
                        <button class="btn btn--l widget__button wto-collapse widget__button-quote " data-collapse="widget1-mobile" @if(!$errors->any()) data-active="true" @endif><span class="sprite sprite--quote"></span>{{ trans('front.quote') }}</button>
                        @if(auth()->guard('clients')->check() )
                        <a href="{{ route('booking.create') }}" target="_blank" class="btn btn--l widget__button"><span class="sprite sprite--book"></span>{{ trans('front.book') }}</a>
                        @else
                        <button class="btn btn--l widget__button wto-collapse widget__button-book" data-collapse="widget2-mobile" @if($errors->any()) data-active="true" @endif><span class="sprite sprite--book"></span>{{ trans('front.book') }}</button>
                        @endif
                        
                        @if($lang == 'BG' || $lang == 'EN')
                        <button class="btn btn--l widget__button wto-collapse widget__button-track" data-collapse="widget3-mobile"><span class="sprite sprite--track"></span>{{ trans('front.track') }}</button>
                        @endif
                        
                        @if($lang == 'BG' || $lang == 'EN')
                        <button style="background:#c70d3a;color:#fff;width: inherit;
  padding: 0 40px;" class="btn btn--l widget__button wto-collapse widget__button-track" data-collapse="widget4-mobile"><!--<i style="width: 16px;
  height: 18px;margin: 0 5px 0 5px;" class="fas fa-phone"></i>--> {{trans('front.form_tab_name')}}</button>
                        @endif
                    </div>
                    <div class="widget__main">
                        <div class="widget__item" id="widget1-mobile">
                            <h3 class="widget__title">{{ trans('front.choose_transport') }}</h3>
                            <section class="typeTransport">
                                <form method="POST" @if($lang != 'EN') action="{{ route('quote' . strtolower($lang)) }}" @else action="{{ route('quote') }}" @endif class="quoteForm">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="type" class="quoteTypeInput" value="">
                                    <div class="form-services flex flex--column">
                                        <div class="g-col-12">
                                            <div data-type="FCL" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>FCL</span><br>{{ trans('front.fcl_full_container_load') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/container-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="LCL" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>LCL</span><br>{{ trans('front.lcl_less_than_container') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/grupajen-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="AIR" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title">{{ trans('front.air') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/airfreight-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="ROAD" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>FTL / LTL</span><br>{{ trans('front.roadTransport') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/truck.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </section>
                        </div>
                        <div class="widget__item" id="widget2-mobile">
                            @if(!auth()->guard('clients')->check() )
                                <h3 class="widget__title">{{ trans('front.Sign In') }}</h3>
                                <form method="POST" action="{{ route('client.login.post') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="go_to_booking" value="1">
                                    <input type="hidden" name="lang" value="{{ $lang }}">

                                    <div class="">
                                        @if(session()->has('msg'))
                                            {{ session()->get('msg') }}
                                        @elseif($errors->any())
                                            @foreach ($errors->all() as $error)
                                                <p>{{ $error }}</p>
                                            @endforeach
                                        @endif
                                    </div>

                                    <div class="form__group">
                                        <span class="sprite sprite--user form__input-icon"></span>
                                        <input name="username" class="form__input" placeholder="{{ trans('front.Enter Username') }}" autocomplete="username" type="text" required>
                                    </div>
                                    <div class="form__group">
                                        <span class="sprite sprite--pass form__input-icon"></span>
                                        <input name="password" class="form__input" placeholder="{{ trans('front.Enter Password') }}" type="password" autocomplete="current-password" required>
                                    </div>
                                    <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                        <a href="{{ route('clients.auth.passwords.email') }}" target="_blank" class="form__link form__link--no-decoration form__forgout-password">{{ trans('front.Forgot Password') }}</a>
                                        <button class="btn btn--primary btn--l">{{ trans('front.LogIn') }}</button>
                                    </div>
                                </form>
                                <p class="form__text form__text--center">{{ trans('front.You don’t have an account?') }} <a href="{{ route('clients.create') }}" target="_blank" class="form__link">{{ trans('front.Register') }}</a></p>
                            @endif
                        </div>
                        <div class="widget__item" id="widget3-mobile">
                            <h3 class="widget__title">{{ trans('front.tracking') }}</h3>
                            <form method="POST" action="{{ route('track') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="form__group">
                                    <select name="type" class="form__input form__select" required>
                                        <option disabled="disabled" value="null">{{ trans('front.Проследяване по') }}:</option>
                                        <option value="container">{{ trans('front.Container No.') }}</option>
                                        <option selected="selected" value="booking">{{ trans('front.Booking No.') }}</option>
                                    </select>
                                </div>
                                <div class="form__group">
                                    <input name="number" class="form__input" placeholder="*256773" type="text" required>
                                </div>
                                <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                    <button class="btn btn--primary btn--l btn--center">{{ trans('front.track') }}</button>
                                </div>
                            </form>
                        </div>
                        
                        @if($lang == 'BG' || $lang == 'EN')
                            <div class="widget__item" id="widget4-mobile">
                                <h3 class="widget__title">{{ trans('front.form_header') }}</h3>
                                <p style="font-size:13px;margin-bottom:5px;">{{trans('front.form_info')}} </p>
                                
                            <style>
                                .alert {
                                    display:none;
                                    margin-top: 20px;
                                  padding: 20px;
                                  background-color: #f44336;
                                  color: white;
                                  opacity: 1;
                                  transition: opacity 0.6s;
                                  margin-bottom: 15px;
                                }
                                
                                .alert.success {background-color: #04AA6D;}
                            </style>
                                
                                <div id="request_contact_form_success_mobile" class="alert success">
                                  {!! trans('front.success') !!}
                                </div>
                                
                                <form id="request_contact_form_mobile" method="POST" action="{{ route('crequest') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="text" id="honeypot_field_mobile" name="honeypot_field" style="display:none;">
                                    <input type="text" id="from_lang_mobile" name="from" style="display:none;" value="{{$lang}}">
                                    
                                    <div class="form__group">
                                        <label for="name-mobile" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_name') }} *</label>
                                        <input id="name-mobile" name="name" class="form__input" placeholder="{{ trans('front.form_name') }}" type="text" required>
                                    </div>
                                    
                                    <div class="form__group">
                                        <label for="contact-mobile" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_contact') }}</label>
                                        <input id="contact-mobile" name="contact" class="form__input" placeholder="{{ trans('front.form_contact') }}" type="text">
                                    </div>
                                    
                                    <div class="form__group">
                                        <label for="form_phone_mobile" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_phone') }} *</label>
                                        <input id="form_phone_mobile" name="form_phone_mobile" class="form__input" type="number" required>
                                    </div>
                                    
                                    <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                        <button id="submitForm" class="btn btn--primary btn--l btn--center">{{ trans('front.form_button') }}</button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="modal-overlay"></div>
        <section class="slider slider--app no-video slider--full-h slider--responsive">
            <video autoplay muted loop playsinline id="app-main__video">
                <source src="{{ asset('app/dist/WTO_Video_Background_Web.mov') }}" type="video/mov" />
                <!--<source src="{{ asset('app/dist/wto_1.webm') }}" type="video/webm" />-->
                <!--<source src="{{ asset('app/dist/wto_1.ogv') }}" type="video/ogg" />-->
                <!--<source src="{{ asset('app/dist/wto_1.mp4') }}" />-->
            </video>
            <div class="g-container g-container--on-mobile">
                <div class="slider__rows">
                    <div class="slider__rows-item">
                        <span class="slider__rows-word">W</span>
                    </div>
                    <div class="slider__rows-item">
                        <span class="slider__rows-word">T</span>
                    </div>
                    <div class="slider__rows-item">
                        <span class="slider__rows-word">O</span>
                    </div>
                    <div class="slider__rows-item"></div>
                </div>
                <div class="slider__main slider__main--v-center flex flex--row flex--ai-center">
                    <div class="g-col-6">
                        <h1 class="fadeIn slider__main-h1">{{ trans('front.index_slider_title') }}</h1>
                        <p class="fadeInDown slider__main-p">{!! trans('front.index_slider_text') !!}</p>
                    </div>
                </div>
                <div class="widget form widget--on-home">
                    <div class="widget__buttons">
                        <button class="btn btn--l widget__button wto-collapse widget__button-quote" data-collapse="widget1" @if(!$errors->any()) data-active="true" @endif><span class="sprite sprite--quote"></span>{{ trans('front.quote') }}</button>
                        @if(auth()->guard('clients')->check() )
                        <a href="{{ route('booking.create') }}" target="_blank" class="btn btn--l widget__button"><span class="sprite sprite--book"></span>{{ trans('front.book') }}</a>
                        @else
                        <button class="btn btn--l widget__button wto-collapse widget__button-book" data-collapse="widget2" @if($errors->any()) data-active="true" @endif><span class="sprite sprite--book"></span>{{ trans('front.book') }}</button>
                        @endif
                        @if($lang == 'BG' || $lang == 'EN')
                        <button class="btn btn--l widget__button wto-collapse widget__button-track" data-collapse="widget3"><span class="sprite sprite--track"></span>{{ trans('front.track') }}</button>
                        @endif
                        
                        @if($lang == 'BG' || $lang == 'EN')
                        <button style="background:#c70d3a;color:#fff;width: inherit;
  padding: 0 40px;" class="btn btn--l widget__button wto-collapse widget__button-track" data-collapse="widget4"><!--<i style="width: 16px;
  height: 18px;margin: 0 5px 0 5px;" class="fas fa-phone"></i>--> {{trans('front.form_tab_name')}}</button>
                        @endif
                    </div>
                    <div class="widget__main">
                        <div class="widget__item" id="widget1">
                            <h3 class="widget__title">{{ trans('front.choose_transport') }}</h3>
                            <section class="typeTransport">
                                <form method="POST" @if($lang != 'EN') action="{{ route('quote' . strtolower($lang)) }}" @else action="{{ route('quote') }}" @endif class="quoteForm">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="type" class="quoteTypeInput" value="">
                                    <div class="form-services flex flex--column">
                                        <div class="g-col-12">
                                            <div data-type="FCL" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>FCL</span><br>{{ trans('front.fcl_full_container_load') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/container-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="LCL" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>LCL</span><br>{{ trans('front.lcl_less_than_container') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/grupajen-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="AIR" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title">{{ trans('front.air') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/airfreight-transport.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                        <div class="g-col-12">
                                            <div data-type="ROAD" class="form-services__item flex flex--column flex--ai-center flex--jc-center quote-btn">
                                                <h2 class="form-services__title"><span>FTL / LTL</span><br>{{ trans('front.roadTransport') }}</h2>
                                                <img src="{{ asset('app/dist/images/icons/truck.png') }}" class="form-services__icon">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </section>
                        </div>
                        <div class="widget__item" id="widget2">
                            @if(!auth()->guard('clients')->check() )
                                <h3 class="widget__title">{{ trans('front.Sign In') }}</h3>
                                <form method="POST" action="{{ route('client.login.post') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="go_to_booking" value="1">
                                    <input type="hidden" name="lang" value="{{ $lang }}">

                                    <div class="">
                                        @if(session()->has('msg'))
                                            {{ session()->get('msg') }}
                                        @elseif($errors->any())
                                            @foreach ($errors->all() as $error)
                                                <p>{{ $error }}</p>
                                            @endforeach
                                        @endif
                                    </div>

                                    <div class="form__group">
                                        <span class="sprite sprite--user form__input-icon"></span>
                                        <input name="username" class="form__input" placeholder="{{ trans('front.Enter Username') }}" type="text" autocomplete="username" required>
                                    </div>
                                    <div class="form__group">
                                        <span class="sprite sprite--pass form__input-icon"></span>
                                        <input name="password" class="form__input" placeholder="{{ trans('front.Enter Password') }}" type="password" autocomplete="current-password" required>
                                    </div>
                                    <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                        <a href="{{ route('clients.auth.passwords.email') }}" target="_blank" class="form__link form__link--no-decoration form__forgout-password">{{ trans('front.Forgot Password') }}</a>
                                        <button class="btn btn--primary btn--l">{{ trans('front.LogIn') }}</button>
                                    </div>
                                </form>
                                <p class="form__text form__text--center">{{ trans('front.You don’t have an account?') }} <a href="{{ route('clients.create') }}" target="_blank" class="form__link">{{ trans('front.Register') }}</a></p>
                            @endif
                        </div>
                        <div class="widget__item" id="widget3">
                            <h3 class="widget__title">{{ trans('front.tracking') }}</h3>
                            <form method="POST" action="{{ route('track') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="form__group">
                                    <select name="type" class="form__input form__select" required>
                                        <option selected="selected" disabled="disabled" value="null">{{ trans('front.Проследяване по') }}:</option>
                                        <option value="container">{{ trans('front.Container No.') }}</option>
                                        <option value="booking">{{ trans('front.Booking No.') }}</option>
                                    </select>
                                </div>
                                <div class="form__group">
                                    <input name="number" class="form__input" placeholder="*256773" type="text" required>
                                </div>
                                <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                    <button class="btn btn--primary btn--l btn--center">{{ trans('front.track') }}</button>
                                </div>
                            </form>
                        </div>
                        
                        @if($lang == 'BG' || $lang == 'EN')
                            <div class="widget__item" id="widget4">
                                <h3 class="widget__title">{{trans('front.form_header')}}</h3>
                                <p style="font-size:13px;margin-bottom:5px;">{{trans('front.form_info')}}</p>
                                
                            <style>
                                .alert {
                                    display:none;
                                    margin-top: 20px;
                                  padding: 20px;
                                  background-color: #f44336;
                                  color: white;
                                  opacity: 1;
                                  transition: opacity 0.6s;
                                  margin-bottom: 15px;
                                }
                                
                                .alert.success {background-color: #04AA6D;}
                            </style>
                                
                                <div id="request_contact_form_success" class="alert success">
                                  {!! trans('front.success') !!}
                                </div>
                                
                                <form id="request_contact_form" method="POST" action="{{ route('crequest') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="text" id="honeypot_field" name="honeypot_field" style="display:none;">
                                    <input type="text" id="from_lang" name="from" style="display:none;" value="{{$lang}}">
                                    
                                    <div class="form__group">
                                        <label for="name" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_name') }} *</label>
                                        <input id="name" name="name" class="form__input" type="text" required>
                                    </div>
                                    
                                    <div class="form__group">
                                        <label for="contact" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_contact') }}</label>
                                        <input id="contact" name="contact" class="form__input" type="text">
                                    </div>
                                    
                                    <div class="form__group">
                                        <label for="form_phone" style="color: #000;margin-bottom: 5px;display: block;font-size: 12px;">{{ trans('front.form_phone') }} *</label>
                                        <input id="form_phone" name="form_phone" class="form__input" type="text" required>
                                    </div>
                                    
                                    <div class="form__group flex flex--row flex--jc-sb flex--ai-center">
                                        <button id="submitForm-mobile" class="btn btn--primary btn--l btn--center">{{ trans('front.form_button') }}</button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>


        <section class="services section section--w-padding">
            <div class="g-container">
                <h1 class="section__title section__title--center">{{ trans('front.services') }}</h1>
                <div class="flex flex--row">
                    <div class="g-col-12">
                        <ul class="services__list">
                        @foreach($services as $key => $row)
                            <li class="services__item">
                                <h2>{{ $row->languages->where('lang_short', $lang)->first()->pivot->title }}</h2>
                                <a class="services__link" href="{{ $langSlug }}/{{ $row->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}#main"></a>
                                @if($row->image_id)
                                    <img src="{{ asset('uploads/images/big/'.$allImages[$row->image->image_id]) }}" class="services__icon services__icon--absolute services__icon--bottom services__icon--h-center" />
                                @endif
                            </li>
                        @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="news section section--w-padding">
            <div class="g-container">
                <h1 class="section__title section__title--center">{{ trans('front.news') }}</h1>
                <div class="flex flex--column">
                    @foreach($news as $row)
                    <div class="news__item news__item--background flex flex--row flex--ai-center">
                        <div class="news__main g-col-6">
                            <a href="{{ $langSlug }}/{{ $row->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}">
                                <h2 class="news__title news__title--m">{{ $row->languages->where('lang_short', $lang)->first()->pivot->title }}</h2>
                            </a>
                            <p class="news__description">{{ str_limit($row->languages->where('lang_short', $lang)->first()->pivot->description, 15) }}</p>
                            <a href="{{ $langSlug }}/{{ $row->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}" class="btn btn--primary btn--md news--btn">{{ trans('front.readmore') }}</a>
                        </div>
                        <div class="news__image news__image--pl-40 g-col-6">
                            @if($row->image_id)
                            <a href="{{ $langSlug }}/{{ $row->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}"><img class="image-full" src="{{ asset('uploads/images/thumbs/'.$allImages[$row->image_id]) }}" title="{{ $row->languages->where('lang_short', $lang)->first()->pivot->title }}"></a>
                            @else
                            <a href="{{ $langSlug }}/{{ $row->category->languages->where('lang_short', $lang)->first()->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}">
                                <img class="image-full" src="{{ asset('uploads/system/_default_thumb.jpg') }}" title="{{ $row->languages->where('lang_short', $lang)->first()->pivot->title }}">
                            </a>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
    </main>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
          // Select the button by its ID
          var myButton = document.getElementById('submitForm');
          var myButton_mobile = document.getElementById('submitForm-mobile');
          // Add an event listener for the 'click' event
          myButton.addEventListener('click', function(event) {
             event.preventDefault();
            // Assuming you have a CSRF token stored in a meta tag
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            
            let honeypot_field_mobile = document.getElementById('honeypot_field_mobile');
            let form_name = document.getElementById('name-mobile');
            let form_conctact = document.getElementById('contact-mobile');
            let from_lang_mobile = document.getElementById('from_lang_mobile');
            let form_phone_mobile = document.getElementById('form_phone_mobile');
            
            if (honeypot_field_mobile.length > 0) {
                console.log('Spam detected');
                return;
            }
                        
            fetch('{{route("crequest")}}', {
              method: 'POST', // Specify the method
              headers: {
                // Add any headers here
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken // Laravel expects CSRF token for POST requests
              },
              body: JSON.stringify({
                name: form_name.value,
                contact: form_conctact.value,
                phone:form_phone_mobile.value,
                honeypot_field_mobile: honeypot_field_mobile.value,
                from: '{{$lang}}',//from_lang.value
              })
            })
            .then(response => {
                console.log('1', response)
              return response.json(); // Or .text(), .blob(), etc.
            })
            .then(data => {
               if (data.success == false) {
                    // If the response indicates failure and contains errors,
                    // iterate through the error object and log each error message.
                    Object.keys(data.errors).forEach(field => {

                      if(field == 'name'){
                        form_name.style.border = "1px solid #ff0000";
                      }
                      
                      if(field == 'phone'){
                        form_phone_mobile.style.border = "1px solid #ff0000";
                      }
                    });
                  } else {
                      document.getElementById('request_contact_form_mobile').style.display = 'none'; // Hide the form
                      document.getElementById('request_contact_form_success_mobile').style.display = 'block'; // Show the success message
                  }
            })
            .catch(error => {
              console.error('There was a problem with your fetch operation:', error);
            });

          });
          
        myButton_mobile.addEventListener('click', function(event) {
             event.preventDefault();
            // Assuming you have a CSRF token stored in a meta tag
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            
            let honeypot_field = document.getElementById('honeypot_field');
            let form_name = document.getElementById('name');
            let form_conctact = document.getElementById('contact');
            let from_lang = document.getElementById('from_lang');
            let from_phone = document.getElementById('form_phone');
            
            if (honeypot_field.length > 0) {
                console.log('Spam detected');
                return;
            }
                        
            fetch('{{route("crequest")}}', {
              method: 'POST', // Specify the method
              headers: {
                // Add any headers here
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken // Laravel expects CSRF token for POST requests
              },
              body: JSON.stringify({
                name: form_name.value,
                contact: form_conctact.value,
                phone:from_phone.value,
                honeypot_field: honeypot_field.value,
                from: '{{$lang}}',//from_lang.value
              })
            })
            .then(response => {
                console.log(response)
            //   if (!response.ok) {
            //     throw new Error('Network response was not ok');
            //   }
              return response.json(); // Or .text(), .blob(), etc.
            })
            .then(data => {
               if (data.success == false) {
                    // If the response indicates failure and contains errors,
                    // iterate through the error object and log each error message.
                    Object.keys(data.errors).forEach(field => {
                      if(field == 'name'){
                        form_name.style.border = "1px solid #ff0000";
                      }
                      
                      if(field == 'phone'){
                        from_phone.style.border = "1px solid #ff0000";
                      }
                    });
                  } else {
                      document.getElementById('request_contact_form').style.display = 'none'; // Hide the form
                      document.getElementById('request_contact_form_success').style.display = 'block'; // Show the success message
                  }
            })
            .catch(error => {
                console.error('There was a problem with your fetch operation:', error);
            });

          });
        });
    </script>

@stop



@section('scripts')
    
@endsection