@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;" 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" 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">
                            <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">
                                        <input id="name" name="name" class="form__input" placeholder="{{ trans('front.form_name') }}" type="text" required>
                                    </div>
                                    
                                    <div class="form__group">
                                        <input id="contact" name="contact" class="form__input" placeholder="{{ trans('front.form_contact') }}" type="text">
                                    </div>
                                    
                                    <div class="form__group">
                                        <input id="form_phone" name="form_phone" class="form__input" placeholder="{{ trans('front.form_phone') }}" 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>
        <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;width: inherit;
  padding: 0 40px;" 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--news">
            <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->pivot->title }}</h1>
                </div>
            </div>
        </section>

        @if(count($paginatedPosts) > 0)
        <section class="news section section--w-padding">
            <div class="g-container">
                <div class="flex flex--column">
                    @foreach ($paginatedPosts 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 }}/{{ $currentPage->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->annonce, 150) }}</p>
                            <a href="{{ $langSlug }}/{{ $currentPage->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 }}/{{ $currentPage->pivot->slug }}/{{ $row->languages->where('lang_short', $lang)->first()->pivot->slug }}">
                                    <img class="image-full" src="{{ asset('uploads/images/thumbs/'.$allImages[$row->image->image_id]) }}" alt="{{ $row->languages->where('lang_short', $lang)->first()->pivot->title  }}">
                                </a>
                            @else
                                <a href="{{ $langSlug }}/{{ $currentPage->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>

<style>
    /* Pagination container */
.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    justify-content: center;
}

/* Pagination item - general styles */
.pagination li {
    margin: 0 5px;
    border-radius: 5px; /* Rounded corners for the pagination items */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

/* Links and spans inside pagination */
.pagination li a, .pagination li span {
    display: block;
    padding: 8px 16px;
    color: black; /* Default text color */
    text-decoration: none; /* Remove underline from links */
}

/* Hover effect on links */
.pagination li a:hover {
    background-color: #007BFF; /* Change background on hover */
    color: white; /* Change text color on hover */
}

/* Active page styles */
.pagination li.active span {
    background-color: #007BFF; /* Background color for the active page */
    color: white; /* Text color for the active page */
}

/* Disabled link styles */
.pagination li.disabled span {
    color: #ccc; /* Light grey color for disabled links */
}

/* Style for the next and previous buttons */
.pagination li a[rel="next"], .pagination li a[rel="prev"] {
    font-weight: bold; /* Make arrow symbols bolder */
}

</style>

<!--<div class='test123423423'>-->
                {{ $paginatedPosts->links() }}
<!--</div>-->
            </div>
        </section>
        @endif
    </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