{{-- 
    Lokasi File: resources/views/guru/erapor/ekskul_input.blade.php 
    Deskripsi: Fix Teks Terpotong pada Nama Ekskul & Predikat (Mobile Optimized)
--}}

@extends('layouts.guru_master')

@section('title', 'Input Ekstrakurikuler | Smart Cendekia')

@section('css')
<style>
    :root {
        --app-bg: #f8fafc;
        --purple: #6f42c1;
        --purple-soft: #f3e8ff;
        --text-main: #0f172a;
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--app-bg); }

    /* SAFE CONTAINER */
    .safe-container { padding: 0 20px; max-width: 1200px; margin: 0 auto; }

    /* HERO BANNER */
    .hero-banner {
        background: linear-gradient(135deg, #6f42c1 0%, #4338ca 100%);
        border-radius: 30px; padding: 30px 25px; color: white;
        position: relative; overflow: hidden; margin-top: 20px; margin-bottom: 25px;
        box-shadow: 0 20px 40px -15px rgba(111, 66, 193, 0.3);
    }

    /* CONTENT CARD */
    .content-card {
        background: white; border-radius: 28px; border: 1px solid #f1f5f9;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04); overflow: hidden;
    }
    
    .student-item { padding: 20px; border-bottom: 1px solid #f1f5f9; }

    .avatar-siswa {
        width: 48px; height: 48px; border-radius: 14px;
        background: var(--purple-soft); color: var(--purple);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 1.1rem; margin-right: 15px; flex-shrink: 0;
    }

    /* MODAL STYLING */
    .modal-content { border-radius: 28px; border: none; overflow: hidden; }
    .modal-header { background: var(--purple); color: white; border: none; padding: 20px 25px; }
    
    /* === FIX: TABEL DI DALAM MODAL (FOKUS UTAMA) === */
    .modal-table { width: 100%; margin-bottom: 0; }
    .modal-table th { 
        background: #f8fafc; color: #64748b; font-weight: 800; 
        font-size: 0.7rem; letter-spacing: 1px; padding: 12px 15px !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }
    .modal-table td { 
        padding: 18px 15px !important; /* Padding lebih besar agar huruf tidak tercekik */
        line-height: 1.6 !important;    /* Tinggi baris agar huruf g, j, y tidak terpotong */
        vertical-align: middle !important;
        white-space: normal !important; /* Biarkan teks membungkus jika panjang */
        word-wrap: break-word;
        color: var(--text-main);
        border-bottom: 1px solid #f1f5f9;
    }

    /* Badge Predikat yang lega */
    .badge-predikat {
        display: inline-block;
        background-color: #e0f2fe;
        color: #0369a1;
        padding: 6px 12px;
        border-radius: 8px;
        font-weight: 800;
        font-size: 0.75rem;
        line-height: 1.2;
        border: 1px solid #bae6fd;
    }

    /* INPUT FORM MODAL */
    .form-modern {
        border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; 
        padding: 12px 15px; font-weight: 600; color: var(--text-main); width: 100%;
        height: auto;
    }
    .form-modern:focus { border-color: var(--purple); outline: none; background: white; }

    .btn-purple { 
        background: var(--purple); color: white; border-radius: 14px; 
        font-weight: 700; padding: 12px 25px; border: none; 
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.2);
    }
</style>
@stop

@section('content_body')
<div class="safe-container pb-5 animate__animated animate__fadeIn">

    {{-- HEADER NAV --}}
    <div class="d-flex justify-content-between align-items-center my-4">
        <a href="{{ route('guru.erapor.index') }}" class="btn btn-white border rounded-pill shadow-sm px-3 py-2 font-weight-bold text-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Dashboard Rapor
        </a>
    </div>

    {{-- HERO BANNER --}}
    <div class="hero-banner animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <h3 class="font-weight-bold mb-1">Kegiatan Ekstrakurikuler</h3>
            <p class="mb-0 small opacity-90 font-weight-bold">
                <i class="fas fa-chalkboard mr-1"></i> Kelas: {{ $kelas->nama_kelas }}
            </p>
        </div>
    </div>

    {{-- LIST SISWA --}}
    <div class="content-card">
        <div class="p-4 border-bottom bg-light d-flex justify-content-between align-items-center">
            <h6 class="font-weight-bold text-dark mb-0"><i class="fas fa-user-check text-purple mr-2"></i> Input Nilai Kegiatan</h6>
            <span class="badge badge-white border text-muted px-3 py-1 rounded-pill">{{ count($siswas) }} Siswa</span>
        </div>

        @foreach($siswas as $s)
            <div class="student-item d-flex align-items-start justify-content-between">
                <div class="d-flex align-items-start flex-grow-1">
                    <div class="avatar-siswa">{{ substr($s->nama_lengkap, 0, 1) }}</div>
                    <div>
                        <div class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $s->nama_lengkap }}</div>
                        <div class="text-muted small mb-2 font-weight-bold">NIS: {{ $s->nis }}</div>
                        
                        {{-- Ringkasan Ekskul di Dashboard --}}
                        <div class="d-flex flex-wrap">
                            @forelse($s->nilai_ekskuls as $ekskul)
                                <span class="badge bg-light border text-dark rounded-pill px-3 py-1 mr-2 mb-2 small font-weight-bold">
                                    {{ $ekskul->nama_ekskul }} <span class="text-purple ml-1">({{ substr($ekskul->predikat, 0, 1) }})</span>
                                </span>
                            @empty
                                <span class="text-muted small font-italic">Belum ada data</span>
                            @endforelse
                        </div>
                    </div>
                </div>
                
                <button type="button" class="btn btn-white border rounded-pill px-3 py-2 font-weight-bold text-purple shadow-sm btn-sm ml-2" data-toggle="modal" data-target="#modalEkskul{{ $s->id }}">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        @endforeach
    </div>
