@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" @if( auth()->guard('clients')->check()  ) 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" data-active="true"><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 != 'BG') 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">{{ 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" autocomplete="username" class="form__input" placeholder="{{ trans('front.Enter 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') }}" autocomplete="current-password" type="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="{{ trans('front.Номер на товар') }}" 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" class="btn btn--primary btn--l btn--center">{{ trans('front.form_button') }}</button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-overlay"></div>
        <div class="widget widget--fixed">
            <div class="g-container">
                <div class="flex flex--row flex--jc-sb flex--ai-center">
                    <ul class="widget--responsive flex flex--row flex--ai-center">
                        <li data-collapse="widget1"><a href="" class="flex flex--row flex--ai-center"><span class="sprite sprite--quote"></span>{{ trans('front.quote') }}</a></li>
                        <li data-collapse="widget2"><a href="" class="flex flex--row flex--ai-center"><span class="sprite sprite--book"></span>{{ trans('front.book') }}</a></li>
                        @if($lang == 'BG' || $lang == 'EN')
                        <li data-collapse="widget3"><a href="" class="flex flex--row flex--ai-center"><span class="sprite sprite--track"></span>{{ trans('front.track') }}</a></li>
                        @endif
                        
                        @if($lang == 'BG' || $lang == 'EN')
                        <li style="background: #c70d3a;color: #fff;"  data-collapse="widget4"><a  href="" class="flex flex--row flex--ai-center" alt="{{ trans('front.form_tab_name') }}"><i style="width: 16px;
  height: 18px;margin: 0 5px 0 5px;" class="fas fa-phone"></i>{{trans('front.form_tab_name')}}</a></li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
        <section class="slider slider--fixed-height-l slider--responsive slider--services">
            <div class="slider__main slider__main--v-center">
                <div class="g-container">
                    <h1 class="slider__main-title slider__main-title--up slider__main-title--center">{{ $currentPage->languages->where('lang_short', $lang)->first()->pivot->title }}</h1>
                </div>
            </div>
        </section>
        <section class="services section section--w-padding">
            <div class="g-container">
                <div class="flex flex--row">
                    <div class="g-col-12">
                        <ul class="services__list">
                        @foreach($currentPage->children 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>
    </main>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var myButton = document.getElementById('submitForm');
            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 = 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