{{-- 
    Lokasi File: resources/views/guru/erapor/catatan_input.blade.php 
    Deskripsi: Form Input Catatan Wali Kelas & Kenaikan (Modern UI, Mobile-First)
--}}

@extends('layouts.guru_master')

@section('title', 'Input Catatan Wali Kelas | Smart Cendekia')

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    :root {
        --app-bg: #f8fafc;
        --orange: #ea580c;
        --orange-light: #f97316;
        --orange-soft: #fff7ed;
        --text-main: #0f172a;
        --border: #e2e8f0;
    }

    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; }
    @media (min-width: 768px) { .safe-container { padding: 0 35px; } }

    /* === HERO BANNER === */
    .hero-banner {
        background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 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(234, 88, 12, 0.3);
    }
    .hero-banner::after {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: rgba(255, 255, 255, 0.1); border-radius: 50%;
        top: -30px; right: -30px;
    }

    /* === 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;
        transition: background 0.3s ease;
    }
    .student-item:last-child { border-bottom: none; }
    .student-item:hover { background: #fafafa; }

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

    /* === INPUT FORM STYLING === */
    .form-modern {
        border-radius: 16px; background: #f8fafc; border: 1px solid var(--border); 
        padding: 12px 15px; font-weight: 600; color: var(--text-main); width: 100%;
        transition: 0.2s; font-size: 0.85rem; line-height: 1.5;
    }
    .form-modern:focus { border-color: var(--orange); outline: none; background: white; box-shadow: 0 0 0 3px var(--orange-soft); }

    .form-select-modern {
        border-radius: 12px; border: 1px solid var(--border); padding: 8px 12px;
        font-size: 0.8rem; font-weight: 700; width: 100%;
        background-color: white; color: var(--text-main);
    }
    .form-select-modern:focus { border-color: var(--orange); outline: none; }

    /* === BADGES === */
    .badge-status { padding: 5px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }
    .bg-danger-soft { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

    /* === BUTTONS === */
    .btn-orange { background: var(--orange); color: white; border-radius: 18px; font-weight: 800; padding: 15px 30px; border: none; transition: 0.3s; }
    .btn-orange:hover { background: #c2410c; color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3); }

    /* Helper Grid */
    .grid-container { display: grid; gap: 15px; }
    @media (min-width: 992px) {
        .grid-col-genap { grid-template-columns: 250px 1fr 280px; }
        .grid-col-ganjil { grid-template-columns: 250px 1fr; }
    }
</style>
@stop

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

    {{-- NAVIGASI ATAS --}}
    <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> Kembali ke Dashboard
        </a>
        <span class="badge badge-light border rounded-pill px-3 py-2 text-muted font-weight-bold">
            <i class="fas fa-calendar-check text-orange mr-1"></i> {{ $setting->semester }} {{ $setting->tahun_ajaran }}
        </span>
    </div>

    {{-- HERO BANNER --}}
    <div class="hero-banner animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                <span class="badge bg-white text-orange rounded-pill px-3 py-1 font-weight-bold" style="font-size: 0.65rem;">WALI KELAS</span>
                @if($setting->semester == 'Genap')
                    <span class="badge bg-danger text-white rounded-pill px-3 py-1 font-weight-bold shadow-sm" style="font-size: 0.65rem;">
                        <i class="fas fa-level-up-alt mr-1"></i> MODE KENAIKAN KELAS
                    </span>
                @endif
            </div>
            <h3 class="font-weight-bold mb-1">Catatan & Perkembangan Siswa</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>

    {{-- ALERT SUKSES --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-20 mb-4 animate__animated animate__flipInX" style="background: #f0fdf4; color: #166534;">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
        </div>
    @endif

    {{-- MAIN FORM --}}
    <form action="{{ route('guru.erapor.catatan.store') }}" method="POST" id="formCatatan">
        @csrf
        <input type="hidden" name="kelas_id" value="{{ $kelas->id }}">

        <div class="content-card animate__animated animate__fadeInUp">
            
            {{-- Header List --}}
            <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-comment-dots text-orange mr-2"></i> Daftar Peserta Didik</h6>
                <span class="badge bg-white border text-muted px-3 py-1 rounded-pill">{{ count($siswas) }} Siswa</span>
            </div>

            {{-- Looping Siswa --}}
            @foreach($siswas as $s)
                @php 
                    $catatan = $s->catatan_wali->first(); 
                    $gridClass = $setting->semester == 'Genap' ? 'grid-col-genap' : 'grid-col-ganjil';
                @endphp
                
                <div class="student-item">
                    <div class="grid-container {{ $gridClass }} align-items-start">
                        
                        {{-- 1. IDENTITAS SISWA --}}
                        <div class="d-flex align-items-start mb-2 mb-md-0">
                            <div class="avatar-siswa">{{ substr($s->nama_lengkap, 0, 1) }}</div>
                            <div>
                                <div class="font-weight-bold text-dark" style="font-size: 0.95rem; line-height: 1.2;">{{ $s->nama_lengkap }}</div>
                                <div class="text-muted small mt-1 font-weight-bold">NIS: {{ $s->nis }}</div>
                            </div>
                        </div>

                        {{-- 2. INPUT CATATAN --}}
                        <div class="mb-2 mb-md-0 w-100">
                            <label class="small text-muted font-weight-bold mb-1 d-md-none text-uppercase">Catatan Wali Kelas</label>
                            <textarea name="catatan[{{ $s->id }}]" class="form-modern" rows="3" style="resize: none;" placeholder="Tuliskan apresiasi, motivasi, atau saran perkembangan untuk ananda...">{{ $catatan->catatan ?? '' }}</textarea>
                        </div>

                        {{-- 3. KENAIKAN KELAS (Hanya Muncul Jika Semester Genap) --}}
                        @if($setting->semester == 'Genap')
                        <div class="bg-light p-3 rounded-xl border w-100 h-100">
                            <div class="form-group mb-2">
                                <label class="small font-weight-bold text-dark text-uppercase mb-1" style="font-size: 0.65rem;">Keputusan Akhir Tahun</label>
                                <select name="status_kenaikan[{{ $s->id }}]" class="form-select-modern text-orange">
                                    <option value="">- Pilih Status -</option>
                                    <option value="Naik Kelas" {{ ($catatan->status_kenaikan ?? '') == 'Naik Kelas' ? 'selected' : '' }}>Naik Kelas</option>
                                    <option value="Tinggal Kelas" {{ ($catatan->status_kenaikan ?? '') == 'Tinggal Kelas' ? 'selected' : '' }}>Tinggal Kelas</option>
                                    <option value="Lulus" {{ ($catatan->status_kenaikan ?? '') == 'Lulus' ? 'selected' : '' }}>Lulus (Tamat)</option>
                                    <option value="Tidak Lulus" {{ ($catatan->status_kenaikan ?? '') == 'Tidak Lulus' ? 'selected' : '' }}>Tidak Lulus</option>
                                </select>
                            </div>
                            <div class="form-group mb-0">
                                <label class="small text-muted mb-1" style="font-size: 0.65rem;">Keterangan (Tujuan Kelas)</label>
                                <input type="text" name="keterangan_kenaikan[{{ $s->id }}]" class="form-modern py-2" style="font-size: 0.75rem;" placeholder="Contoh: ke Kelas VIII-A" value="{{ $catatan->keterangan_kenaikan ?? '' }}">
                            </div>
                        </div>
                        @endif

                    </div>
                </div>
            @endforeach

            {{-- Footer Tombol Simpan --}}
            <div class="p-4 bg-white border-top text-right">
                <button type="submit" id="btnSubmit" class="btn btn-orange shadow-lg">
                    <i class="fas fa-save mr-2"></i> Simpan Seluruh Catatan
                </button>
            </div>
        </div>
    </form>
</div>

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

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('#formCatatan').on('submit', function() {
            const btn = $('#btnSubmit');
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Menyimpan...');
            
            Swal.fire({
                title: 'Menyimpan Data',
                html: 'Catatan wali kelas sedang disinkronisasi ke database...',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => { Swal.showLoading(); }
            });
        });
    });
</script>
@stop