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

@push('style')
  @vite(['resources/css/landing.css'])
@endpush
@php
  use App\Enums\SubjectExerciseEnum;
@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é!',
    ])
    <!-- Testimonial start -->
    <section class="testimonial container-fluid mb-5">
      @include('custom_errors.session-errors')
      <div class="testimonial-wrap row m-2 m-md-3 m-xl-5 p-3">
        <div class="col-6 testimonial-suggest">
          <div class="testimonial-text-label">
            <span class="content-label text-primary-color">
              góc học tập
            </span>
          </div>
          <div class="testimonial-heading">
            <div class="content-header fs-30 d-flex">
              <span class="font-sigmar-one">
                Câu hỏi &nbsp;
              </span>
              <span class="font-sigmar-one textNewYellow">
                giải bài tập
              </span>
            </div>
          </div>
          <div class="testimonial-content mt-3">
            <div class="fs-17 text-paragraph d-flex flex-column">
              <span class="fw-700 mb-2">
                Giải đáp câu hỏi bài tập:
              </span>
              <span class="mb-2">
                Bạn có câu hỏi bài tập khó giải?
              </span>
              <span class="mb-2">
                Hãy nhập ở phần bên, chúng tôi sẽ giúp giải đáp cho bạn tất cả các câu hỏi.
              </span>
              <span class="mb-2">
                Bạn cũng có thể gửi câu hỏi bằng hình ảnh cho chúng tôi theo các định dạng:
                <span class="text-red-main">.jpeg; .png; .jpg</span>
              </span>
            </div>
          </div>
        </div>
        <div class="col-6 testimonial-form">
          <div class="testimonial-form-container border-0 p-2">
            <div class="testimonial-slove-question mb-2">
              <form action="{{ route('answer_guides.storeExerciseGuide') }}" method="POST" enctype="multipart/form-data"
                class="exerciseForm">
                @csrf
                <textarea class="d-block input-form-slove-question w-100 ps-3" type="text" rows="8"
                  placeholder="Nhập câu hỏi bài tập của bạn hoặc tải file có định dạng: .jpeg; .png; .jpg" name="question_content">{{ old('question_content') }}</textarea>
                @error('question_content')
                  <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="d-flex btn-wrap gap-3 justify-content-between">
                  <div class="solve-practice ms-1">
                    <div class="solve-practice-content d-flex position-relative align-items-center gap-3">
                      <div class="p-2 exerciseSubjectWrap">
                        <select name="subject_id" id="subject" class="border-0 text-capitalize exerciseSubject w-100">
                          <option value="" selected>Chọn môn</option>
                          @foreach (SubjectExerciseEnum::toSelectArray() as $statusValue => $statusLabel)
                            <option value="{{ $statusValue }}" class="text-capitalize"
                              {{ old('subject_id') == $statusValue ? 'selected' : '' }}> {{ $statusLabel }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    @error('subject_id')
                      <span class="text-danger mb-2">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="d-flex justify-content-end gap-3 flex-wrap">
                    <div class="d-flex">
                      <div class="custom-btn btn-upload-file text-red-main d-flex align-items-center">
                        <span class="fs-6 fw-bold me-2" style="white-space: nowrap;">
                          tải file
                        </span>
                        <span>
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <path
                              d="M4.00012 22H18.0001C18.5306 22 19.0393 21.7893 19.4143 21.4142C19.7894 21.0391 20.0001 20.5304 20.0001 20V7.5L14.5001 2H6.00012C5.46969 2 4.96098 2.21071 4.58591 2.58579C4.21084 2.96086 4.00012 3.46957 4.00012 4V8"
                              stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M14.0001 2V8H20.0001" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M2.00012 15H12.0001" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M9.00012 18L12.0001 15L9.00012 12" stroke="#CC3A3D" stroke-width="2"
                              stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                        <input type="file" name="file" class="upfile-btn" id="upload-file-input"
                          style="display: none;">
                      </div>
                      {{-- <div id="file-name" class="mt-2 mx-1 one-line"></div> --}}
                    </div>
                    <button class="d-flex custom-btn btn-custom-fill btn-send-slove-question" type="submit"
                      style="white-space: nowrap;">
                      <span class="fs-6 fw-bold me-2">
                        gửi
                      </span>
                      <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                          fill="none">
                          <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                          <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                      </span>
                    </button>
                    @error('file')
                      <span class="text-danger">{{ $message }}</span>
                    @enderror
                  </div>
                </div>
                <div id="file-name" class="mt-3 mx-1 one-line"></div>
              </form>
            </div>
          </div>
        </div>
      </div>
      @include('modals.show_loading')
    </section>
    <!-- Testimonial end -->
  </section>
@endsection
@push('script')
  <script>
    function updateFileName() {
      const input = document.getElementById('upload-file-input');
      const fileNameDisplay = document.getElementById('file-name');
      if (input.files.length > 0) {
        fileNameDisplay.textContent = `${input.files[0].name}`;
      } else {
        fileNameDisplay.textContent = '';
      }
    }
    document.querySelector('.btn-upload-file').addEventListener('click', function(e) {
      document.getElementById('upload-file-input').click();
    });

    document.getElementById('upload-file-input').addEventListener('change', function() {
      updateFileName();
    });
  </script>
@endpush