@extends('layouts.app')
@section('content')
<h4 class="mb-3">ایجاد سوال</h4>
<form class="card p-4 rounded-4" method="POST" action="{{ route('teacher.questions.store') }}" enctype="multipart/form-data">
  @csrf
  @php($question = null)
  <input type="hidden" name="type" value="mcq_single">
  <div class="row g-3">
  <div class="col-md-6">
    <label class="form-label">بانک سوال</label>
    <select class="form-select" name="bank_id" required>
      @php($bid = old('bank_id', $question->bank_id ?? ''))
      @foreach($banks as $b)
        <option value="{{ $b->id }}" @selected((string)$bid===(string)$b->id)>{{ $b->title }} ({{ $b->subject->name ?? '-' }})</option>
      @endforeach
    </select>
    @error('bank_id')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>

  <div class="col-md-3">
    <label class="form-label">امتیاز</label>
    <input class="form-control" type="number" step="0.25" name="score" value="{{ old('score', $question->score ?? 1) }}" required>
    @error('score')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>

  <div class="col-md-3">
    <label class="form-label">سختی</label>
    @php($d = old('difficulty', $question->difficulty ?? ''))
    <select class="form-select" name="difficulty">
      <option value="" @selected($d==='')>—</option>
      <option value="easy" @selected($d==='easy')>easy</option>
      <option value="medium" @selected($d==='medium')>medium</option>
      <option value="hard" @selected($d==='hard')>hard</option>
    </select>
    @error('difficulty')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>

  <div class="col-12">
    <label class="form-label">متن سوال</label>
    <textarea class="form-control" name="body" rows="4" required>{{ old('body', $question->body ?? '') }}</textarea>
    @error('body')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>

  <div class="col-12">
    <label class="form-label">تصویر (اختیاری)</label>
    <input class="form-control" type="file" name="image" accept=".jpg,.jpeg,.png,.webp">
    @error('image')<div class="text-danger small">{{ $message }}</div>@enderror
    <div class="form-text">فایل در disk خصوصی ذخیره می‌شود (خارج از public).</div>
  </div>

  <div class="col-12">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="m-0">گزینه‌ها</h6>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="addChoice">+ گزینه</button>
    </div>
    <div class="mt-2" id="choicesWrap"></div>
    @error('choices')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>
</div>

<hr>

@push('scripts')
<script>
(function(){
  const wrap = document.getElementById('choicesWrap');
  const btn = document.getElementById('addChoice');

  const initial = @json(old('choices', isset($question) ? $question->choices->map(fn($c)=>['text'=>$c->text,'is_correct'=>$c->is_correct])->values() : [
    ['text'=>'', 'is_correct'=>true],
    ['text'=>'', 'is_correct'=>false],
    ['text'=>'', 'is_correct'=>false],
    ['text'=>'', 'is_correct'=>false],
  ]));

  function render(){
    wrap.innerHTML = '';
    initial.forEach((c, idx) => {
      const row = document.createElement('div');
      row.className = 'row g-2 align-items-center mb-2';
      row.innerHTML = `
        <div class="col-8">
          <input class="form-control" name="choices[${idx}][text]" value="${(c.text||'').replaceAll('"','&quot;')}" placeholder="گزینه ${idx+1}" required>
        </div>
        <div class="col-2">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="__correct" ${c.is_correct ? 'checked' : ''} data-idx="${idx}">
            <label class="form-check-label">صحیح</label>
          </div>
          <input type="hidden" name="choices[${idx}][is_correct]" value="${c.is_correct ? 1 : 0}">
        </div>
        <div class="col-2 text-end">
          <button type="button" class="btn btn-outline-danger btn-sm" data-del="${idx}">حذف</button>
        </div>
      `;
      wrap.appendChild(row);
    });

    // handle correct radio
    wrap.querySelectorAll('input[name="__correct"]').forEach(r=>{
      r.addEventListener('change', (e)=>{
        const idx = Number(e.target.getAttribute('data-idx'));
        initial.forEach((x,i)=> x.is_correct = i===idx);
        render();
      });
    });

    // handle delete
    wrap.querySelectorAll('button[data-del]').forEach(b=>{
      b.addEventListener('click', ()=>{
        const idx = Number(b.getAttribute('data-del'));
        if(initial.length <= 2) return alert('حداقل دو گزینه لازم است.');
        initial.splice(idx,1);
        if(!initial.some(x=>x.is_correct)) initial[0].is_correct = true;
        render();
      });
    });
  }

  btn?.addEventListener('click', ()=>{
    if(initial.length >= 6) return;
    initial.push({text:'', is_correct:false});
    render();
  });

  render();
})();
</script>
@endpush

  <button class="btn btn-primary">ثبت</button>
</form>
@endsection