@section('title', 'Detail Kategori Penelitian')
@section('styles')
    <style>
        .form-control-flush {
            box-shadow: none;
            background-color: transparent;
            border-width: 0;
            padding: 0;
        }

        .form-control-flush:focus {
            box-shadow: none;
            background-color: transparent;
            border-width: 0;
        }
    </style>
@endsection
<div>
    <div wire:loading.block wire:target="save">
        @include('layouts.admin.loading-screen')
    </div>
    <div class="d-flex align-items-center gap-3">
        <div>
            <h3 class="fw-semibold mb-0">Detail Kategori Penelitian</h3>
        </div>
        <div class="ms-auto">
            <button class="btn btn-success" wire:click="save()" wire:loading.attr="disabled">Simpan <i class="fa-solid fa-circle-check fa-fw ms-2"></i></button>
        </div>
    </div>
    <hr class="my-3">
    <div class="row g-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <small class="card-text text-uppercase">Judul Kategori</small>
                    <input type="text" class="form-control form-control-flush fw-bold fs-2" wire:model="name" placeholder="Judul Kategori...">
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="row g-3">
                @foreach ($questions as $key => $item)
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row d-flex align-items-center g-2">
                                    <div class="col-6">
                                        <input type="text" class="form-control form-control-flush fw-semibold fs-5" wire:model="questions.{{ $key }}.title" placeholder="Judul Soal...">
                                    </div>
                                    <div class="col-6 text-end">
                                        <div class="row row-cols-auto justify-content-end g-2">
                                            <div class="col">
                                                <select class="form-select" wire:model.live="questions.{{ $key }}.input_type">
                                                    <option value="text">Jawaban Singkat</option>
                                                    <option value="textarea">Paragraf</option>
                                                    <option value="radio">Pilihan Tunggal</option>
                                                    <option value="checkbox">Kotak Centang</option>
                                                    <option value="date">Tanggal</option>
                                                    <option value="time">Waktu</option>
                                                    <option value="file">Unggah File</option>
                                                    <option value="command">Perintah</option>
                                                </select>
                                            </div>
                                            <div class="col">
                                                <a href="javascript:void(0)" wire:click="deleteQuestion({{ $key }})" wire:loading.attr="disabled" class="btn btn-label-danger btn-sm">
                                                    <i class="fa-regular fa-trash-alt fa-fw"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="row g-3">
                                            @if ($item['input_type'] == 'text')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="Jawaban Singkat..." readonly>
                                                </div>
                                            @elseif ($item['input_type'] == 'textarea')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="Paragraf..." readonly>
                                                </div>
                                            @elseif($item['input_type'] == 'radio')
                                                @if (array_key_exists('answers', $item))
                                                    @foreach ($item['answers'] as $ans => $answer)
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center gap-3">
                                                                <div>
                                                                    <i class="fa-regular fa-circle-dot fa-fw"></i>
                                                                </div>
                                                                <div>
                                                                    <input type="text" class="form-control form-control-flush" wire:model="questions.{{ $key }}.answers.{{ $ans }}.answer" placeholder="Pilihan Opsi...">
                                                                </div>
                                                                <div class="ms-auto">
                                                                    <a class="btn btn-label-danger btn-sm" href="javascript:void(0)" wire:click="deleteAnswer({{ $key }}, {{ $ans }})" wire:loading.attr="disabled">
                                                                        <i class="fa-regular fa-xmark fa-fw"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                                <div class="col-12">
                                                    <div class="d-flex gap-3">
                                                        <div>
                                                            <i class="fa-regular fa-circle-dot fa-fw"></i>
                                                        </div>
                                                        <div>
                                                            <a href="javascript:void(0)" class="link-success" wire:click="addAnswer({{ $key }})" wire:loading.attr="disabled">Tambah Opsi <i class="fa-regular fa-circle-plus fa-fw ms-1"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @elseif($item['input_type'] == 'checkbox')
                                                @if (array_key_exists('answers', $item))
                                                    @foreach ($item['answers'] as $ans => $answer)
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center gap-3">
                                                                <div>
                                                                    <i class="fa-regular fa-square-check fa-fw"></i>
                                                                </div>
                                                                <div>
                                                                    <input type="text" class="form-control form-control-flush" wire:model="questions.{{ $key }}.answers.{{ $ans }}.answer" placeholder="Pilihan Opsi...">
                                                                </div>
                                                                <div class="ms-auto">
                                                                    <a class="btn btn-label-danger btn-sm" href="javascript:void(0)" wire:click="deleteAnswer({{ $key }}, {{ $ans }})" wire:loading.attr="disabled">
                                                                        <i class="fa-regular fa-xmark fa-fw"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                                <div class="col-12">
                                                    <div class="d-flex gap-3">
                                                        <div>
                                                            <i class="fa-regular fa-square-check fa-fw"></i>
                                                        </div>
                                                        <div>
                                                            <a href="javascript:void(0)" class="link-success" wire:click="addAnswer({{ $key }})" wire:loading.attr="disabled">Tambah Opsi <i class="fa-regular fa-circle-plus fa-fw ms-1"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @elseif($item['input_type'] == 'date')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="Tanggal, Bulan, Tahun" readonly>
                                                </div>
                                            @elseif($item['input_type'] == 'time')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="00:00" readonly>
                                                </div>
                                            @elseif($item['input_type'] == 'file')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="Unggah File" readonly>
                                                </div>
                                            @elseif($item['input_type'] == 'command')
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-flush" placeholder="Hanya Kalimat Perintah" readonly>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="col-12">
                    <div class="card">
                        <a class="text-decoration-none link-success" href="javascript:void(0)" wire:click="addQuestion()" wire:loading.attr="disabled">
                            <div class="card-body text-center">
                                Tambah Soal <i class="fa-regular fa-circle-plus fa-fw ms-1"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>