@extends('dashboard.layouts.master')
@section('title', 'FAQ Management| Admin Panel')
@include('sweetalert::alert')
@push('after-styles')
    <style type="text/css">
        #blah {
            height: 50% !important;
            width: 25% !important;
        }

        #blah1 {
            height: 50% !important;
            width: 25% !important;
        }

        input[type="time"] {
            cursor: pointer;
        }

        .product-single-variant {
            margin: 30px 0 10px 0;
            padding: 20px 0px 0 0;
        }

        .product-single-variant:not(:first-child) {
            border-top: 1px solid gray;
        }

        .error {
            text-align: left;
            display: block;
            color: red;
        }

        .newColoradded .form-check-input {
            margin-left: 0;
        }
    </style>
    <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

    <style type="text/css">
        .error {
            color: red;
            margin-left: 5px;
        }
    </style>
@endpush
@section('content')
    <div class="padding edit-package">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3 class="d-block">Create FAQ</h3>
                    <small class="d-inline-block">
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                            href="{{ route('faq') }}">FAQ</a>/
                        <span>Create FAQ</span>
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="box-tool">
                        <ul class="nav">
                            <li class="nav-item inline">
                                <a class="nav-link" href="{{ route('faq') }}">
                                    <i class="material-icons md-18">×</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="loader"></div>

            <div class="box-body">
                {{ Form::open(['route' => ['category.store'], 'method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data', 'id' => 'storeForm']) }}
                <div class="personal_informations">
                    <div class="row">

                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label class="form-control-label">Question[EN]<span class="valid_field">*</span></label>
                                <input type="text" name="question" id="question" class="form-control" 
                                    placeholder="Question[EN]" value="{{ old('question') }}">

                            </div>
                        </div>
                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label class="form-control-label">Answer[EN]<span class="valid_field">*</span></label>
                                <textarea name="answer" id="answer" class="form-control" 
                                 placeholder="Answer[EN]">{{ old('answer') }}</textarea>

                            </div>
                        </div>
                        </div>
                        <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label class="form-control-label">Question[AR]<span class="valid_field">*</span></label>
                                <input type="text" name="question_ar" id="question_ar" class="form-control"
                                    placeholder="Question[AR]" value="{{ old('question_ar') }}">

                            </div>
                        </div>
                        <div class="col-md-12 col-12">
                            <div class="form-group">
                                <label class="form-control-label">Answer[AR]<span class="valid_field">*</span></label>
                                <textarea name="answer_ar" id="answer_ar" class="form-control"
                                placeholder="Answer[AR]">{{ old('answer_ar') }}</textarea>

                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group m-t-md">
                            <button type="submit" class="solid-button m-r-1" id="submitDetail">
                                {!! __('backend.add') !!}</button>
                            <a href="{{ route('faq') }}" class="border-btn"> {!! __('backend.cancel') !!} </a>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
    </div>
@endsection
@push('after-scripts')
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/summernote/dist/summernote.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript">
        var test = $("#storeForm").validate({
            rules: {
                answer: {
                    required: true,
                },
                question: {
                    required: true,
                },
                answer_ar: {
                    required: true,
                },
                question_ar: {
                    required: true,
                },

            },
            messages: {
                question: {
                    required: "The Question[EN] field is required.",
                },
                answer: {
                    required: "The Answer[EN] field is required.",
                },
                question_ar: {
                    required: "The Question[AR] field is required.",
                },
                answer_ar: {
                    required: "The Answer[AR] field is required.",
                },

            },
            submitHandler: function(form) {


                var form_data = new FormData($('#storeForm')[0]);
                var action_url = "{{ route('faq.store') }}";
                var csrf = "{{ csrf_token() }}";

                $.ajax({
                    url: action_url,
                    data: form_data,
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    processData: false,
                    contentType: false,
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        $('.loader').css("visibility", "visible");
                    },
                    success: function(data) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        if (data.success) {

                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.msg ?? 'Faq saved successfully',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('faq') }}";
                                }
                            });
                        }
                    },
                    error: function() {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }

                });
            }
        });
    </script>
@endpush