</div>

{{-- MODAL SECTION --}}
@foreach($siswas as $s)
<div class="modal fade" id="modalEkskul{{ $s->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content shadow-lg">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title font-weight-bold">{{ $s->nama_lengkap }}</h5>
                    <p class="mb-0 small opacity-80 font-weight-bold">NIS: {{ $s->nis }}</p>
                </div>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            
            <div class="modal-body">
                {{-- 1. TABEL RIWAYAT (DIBUAT LEGA AGAR TIDAK TERPOTONG) --}}
                <label class="small font-weight-bold text-muted text-uppercase mb-2">Riwayat Kegiatan</label>
                <div class="table-responsive rounded-xl border mb-4">
                    <table class="modal-table">
                        <thead>
                            <tr>
                                <th>NAMA KEGIATAN</th>
                                <th width="150">PREDIKAT</th>
                                <th width="80" class="text-center">HAPUS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($s->nilai_ekskuls as $item)
                            <tr>
                                <td class="font-weight-bold">{{ $item->nama_ekskul }}</td>
                                <td><span class="badge-predikat">{{ $item->predikat }}</span></td>
                                <td class="text-center">
                                    <form action="{{ route('guru.erapor.ekskul.delete', $item->id) }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-link text-danger p-2" onclick="return confirm('Hapus kegiatan ini?')">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">Belum ada kegiatan yang diinput.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <hr class="my-4">

                {{-- 2. FORM TAMBAH --}}
                <label class="small font-weight-bold text-purple text-uppercase mb-3 d-block">
                    <i class="fas fa-plus-circle mr-1"></i> Tambah Kegiatan Baru
                </label>
                <form action="{{ route('guru.erapor.ekskul.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="siswa_id" value="{{ $s->id }}">
                    
                    <div class="row">
                        <div class="col-12 col-md-5 mb-3">
                            <label class="small font-weight-bold">Pilih Ekskul</label>
                            <select name="nama_ekskul" class="form-control form-modern" required>
                                <option value="">- Pilih -</option>
                                <option value="Pramuka">Pramuka (Wajib)</option>
                                <option value="Futsal">Futsal</option>
                                <option value="Basket">Basket</option>
                                <option value="Paskibra">Paskibra</option>
                                <option value="PMR">PMR</option>
                                <option value="Rohis">Rohis</option>
                                <option value="Kesenian">Kesenian / Tari</option>
                                <option value="KIR">Karya Ilmiah (KIR)</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-3 mb-3">
                            <label class="small font-weight-bold">Predikat</label>
                            <select name="predikat" class="form-control form-modern" required>
                                <option value="Sangat Baik">Sangat Baik</option>
                                <option value="Baik" selected>Baik</option>
                                <option value="Cukup">Cukup</option>
                                <option value="Kurang">Kurang</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-4 mb-3">
                            <label class="small font-weight-bold">Keterangan</label>
                            <input type="text" name="keterangan" class="form-control form-modern" placeholder="Cth: Aktif">
                        </div>
                    </div>
                    
                    <div class="mt-4 text-right">
                        <button type="button" class="btn btn-light rounded-pill px-4 mr-2 font-weight-bold" data-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-purple shadow font-weight-bold">Simpan Kegiatan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach

{{-- FOOTER INFO --}}
<footer class="safe-container mt-5 mb-4 text-center">
    <p class="text-muted small font-weight-bold">© 2026 Smart Cendekia E-Rapor System</p>
</footer>

@stop