@extends('layouts.137')

@section('head')
    <!-- select2 -->
    <link rel="stylesheet" href="{{url('assets/css/plugins/select2.min.css')}}">
    <link rel="stylesheet" href="{{url('assets/css/plugins/select2-bootstrap4.min.css')}}">
    <meta name="_token" content="{{csrf_token()}}">
@stop

@section('content')
    @include('site.137.header')
    <div id="main">
        <section id="content" class="main">

            <!-- Form -->
            <section>
                <!--<h2>فرم درخواست</h2>-->
                <form id="commentForm" onsubmit="return false;">
                    @if(config('app.recaptcha') != null)
                        {!!  GoogleReCaptchaV3::renderField('contact_us_id','contact_us_action') !!}
                    @endif

                    <div class="row uniform">

                        <div class="6u 12u$(xsmall)">
                            @if(auth()->check() && auth()->user()->lname != null)
                                <input name="name"
                                       value="{{auth()->user()->fname.' '.auth()->user()->lname}}"
                                       readonly class="form-control" type="text" id="name" required
                                       data-error="نام خود را وارد کنید" placeholder="نام و نام خانوادگی">
                            @else
                                <input name="name" class="form-control" type="text" id="name" required
                                       data-error="نام خود را وارد کنید" placeholder="نام و نام خانوادگی">
                            @endif
                        </div>
                        <div class="6u$ 12u$(xsmall)">
                            @if(auth()->check())
                                <input name="mobile" value="{{auth()->user()->mobile}}" readonly
                                       class="form-control" type="text" placeholder="موبایل">
                            @else
                                <input name="mobile" class="form-control"
                                       type="text" placeholder="موبایل">
                            @endif
                        </div>


                        <div class="12u$">
                            <div class="select-wrapper">

                                <select name="category_id" class="form-control select" id="categories">
                                    <option value="">موضوع را انتخاب کنید</option>
                                    @foreach($subjects as $subject)
                                        <option value="{{$subject->id}}">{{$subject->title}}</option>
                                    @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="12u$">
                            <div class="select-wrapper">
                                <select name="subject_id" id="subjects">
                                </select>
                            </div>
                        </div>

                        <div class="12u$">
                            <label for="demo-human">درخواست</label>
                            <textarea name="body" id="comment" placeholder="درخواست خود را بنویسید" rows="6"></textarea>
                        </div>


                        <div class="12u$">
                            <label for="demo-human">نشانی</label>
                            <textarea name="address" id="address" placeholder="نشانی خود را وارد نمایید"
                                      rows="3"></textarea>
                        </div>

                        <div class="12u$">
                            <ul class="actions">
                                <li><input type="submit" onclick="saveComment()" value="ارسال پیام" class="special"/>
                                </li>
                                <li><input type="reset" value="بازنشانی"/></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </section>


        </section>
    </div>

    @if(config('app.recaptcha') != null)
        {!!  GoogleReCaptchaV3::init() !!}
    @endif

    @include('layouts.loading')
@stop

@section('footer')
    <!--  select2 -->
    <script src="{{url('assets/js/plugins/select2.min.js')}}"></script>
    <script>
        saveComment = function () {
            $("#loading").show();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            var form = $('#commentForm').serialize();
            $.ajax({
                url: '{{ url('/137') }}',
                type: 'POST',
                data: form,
                success: function (response) {
                    $("#loading").hide();
                    swal.fire({
                        title: 'ثبت موفق',
                        text: 'کد رهگیری شما:' + response.code,
                        type: 'success'
                    });
                    document.getElementById("commentForm").reset();
                },
                error: function (xhr) {
                    $("#loading").hide();
                    if (xhr.status === 422) {
                        jQuery.each(xhr.responseJSON.errors, function (key, value) {
                            toastr.error(value);
                        });
                    }
                    if (xhr.status !== 422) {
                        toastr.warning('خطایی در سامانه رخ داد!');
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        $('#categories').change(function () {
            var categoryID = $(this).val();
            if (categoryID) {
                $.ajax({
                    type: "GET",
                    url: "{{url('137/getList')}}?subject_id=" + categoryID,
                    success: function (response) {
                        $("#subjects").empty();
                        $("#subjects").append('<option>انتخاب کنید</option>');
                        $.each(response, function (key, value) {
                            $("#subjects").append('<option value="' + key + '">' + value + '</option>');
                        });

                    }, error: function (xhr) {
                        $("#subjects").empty();
                        toastr.warning('خطایی در سامانه رخ داد!');
                    }
                });
            } else {
                $("#subjects").empty();
            }
        });
    </script>
@stop