@extends('layouts.admin')

@section('title')
    Ananas | Add New Chat
@endsection

@section('Chats')
    active {{session('sidebar_color')}}
@endsection

@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Add New Chat</li>
        </ol>
        <h6 class="font-weight-bolder mb-0">Add New Chat</h6>
    </nav>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <style>
        .fixed-plugin .badge {
            border: 1px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block!important;
            height: 32px;
            margin-right: 5px;
            position: relative;
            width: 32px;
            transition: all 0.2s ease-in-out;
        }
        .disNone {
            display: none!important;
        }
    </style>
@endsection

@section('content')

    <div class="row marginT1">
        <div class="col-md-12 col-sm-12 col-xxl-8 offset-xxl-2 col-xl-10 offset-xl-1 ">

            @if(true)
                <div class="card  mt-7">

                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="{{session('sidebar_color')}}  border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Chat</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <form method="post" action="{{route('chat.store')}}" enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex col-12 row ms-1">

                        </div>
                        <div class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                <label for="order">Chat order</label>
                                <input type="text" class="form-control" id="order" name="order" aria-describedby="order" value="@if($chat){{$chat->order+1}} @else {{'1'}} @endif" required>
                            </div>
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 " style="margin-left: -15px;">
                                <label for="type">Type</label>
                                <select class="form-select" id="type" name="type" aria-label="Default select example" required>
                                    <option >Select...</option>
                                    <option value="1">Type 1</option>
                                    <option value="2">Type 2</option>
                                </select>
                            </div>
                        </div>
                        <div id="div_title" class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                <label for="title">Chat title</label>
                                <textarea dir="rtl" class="form-control"  name="title" id="title" rows="3" style="width:98%!important;"  required>این جمله رو به انگلیسی بگو.</textarea>
                            </div>
                        </div>
                        <div id="div_scenario" class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                <label for="scenario">Chat scenario</label>
                                <textarea dir="rtl" class="form-control"  name="scenario" id="scenario" rows="3" style="width:98%!important;"  placeholder="سناریوی مد نظر را اینجا بنویسید."></textarea>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                <label for="question">Chat question</label>
                                <textarea dir="rtl" class="form-control"  name="question" id="question" rows="3" style="width:98%!important;" required></textarea>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                <label for="role_system">Role System</label>
                                <textarea dir="rtl" class="form-control"  name="role_system" id="role_system" rows="4" style="width:98%!important;" required></textarea>
                                <input type="hidden" class="form-control" id="category_id" name="category_id" aria-describedby="category_id" value="{{$category_id}}">
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                <label for="format">Format</label>
                                <textarea dir="rtl" class="form-control"  name="format_question" id="format" rows="4" style="width:98%!important;" required></textarea>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 justify-content-end mt-2">
                            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 mt-4 float-end ">
                                <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3 mt-2">Submit</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            @endif
        </div>
    </div>

@endsection

@section('footer')
    <script>
        $('select').on('change', function() {
            if(this.value==="1"){
                /*$( "#div_title" ).addClass('disNone')*/
                /*$( "#div_scenario" ).removeClass('disNone')*/
                $( "#role_system" ).text('من یک دانشجوی زبان انگلیسی هستم. دوست من که اسمش آناناس است، از من یک سوال انگلیسی پرسید تا دانش زبان انگلیسی من را تست کند. من به تو سوال آناناس و پاسخ خودم را میدهم. پاسخ را بررسی کن و بگو آیا این پاسخ مناسب سوال او است یا نه. اگر نیست، توضیح بده و مثال بزن.');
                $( "#format" ).text(' سوال : _QUESTION_' + '\n' +'پاسخ : _USER_REPLY_ ');
            }else{
                /*$( "#div_title" ).removeClass('disNone')
                $( "#div_scenario" ).addClass('disNone')*/
                $( "#role_system" ).text('شما یک معلم انگلیسی هستید. ما به شما یک جمله و ترجمه آن جمله را به انگلیسی میدهیم. شما توضیح دهید که آیا این ترجمه درست است یا نه. اگر درست نیست بگو چرا درست نیست. و ترجمه درست را بنویس.');
                $( "#format" ).text(' سوال : _QUESTION_' + '\n' + 'ترجمه : _USER_REPLY_ ');
            }
        });
    </script>
@endsection