@extends('admin.layouts.app')

@section('title', 'Tambah Soal Challenge')

@section('content')

<style>
    .page-title {
        font-size: 28px;
        font-weight: 800;
        margin-top: -20px;
        margin-bottom: 10px;
    }

    .custom-card {
        background: white;
        border-radius: 20px;
        border: 2px solid #e5e5e5;
        padding: 25px;
    }

    .soal-box {
        border: 2px solid #e5e5e5;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        background: #f9fbff;
    }

    .btn-add {
        background: #2b8ef3;
        color: white;
        border-radius: 10px;
        padding: 8px 18px;
        border: none;
    }

    .btn-remove {
        background: #ef4444;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 5px 12px;
        font-size: 12px;
    }
</style>

<h3 class="page-title">
    TAMBAH SOAL - {{ $challenge->judul_challenge }}
</h3>

<div class="custom-card">

<form action="{{ route('admin.challenge.soal.store', $challenge->id_challenge) }}" method="POST">
@csrf

<div id="soalContainer">

    {{-- SOAL PERTAMA (DEFAULT) --}}
    <div class="soal-box">
        <h6>Soal 1</h6>

        <div class="mb-3">
            <label>Pertanyaan *</label>
            <textarea name="pertanyaan[]" class="form-control" required></textarea>
        </div>

        <div class="row">
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
            </div>

            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
            </div>

            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
            </div>

            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
            </div>
        </div>

        <div class="mb-2">
            <label>Jawaban Benar *</label>
            <select name="jawaban_benar[]" class="form-control" required>
                <option value="">-- Pilih --</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </div>
    </div>

</div>

<button type="button" onclick="tambahSoal()" class="btn-add">
    + Tambah Soal
</button>

<hr>

<div class="d-flex justify-content-end">
    <button type="submit" class="btn btn-success">
        Simpan Semua Soal
    </button>
</div>

</form>

</div>

<script>
let nomorSoal = 1;

function tambahSoal() {
    nomorSoal++;

    let container = document.getElementById('soalContainer');

    let html = `
    <div class="soal-box">
        <div class="d-flex justify-content-between">
            <h6>Soal ${nomorSoal}</h6>
            <button type="button" class="btn-remove" onclick="hapusSoal(this)">
                Hapus
            </button>
        </div>

        <div class="mb-3">
            <label>Pertanyaan *</label>
            <textarea name="pertanyaan[]" class="form-control" required></textarea>
        </div>

        <div class="row">
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
            </div>
            <div class="col-md-6 mb-2">
                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
            </div>
        </div>

        <div class="mb-2">
            <label>Jawaban Benar *</label>
            <select name="jawaban_benar[]" class="form-control" required>
                <option value="">-- Pilih --</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </div>
    </div>
    `;

    container.insertAdjacentHTML('beforeend', html);
}

function hapusSoal(button) {
    button.closest('.soal-box').remove();
}
</script>

@endsection