@extends('panel.components.sidbar')
@section('content')





<div class="md-card uk-margin-medium-bottom">
    <div class="md-card-content">
        @isset($faq)
        <form action="{{route('faq.update',$faq)}}" method="POST">
            @method('put')
            @else
            <form action="{{route('faq.store')}}" method="POST">
                @endisset
                @csrf
                <h3 class="heading_a">Create New Question & Answer</h3>



                <h5>Qestion</h5>
                <div class="uk-grid uk-grid-divider" data-uk-grid-margin>
                    <div class="uk-width-large-1-2">
                        <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                            <div class="uk-width-1-3">
                                <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_1'}">
                                    <li><a href="#">AR</a></li>
                                    <li><a href="#">EN</a></li>
                                </ul>
                            </div>
                            <div class="uk-width-2-3">
                                <ul id="tabs_1" class="uk-switcher uk-margin-small-top">
                                    <li>
                                        <div class="uk-width-medium-1">
                                            @isset($faq)
                                            <input name="ar_question" placeholder="أدخل السؤال باللغه العربية"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('ar_question',$faq->getTranslation('question','ar'))}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />

                                            @else

                                            <input name="ar_question" placeholder="أدخل السؤال باللغه العربية"
                                                class="md-input masked_input label-fixed" value="{{old('ar_question')}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @endisset
                                            @error('ar_question')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-width-medium-1">
                                            @isset($faq)

                                            <input name="en_question" placeholder="Enter The Question In English"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('en_question',$faq->getTranslation('question','en'))}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @else
                                            <input name="en_question" placeholder="Enter The Question In English"
                                                class="md-input masked_input label-fixed" value="{{old('en_question')}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @endisset
                                            @error('en_question')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <h5>Answer</h5>
                <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                    <div class="uk-width-large-1">
                        <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                            <div class="uk-width-1-6">
                                <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_6'}">
                                    <li><a href="#">AR</a></li>
                                    <li><a href="#">EN</a></li>
                                </ul>
                            </div>
                            <div class="uk-width-2-3">
                                <ul id="tabs_6" class="uk-switcher uk-margin-small-top">
                                    <li>
                                        <div class="uk-form-row">
                                            @isset($faq)

                                            <textarea name="ar_answer" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="أدخل الاجابه باللغه العربيه">{{old('ar_answer',$faq->getTranslation('answer','ar'))}}</textarea>
                                            @else

                                            <textarea name="ar_answer" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="أدخل الاجابه باللغه العربيه">{{old('ar_answer')}}</textarea>
                                            @endisset
                                            @error('ar_answer')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-form-row">
                                            @isset($faq)
                                            <textarea name="en_answer" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="Enter The Answer In English">{{old('en_answer',$faq->getTranslation('answer','en'))}}</textarea>

                                            @else

                                            <textarea name="en_answer" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="Enter The Answer In English">{{old('en_answer')}}</textarea>
                                            @endisset
                                            @error('en_answer')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="uk-grid uk-grid-divider">
                    <div class="uk-width-large-1-2">
                        <div class="uk-grid uk-grid-medium">

                            <div class="uk-width-1-3"">
                            <h5>Type</h5>
                            </div>
                            <div class=" uk-width-2-3"">
                                <select name="category" id=" select_demo_4" data-md-selectize>
                                    <option value="{{ null }}">Select Type</option>
                                    <option value="home" @isset($faq) @if($faq->getTranslation('category','en') ==
                                        'home') selected
                                        @endif @endisset>Home
                                    </option>
                                    <option value="profile" @isset($faq) @if($faq->getTranslation('category','en') ==
                                        'profile') selected
                                        @endif @endisset>Profile
                                    </option>
                                    <option value="contact" @isset($faq) @if($faq->getTranslation('category','en') ==
                                        'contact') selected
                                        @endif @endisset>Contact
                                    </option>
                                </select>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align:center;padding:15px;">

                    <button type="submit"
                        class="md-btn md-btn-primary md-btn-large md-btn-wave-light waves-effect waves-button waves-light">
                        @isset($faq) Update @else Create @endisset</button>
                </div>
            </form>
    </div>
</div>



<div class="md-card-list-wrapper" id="mailbox" style="margin-top: 10px;">
    <div class="uk-width-large-8-10 uk-container-center">
        <div class="md-card-list">
            <ul class="hierarchical_slide">
                @foreach($faqs as $fa)

                <li>
                    <div class="md-card-list-item-menu" data-uk-dropdown="{mode:'click',pos:'bottom-right'}">
                        <form action="{{route('faq.delete',$fa)}}" id="delete" method="POST">
                            @csrf
                            @method('DELETE')
                            <a onclick="document.getElementById('delete').submit();"> <span
                                    class="md-icon material-icons"> delete</span> </a>
                        </form>
                    </div>
                    @if(empty($faq) || $faq->id != $fa->id)

                    <div class="md-card-list-item-menu" data-uk-dropdown="{mode:'click',pos:'bottom-right'}">

                        <a href="{{route('faq.edit',$fa)}}"> <span class="md-icon material-icons"> edit</span> </a>
                    </div>
                    @endif
                    <span class="md-card-list-item-date">{{$fa->created_at->toTimeString()}}</span>
                    <span class="md-card-list-item-date">{{$fa->getTranslation('category','en')}}</span>

                    <div class="md-card-list-item-sender">
                        <span>{{$fa->getTranslation('question','en')}}</span>
                    </div>
                    <div class="md-card-list-item-subject">
                        <div class="md-card-list-item-sender-small">
                            <span>{{$fa->getTranslation('question','en')}}</span>
                        </div>
                    </div>
                    <div class="md-card-list-item-content-wrapper">
                        <div class="md-card-list-item-content">{{$fa->getTranslation('answer','en')}}</div>

                    </div>
                </li>
                @endforeach

            </ul>
        </div>

    </div>
</div>



@endsection
@section('custom-script')
<script src="{{ asset('assets/js/pages/page_mailbox.min.js') }}"></script>

@endsection