@extends('panel.layouts.master')
@section('title','ایجاد سوال')

@section('content')
    <!-- begin::page loader-->
    @include('panel.layouts.sidebar')
    @include('panel.layouts.header')
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

    <style>
        .btn-custom{
            border-radius: 0;
            width: 5rem;
            height: 2.5rem;
            justify-content: center;
        }

        table input{
            text-align: center !important;
        }
    </style>

    <main class="main-content">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex justify-content-between align-items-center">
                    <h6>ایجاد سوال</h6>
                </div>
                    <form action="{{ route('banks.store') }}" method="post" class="needs-validation" novalidate enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-12 mt-3">
                                <div class="form-group">
                                    <label for="question">سوال</label>
                                    <textarea name="question" id="question" class="form-control mt-2 editor @error('question') is-invalid @enderror">{!! old('question') !!}</textarea>
                                    @error('question')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-6 mt-3">
                                <div class="form-group">
                                    <label for="image">تصویر</label>
                                    <input type="file" name="image" class="form-control mt-2 @error('image') is-invalid @enderror">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            {{-- <div class="col-lg-6 mt-3">
                                <div class="form-group">
                                    <label for="time">زمان سوال<span class="text-danger">*</span></label>
                                    <input type="number" name="time" id="time" class="form-control mt-2 @error('time') is-invalid @enderror" value="{{ old('time', 60) }}">
                                    @error('time')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div> --}}
                            <div class="col-lg-4 mt-3">
                                <div class="form-group">
                                    <label for="category_id">دسته بندی<span class="text-danger">*</span></label>
                                    <select name="category_id" id="category_id" class="form-control mt-2 @error('category_id') is-invalid @enderror">
                                        <option value="" selected>انتخاب کنید</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-4 mt-3">
                                <div class="form-group">
                                    <label for="correct_answer">گزینه درست<span class="text-danger">*</span></label>
                                    <select name="correct_answer" id="correct_answer" class="form-control mt-2 @error('correct_answer') is-invalid @enderror">
                                        <option value="1" {{ old('correct_answer') == '1' ? 'selected' : '' }}>گزینه اول</option>
                                        <option value="2" {{ old('correct_answer') == '2' ? 'selected' : '' }}>گزینه دوم</option>
                                        <option value="3" {{ old('correct_answer') == '3' ? 'selected' : '' }}>گزینه سوم</option>
                                        <option value="4" {{ old('correct_answer') == '4' ? 'selected' : '' }}>گزینه چهارم</option>
                                    </select>
                                    @error('correct_answer')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-4 mt-3">
                                <div class="form-group">
                                    <label for="status">وضعیت<span class="text-danger">*</span></label>
                                    <select name="status" id="status" class="form-control mt-2 @error('status') is-invalid @enderror">
                                        <option value="1" selected {{ old('status') == '1' ? 'selected' : '' }}>منتشر شده</option>
                                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>منتشر نشده</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mt-3">
                                    <div class="form-group">
                                        <label for="answer_1">پاسخ اول</label>
                                        <textarea name="answer_1" id="answer_1" class="form-control mt-2 editor @error('answer_1') is-invalid @enderror">{!! old('answer_1') !!}</textarea>
                                        @error('answer_1')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 mt-3">
                                    <div class="form-group">
                                        <label for="answer_2">پاسخ دوم</label>
                                        <textarea name="answer_2" id="answer_2" class="form-control mt-2 editor @error('answer_2') is-invalid @enderror">{!! old('answer_2') !!}</textarea>
                                        @error('answer_2')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 mt-3">
                                    <div class="form-group">
                                        <label for="answer_3">پاسخ سوم</label>
                                        <textarea name="answer_3" id="answer_3" class="form-control mt-2 editor @error('answer_3') is-invalid @enderror">{!! old('answer_3') !!}</textarea>
                                        @error('answer_3')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 mt-3">
                                    <div class="form-group">
                                        <label for="answer_4">پاسخ چهارم</label>
                                        <textarea name="answer_4" id="answer_4" class="form-control mt-2 editor @error('answer_4') is-invalid @enderror">{!! old('answer_4') !!}</textarea>
                                        @error('answer_4')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 mt-3">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-custom">ثبت</button>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>
        </div>
    </main>
@endsection
@section('script')
<script src="/assets/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
{{-- tinymce --}}
        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

        tinymce.init({
            selector: '.editor',
            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            directionality: 'rtl',
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 440,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            contextmenu: 'link image imagetools table',
            skin: useDarkMode ? 'oxide-dark' : 'oxide',
            content_css:'dark',
            content_style: "@import url('/public/css/fonts.css?family=Vazir FD'); body div{width:100% !important;height:100% !important}",
        });
</script>
@endsection