@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
@endsection

@section('content')
    <div class="section pt-25 pt-sm-40 pb-20 pt-1 fix">
        <div class="container">

            <div class="row">
                <div class="col-lg-12 col-12 order-2 order-sm-1 mb-10">
                    <div class="section-title text-center" data-aos="fade-up">
                        <h2 class="title">{{ __('general.subscription.title') }}</h2>
                        <p class="sub-title">{{ __('general.subscription.description') }}</p>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <form action="#" class="footer-newsletter text-center">
                                <input type="email" placeholder="{{ __('input.email') }}" data-input="subscriptEmail">
                                <button class="submit-btn" type="button" data-type="subscriptCreate">{{ __('general.subscription.button') }}</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Pagination Start -->
            <div class="row mt-10">
                <div class="col">
                    <div id="pagination-container"></div>
                </div>
            </div>
            <!-- Pagination End -->

        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
@endsection

@section('script')
    <script>
        var swiperkonfor = new Swiper('.blog-slider', {
            spaceBetween: 30,
            effect: 'fade',
            loop: true,
            speed: 750,
            observer: true,
            observeParents: true,
            mousewheel: {
                invert: false,
            },
            autoplay: {
                delay: 10000,
                disableOnInteraction: false,
            },
            // autoHeight: true,
            pagination: {
                el: '.blog-slider__pagination',
                clickable: true,
            }
        });
    </script>
@endsection