@extends('layouts.admin')

@section('styles')
<link href="{{asset('assets/admin/css/tabbar.css')}}" rel="stylesheet" />
@endsection

@section('content')

<!-- [ breadcrumb ] start -->
<div class="page-header">
    <div class="page-block">
        <div class="row align-items-center">
            <div class="col-md-12">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">হোম</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0)">কুইজ</a></li>
                    <li class="breadcrumb-item" aria-current="page">ট্রিভিয়া কুইজ / তৈরি করুন</li>
                </ul>
            </div>
            <div class="col-md-12">
                <div class="page-header-title">
                    <h2 class="mb-0">ট্রিভিয়া কুইজ / তৈরি করুন</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ breadcrumb ] end -->

@include('includes.admin.form-error')
@include('includes.admin.form-success')
<div class="gocover" style="background: url({{asset('assets/images/'.$gs->admin_loader)}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);"></div>
<form id="tquizformdata" action="{{ route('tquiz.store')}}" method="POST" enctype="multipart/form-data">
    {{csrf_field()}}
    <input type="hidden" name="is_pending">
    <input type="hidden" name="post_type">
    <div class="row">
        {{-- ========== LEFT COLUMN — Content + Questions + Results ========== --}}
        <div class="col-lg-8">
            {{-- Content Info --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('কন্টেন্ট তথ্য') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Language') }} <span class="text-danger">*</span></label>
                        <select name="language_id" id="video_language_id" class="form-select">
                            <option value="">{{__('Please Select a Language')}}</option>
                            @foreach ($languages as $language)
                                <option value="{{$language->id}}">{{$language->language}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Title') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="title" placeholder="{{ __('Title') }}" autocomplete="off" id="title">
                        <small class="text-muted">{{ __('(In Any Language)') }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Slug') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="slug" placeholder="{{ __('Slug') }}" autocomplete="off" id="slug">
                        <small class="text-muted">{{ __('In English') }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Keyword meta tag') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="meta_tag" rows="2" placeholder="{{ __('Keyword meta tag') }}"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Tags') }} <span class="text-danger">*</span></label>
                        <input type="text" placeholder="{{ __('Tags') }}" class="form-control tags" id="tags" name="tags" value="">
                    </div>
                    <div class="mb-3 description">
                        <label class="form-label">{{ __('Description') }} <span class="text-danger">*</span></label>
                        <textarea class="nic-edit" name="description" placeholder="{{__('Description')}}" id="description"></textarea>
                    </div>
                </div>
            </div>

            {{-- ========== QUESTIONS AREA (dynamic JS) ========== --}}
            <div class="quiz-question first-question">
                <div class="row mt-3">
                    <div class="col-lg-12"><h6><b>{{__('Question')}}</b></h6></div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="add-product-content card mb-4">
                            <div id="headingOne" class="iub">
                                <div class="btn d-flex justify-content-between bg-light">
                                    <div class="left">#1</div>
                                    <div class="right align-self-center">
                                        <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="collapsebutton btn btn-info" data-id="plus"><i class="fas fa-minus"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                                <div class="card-body pt-3">
                                    <div class="product-description">
                                        <div class="body-area p-0">
                                            <div class="mb-3">
                                                <label class="form-label">{{ __('Question') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name='question_title[]' placeholder="{{ __('Question') }}" required>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">{{__('Image')}}</label>
                                                        <div class="img-upload custom-image-upload">
                                                            <div id="image-preview" class="img-preview" style="background: url({{ asset('assets/admin/images/upload.png') }});">
                                                                <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{__('Upload')}}</label>
                                                                <input type="file" name="question_photo[]" class="img-upload" id="image-upload">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="question_description">
                                                        <label class="form-label">{{__('Description')}}</label>
                                                        <textarea class="nic-edit" name="question_description" placeholder="{{__('Description')}}" required></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="quiz-answer-area">
                                                <label class="form-label">{{ __('Answer') }}</label>
                                                <div class="row" id="quiz-single-answer">
                                                    <div class="col-xl-4 col-6 quiz-single-div">
                                                        <div class="card single-answer">
                                                            <div class="card-body py-3 border">
                                                                <div class="img-upload custom-image-upload">
                                                                    <div id="image-preview" class="img-preview" style="background: url({{ asset('assets/admin/images/upload.png') }});">
                                                                        <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{__('Upload')}}</label>
                                                                        <input type="file" name="answer_photo[1][1]" class="img-upload" id="image-upload" required>
                                                                    </div>
                                                                </div>
                                                                <input type="text" class="form-control mt-3" name="answer_title[1][1]" placeholder="{{ __('Answer Text') }}" autocomplete="off" required>
                                                                <div class="correct-ans mt-2">
                                                                    <div class="form-check">
                                                                        <input type="radio" id="customRadio1" name="correct_answer[1]" value="1" class="form-check-input req_question" checked required>
                                                                        <label class="form-check-label" for="customRadio1">{{__('Correct')}}</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-6 quiz-single-div">
                                                        <div class="card single-answer">
                                                            <div class="card-body py-3 border">
                                                                <div class="img-upload custom-image-upload">
                                                                    <div id="image-preview" class="img-preview" style="background: url({{ asset('assets/admin/images/upload.png') }});">
                                                                        <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{__('Upload')}}</label>
                                                                        <input type="file" name="answer_photo[1][2]" class="img-upload" id="image-upload">
                                                                    </div>
                                                                </div>
                                                                <input type="text" class="form-control mt-3" name="answer_title[1][2]" placeholder="{{ __('Answer Text') }}" autocomplete="off">
                                                                <div class="correct-ans mt-2">
                                                                    <div class="form-check">
                                                                        <input type="radio" id="customRadio2" name="correct_answer[1]" value="2" class="form-check-input req_question" required>
                                                                        <label class="form-check-label" for="customRadio2">{{__('Correct')}}</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center mt-2">
                                                <a href="javascript:;" class="btn btn-info quiz-answer" data-question="1"><i class="fa fa-plus"></i> {{__('Add Answer')}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-lg-12 text-center">
                    <a href="javascript:;" id="add-quiz-question" class="btn btn-info"><i class="fa fa-plus"></i> {{__('Add Question')}}</a>
                </div>
            </div>

            {{-- ========== RESULTS AREA (dynamic JS) ========== --}}
            <div class="quiz-result-area first-quiz-result">
                <div class="row mt-3">
                    <div class="col-lg-12"><h6><b>{{__('Result')}}</b></h6></div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="add-product-content card mb-4">
                            <div id="headingTwo">
                                <div class="btn d-flex justify-content-between bg-light">
                                    <div class="left">#1</div>
                                    <div class="right">
                                        <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="resultCollapse btn btn-info" data-id="plus"><i class="fas fa-minus"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                                <div class="card-body pt-3">
                                    <div class="product-description">
                                        <div class="body-area p-0">
                                            <div class="mb-3">
                                                <label class="form-label">{{ __('Result') }} <span class="text-danger">*</span></label>
                                                <input type="text" name="result_title[]" class="form-control" placeholder="{{ __('Result') }}">
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label">{{__('Image')}}</label>
                                                        <div class="img-upload custom-image-upload">
                                                            <div id="image-preview" class="img-preview" style="background: url({{ asset('assets/admin/images/upload.png') }});">
                                                                <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{__('Upload')}}</label>
                                                                <input type="file" name="result_photo[]" class="img-upload" id="image-upload">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="result_description">
                                                        <label class="form-label">{{__('Description')}}</label>
                                                        <textarea class="nic-edit" name="result_description" placeholder="{{__('Description')}}"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="mb-3">
                                                <label class="form-label">{{__('Number of Correct Answers')}} <small>({{__('The range of correct answers to show this result')}})</small></label>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <input type="number" name="min[]" class="form-control" placeholder="{{ __('Min') }}" min="0">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="number" name="max[]" class="form-control" placeholder="{{ __('Max') }}" min="0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-lg-12 text-center">
                    <a href="javascript:;" id="quiz-result" class="btn btn-info"><i class="fa fa-plus"></i> {{__('Add Result')}}</a>
                </div>
            </div>
        </div>

        {{-- ========== RIGHT COLUMN — Sidebar ========== --}}
        <div class="col-lg-4">
            {{-- Featured Image --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('ফিচার্ড ইমেজ') }}</h5></div>
                <div class="card-body">
                    <div class="img-upload custom-image-upload">
                        <div id="image-preview" class="img-preview" style="background: url({{ asset('assets/admin/images/upload.png') }});">
                            <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{__('Upload')}}</label>
                            <input type="file" name="image_big" class="img-upload" id="image-upload">
                        </div>
                        <p class="text-muted small mt-1">{{__('Prefered Size: (600x600) or Square Sized Image')}}</p>
                    </div>
                </div>
            </div>

            {{-- Category --}}
            <div class="card categoryDiv" style="display:none;">
                <div class="card-header"><h5>{{ __('ক্যাটাগরি') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Category') }} <span class="text-danger">*</span></label>
                        <select name="category_id" id="video_parent_id" class="form-select">
                            <option value="">{{__('Please select a category')}}*</option>
                            @foreach ($datas as $data)
                                <option value="{{$data->id}}">{{$data->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Sub Category') }}</label>
                        <select name="subcategories_id" id="subcategory_id" class="form-select"></select>
                    </div>
                </div>
            </div>

            {{-- Options --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('পোস্ট অপশন') }}</h5></div>
                <div class="card-body">
                    @php
                        $radioOptions = [
                            ['name' => 'is_feature', 'label' => __('Add to Feature'), 'id' => 'is_feature'],
                            ['name' => 'is_slider', 'label' => __('Add to Slider'), 'id' => 'is_slider'],
                            ['name' => 'slider_right', 'label' => __('Slider Right Post'), 'id' => 'slider_right'],
                            ['name' => 'is_trending', 'label' => __('Add to Trending News'), 'id' => 'is_trending'],
                        ];
                    @endphp
                    @foreach($radioOptions as $opt)
                    <div class="mb-3">
                        <label class="form-label">{{ $opt['label'] }}</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="{{ $opt['name'] }}" value="1" id="{{ $opt['id'] }}1">
                                <label class="form-check-label" for="{{ $opt['id'] }}1">{{__('Yes')}}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="{{ $opt['name'] }}" value="0" id="{{ $opt['id'] }}2" checked>
                                <label class="form-check-label" for="{{ $opt['id'] }}2">{{__('No')}}</label>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Schedule & Submit --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('প্রকাশ') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input schedule" name="schedule_post" value="1" id="schedule_post">
                            <label class="form-check-label" for="schedule_post">{{ __('Schedule Post') }}</label>
                        </div>
                    </div>
                    <div class="mb-3 datepick" style="display:none;">
                        <label class="form-label">{{ __('Start Date') }}</label>
                        <input id="from" class="form-control" type="text" name="schedule_post_date" autocomplete="off" placeholder="{{__('Start Date')}}" required="" value="">
                    </div>
                    <div class="d-grid gap-2">
                        <input type="submit" data-draft="1" class="btn btn-warning tquiz-btn1 saveAsDraft" value="Save as Drafts">
                        <input type="submit" data-draft="0" class="btn btn-primary tquiz-btn1 addPost" value="Add Post">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@section('scripts')
<script src="{{asset('assets/admin/js/videoCreate.js')}}"></script>
<script src="{{asset('assets/admin/js/tagify.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.min.js"></script>
<script>
    $('.tags').tagify();
</script>
<script type="text/javascript">
    "use strict";
    var lang = {
        'question': '{{ __('Question') }}',
        'image': '{{ __('Image') }}',
        'description': '{{ __('Description') }}',
        'upload': '{{ __('Upload') }}',
        'answer': '{{ __('Answer') }}',
        'answer_text': '{{ __('Answer Text') }}',
        'correct': '{{ __('Correct') }}',
        'add_answer': '{{ __('Add Answer') }}',
        'result': '{{ __('Result') }}',
        'min': '{{ __('Min') }}',
        'max': '{{ __('Max') }}',
        'number_of_correct_answer': '{{ __('Number of Correct Answers') }}',
        'range_of_correct': '{{ __('The range of correct answers to show this result') }}',
    }
</script>
<script src="{{asset('assets/admin/js/quiz.js')}}"></script>
@endsection
