{{-- 
    Lokasi File: resources/views/guru/erapor/ujian_input.blade.php 
    Deskripsi: Input Detail UTS & UAS (Full Features, Sembunyi Nama, Safe Spacing)
--}}

@extends('layouts.guru_master')

@section('title', 'Input Detail Ujian | Smart Cendekia')

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    :root {
        --app-bg: #f8fafc;
        --navy: #1e293b;
        --navy-light: #334155;
        --uts-amber: #d97706;
        --uas-emerald: #059669;
        --border: #e2e8f0;
    }

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

    /* === SAFE CONTAINER === */
    .safe-container { padding: 0 15px; max-width: 100%; margin: 0 auto; }
    @media (min-width: 768px) { .safe-container { padding: 0 35px; } }

    /* === HERO BANNER === */
    .hero-banner {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
        border-radius: 25px; padding: 25px; color: white;
        margin-top: 15px; margin-bottom: 25px;
        box-shadow: 0 15px 30px -10px rgba(30, 41, 59, 0.2);
    }

    /* === MATRIX CARD === */
    .matrix-card {
        background: white; border-radius: 24px; border: 1px solid #f1f5f9;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04); overflow: hidden;
    }

    .table-wrapper { overflow: auto; max-height: 700px; -webkit-overflow-scrolling: touch; }
    .table-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1150px; }
    
    /* Header Sticky */
    .table-matrix thead th {
        position: sticky; top: 0; z-index: 20;
        padding: 12px; font-weight: 800; font-size: 0.7rem;
        text-transform: uppercase; letter-spacing: 1px;
        border-bottom: 2px solid var(--border);
    }

    /* Sticky Columns */
    .sticky-col-1 { position: sticky; left: 0; z-index: 30; background: white !important; width: 45px; text-align: center; }
    .sticky-col-2 { 
        position: sticky; left: 45px; z-index: 30; background: white !important; 
        min-width: 200px; max-width: 250px;
        border-right: 2px solid var(--border) !important;
        box-shadow: 5px 0 10px -5px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    /* Class Sembunyi Nama */
    .name-collapsed {
        min-width: 0 !important; width: 0 !important; max-width: 0 !important;
        padding: 0 !important; opacity: 0; visibility: hidden; border-right: none !important;
    }

    .table-matrix thead th.sticky-col-1, .table-matrix thead th.sticky-col-2 { z-index: 40; background: #f8fafc !important; }

    /* Header Themes */
    .th-uts { background-color: #fff7ed !important; color: var(--uts-amber) !important; }
    .th-uas { background-color: #f0fdf4 !important; color: var(--uas-emerald) !important; }

    /* Inputs */
    .form-control-clean {
        border: 1px solid var(--border); border-radius: 8px;
        padding: 6px 10px; font-size: 0.8rem; font-weight: 600; width: 100%;
    }
    .score-input {
        width: 75px; height: 45px; border-radius: 12px; border: 1.5px solid var(--border);
        text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--navy);
        transition: 0.2s; background: #fdfdfd;
    }
    .score-input:focus { border-color: var(--navy); background: #fff; transform: scale(1.1); outline: none; }

    .avatar-mini {
        width: 32px; height: 32px; border-radius: 8px;
        background: #f1f5f9; color: var(--navy);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 0.75rem; margin-right: 10px; flex-shrink: 0;
    }

    /* Button Toggle */
    .btn-toggle-name {
        background: var(--navy); color: white; border: none;
        border-radius: 10px; padding: 5px 12px; font-weight: 800; font-size: 0.75rem;
        cursor: pointer; transition: 0.3s;
    }
</style>
@stop

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

    {{-- NAVIGASI & TOMBOL SEMBUNYI NAMA --}}
    <div class="d-flex justify-content-between align-items-center my-3">
        <a href="{{ route('guru.erapor.form', ['kelas'=>$kelas->id, 'mapel'=>$mapel->id]) }}" class="btn btn-white border rounded-pill px-3 py-2 font-weight-bold text-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Kembali ke Rapor
        </a>
        <button type="button" class="btn-toggle-name shadow-sm" onclick="toggleNameColumn()">
            <i class="fas fa-eye-slash mr-1" id="toggleIcon"></i> <span id="toggleText">Sembunyikan Nama</span>
        </button>
    </div>

    {{-- HERO BANNER (Full Info) --}}
    <div class="hero-banner animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <h4 class="font-weight-bold mb-1">Detail Nilai Ujian (UTS & UAS)</h4>
            <p class="mb-0 small opacity-80 font-weight-bold">
                <i class="fas fa-layer-group text-warning mr-1"></i> {{ $kelas->nama_kelas }} &nbsp;|&nbsp; 
                <i class="fas fa-book text-warning mr-1"></i> {{ $mapel->nama_mapel }} &nbsp;|&nbsp; 
                <i class="far fa-calendar-alt text-warning mr-1"></i> Semester {{ $setting->semester }}
            </p>
        </div>
    </div>

    {{-- ALERT SUKSES --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-lg mb-4" style="background-color: #ecfdf5; color: #065f46; border-left: 5px solid #10b981;">
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle fa-lg mr-3"></i>
                <div><h6 class="font-weight-bold mb-0">Berhasil Disimpan!</h6></div>
                <button type="button" class="close ml-auto" data-dismiss="alert">×</button>
            </div>
        </div>
    @endif

    <form action="{{ route('guru.erapor.ujian.store') }}" method="POST" id="formUjian">
        @csrf
        <input type="hidden" name="kelas_id" value="{{ $kelas->id }}">
        <input type="hidden" name="mapel_id" value="{{ $mapel->id }}">

        <div class="matrix-card">
            <div class="table-wrapper">
                <table class="table-matrix">
                    <thead>
                        {{-- BARIS 1: JUDUL TIPE UJIAN --}}
                        <tr>
                            <th rowspan="3" class="sticky-col-1">No</th>
                            <th rowspan="3" class="sticky-col-2" id="colNamaHeader">Identitas Siswa</th>
                            <th colspan="2" class="text-center th-uts border-right">TENGAH SEMESTER (UTS)</th>
                            <th colspan="2" class="text-center th-uas">AKHIR SEMESTER (UAS)</th>
                        </tr>
                        {{-- BARIS 2: METADATA TANGGAL & MATERI --}}
                        <tr>
                            {{-- UTS Columns --}}
                            @for($i = 1; $i <= 2; $i++)
                                <th class="th-uts p-3 border-bottom border-right">
                                    <div class="bg-white p-2 rounded border shadow-sm">
                                        <div class="small font-weight-bold text-muted mb-1 text-uppercase" style="font-size: 0.6rem;">{{ $i == 1 ? 'Utama (Tulis)' : 'Praktek/Susulan' }}</div>
                                        <input type="date" name="meta[UTS][{{ $i }}][tanggal]" class="form-control-clean mb-1" value="{{ $metaMap['UTS'][$i]['tanggal'] ?? '' }}">
                                        <input type="text" name="meta[UTS][{{ $i }}][materi]" class="form-control-clean" value="{{ $metaMap['UTS'][$i]['materi'] ?? ($i == 1 ? 'Tes Tulis' : 'Praktek') }}" placeholder="Jenis...">
                                    </div>
                                </th>
                            @endfor
                            {{-- UAS Columns --}}
                            @for($i = 1; $i <= 2; $i++)
                                <th class="th-uas p-3 border-bottom {{ $i == 1 ? 'border-right' : '' }}">
                                    <div class="bg-white p-2 rounded border shadow-sm">
                                        <div class="small font-weight-bold text-muted mb-1 text-uppercase" style="font-size: 0.6rem;">{{ $i == 1 ? 'Utama (Tulis)' : 'Praktek/Susulan' }}</div>
                                        <input type="date" name="meta[UAS][{{ $i }}][tanggal]" class="form-control-clean mb-1" value="{{ $metaMap['UAS'][$i]['tanggal'] ?? '' }}">
                                        <input type="text" name="meta[UAS][{{ $i }}][materi]" class="form-control-clean" value="{{ $metaMap['UAS'][$i]['materi'] ?? ($i == 1 ? 'Tes Tulis' : 'Praktek') }}" placeholder="Jenis...">
                                    </div>
                                </th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($siswas as $siswa)
                            <tr>
                                <td class="sticky-col-1 font-weight-bold small text-muted">{{ $loop->iteration }}</td>
                                <td class="sticky-col-2 name-cell">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-mini">{{ substr($siswa->nama_lengkap, 0, 1) }}</div>
                                        <div class="text-truncate">
                                            <div class="font-weight-bold text-navy small" style="font-size: 0.75rem;">{{ $siswa->nama_lengkap }}</div>
                                            <div class="text-muted small" style="font-size: 0.6rem;">NIS: {{ $siswa->nis }}</div>
                                        </div>
                                    </div>
                                </td>
                                {{-- UTS Inputs --}}
                                <td class="text-center border-right" style="background: #fffcf9;">
                                    <input type="number" name="nilai[{{ $siswa->id }}][UTS][1]" class="score-input" min="0" max="100" placeholder="-" value="{{ $nilaiMap[$siswa->id]['UTS'][1] ?? '' }}">
                                </td>
                                <td class="text-center border-right" style="background: #fffcf9;">
                                    <input type="number" name="nilai[{{ $siswa->id }}][UTS][2]" class="score-input" min="0" max="100" placeholder="-" value="{{ $nilaiMap[$siswa->id]['UTS'][2] ?? '' }}">
                                </td>
                                {{-- UAS Inputs --}}
                                <td class="text-center border-right" style="background: #f9fffb;">
                                    <input type="number" name="nilai[{{ $siswa->id }}][UAS][1]" class="score-input" min="0" max="100" placeholder="-" value="{{ $nilaiMap[$siswa->id]['UAS'][1] ?? '' }}">
                                </td>
                                <td class="text-center" style="background: #f9fffb;">
                                    <input type="number" name="nilai[{{ $siswa->id }}][UAS][2]" class="score-input" min="0" max="100" placeholder="-" value="{{ $nilaiMap[$siswa->id]['UAS'][2] ?? '' }}">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="p-4 bg-light border-top d-flex flex-wrap justify-content-between align-items-center">
                <div class="text-muted small font-weight-bold mb-3 mb-md-0" style="line-height: 1.4;">
                    <i class="fas fa-info-circle text-gold mr-1"></i> <strong>Logika Sistem:</strong><br>
                    Jika kedua kolom (Utama & Praktek) diisi, sistem akan otomatis mengambil nilai rata-ratanya.
                </div>
                <button type="submit" id="btnSubmit" class="btn btn-primary px-5 py-3 rounded-pill font-weight-bold shadow">
                    <i class="fas fa-save mr-2"></i> Simpan & Sinkronkan Rapor
                </button>
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function toggleNameColumn() {
        const header = $('#colNamaHeader');
        const cells = $('.name-cell');
        const icon = $('#toggleIcon');
        const text = $('#toggleText');

        if (header.hasClass('name-collapsed')) {
            header.removeClass('name-collapsed');
            cells.removeClass('name-collapsed');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
            text.text('Sembunyikan Nama');
        } else {
            header.addClass('name-collapsed');
            cells.addClass('name-collapsed');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
            text.text('Tampilkan Nama');
        }
    }

    $(document).ready(function() {
        $('.score-input').on('focus', function() { $(this).select(); });

        $('#formUjian').on('submit', function() {
            const btn = $('#btnSubmit');
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...');
            Swal.fire({
                title: 'Menyimpan Nilai',
                html: 'Sistem sedang melakukan sinkronisasi ke Rapor Utama...',
                allowOutsideClick: false, showConfirmButton: false,
                didOpen: () => { Swal.showLoading(); }
            });
        });
    });
</script>
@stop