@extends('layouts.app')

@section('title', 'Daya Tampung Murid Baru')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <h2 class="mb-1">
            <i class="bi bi-clipboard-data text-primary"></i>
            Daya Tampung Murid Baru
        </h2>
        <p class="text-muted mb-0">Kelola kapasitas penerimaan siswa baru untuk tahun ajaran {{ $dayaTampung['tahun_ajaran'] }}</p>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Tab Navigation -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <ul class="nav nav-tabs card-header-tabs" id="dayaTampungTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="rombel-saat-ini-tab" data-bs-toggle="tab" 
                            data-bs-target="#rombel-saat-ini" type="button" role="tab" 
                            aria-controls="rombel-saat-ini" aria-selected="true">
                        <i class="bi bi-grid-3x3-gap me-2"></i>
                        Rombel Saat Ini
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="rencana-rombel-tab" data-bs-toggle="tab" 
                            data-bs-target="#rencana-rombel" type="button" role="tab" 
                            aria-controls="rencana-rombel" aria-selected="false">
                        <i class="bi bi-calendar-check me-2"></i>
                        Rencana Rombel Tahun Ajaran Selanjutnya
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="daya-tampung-jenjang-tab" data-bs-toggle="tab" 
                            data-bs-target="#daya-tampung-jenjang" type="button" role="tab" 
                            aria-controls="daya-tampung-jenjang" aria-selected="false">
                        <i class="bi bi-bar-chart-line me-2"></i>
                        Daya Tampung Tiap Jenjang
                    </button>
                </li>
            </ul>
        </div>
        
        <div class="card-body">
            <div class="tab-content" id="dayaTampungTabsContent">
                <!-- Tab 1: Rombel Saat Ini -->
                <div class="tab-pane fade show active" id="rombel-saat-ini" role="tabpanel" 
                     aria-labelledby="rombel-saat-ini-tab">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="alert alert-info border-0">
                                <i class="bi bi-info-circle me-2"></i>
                                <strong>Rombongan Belajar Saat Ini:</strong> Data rombel yang sedang aktif pada tahun ajaran {{ $dayaTampung['tahun_ajaran'] }}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Konten Rombel Saat Ini - Khusus SLB -->
                    <div class="row">
                        <div class="col-lg-8 mx-auto">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-danger text-white">
                                    <h5 class="mb-0">
                                        <i class="bi bi-heart me-2"></i>
                                        Data Rombel SLB (Sekolah Luar Biasa)
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form id="rombelSaatIniForm">
                                        <div class="table-responsive">
                                            <table class="table table-bordered align-middle">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th width="40%">Jenjang</th>
                                                        <th width="30%" class="text-center">Jumlah Rombel</th>
                                                        <th width="30%" class="text-center">Jumlah Anggota Rombel</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><strong>TKLB A</strong></td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center rombel-count" 
                                                                   name="tklb_a_rombel" min="0" value="0" data-jenjang="tklb_a">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center siswa-count" 
                                                                   name="tklb_a_siswa" min="0" value="0">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>TKLB B</strong></td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center rombel-count" 
                                                                   name="tklb_b_rombel" min="0" value="0" data-jenjang="tklb_b">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center siswa-count" 
                                                                   name="tklb_b_siswa" min="0" value="0">
                                                        </td>
                                                    </tr>
                                                    @for($i = 1; $i <= 12; $i++)
                                                    <tr>
                                                        <td><strong>Kelas {{ $i }}</strong></td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center rombel-count" 
                                                                   name="kelas_{{ $i }}_rombel" min="0" value="0" data-jenjang="kelas_{{ $i }}">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm text-center siswa-count" 
                                                                   name="kelas_{{ $i }}_siswa" min="0" value="0">
                                                        </td>
                                                    </tr>
                                                    @endfor
                                                </tbody>
                                                <tfoot class="table-secondary">
                                                    <tr>
                                                        <td><strong>Jumlah Rombel</strong></td>
                                                        <td colspan="2" class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center fw-bold bg-light" 
                                                                   id="totalRombel" readonly value="0">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Jumlah Siswa</strong></td>
                                                        <td colspan="2" class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center fw-bold bg-light" 
                                                                   id="totalSiswa" readonly value="0">
                                                        </td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                        
                                        <div class="d-flex justify-content-end gap-2 mt-3">
                                            <button type="reset" class="btn btn-secondary">
                                                <i class="bi bi-x-circle me-1"></i> Reset
                                            </button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-save me-1"></i> Simpan Data
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="alert alert-info mt-3 border-0">
                                <i class="bi bi-lightbulb me-2"></i>
                                <strong>Petunjuk:</strong> 
                                <ul class="mb-0 mt-2 small">
                                    <li>TKLB A = Taman Kanak-Kanak Luar Biasa kelompok A</li>
                                    <li>TKLB B = Taman Kanak-Kanak Luar Biasa kelompok B</li>
                                    <li>Kelas 1-12 = Tingkat pendidikan dari SDLB hingga SMALB untuk siswa berkebutuhan khusus</li>
                                    <li>Total akan otomatis dihitung saat Anda mengisi data</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 2: Rencana Rombel Tahun Ajaran Selanjutnya -->
                <div class="tab-pane fade" id="rencana-rombel" role="tabpanel" 
                     aria-labelledby="rencana-rombel-tab">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="alert alert-warning border-0">
                                <i class="bi bi-calendar-check me-2"></i>
                                <strong>Rencana Rombel:</strong> Perencanaan rombongan belajar untuk tahun ajaran yang akan datang
                            </div>
                        </div>
                    </div>
                    
                    <!-- Konten Rencana Rombel - Khusus SLB -->
                    <div class="row">
                        <div class="col-lg-10 mx-auto">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0">
                                        <i class="bi bi-calendar-plus me-2"></i>
                                        Rencana Rombel Tahun Ajaran Baru - SLB
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form id="rencanaRombelForm">
                                        <div class="table-responsive">
                                            <table class="table table-bordered align-middle">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th width="25%" class="text-center">
                                                            <i class="bi bi-flower1 me-1"></i>
                                                            Rombel<br>Kelas TK TA Baru
                                                        </th>
                                                        <th width="25%" class="text-center">
                                                            <i class="bi bi-123 me-1"></i>
                                                            Rombel<br>Kelas 1 TA Baru
                                                        </th>
                                                        <th width="25%" class="text-center">
                                                            <i class="bi bi-book me-1"></i>
                                                            Rombel<br>Kelas 7 TA Baru
                                                        </th>
                                                        <th width="25%" class="text-center">
                                                            <i class="bi bi-mortarboard me-1"></i>
                                                            Rombel<br>Kelas 10 TA Baru
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="text-center">
                                                            <input type="number" class="form-control form-control-lg text-center fw-bold rencana-rombel" 
                                                                   name="rombel_tk" min="0" value="0" placeholder="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="number" class="form-control form-control-lg text-center fw-bold rencana-rombel" 
                                                                   name="rombel_kelas_1" min="0" value="0" placeholder="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="number" class="form-control form-control-lg text-center fw-bold rencana-rombel" 
                                                                   name="rombel_kelas_7" min="0" value="0" placeholder="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="number" class="form-control form-control-lg text-center fw-bold rencana-rombel" 
                                                                   name="rombel_kelas_10" min="0" value="0" placeholder="0">
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <div class="d-flex justify-content-end gap-2 mt-3">
                                            <button type="reset" class="btn btn-secondary">
                                                <i class="bi bi-x-circle me-1"></i> Reset
                                            </button>
                                            <button type="submit" class="btn btn-warning">
                                                <i class="bi bi-save me-1"></i> Simpan Rencana
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="alert alert-info mt-3 border-0">
                                <i class="bi bi-lightbulb me-2"></i>
                                <strong>Keterangan:</strong> 
                                <ul class="mb-0 mt-2 small">
                                    <li><strong>Kelas TK TA Baru:</strong> Rencana jumlah rombel untuk tingkat Taman Kanak-kanak (TKLB A & B)</li>
                                    <li><strong>Kelas 1 TA Baru:</strong> Rencana jumlah rombel untuk kelas 1 SDLB (siswa baru tingkat dasar)</li>
                                    <li><strong>Kelas 7 TA Baru:</strong> Rencana jumlah rombel untuk kelas 7 SMPLB (siswa baru tingkat menengah pertama)</li>
                                    <li><strong>Kelas 10 TA Baru:</strong> Rencana jumlah rombel untuk kelas 10 SMALB (siswa baru tingkat menengah atas)</li>
                                    <li class="mt-2 text-primary"><i class="bi bi-info-circle me-1"></i>Data ini digunakan untuk perencanaan penerimaan siswa baru tahun ajaran mendatang</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 3: Daya Tampung Tiap Jenjang -->
                <div class="tab-pane fade" id="daya-tampung-jenjang" role="tabpanel" 
                     aria-labelledby="daya-tampung-jenjang-tab">
                    
                    @if($isSlb)
                    <!-- Khusus SLB - Tabel Gabungan Semua Jenis -->
                    <div class="row">
                        <div class="col-lg-11 mx-auto">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0">
                                        <i class="bi bi-heart me-2"></i>
                                        Daya Tampung SLB (Sekolah Luar Biasa)
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form id="dayaTampungSlbForm">
                                        <div class="table-responsive">
                                            <table class="table table-bordered align-middle">
                                                <thead class="table-warning">
                                                    <tr>
                                                        <th class="text-center align-middle" width="15%" rowspan="2">
                                                            <i class="bi bi-tag me-1"></i>
                                                            Jenis SLB
                                                        </th>
                                                        <th class="text-center bg-warning text-dark align-middle" width="17%" rowspan="2">
                                                            <i class="bi bi-people me-1"></i>
                                                            Jumlah Siswa<br>Per Rombel
                                                        </th>
                                                        <th class="text-center" colspan="4">Daya Tampung TA Baru</th>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-center" width="17%">
                                                            Daya Tampung<br>Kelas TK TA Baru
                                                        </th>
                                                        <th class="text-center" width="17%">
                                                            Daya Tampung<br>Kelas 1 TA Baru
                                                        </th>
                                                        <th class="text-center" width="17%">
                                                            Daya Tampung<br>Kelas 7 TA Baru
                                                        </th>
                                                        <th class="text-center" width="17%">
                                                            Daya Tampung<br>Kelas 10 TA Baru
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- SLB-A -->
                                                    <tr>
                                                        <td class="fw-bold">
                                                            <i class="bi bi-eye-slash text-primary me-2"></i>
                                                            SLB-A<br><small class="text-muted">Tunanetra</small>
                                                        </td>
                                                        <td class="text-center bg-warning bg-opacity-10">
                                                            <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel" 
                                                                   name="slb_a_siswa_per_rombel" min="1" value="5" data-jenis="slb-a">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-a" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-a" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-a" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-a" 
                                                                   readonly value="0">
                                                        </td>
                                                    </tr>
                                                    
                                                    <!-- SLB-B -->
                                                    <tr>
                                                        <td class="fw-bold">
                                                            <i class="bi bi-ear text-info me-2"></i>
                                                            SLB-B<br><small class="text-muted">Tunarungu</small>
                                                        </td>
                                                        <td class="text-center bg-warning bg-opacity-10">
                                                            <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel" 
                                                                   name="slb_b_siswa_per_rombel" min="1" value="5" data-jenis="slb-b">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-b" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-b" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-b" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-b" 
                                                                   readonly value="0">
                                                        </td>
                                                    </tr>
                                                    
                                                    <!-- SLB-C -->
                                                    <tr>
                                                        <td class="fw-bold">
                                                            <i class="bi bi-person-check text-success me-2"></i>
                                                            SLB-C<br><small class="text-muted">Tunagrahita</small>
                                                        </td>
                                                        <td class="text-center bg-warning bg-opacity-10">
                                                            <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel" 
                                                                   name="slb_c_siswa_per_rombel" min="1" value="5" data-jenis="slb-c">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-c" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-c" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-c" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-c" 
                                                                   readonly value="0">
                                                        </td>
                                                    </tr>
                                                    
                                                    <!-- SLB-D -->
                                                    <tr>
                                                        <td class="fw-bold">
                                                            <i class="bi bi-person-wheelchair text-danger me-2"></i>
                                                            SLB-D<br><small class="text-muted">Tunadaksa</small>
                                                        </td>
                                                        <td class="text-center bg-warning bg-opacity-10">
                                                            <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel" 
                                                                   name="slb_d_siswa_per_rombel" min="1" value="5" data-jenis="slb-d">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-d" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-d" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-d" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-d" 
                                                                   readonly value="0">
                                                        </td>
                                                    </tr>
                                                    
                                                    <!-- SLB-E -->
                                                    <tr>
                                                        <td class="fw-bold">
                                                            <i class="bi bi-emoji-smile text-warning me-2"></i>
                                                            SLB-E<br><small class="text-muted">Tunalaras</small>
                                                        </td>
                                                        <td class="text-center bg-warning bg-opacity-10">
                                                            <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel" 
                                                                   name="slb_e_siswa_per_rombel" min="1" value="5" data-jenis="slb-e">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-e" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-e" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-e" 
                                                                   readonly value="0">
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-e" 
                                                                   readonly value="0">
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <div class="alert alert-info border-0 small mt-3">
                                            <i class="bi bi-info-circle me-2"></i>
                                            <strong>Keterangan:</strong> 
                                            <ul class="mb-0 mt-2">
                                                <li>Daya tampung otomatis dihitung berdasarkan: <strong>Rencana Rombel (tab 2) × Jumlah Siswa Per Rombel</strong></li>
                                                <li>Ubah nilai "Jumlah Siswa Per Rombel" untuk setiap jenis SLB sesuai kebutuhan sekolah</li>
                                                <li>Data akan tersimpan untuk semua jenis SLB (A, B, C, D, E) sekaligus</li>
                                            </ul>
                                        </div>
                                        
                                        <div class="d-flex justify-content-end gap-2 mt-3">
                                            <button type="reset" class="btn btn-secondary">
                                                <i class="bi bi-x-circle me-1"></i> Reset
                                            </button>
                                            <button type="submit" class="btn btn-warning">
                                                <i class="bi bi-save me-1"></i> Simpan Semua Data Daya Tampung
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    @else
                    <!-- Sub-tabs untuk Jenjang (SD, SMP, SMA/SMK, SLB) -->
                    <ul class="nav nav-pills mb-4" id="jenjangTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="jenjang-sd-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-sd" type="button" role="tab" 
                                    aria-controls="jenjang-sd" aria-selected="true">
                                <i class="bi bi-book me-1"></i> SD
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-smp-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-smp" type="button" role="tab" 
                                    aria-controls="jenjang-smp" aria-selected="false">
                                <i class="bi bi-book me-1"></i> SMP
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-sma-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-sma" type="button" role="tab" 
                                    aria-controls="jenjang-sma" aria-selected="false">
                                <i class="bi bi-mortarboard me-1"></i> SMA/SMK
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-slb-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-slb" type="button" role="tab" 
                                    aria-controls="jenjang-slb" aria-selected="false">
                                <i class="bi bi-heart me-1"></i> SLB
                            </button>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="jenjangTabsContent">
                        <!-- SD -->
                        <div class="tab-pane fade show active" id="jenjang-sd" role="tabpanel" 
                             aria-labelledby="jenjang-sd-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-book text-primary" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SD</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Dasar akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SMP -->
                        <div class="tab-pane fade" id="jenjang-smp" role="tabpanel" 
                             aria-labelledby="jenjang-smp-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-book text-info" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SMP</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Menengah Pertama akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SMA/SMK -->
                        <div class="tab-pane fade" id="jenjang-sma" role="tabpanel" 
                             aria-labelledby="jenjang-sma-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-mortarboard text-success" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SMA/SMK</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Menengah Atas/Kejuruan akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SLB (untuk non-SLB school) -->
                        <div class="tab-pane fade" id="jenjang-slb" role="tabpanel" 
                             aria-labelledby="jenjang-slb-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-heart text-danger" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SLB</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Luar Biasa akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-calculate total rombel dan siswa (Tab 1: Rombel Saat Ini)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="jenjang-sd-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-sd" type="button" role="tab" 
                                    aria-controls="jenjang-sd" aria-selected="true">
                                <i class="bi bi-book me-1"></i> SD
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-smp-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-smp" type="button" role="tab" 
                                    aria-controls="jenjang-smp" aria-selected="false">
                                <i class="bi bi-book me-1"></i> SMP
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-sma-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-sma" type="button" role="tab" 
                                    aria-controls="jenjang-sma" aria-selected="false">
                                <i class="bi bi-mortarboard me-1"></i> SMA/SMK
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="jenjang-slb-tab" data-bs-toggle="tab" 
                                    data-bs-target="#jenjang-slb" type="button" role="tab" 
                                    aria-controls="jenjang-slb" aria-selected="false">
                                <i class="bi bi-heart me-1"></i> SLB
                            </button>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="jenjangTabsContent">
                        <!-- SD -->
                        <div class="tab-pane fade show active" id="jenjang-sd" role="tabpanel" 
                             aria-labelledby="jenjang-sd-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-book text-primary" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SD</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Dasar akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SMP -->
                        <div class="tab-pane fade" id="jenjang-smp" role="tabpanel" 
                             aria-labelledby="jenjang-smp-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-book text-info" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SMP</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Menengah Pertama akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SMA/SMK -->
                        <div class="tab-pane fade" id="jenjang-sma" role="tabpanel" 
                             aria-labelledby="jenjang-sma-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center py-5">
                                    <i class="bi bi-mortarboard text-success" style="font-size: 3rem;"></i>
                                    <h5 class="mt-3">Jenjang SMA/SMK</h5>
                                    <p class="text-muted">Data daya tampung untuk Sekolah Menengah Atas/Kejuruan akan ditampilkan di sini</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- SLB -->
                        <div class="tab-pane fade" id="jenjang-slb" role="tabpanel" 
                             aria-labelledby="jenjang-slb-tab">
                            <div class="card bg-light border-0">
                                <div class="card-body">
                                    <div class="text-center mb-4">
                                        <i class="bi bi-heart text-danger" style="font-size: 3rem;"></i>
                                        <h5 class="mt-3">Jenjang SLB (Sekolah Luar Biasa)</h5>
                                        <p class="text-muted">Data daya tampung untuk pendidikan khusus</p>
                                    </div>
                                    
                                    <!-- Sub-sub-tabs untuk jenis ketunaan SLB -->
                                    <ul class="nav nav-pills nav-fill mb-4 bg-white p-2 rounded shadow-sm" id="slbTabs" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="slb-a-tab" data-bs-toggle="tab" 
                                                    data-bs-target="#slb-a" type="button" role="tab">
                                                <small><strong>SLB-A</strong><br><span class="text-muted" style="font-size: 0.75rem;">Tunanetra</span></small>
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="slb-b-tab" data-bs-toggle="tab" 
                                                    data-bs-target="#slb-b" type="button" role="tab">
                                                <small><strong>SLB-B</strong><br><span class="text-muted" style="font-size: 0.75rem;">Tunarungu</span></small>
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="slb-c-tab" data-bs-toggle="tab" 
                                                    data-bs-target="#slb-c" type="button" role="tab">
                                                <small><strong>SLB-C</strong><br><span class="text-muted" style="font-size: 0.75rem;">Tunagrahita</span></small>
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="slb-d-tab" data-bs-toggle="tab" 
                                                    data-bs-target="#slb-d" type="button" role="tab">
                                                <small><strong>SLB-D</strong><br><span class="text-muted" style="font-size: 0.75rem;">Tunadaksa</span></small>
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="slb-e-tab" data-bs-toggle="tab" 
                                                    data-bs-target="#slb-e" type="button" role="tab">
                                                <small><strong>SLB-E</strong><br><span class="text-muted" style="font-size: 0.75rem;">Tunalaras</span></small>
                                            </button>
                                        </li>
                                    </ul>
                                    
                                    <div class="tab-content bg-white p-4 rounded shadow-sm" id="slbTabsContent">
                                        <!-- SLB-A (Tunanetra) -->
                                        <div class="tab-pane fade show active" id="slb-a" role="tabpanel">
                                            <h6 class="text-primary mb-3">
                                                <i class="bi bi-eye-slash me-2"></i>SLB-A (Tunanetra)
                                            </h6>
                                            
                                            <form id="dayaTampungSlbA">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-warning">
                                                            <tr>
                                                                <th class="text-center bg-warning text-dark" width="20%">
                                                                    <i class="bi bi-people me-1"></i>
                                                                    Jumlah Siswa<br>Per Rombel
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas TK TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 1 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 7 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 10 TA Baru
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-center bg-warning bg-opacity-25">
                                                                    <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel-slb-a" 
                                                                           name="siswa_per_rombel" min="1" value="5" data-jenis="slb-a">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-a" 
                                                                           name="daya_tk" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-a" 
                                                                           name="daya_1" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-a" 
                                                                           name="daya_7" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-a" 
                                                                           name="daya_10" readonly value="0">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                
                                                <div class="d-flex justify-content-end gap-2 mt-3">
                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="bi bi-save me-1"></i> Simpan Daya Tampung
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <div class="alert alert-info mt-3 border-0 small">
                                                <i class="bi bi-info-circle me-2"></i>
                                                <strong>Keterangan:</strong> Daya tampung otomatis dihitung berdasarkan rencana rombel (tab 2) × Jumlah siswa per rombel
                                            </div>
                                        </div>
                                        
                                        <!-- SLB-B (Tunarungu) -->
                                        <div class="tab-pane fade" id="slb-b" role="tabpanel">
                                            <h6 class="text-primary mb-3">
                                                <i class="bi bi-ear me-2"></i>SLB-B (Tunarungu)
                                            </h6>
                                            
                                            <form id="dayaTampungSlbB">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-warning">
                                                            <tr>
                                                                <th class="text-center bg-warning text-dark" width="20%">
                                                                    <i class="bi bi-people me-1"></i>
                                                                    Jumlah Siswa<br>Per Rombel
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas TK TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 1 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 7 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 10 TA Baru
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-center bg-warning bg-opacity-25">
                                                                    <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel-slb-b" 
                                                                           name="siswa_per_rombel" min="1" value="5" data-jenis="slb-b">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-b" 
                                                                           name="daya_tk" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-b" 
                                                                           name="daya_1" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-b" 
                                                                           name="daya_7" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-b" 
                                                                           name="daya_10" readonly value="0">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                
                                                <div class="d-flex justify-content-end gap-2 mt-3">
                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="bi bi-save me-1"></i> Simpan Daya Tampung
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <div class="alert alert-info mt-3 border-0 small">
                                                <i class="bi bi-info-circle me-2"></i>
                                                <strong>Keterangan:</strong> Daya tampung otomatis dihitung berdasarkan rencana rombel (tab 2) × Jumlah siswa per rombel
                                            </div>
                                        </div>
                                        
                                        <!-- SLB-C (Tunagrahita) -->
                                        <div class="tab-pane fade" id="slb-c" role="tabpanel">
                                            <h6 class="text-primary mb-3">
                                                <i class="bi bi-person-check me-2"></i>SLB-C (Tunagrahita)
                                            </h6>
                                            
                                            <form id="dayaTampungSlbC">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-warning">
                                                            <tr>
                                                                <th class="text-center bg-warning text-dark" width="20%">
                                                                    <i class="bi bi-people me-1"></i>
                                                                    Jumlah Siswa<br>Per Rombel
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas TK TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 1 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 7 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 10 TA Baru
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-center bg-warning bg-opacity-25">
                                                                    <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel-slb-c" 
                                                                           name="siswa_per_rombel" min="1" value="5" data-jenis="slb-c">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-c" 
                                                                           name="daya_tk" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-c" 
                                                                           name="daya_1" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-c" 
                                                                           name="daya_7" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-c" 
                                                                           name="daya_10" readonly value="0">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                
                                                <div class="d-flex justify-content-end gap-2 mt-3">
                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="bi bi-save me-1"></i> Simpan Daya Tampung
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <div class="alert alert-info mt-3 border-0 small">
                                                <i class="bi bi-info-circle me-2"></i>
                                                <strong>Keterangan:</strong> Daya tampung otomatis dihitung berdasarkan rencana rombel (tab 2) × Jumlah siswa per rombel
                                            </div>
                                        </div>
                                        
                                        <!-- SLB-D (Tunadaksa) -->
                                        <div class="tab-pane fade" id="slb-d" role="tabpanel">
                                            <h6 class="text-primary mb-3">
                                                <i class="bi bi-person-wheelchair me-2"></i>SLB-D (Tunadaksa)
                                            </h6>
                                            
                                            <form id="dayaTampungSlbD">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-warning">
                                                            <tr>
                                                                <th class="text-center bg-warning text-dark" width="20%">
                                                                    <i class="bi bi-people me-1"></i>
                                                                    Jumlah Siswa<br>Per Rombel
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas TK TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 1 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 7 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 10 TA Baru
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-center bg-warning bg-opacity-25">
                                                                    <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel-slb-d" 
                                                                           name="siswa_per_rombel" min="1" value="5" data-jenis="slb-d">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-d" 
                                                                           name="daya_tk" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-d" 
                                                                           name="daya_1" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-d" 
                                                                           name="daya_7" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-d" 
                                                                           name="daya_10" readonly value="0">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                
                                                <div class="d-flex justify-content-end gap-2 mt-3">
                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="bi bi-save me-1"></i> Simpan Daya Tampung
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <div class="alert alert-info mt-3 border-0 small">
                                                <i class="bi bi-info-circle me-2"></i>
                                                <strong>Keterangan:</strong> Daya tampung otomatis dihitung berdasarkan rencana rombel (tab 2) × Jumlah siswa per rombel
                                            </div>
                                        </div>
                                        
                                        <!-- SLB-E (Tunalaras) -->
                                        <div class="tab-pane fade" id="slb-e" role="tabpanel">
                                            <h6 class="text-primary mb-3">
                                                <i class="bi bi-emoji-smile me-2"></i>SLB-E (Tunalaras)
                                            </h6>
                                            
                                            <form id="dayaTampungSlbE">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-warning">
                                                            <tr>
                                                                <th class="text-center bg-warning text-dark" width="20%">
                                                                    <i class="bi bi-people me-1"></i>
                                                                    Jumlah Siswa<br>Per Rombel
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas TK TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 1 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 7 TA Baru
                                                                </th>
                                                                <th class="text-center" width="20%">
                                                                    Daya Tampung<br>Kelas 10 TA Baru
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-center bg-warning bg-opacity-25">
                                                                    <input type="number" class="form-control form-control-sm text-center fw-bold siswa-per-rombel-slb-e" 
                                                                           name="siswa_per_rombel" min="1" value="5" data-jenis="slb-e">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-tk-slb-e" 
                                                                           name="daya_tk" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-1-slb-e" 
                                                                           name="daya_1" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-7-slb-e" 
                                                                           name="daya_7" readonly value="0">
                                                                </td>
                                                                <td class="text-center">
                                                                    <input type="text" class="form-control form-control-sm text-center bg-light daya-10-slb-e" 
                                                                           name="daya_10" readonly value="0">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                
                                                <div class="d-flex justify-content-end gap-2 mt-3">
                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                        <i class="bi bi-save me-1"></i> Simpan Daya Tampung
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <div class="alert alert-info mt-3 border-0 small">
                                                <i class="bi bi-info-circle me-2"></i>
                                                <strong>Keterangan:</strong> Daya tampung otomatis dihitung berdasarkan rencana rombel (tab 2) × Jumlah siswa per rombel
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    @if(!$isSlb)
                        </div>
                    </div>
                    @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-calculate total rombel dan siswa (Tab 1: Rombel Saat Ini)
    function calculateTotals() {
        let totalRombel = 0;
        let totalSiswa = 0;
        
        // Hitung total rombel
        document.querySelectorAll('.rombel-count').forEach(function(input) {
            const value = parseInt(input.value) || 0;
            totalRombel += value;
        });
        
        // Hitung total siswa
        document.querySelectorAll('.siswa-count').forEach(function(input) {
            const value = parseInt(input.value) || 0;
            totalSiswa += value;
        });
        
        // Update tampilan total
        const totalRombelEl = document.getElementById('totalRombel');
        const totalSiswaEl = document.getElementById('totalSiswa');
        if (totalRombelEl) totalRombelEl.value = totalRombel;
        if (totalSiswaEl) totalSiswaEl.value = totalSiswa;
    }
    
    // Event listener untuk semua input Tab 1
    const allInputs = document.querySelectorAll('.rombel-count, .siswa-count');
    allInputs.forEach(function(input) {
        input.addEventListener('input', calculateTotals);
        input.addEventListener('change', calculateTotals);
    });
    
    // Reset form Tab 1
    const resetBtn = document.querySelector('#rombelSaatIniForm button[type="reset"]');
    if (resetBtn) {
        resetBtn.addEventListener('click', function(e) {
            setTimeout(calculateTotals, 100);
        });
    }
    
    // Form submit Tab 1
    const form = document.getElementById('rombelSaatIniForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Collect data
            const formData = new FormData(form);
            const data = {};
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            console.log('Data Rombel SLB Saat Ini:', data);
            
            // Show success message (temporary)
            alert('Data berhasil disimpan! (Fungsi penyimpanan akan diimplementasikan nanti)');
        });
    }
    
    // Form submit Tab 2: Rencana Rombel
    const rencanaForm = document.getElementById('rencanaRombelForm');
    if (rencanaForm) {
        // Store rencana rombel values
        window.rencanaRombel = {
            tk: 0,
            kelas_1: 0,
            kelas_7: 0,
            kelas_10: 0
        };
        
        // Listen to changes in rencana rombel inputs
        const rencanaInputs = document.querySelectorAll('.rencana-rombel');
        rencanaInputs.forEach(function(input) {
            input.addEventListener('input', function() {
                const name = this.name;
                const value = parseInt(this.value) || 0;
                
                if (name === 'rombel_tk') window.rencanaRombel.tk = value;
                if (name === 'rombel_kelas_1') window.rencanaRombel.kelas_1 = value;
                if (name === 'rombel_kelas_7') window.rencanaRombel.kelas_7 = value;
                if (name === 'rombel_kelas_10') window.rencanaRombel.kelas_10 = value;
                
                // Update all daya tampung calculations
                calculateDayaTampung('slb-a');
                calculateDayaTampung('slb-b');
                calculateDayaTampung('slb-c');
                calculateDayaTampung('slb-d');
                calculateDayaTampung('slb-e');
            });
        });
        
        rencanaForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Collect data
            const formData = new FormData(rencanaForm);
            const data = {};
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            console.log('Data Rencana Rombel TA Baru:', data);
            
            // Show success message (temporary)
            alert('Rencana Rombel berhasil disimpan! (Fungsi penyimpanan akan diimplementasikan nanti)');
        });
    }
    
    // Calculate daya tampung for each SLB type
    function calculateDayaTampung(jenis) {
        const siswaPerRombel = parseInt(document.querySelector('.siswa-per-rombel-' + jenis)?.value) || 0;
        
        if (!window.rencanaRombel) {
            window.rencanaRombel = { tk: 0, kelas_1: 0, kelas_7: 0, kelas_10: 0 };
        }
        
        const dayaTK = window.rencanaRombel.tk * siswaPerRombel;
        const daya1 = window.rencanaRombel.kelas_1 * siswaPerRombel;
        const daya7 = window.rencanaRombel.kelas_7 * siswaPerRombel;
        const daya10 = window.rencanaRombel.kelas_10 * siswaPerRombel;
        
        // Update display
        const dayaTkEl = document.querySelector('.daya-tk-' + jenis);
        const daya1El = document.querySelector('.daya-1-' + jenis);
        const daya7El = document.querySelector('.daya-7-' + jenis);
        const daya10El = document.querySelector('.daya-10-' + jenis);
        
        if (dayaTkEl) dayaTkEl.value = dayaTK;
        if (daya1El) daya1El.value = daya1;
        if (daya7El) daya7El.value = daya7;
        if (daya10El) daya10El.value = daya10;
    }
    
    // Event listeners for siswa per rombel in each SLB type
    ['slb-a', 'slb-b', 'slb-c', 'slb-d', 'slb-e'].forEach(function(jenis) {
        const siswaInput = document.querySelector('.siswa-per-rombel-' + jenis);
        if (siswaInput) {
            siswaInput.addEventListener('input', function() {
                calculateDayaTampung(jenis);
            });
            siswaInput.addEventListener('change', function() {
                calculateDayaTampung(jenis);
            });
        }
        
        // Form submit for each SLB type
        const formId = 'dayaTampung' + jenis.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
        const slbForm = document.getElementById(formId);
        if (slbForm) {
            slbForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(slbForm);
                const data = {};
                for (let [key, value] of formData.entries()) {
                    data[key] = value;
                }
                
                console.log('Data Daya Tampung ' + jenis.toUpperCase() + ':', data);
                alert('Data Daya Tampung berhasil disimpan! (Fungsi penyimpanan akan diimplementasikan nanti)');
            });
        }
    });
    
    // Initial calculations
    calculateTotals();
    
    // Initialize rencana rombel from form values
    if (rencanaForm) {
        window.rencanaRombel = {
            tk: parseInt(document.querySelector('input[name="rombel_tk"]')?.value) || 0,
            kelas_1: parseInt(document.querySelector('input[name="rombel_kelas_1"]')?.value) || 0,
            kelas_7: parseInt(document.querySelector('input[name="rombel_kelas_7"]')?.value) || 0,
            kelas_10: parseInt(document.querySelector('input[name="rombel_kelas_10"]')?.value) || 0
        };
        
        // Calculate initial daya tampung
        ['slb-a', 'slb-b', 'slb-c', 'slb-d', 'slb-e'].forEach(function(jenis) {
            calculateDayaTampung(jenis);
        });
    }
});
</script>

@endsection