@extends('web.layouts.container')

@section('header')
    <div class="inner-header text-center" style="background-image: url({{$image ? asset($image) : asset('assets/web/images/about.jpg')}});">
        <h4><span>{{$title ?? __('privileges.inner_page')}}</span></h4>
    </div>
@endsection

@section('content')
    <section class="data-info section-padding">
        <div class="container">
            <div class="side-head">
                <p>{{$title ?? __('privileges.inner_page')}}</p>
            </div>

            <h4>{{__('privileges.privilege_you_have')}}</h4>
            <div class="text">{!! $description ? $description : '' !!}</div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.contact_us_button').click(async function (e) {
                e.preventDefault();

                let interval = setInterval(function () {
                    $('.ajaxError, .ajaxSuccess').slideUp(400);
                    clearInterval(interval)
                }, 3000);

                let form = $('.contact_us_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response.errors) {
                    $('.ajaxError').removeClass('d-none').slideDown().html(response.errors);
                    $('.ajaxSuccess').addClass('d-none');
                }
                if (response.message) {
                    $('.ajaxSuccess').removeClass('d-none').slideDown().html(response.message);
                    $('.ajaxError').addClass('d-none');
                    $('.contact_us_form input, textarea').val('')
                }
            });
        });
    </script>
@endsection