@extends('layouts.admin.app')

@section('content')
    <main class="mt-5" style="z-index: 0" x-data="{
        tab: 1
    }">
        <div class="container-fluid px-4">
            <a href="{{ route('kelas.detail.detail-sesi-materi') }}" class="text-success fw-bold text-decoration-none">
                <i class="fas fa-arrow-left me-2"></i>Kembali Ke Detail Sesi
            </a>
            <div class="card my-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h5">
                            John Doe
                        </div>
                        <div class="small text-muted">Kelas / Detail Kelas / Materi / Detail Peserta</div>
                    </div>
                    <div>
                        <button class="btn btn-success me-2">
                            <i class="fas fa-angles-left me-2"></i>Back
                        </button>
                        <button class="btn btn-success me-2">
                            Next<i class="fas fa-angles-right ms-2"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card my-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <p class="fw-bold">Pertanyaan 1</p>
                            <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni,
                                porro fugiat quod quidem voluptates illo voluptatum rerum dolore esse, nemo repellendus
                                adipisci, blanditiis veritatis dolorum quam autem asperiores molestiae?</p>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <p class="fw-bold">Jawaban</p>
                            <ul class="list-group">
                                <li class="list-group-item bg-secondary bg-opacity-25">Lorem ipsum dolor</li>
                                <li class="list-group-item">Sit amet consectetur</li>
                                <li class="list-group-item">Adipisicing elit</li>
                                <li class="list-group-item">Neque magni</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card my-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <p class="fw-bold">Pertanyaan 1</p>
                            <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni,
                                porro fugiat quod quidem voluptates illo voluptatum rerum dolore esse, nemo repellendus
                                adipisci, blanditiis veritatis dolorum quam autem asperiores molestiae?</p>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <p class="fw-bold">Jawaban</p>
                            <div class="row">
                                <div class="col-3">
                                    <div class="rounded border border-secondary border-4"
                                        style="width: 100px; height: 100px; background-image: url('https://asset-a.grid.id/crop/0x0:0x0/x/photo/2021/10/13/kumbangjpg-20211013091406.jpg'); background-size: cover; background-repeat: no-repeat;">
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="rounded"
                                        style="width: 100px; height: 100px; background-image: url('https://asset-a.grid.id/crop/0x0:0x0/x/photo/2021/10/13/kumbangjpg-20211013091406.jpg'); background-size: cover; background-repeat: no-repeat;">
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="rounded"
                                        style="width: 100px; height: 100px; background-image: url('https://asset-a.grid.id/crop/0x0:0x0/x/photo/2021/10/13/kumbangjpg-20211013091406.jpg'); background-size: cover; background-repeat: no-repeat;">
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="rounded"
                                        style="width: 100px; height: 100px; background-image: url('https://asset-a.grid.id/crop/0x0:0x0/x/photo/2021/10/13/kumbangjpg-20211013091406.jpg'); background-size: cover; background-repeat: no-repeat;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection