@extends('siswa.layouts.app')

@section('title', 'Informasi Angket Pemilihan')

@section('content')
<section class="section">
          <div class="section-header">
    <h1>Informasi Angket Pemilihan</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active"><a href="{{ route('siswa.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item">info</div>
    </div>
  </div>
 

    <div class="section-body">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-pills mb-3" id="infoTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab-info-admin" data-toggle="pill" href="#info-admin" role="tab">📢 Info Admin</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-paket" data-toggle="pill" href="#paket-mapel" role="tab">📦 Info Paket</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-prodi" data-toggle="pill" href="#prodi-mapel" role="tab">🎓 Info Prodi & Mapel</a>
                    </li>
                </ul>

                <div class="tab-content" id="infoTabContent">
                    <!-- Tab 1 -->
                    <div class="tab-pane fade show active" id="info-admin" role="tabpanel">
                       
                       <style>
    .tata-cara-content ol {
        padding-left: 20px;
    }
    .tata-cara-content ul {
        padding-left: 20px;
        list-style-type: disc;
    }
    .tata-cara-content li {
        margin-bottom: 8px;
    }
    .tata-cara-content p {
        margin-bottom: 6px;
    }
    .tata-cara-content strong {
        color: #2d2d2d;
    }
</style>

<div class="tata-cara-content">
    {!! $info->tata_cara !!}
</div>

                    </div>

                    <!-- Tab 2 -->
                    <div class="tab-pane fade" id="paket-mapel" role="tabpanel">
                        <h5 class="mt-3">📦 Daftar Paket Mapel</h5>
                        @foreach ($pakets as $paket)
                            <div class="mb-3">
                                <strong>{{ $paket->nama_paket }}</strong><br>
                                <small>Deskripsi: {{ $paket->deskripsi }}</small><br>
                                <small>Kuota: {{ $paket->kuota }}</small><br>
                                <small>Mapel:</small>
                                <ul>
                                    @foreach ($paket->mapels as $mapel)
                                        <li>{{ $mapel->nama_mapel }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>

                    <!-- Tab 3 -->
                    <div class="tab-pane fade" id="prodi-mapel" role="tabpanel">
                        <h5 class="mt-3">🎓 Info Prodi Lanjutan & Mapel Terkait</h5>
                        <ul class="list-group">
                            @foreach ($prodis as $prodi)
                                <li class="list-group-item">
                                    {{ $prodi->nama }} - Mapel:
                                    @foreach ($prodi->mapels as $index => $mapel)
                                        {{ $index + 1 }}. {{ $mapel->nama_mapel }}@if(!$loop->last), @endif
                                    @endforeach
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection