@extends('layout.app', ['title' => 'Hướng dẫn giải đáp'])

@push('style')
  @vite(['resources/css/landing.css', 'resources/css/level-test.css'])
@endpush
@php
@endphp
@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    @include('layout.landing_banner', [
        'title' => 'hướng dẫn giải đáp',
        'description' => 'Bạn đang gặp khó khăn gì, đừng lo lắng hãy nói với Siêu Học nhé!',
    ])
    <div class="theoryContent m-5 p-5">
      <div class="proficiency-assessment-test-header d-flex justify-content-between align-items-center pb-3 pe-4">
        <h4 class="proficiency-assessment-test-title text-red-main fw-semibold mb-0">NỘI DUNG CÂU HỎI</h4>
      </div>
      <div class="questionContent my-4">
        <textarea class="form-control answerContent border-0 px-5" rows="3" disabled></textarea>
      </div>
      <div class="theoryQuestion mb-5">
        <label for="exampleFormControlTextarea1" class="form-label">Đáp án trả lời tự động</label>
        <textarea class="form-control textAnswer" rows="15" name="theory_answer" value="" disabled></textarea>
      </div>
      <div class="proficiency-assessment-test-header w-75 mx-auto">
        <textarea class="form-control border-0" rows="3" id="question" value=""
          placeholder="Nhập câu hỏi của bạn ....">{{ $theoryQuestion }}</textarea>
      </div>
      <div class="w-75 d-flex justify-content-end mx-auto mb-3">
        <button class="answerQuestion btn btn-danger my-3 px-4">Gửi</button>
      </div>

    </div>
    @include('modals.show_loading')

  </section>
@endsection
@push('script')
  @vite(['resources/js/answer-guide.js'])
@endpush