@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Daftar Soal {{ $daftarSoal->mapel->mata_pelajaran }}</h3>
    <p class="text-subtitle text-muted">Kelas: {{ $daftarSoal->kelas->nama_kelas }}</p>

    <script>
        // Menampilkan alert jika ada session message
        @if(session('success'))
            Swal.fire({
                position: 'top-center',
                icon: 'success',
                title: "{{ session('success') }}",
                showConfirmButton: false,
                timer: 1500
            });
        @endif

        @if(session('error'))
            Swal.fire({
                position: 'top-center',
                icon: 'error',
                title: "{{ session('error') }}",
                showConfirmButton: false,
                timer: 1500
            });
        @endif
    </script>

    <section class="section">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Import</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1">Manual</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <!-- Form Import Excel -->
                        <form action="{{ route('soal.import') }}" method="POST" enctype="multipart/form-data" class="mt-4">
                            @csrf
                            <input type="hidden" name="id_daftar_soal" value="{{ $daftarSoal->id }}">
                            
                            <div class="mb-3">
                                <label>Import Soal dari Excel</label>
                                <input type="file" name="file" class="form-control" accept=".xlsx, .xls">
                            </div>
                            
                            <button type="submit" class="btn btn-success">Import Soal</button>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <!-- Form Tambah Soal -->
                        <form action="{{ route('soal.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="id_daftar_soal" value="{{ $daftarSoal->id }}">

                            <div class="mb-3 mt-3">
                                <label>Pertanyaan</label>
                                <textarea name="pertanyaan" class="form-control"></textarea>
                            </div>

                            <div class="mb-3">
                                <label>Tipe Soal</label>
                                <select name="tipe_soal" id="tipe-soal" class="form-control" onchange="togglePilihanGanda()">
                                    <option value="isian">Isian</option>
                                    <option value="pilihan_ganda">Pilihan Ganda</option>
                                </select>
                            </div>

                            <div id="pilihan-ganda" class="form-group position-relative has-icon-left">
                                <label>Pilihan Ganda</label>
                                <input type="text" name="pilihan[]" class="form-control mb-2" placeholder="A.">
                                <input type="text" name="pilihan[]" class="form-control mb-2" placeholder="B.">
                                <input type="text" name="pilihan[]" class="form-control mb-2" placeholder="C.">
                                <input type="text" name="pilihan[]" class="form-control mb-2" placeholder="D.">
                                <input type="text" name="pilihan[]" class="form-control mb-2" placeholder="E.">
                                <label>Jawaban Benar (Index: 0-4)</label>
                                <input type="number" name="jawaban_benar" class="form-control">
                            </div>

                            <button type="submit" class="btn btn-primary mt-3">Tambah Soal</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <!-- List Soal -->
                <table class="table mt-4">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Pertanyaan</th>
                            <th>Tipe</th>
                            <th>Jawaban</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($soal as $index => $s)
                            @if($s->tipe_soal == 'pilihan_ganda')
                                {{-- Hitung jumlah pilihan jawaban --}}
                                @php $jumlah_pilihan = count($s->pilihanGanda); @endphp

                                <tr>
                                    <td rowspan="{{ $jumlah_pilihan + 1 }}">{{ $s->no_soal }}</td>
                                    <td rowspan="{{ $jumlah_pilihan + 1 }}">
                                        {{ $s->pertanyaan }} 
                                        <button class="btn btn-warning btn-sm ms-3" data-bs-toggle="modal" data-bs-target="#editSoalModal{{ $s->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <!-- Tombol Delete -->
                                        <button class="btn btn-danger btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#deleteSoalModal{{ $s->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                    <td rowspan="{{ $jumlah_pilihan + 1 }}">{{ ucfirst(str_replace('_', ' ', $s->tipe_soal)) }}</td>
                                </tr>

                                {{-- Tampilkan setiap pilihan dalam baris baru --}}
                                @foreach($s->pilihanGanda as $pilihan)
                                    <tr>
                                        <td>
                                            {{ $pilihan->pilihan }} 
                                            @if($pilihan->is_correct == 1)
                                                <i class="ms-3 fas fa-check-circle text-success"></i>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                {{-- Untuk soal isian langsung tampilkan dalam satu baris --}}
                                <tr>
                                    <td>{{ $s->no_soal }}</td>
                                    <td>{{ $s->pertanyaan }} 
                                        <button class="btn btn-warning btn-sm ms-3" data-bs-toggle="modal" data-bs-target="#editSoalModal{{ $s->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <!-- Tombol Delete -->
                                        <button class="btn btn-danger btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#deleteSoalModal{{ $s->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                    <td>{{ ucfirst(str_replace('_', ' ', $s->tipe_soal)) }}</td>
                                    <td>{{ $s->jawaban_benar }}</td>
                                </tr>
                            @endif

                            <!-- Modal Edit Soal -->
                            <div class="modal fade" id="editSoalModal{{ $s->id }}" tabindex="-1" aria-labelledby="editSoalModalLabel{{ $s->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="editSoalModalLabel{{ $s->id }}">Edit Soal</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <form action="{{ route('soal.update', $s->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')
                                            <div class="modal-body">
                                                <input type="hidden" name="id" value="{{ $s->id }}">

                                                <div class="mb-3">
                                                    <label>Nomor</label>
                                                    <input type="number" name="no_soal" class="form-control" value="{{ $s->no_soal }}">
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <label>Pertanyaan</label>
                                                    <textarea name="pertanyaan" class="form-control">{{ $s->pertanyaan }}</textarea>
                                                </div>

                                                <div class="mb-3">
                                                    <label>Tipe Soal</label>
                                                    <select name="tipe_soal" class="form-control">
                                                        <option value="isian" {{ $s->tipe_soal == 'isian' ? 'selected' : '' }}>Isian</option>
                                                        <option value="pilihan_ganda" {{ $s->tipe_soal == 'pilihan_ganda' ? 'selected' : '' }}>Pilihan Ganda</option>
                                                    </select>
                                                </div>

                                                @if($s->tipe_soal == 'pilihan_ganda')
                                                    <div>
                                                        <label>Pilihan Ganda</label>
                                                        @foreach($s->pilihanGanda as $key => $pilihan)
                                                            <input type="text" name="pilihan[]" class="form-control mb-2" value="{{ $pilihan->pilihan }}">
                                                        @endforeach
                                                    </div>
                                                    <div class="mb-3">
                                                        <label>Jawaban Benar (Index: 0-4)</label>
                                                        <input type="number" name="jawaban_benar" class="form-control" value="{{ $s->jawaban_benar }}">
                                                    </div>
                                                @else
                                                    <div class="mb-3">
                                                        <label>Jawaban Benar</label>
                                                        <input type="text" name="jawaban_benar" class="form-control" value="{{ $s->jawaban_benar }}">
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal Konfirmasi Hapus -->
                            <div class="modal fade" id="deleteSoalModal{{ $s->id }}" tabindex="-1" aria-labelledby="deleteSoalModalLabel{{ $s->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteSoalModalLabel{{ $s->id }}">Konfirmasi Hapus</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            Apakah Anda yakin ingin menghapus soal ini?
                                        </div>
                                        <div class="modal-footer">
                                            <form action="{{ route('soal.destroy', $s->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger">Hapus</button>
                                            </form>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>

<script>
    function togglePilihanGanda() {
        var tipeSoal = document.getElementById("tipe-soal").value;
        var pilihanGandaDiv = document.getElementById("pilihan-ganda");

        if (tipeSoal === "pilihan_ganda") {
            pilihanGandaDiv.style.display = "block";
        } else {
            pilihanGandaDiv.style.display = "none";
        }
    }

    // Sembunyikan pilihan ganda saat halaman dimuat jika default bukan pilihan ganda
    window.onload = function() {
        togglePilihanGanda();
    };

</script>
@endsection