{{-- 
    Lokasi File: resources/views/guru/jurnal/edit.blade.php (atau sesuaikan dengan nama file Anda)
    Deskripsi: Form Pengisian Jurnal & Absensi (Mobile-First, UI Premium)
--}}

@extends('layouts.guru_master')

@section('title', 'Isi Jurnal & Absensi | Smart Cendekia')

{{-- Load Plugins dari Master --}}
@section('plugins.Summernote', true)
@section('plugins.Sweetalert2', true)

@section('css')
<style>
    :root {
        --app-bg: #f4f7fb;
        --primary: #4f46e5;
        --text-main: #0f172a;
    }

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

    /* === HERO GRADIENT CARD === */
    .hero-gradient {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        border-radius: 28px; padding: 25px 20px; color: white;
        position: relative; overflow: hidden;
        box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.4);
        margin-bottom: 25px;
    }
    .hero-gradient::after {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: rgba(255,255,255,0.05); border-radius: 50%;
        top: -40px; right: -20px;
    }

    /* === CARDS === */
    .content-card {
        background: white; border-radius: 24px; padding: 22px;
        margin-bottom: 20px; border: 1px solid #f1f5f9;
        box-shadow: 0 8px 20px rgba(0,0,0,0.02);
    }
    .form-modern { border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; font-weight: 500; color: var(--text-main); }
    .form-modern:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,0.1); }

    /* === SUMMERNOTE OVERRIDE === */
    .note-editor.note-frame { border-radius: 16px !important; border: 1px solid #e2e8f0 !important; overflow: hidden; }
    .note-toolbar { background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; border-radius: 16px 16px 0 0 !important; }

    /* === ABSENSI LIST (MOBILE OPTIMIZED) === */
    .student-row { padding: 15px 0; border-bottom: 1px dashed #e2e8f0; display: flex; flex-direction: column; gap: 10px; }
    @media(min-width: 768px) { .student-row { flex-direction: row; align-items: center; justify-content: space-between; } }
    .student-row:last-child { border-bottom: none; }
    
    .avatar-initial {
        width: 40px; height: 40px; border-radius: 14px; background: #eef2ff;
        color: var(--primary); font-weight: 800; display: flex; align-items: center; justify-content: center;
        margin-right: 12px; font-size: 1rem; flex-shrink: 0;
    }

    /* === RADIO BUTTONS (CHIPS) === */
    .btn-group-toggle { display: flex; gap: 5px; width: 100%; }
    .btn-group-toggle .btn { 
        border-radius: 12px !important; font-size: 0.8rem; font-weight: 800; 
        padding: 8px 0; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b;
        flex: 1; transition: 0.2s; box-shadow: none !important;
    }
    .btn-group-toggle .btn.active { transform: scale(0.95); border-color: transparent; }
    
    .btn-outline-success.active { background-color: #10B981 !important; color: white !important; }
    .btn-outline-warning.active { background-color: #F59E0B !important; color: white !important; }
    .btn-outline-info.active { background-color: #3B82F6 !important; color: white !important; }
    .btn-outline-danger.active { background-color: #EF4444 !important; color: white !important; }

    /* === AI BUTTON === */
    .btn-ai { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; transition: 0.3s; }
    .btn-ai:hover { box-shadow: 0 8px 15px rgba(99, 102, 241, 0.4); color: white; transform: translateY(-2px); }

    /* === CUSTOM FILE UPLOAD === */
    .custom-file-label { border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; }
    .custom-file-label::after { border-radius: 0 13px 13px 0; height: 100%; padding: 0.5rem 1rem; background: #e2e8f0; color: #475569; font-weight: bold; content: "Browse"; }
</style>
@stop

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

    {{-- NAVIGASI ATAS --}}
    <div class="d-flex justify-content-between align-items-center my-4">
        <a href="{{ route('guru.jurnal.jadwal.saya') }}" class="btn btn-white border rounded-pill shadow-sm px-3 py-2 font-weight-bold text-secondary" style="font-size: 0.85rem;">
            <i class="fas fa-arrow-left mr-1"></i> Batal
        </a>
        <button type="button" onclick="openAiModal()" class="btn btn-ai rounded-pill px-4 py-2 font-weight-bold shadow-sm" style="font-size: 0.85rem;">
            <i class="fas fa-magic mr-1"></i> Asisten AI
        </button>
    </div>

    {{-- HERO INFO SESI --}}
    <div class="hero-gradient animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <span class="badge bg-white px-3 py-1 rounded-pill font-weight-bold shadow-sm text-dark" style="font-size: 0.7rem;">
                    <i class="fas fa-circle text-success mr-1 blink"></i> Sedang Berlangsung
                </span>
                <span class="badge" style="background: rgba(0,0,0,0.2); font-size: 0.8rem; border-radius: 10px; padding: 6px 12px;">
                    <i class="far fa-clock mr-1"></i> Mulai: {{ $sesi->waktu_mulai->format('H:i') }}
                </span>
            </div>
            <h3 class="font-weight-bold mb-1 mt-3" style="font-size: 1.4rem;">{{ $jadwal->mataPelajaran->nama_mapel ?? 'Mapel' }}</h3>
            <div class="d-flex align-items-center gap-2 font-weight-bold" style="font-size: 0.85rem; opacity: 0.9;">
                <span><i class="fas fa-door-open mr-1"></i> Kelas {{ $jadwal->kelas->nama_kelas ?? '-' }}</span>
                <span class="mx-1">|</span>
                <span>{{ $jadwal->jam_mulai }} - {{ $jadwal->jam_selesai }} WIB</span>
            </div>
        </div>
    </div>

    {{-- MAIN FORM --}}
    <form action="{{ route('jurnal.update', $sesi->id) }}" method="POST" enctype="multipart/form-data" id="mainForm">
        @csrf
        @method('PUT')

        <div class="row">
            {{-- KOLOM KIRI: INPUT MATERI & DOKUMENTASI --}}
            <div class="col-lg-7">
                <div class="content-card animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
                    <h6 class="font-weight-bold text-dark mb-3"><i class="fas fa-book-reader text-primary mr-2"></i> Laporan Materi</h6>
                    
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Materi / Topik yang Diajarkan <span class="text-danger">*</span></label>
                        <textarea name="materi_pembelajaran" id="summernote" required>{{ old('materi_pembelajaran', $sesi->materi_pembelajaran) }}</textarea>
                        @error('materi_pembelajaran') <span class="text-danger small font-weight-bold">{{ $message }}</span> @enderror
                    </div>

                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Catatan Kejadian / Kendala (Opsional)</label>
                        <textarea name="catatan_kegiatan" class="form-control form-modern" rows="3" placeholder="Tulis catatan jika ada siswa yang bermasalah atau alat rusak...">{{ old('catatan_kegiatan', $sesi->catatan_kegiatan) }}</textarea>
                    </div>

                    <div class="form-group mb-2">
                        <label class="small font-weight-bold text-muted mb-2">Foto Dokumentasi (Opsional)</label>
                        <div class="custom-file">
                            <input type="file" name="foto_kegiatan" class="custom-file-input" id="customFile" accept="image/*">
                            <label class="custom-file-label" for="customFile">Pilih gambar dari galeri/kamera...</label>
                        </div>
                        <small class="text-muted mt-2 d-block font-weight-bold"><i class="fas fa-info-circle mr-1"></i> Maksimal 5MB (JPG/PNG).</small>
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN: ABSENSI SISWA --}}
            <div class="col-lg-5">
                <div class="content-card h-100 d-flex flex-column animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
                    <div class="d-flex justify-content-between align-items-center mb-3 pb-3" style="border-bottom: 2px solid #f1f5f9;">
                        <h6 class="font-weight-bold text-dark mb-0"><i class="fas fa-user-check text-success mr-2"></i> Kehadiran Siswa</h6>
                        <span class="badge badge-light border rounded-pill px-3 py-1 font-weight-bold text-muted">{{ $sesi->absensiKelasDetail->count() }} Siswa</span>
                    </div>
                    
                    {{-- Container Absensi (Scrollable) --}}
                    <div style="flex-grow: 1; max-height: 500px; overflow-y: auto; padding-right: 5px; margin-bottom: 20px;">
                        @foreach($sesi->absensiKelasDetail as $detail)
                            <div class="student-row">
                                <div class="d-flex align-items-center w-100">
                                    <div class="avatar-initial">
                                        {{ substr($detail->siswa->nama_lengkap, 0, 1) }}
                                    </div>
                                    <div style="width: calc(100% - 60px);">
                                        <div class="font-weight-bold text-dark text-truncate" style="font-size: 0.95rem;">{{ $detail->siswa->nama_lengkap }}</div>
                                        <div class="text-muted small font-weight-bold font-monospace">{{ $detail->siswa->nis ?? '-' }}</div>
                                    </div>
                                </div>

                                {{-- CHIPS RADIO BUTTONS --}}
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    @foreach($statusEnum as $status)
                                        @php
                                            $isActive = $detail->status_kehadiran === $status;
                                            $btnClass = match($status->value) {
                                                'Hadir' => 'btn-outline-success',
                                                'Sakit' => 'btn-outline-warning',
                                                'Izin'  => 'btn-outline-info',
                                                'Alpa'  => 'btn-outline-danger',
                                                default => 'btn-outline-secondary'
                                            };
                                        @endphp
                                        <label class="btn {{ $btnClass }} {{ $isActive ? 'active' : '' }}">
                                            <input type="radio" name="absensi[{{ $detail->siswa_id }}]" value="{{ $status->value }}" autocomplete="off" {{ $isActive ? 'checked' : '' }}> 
                                            {{ substr($status->value, 0, 1) }} </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Tombol Submit nempel di bawah Card Absensi --}}
                    <div class="mt-auto pt-3" style="border-top: 1px solid #f1f5f9;">
                        <button type="submit" class="btn btn-block btn-lg shadow-sm font-weight-bold rounded-pill text-white" style="background: #10b981; border: none; font-size: 1.1rem; padding: 12px;" onclick="return confirm('Apakah materi dan absensi sudah sesuai? Anda akan menyelesaikan sesi ini.')">
                            <i class="fas fa-save mr-2"></i> Simpan & Selesai
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- MODAL AI ASSISTANT --}}
<div class="modal fade" id="modalAiAssistant" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 24px;">
            <div class="modal-body p-4 text-center">
                <div style="width: 70px; height: 70px; background: #eef2ff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                    <i class="fas fa-robot fa-2x text-primary"></i>
                </div>
                <h5 class="font-weight-bold text-dark mb-1">AI Jurnal Assistant</h5>
                <p class="small text-muted mb-4">Biarkan AI menyusun kalimat baku untuk laporan materi Anda.</p>

                <div class="form-group text-left mb-3">
                    <label class="small font-weight-bold text-muted mb-1">Topik Utama</label>
                    <input type="text" id="ai_topik" class="form-control form-modern" placeholder="Contoh: Limit Fungsi Aljabar">
                </div>
                <div class="form-group text-left mb-4">
                    <label class="small font-weight-bold text-muted mb-1">Metode / Kegiatan Siswa</label>
                    <input type="text" id="ai_kegiatan" class="form-control form-modern" placeholder="Contoh: Latihan soal kelompok, presentasi">
                </div>

                <div class="row no-gutters mt-2">
                    <div class="col-6 pr-2">
                        <button type="button" class="btn btn-light btn-block rounded-pill font-weight-bold text-muted py-2" data-dismiss="modal">Batal</button>
                    </div>
                    <div class="col-6 pl-2">
                        <button type="button" onclick="generateJurnal()" class="btn btn-ai rounded-pill btn-block py-2 font-weight-bold" id="btnGenerate">
                            Generate
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init Summernote Mobile Friendly
        $('#summernote').summernote({
            height: 200,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
            ],
            placeholder: 'Ketikkan rincian materi yang Anda sampaikan di kelas ini...',
            callbacks: {
                onInit: function() {
                    $('.note-editor').css('max-width', '100%');
                }
            }
        });
        
        // Custom File Input Display Name
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
    });

    function openAiModal() { $('#modalAiAssistant').modal('show'); }

    // AJAX AI Generate
    function generateJurnal() {
        let topik = $('#ai_topik').val();
        let kegiatan = $('#ai_kegiatan').val();
        
        if(!topik) { Swal.fire('Perhatian', 'Harap isi Topik Utama terlebih dahulu', 'warning'); return; }

        let btn = $('#btnGenerate');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Proses...');

        $.ajax({
            url: '{{ route("ai.generate-soal") }}', // Sesuaikan jika beda route
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                type: 'jurnal_mengajar',
                mapel: '{{ $jadwal->mataPelajaran->nama_mapel ?? "" }}',
                kelas: '{{ $jadwal->kelas->nama_kelas ?? "" }}',
                topik: topik,
                kegiatan: kegiatan
            },
            success: function(res) {
                if(res.status === 'success') {
                    // Inject ke text editor summernote
                    $('#summernote').summernote('code', res.content);
                    $('#modalAiAssistant').modal('hide');
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Teks jurnal berhasil digenerate AI!', timer: 1500, showConfirmButton: false });
                } else {
                    Swal.fire('Gagal', res.message, 'error');
                }
            },
            error: function() { Swal.fire('Error', 'Gagal menghubungi server AI', 'error'); },
            complete: function() { btn.prop('disabled', false).html('Generate'); }
        });
    }
</script>
@stop