{{-- 
    Lokasi File: resources/views/guru/erapor/harian_input.blade.php 
    Deskripsi: Input Matrix (Revisi: Ruang Input Lega & Mobile Optimized)
--}}

@extends('layouts.guru_master')

@section('title', 'Input Jurnal & Nilai | 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: #001f3f;
        --gold: #d97706;
        --border: #e2e8f0;
    }

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

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

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

    /* === MATRIX TABLE WRAPPER === */
    .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;
    }

    /* Memastikan ada scroll horizontal yang lancar */
    .table-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 600px;
        -webkit-overflow-scrolling: touch; /* Smooth scroll di iOS */
    }

    .table-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1000px; }
    
    /* Header & Sticky */
    .table-matrix thead th {
        position: sticky; top: 0; background: #f8fafc;
        z-index: 20; border-bottom: 2px solid var(--border);
        padding: 12px; font-weight: 800; font-size: 0.7rem;
        text-transform: uppercase; color: #64748b;
    }

    /* Kolom Nama: Dibuat lebih ramping di mobile agar ruang input luas */
    .sticky-col-1 { position: sticky; left: 0; z-index: 30; background: white !important; width: 40px; text-align: center; }
    .sticky-col-2 { 
        position: sticky; left: 40px; z-index: 30; background: white !important; 
        min-width: 180px; max-width: 200px;
        border-right: 2px solid var(--border) !important;
        box-shadow: 5px 0 10px -5px rgba(0,0,0,0.1); /* Bayangan pemisah */
    }
    
    .table-matrix thead th.sticky-col-1, 
    .table-matrix thead th.sticky-col-2 { z-index: 40; background: #f8fafc !important; }

    /* === RUANG INPUT NILAI (Setiap kolom punya ruang 120px) === */
    .col-input-nilai { min-width: 120px; text-align: center; background: #fff; }
    .score-input {
        width: 65px; height: 45px; border-radius: 10px; border: 1.5px solid var(--border);
        text-align: center; font-weight: 800; font-size: 1.1rem;
        background: #fdfdfd; transition: 0.2s;
    }
    .score-input:focus { 
        width: 75px; border-color: var(--gold); background: #fffbeb; 
        outline: none; box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
    }

    /* === META BOX (Input Materi Lebih Tipis) === */
    .meta-box {
        background: #f1f5f9; border-radius: 12px; padding: 10px;
        border: 1px solid var(--border); text-align: left;
    }
    .input-meta {
        border: 1px solid var(--border); border-radius: 8px;
        padding: 6px 10px; font-size: 0.8rem; font-weight: 600; width: 100%;
        margin-bottom: 5px;
    }

    .avatar-mini {
        width: 28px; height: 28px; border-radius: 6px;
        background: var(--navy); color: white;
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 0.7rem; margin-right: 8px; flex-shrink: 0;
    }
</style>
@stop

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

    <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> Batal
        </a>
        <span class="badge badge-warning text-white rounded-pill px-3 py-2 font-weight-bold">
            <i class="fas fa-pencil-alt mr-1"></i> Mode Input Nilai
        </span>
    </div>

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

        <div class="matrix-card">
            {{-- Header Mobile Info --}}
            <div class="p-3 bg-light border-bottom d-md-none text-center">
                <small class="text-muted font-weight-bold"><i class="fas fa-arrows-alt-h mr-1"></i> Geser ke samping untuk mengisi nilai</small>
            </div>

            <div class="table-wrapper">
                <table class="table-matrix">
                    <thead>
                        <tr>
                            <th class="sticky-col-1">No</th>
                            <th class="sticky-col-2">Nama Siswa</th>
                            @for($i = 1; $i <= 5; $i++)
                                <th class="col-input-nilai">Pertemuan {{ $i }}</th>
                            @endfor
                        </tr>
                        {{-- Row Tanggal & Materi --}}
                        <tr>
                            <th class="sticky-col-1 border-bottom"></th>
                            <th class="sticky-col-2 border-bottom"></th>
                            @for($i = 1; $i <= 5; $i++)
                                <th class="col-input-nilai p-2 border-bottom">
                                    <div class="meta-box">
                                        <input type="date" name="meta[{{ $i }}][tanggal]" class="input-meta" value="{{ $metaMap[$i]['tanggal'] ?? '' }}" title="Tanggal">
                                        <textarea name="meta[{{ $i }}][materi]" class="input-meta mb-0" rows="2" style="resize: none;" placeholder="Materi/KD...">{{ $metaMap[$i]['materi'] ?? '' }}</textarea>
                                    </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">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-mini">{{ substr($siswa->nama_lengkap, 0, 1) }}</div>
                                        <div class="text-truncate" style="line-height: 1.2;">
                                            <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;">{{ $siswa->nis }}</div>
                                        </div>
                                    </div>
                                </td>
                                @for($i = 1; $i <= 5; $i++)
                                    <td class="col-input-nilai border-right">
                                        <input type="number" name="nilai[{{ $siswa->id }}][{{ $i }}]" 
                                               class="score-input" min="0" max="100" placeholder="-"
                                               value="{{ $nilaiMap[$siswa->id][$i] ?? '' }}">
                                    </td>
                                @endfor
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="p-4 bg-light border-top">
                <button type="submit" id="btnSubmit" class="btn btn-primary btn-block rounded-pill py-3 font-weight-bold shadow">
                    <i class="fas fa-save mr-2"></i> Simpan & Update Rapor Utama
                </button>
                <p class="text-center text-muted small mt-3 mb-0 font-weight-bold">
                    <i class="fas fa-info-circle text-gold mr-1"></i> Nilai akan otomatis dikalkulasi ke rata-rata Rapor.
                </p>
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Klik input langsung blok semua teks (mudah ganti nilai)
        $('.score-input').on('focus', function() {
            $(this).select();
        });

        // Feedback Simpan
        $('#formHarian').on('submit', function() {
            const btn = $('#btnSubmit');
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses Data...');
            
            Swal.fire({
                title: 'Menyimpan Nilai',
                html: 'Sistem sedang menghitung rata-rata harian...',
                allowOutsideClick: false, showConfirmButton: false,
                didOpen: () => { Swal.showLoading(); }
            });
        });
    });
</script>
@stop