@extends('front.front_layouts.main')

@section('content')

    <section class="top-section about contact">
        <div class="container">
            <div class="header mb-0">
                <h2 class="title"><img class="ml-2 icon" src="{{ asset('front_asset/assets/images/icons/email.png') }}" alt="">إتصل بنا</h2>
                <div class="line ml-0"></div>
            </div>
            <p class="my-4">{{$setting->contact_us_bio}}</p>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    @include('front.front_component.alert')
                    <form id="send_contact" class="form" method="post" action="{{route('front.storeContact')}}">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group mb-3">
                                    <input type="text" name="name" class="form-control @error('name') input-error @enderror" placeholder="الإسم">
                                    <div class="input-group-append">
                                <span class="input-group-text">
                                    <img src="{{ asset('front_asset/assets/images/icons/user.png') }}" alt="" class="icon">
                                </span>
                                    </div>
                                    <small class="form-text error-field d-block">{{ $errors->first('name') }}</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-group mb-3">
                                    <input type="text" name="phone" class="form-control @error('phone') input-error @enderror" placeholder="الرقم الموبايل">
                                    <div class="input-group-append">
                                <span class="input-group-text">
                                    <img src="{{ asset('front_asset/assets/images/icons/cell-phone.png') }}" alt="" class="icon">
                                </span>
                                    </div>
                                    <small class="form-text error-field d-block">{{ $errors->first('phone') }}</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-group mb-3">
                                    <input type="email" name="email" class="form-control @error('email') input-error @enderror" placeholder="البريد الإلكتروني">
                                    <div class="input-group-append">
                                <span class="input-group-text">
                                    <img src="{{ asset('front_asset/assets/images/icons/envelope.png') }}" alt="" class="icon">
                                </span>
                                    </div>
                                    <small class="form-text error-field d-block">{{ $errors->first('email') }}</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-group mb-3">
                                    <input type="text" name="subject" class="form-control @error('subject') input-error @enderror" placeholder="الموضوع">
                                    <div class="input-group-append">
                                <span class="input-group-text">
                                    <img src="{{ asset('front_asset/assets/images/icons/pen.png') }}" alt="" class="icon">
                                </span>
                                    </div>
                                    <small class="form-text error-field">{{ $errors->first('subject') }}</small>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="input-group mb-3">
                                    <textarea name="message" class="form-control h-auto @error('message') input-error @enderror" rows="3" placeholder="الموضوع"></textarea>
                                    <small class="form-text error-field d-block">{{ $errors->first('message') }}</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <button class="btn sub-btn">إرسال رسالة</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    @push('script')
        <script>
            $('#send_contact').on('submit', function (event) {
                event.preventDefault();
                $('#send_contact .sub-btn').attr('disabled', true);
                $('#send_contact .sub-btn').html('<i class="fa fa-spinner fa-spin ml-2"></i>جاري الارسال');
                $.ajax({
                    url: '{!! route('front.storeContact')!!}',
                    type: 'POST',
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false
                }).done(function (data) {
                    $('.input-error').removeClass('input-error');
                    $('.error-field').remove();
                    $('#send_contact').trigger('reset');
                    $('#send_contact .sub-btn').attr('disabled', false);
                    $('#send_contact .sub-btn').html('إضافة');
                    $('.alert-success').html(data.message);
                    $('.alert-success').css('display', 'block');
                    $('html, body').animate({
                        scrollTop: $('.alert-success').offset().top
                    }, 500);

                }).fail(function (data) {
                    $('.input-error').removeClass('input-error');
                    $('.error-field').remove();
                    $.each(data.responseJSON.errors, function (index, value) {
                        $("#send_contact input[name='" + index + "']").parent().append('<small class="form-text error-field d-block">' + value + '</small>');
                        $("#send_contact input[name='" + index + "']").addClass('input-error');
//                        $("#send_contact textarea[name='" + index + "']").parent().append('<small class="form-text error-field d-block">' + value + '</small>');
//                        $("#send_contact textarea[name='" + index + "']").addClass('input-error');
                        $('#send_contact .sub-btn').attr('disabled', false);
                        $('#send_contact .sub-btn').html('إضافة');
                    });
                });
            });
        </script>
    @endpush

@stop