@extends('dashboard.layouts.master')
@section('title', 'Edit FAQ| Admin Panel')

@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;
            /* border-bottom: 1px solid gray; */
        }

        .product-single-variant:last-child {
            /* border-top: 1px solid gray; */
            /*border-bottom: 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" />

    <!--[if lt IE 9]>
                        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
                        <![endif]-->

    <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"> Edit FAQ
                    </h3>
                    <small class="d-inline-block">
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                            href="{{ route('faq') }}">FAQ Management</a> /
                        <span>Edit 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(['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="{{ @$faq->question }}">
                                <span style="color: red;display: none;" id="errorMsgtitle" class='validate'></span>
                            </div>
                        </div>
                        <input type="hidden" name="id" id="faq_id" class="form-control"
                            value="{{ @$faq->id }}">
                        <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]"
                                >{{ @$faq->answer }}</textarea>

                                <span style="color: red;display: none;" id="errorMsgtitle" class='validate'></span>

                            </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="{{ @$faq->question_ar }}">
                                <span style="color: red;display: none;" id="errorMsgtitle" class='validate'></span>
                            </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]"
                                >{{ @$faq->answer_ar }}</textarea>
                                <span style="color: red;display: none;" id="errorMsgtitle" class='validate'></span>

                            </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"> Update </button>
                                <a href="{{ route('faq') }}" class="border-btn">
                                    {!! __('backend.cancel') !!}
                                </a>
                            </div>
                        </div>
                    </div>


                    </form>
                    <!-- {{ Form::close() }} -->
                </div>
            </div>
        </div>
    @endsection

    @push('after-scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
        <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="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

        <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.update', $faq->id) }}";
                    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