{{-- 
    Lokasi File: resources/views/guru/jurnal/form_laporan.blade.php 
    Status: FINAL FIXED (Ultra-Modern Mobile UI, Sync Summernote, AI Ready, Camera Ready, No Overlap)
--}}

@extends('layouts.guru_master')

@section('title', 'Laporan Jurnal | Smart Cendekia')

{{-- Plugins --}}
@section('plugins.Summernote', true)
@section('plugins.Sweetalert2', true)
@section('plugins.BsCustomFileInput', true)

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --app-bg: #f4f7fb;
        --text-main: #0f172a;
        --text-muted: #64748b;
    }

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

    /* Hilangkan background putih dari content-wrapper & beri ruang untuk sticky footer */
    .content-wrapper { background: transparent !important; padding-bottom: 110px !important; }

    /* =========================================================================
       UI COMPONENTS
       ========================================================================= */

    /* --- INFO KELAS (HERO CARD) --- */
    .session-info-card {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        border-radius: 24px;
        padding: 20px;
        margin: 10px 15px 20px;
        color: white;
        box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.4);
        position: relative;
        overflow: hidden;
    }
    
    .session-info-card::before { content: ''; position: absolute; width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%; top: -40px; right: -20px; }
    
    .badge-status {
        background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);
        padding: 5px 12px; border-radius: 12px; font-size: 0.7rem; font-weight: 800;
        border: 1px solid rgba(255, 255, 255, 0.3); display: inline-flex; align-items: center; gap: 6px;
    }

    .pulse-dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981; animation: pulse-live 2s infinite; }
    @keyframes pulse-live { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

    /* --- FORM CARDS --- */
    .glass-card {
        background: #ffffff; border-radius: 24px; padding: 20px; margin: 0 15px 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.02); border: 1px solid #f1f5f9;
    }

    .card-heading { font-size: 0.95rem; font-weight: 900; color: var(--text-main); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
    
    .btn-ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; border: none; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); transition: 0.2s; }
    .btn-ai:active { transform: scale(0.95); }

    /* --- IMAGE PREVIEW --- */
    .custom-file-label { border-radius: 14px; border: 1px solid #cbd5e1; background: #f8fafc; font-weight: 600; color: #64748b; }
    .custom-file-label::after { background: #e2e8f0; color: #475569; font-weight: 800; border-radius: 0 13px 13px 0; }
    
    .img-preview { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; display: none; margin-top: 15px; border: 2px dashed #cbd5e1; padding: 4px; background: #f8fafc; }
    .img-preview.show { display: block; border-style: solid; border-color: #e2e8f0; }

    /* Custom Input */
    .form-control-modern { border-radius: 14px; border: 1px solid #cbd5e1; background: #f8fafc; padding: 12px 15px; font-size: 0.9rem; transition: 0.3s; }
    .form-control-modern:focus { background: #ffffff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

    /* --- STICKY BOTTOM ACTION BAR --- */
    .sticky-action-bar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
        background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        padding: 15px 15px 25px; border-top-left-radius: 30px; border-top-right-radius: 30px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.08); border-top: 1px solid rgba(226, 232, 240, 0.8);
        display: flex; gap: 10px; align-items: center;
    }
    
    .btn-cancel {
        background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-weight: 800; font-size: 0.85rem; padding: 14px 20px; border-radius: 20px; text-decoration: none !important; transition: 0.2s; display: flex; align-items: center; justify-content: center;
    }
    .btn-cancel:active { background: #e2e8f0; transform: scale(0.95); }
    
    .btn-save {
        flex-grow: 1; background: linear-gradient(135deg, #10b981, #059669); color: white; font-weight: 800; font-size: 0.95rem; padding: 14px 20px; border-radius: 20px; border: none; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; justify-content: center; align-items: center;
    }
    .btn-save:active { transform: scale(0.95); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }

    /* Hilangkan footer master khusus halaman ini agar tidak tumpang tindih */
    .guru-bottom-nav, .m-bottom-nav { display: none !important; }
</style>
@stop

@section('content_body')

<div class="animate__animated animate__fadeIn" style="padding-bottom: 30px;">

    {{-- DETEKTOR ERROR --}}
    @if ($errors->any())
        <div class="alert alert-danger mx-3 mt-3 border-0 shadow-sm" style="border-radius: 16px; background: #fff1f2; color: #e11d48;">
            <h6 class="font-weight-bold mb-2"><i class="fas fa-exclamation-circle mr-1"></i> Gagal Menyimpan!</h6>
            <ul class="mb-0 pl-3 small font-weight-bold">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- INFO KELAS (HERO CARD) --}}
    <div class="session-info-card animate__animated animate__fadeInDown">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; position: relative; z-index: 2;">
            <div class="badge-status">
                <span class="pulse-dot"></span> Sesi Aktif
            </div>
            
            <div class="badge-time">
                <i class="far fa-clock mr-1"></i> 
                <span id="current-time-display">{{ \Carbon\Carbon::now()->format('H:i') }}</span> 
                <span class="user-timezone">...</span>
            </div>
        </div>
        
        <div style="position: relative; z-index: 2;">
            <p style="font-size: 0.75rem; font-weight: 800; color: #93c5fd; margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.5px;">
                <i class="fas fa-door-open mr-1"></i> Kelas {{ $sesi->kelas->nama_kelas ?? '-' }}
            </p>
            <h2 style="font-size: 1.3rem; font-weight: 900; margin: 0; line-height: 1.2;">
                {{ $sesi->jadwal->mataPelajaran->nama_mapel ?? 'Mata Pelajaran' }}
            </h2>
        </div>
    </div>

    {{-- FORM UTAMA --}}
    <form action="{{ route('guru.jurnal.store.laporan', $sesi->id) }}" method="POST" enctype="multipart/form-data" id="formLaporan">
        @csrf
        
        {{-- MATERI PEMBELAJARAN --}}
        <div class="glass-card animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
            <div class="card-heading">
                <span>📝 Materi Hari Ini <span class="text-danger">*</span></span>
                <button type="button" onclick="openAiModal()" class="btn-ai">
                    <i class="fas fa-magic mr-1"></i> AI Helper
                </button>
            </div>
            
            <div class="summernote-wrapper" style="border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0;">
                <textarea name="materi_pembelajaran" id="summernote" class="form-control" rows="10">{{ old('materi_pembelajaran', $sesi->materi_pembelajaran) }}</textarea>
            </div>
        </div>

        {{-- DOKUMENTASI & CATATAN --}}
        <div class="glass-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
            <div class="card-heading">
                <span>📸 Dokumentasi & Catatan</span>
            </div>
            
            {{-- Upload Foto (Dengan capture="environment" untuk langsung buka kamera) --}}
            <div class="custom-file mb-2">
                <input type="file" name="foto_kegiatan" class="custom-file-input" id="fotoKegiatan" accept="image/*" capture="environment" onchange="previewImage()">
                <label class="custom-file-label" for="fotoKegiatan">Ambil Foto Kegiatan...</label>
            </div>
            
            {{-- Preview Foto --}}
            <img id="imgPreview" class="img-preview {{ $sesi->foto_kegiatan ? 'show' : '' }}" 
                 src="{{ $sesi->foto_kegiatan ? asset('storage/'.$sesi->foto_kegiatan) : '#' }}">
            
            <hr style="border-color: #f1f5f9; margin: 20px 0;">
            
            {{-- Catatan --}}
            <label class="small font-weight-bold text-muted mb-1">Catatan Tambahan (Opsional)</label>
            <textarea name="catatan_kegiatan" class="form-control form-control-modern" rows="3" placeholder="Tuliskan catatan khusus terkait sesi ini jika ada...">{{ old('catatan_kegiatan', $sesi->catatan_kegiatan) }}</textarea>
        </div>

        {{-- STICKY ACTION BAR --}}
        <div class="sticky-action-bar animate__animated animate__slideInUp" style="animation-delay: 0.3s;">
            <a href="{{ route('guru.dashboard') }}" class="btn-cancel">
                <i class="fas fa-times"></i>
            </a>
            
            <button type="button" onclick="confirmFinish()" class="btn-save" id="btnSubmitReal">
                <i class="fas fa-paper-plane mr-2"></i> Kirim Laporan
            </button>
        </div>

    </form>
</div>

{{-- MODAL AI (GLASSMORPHISM STYLE) --}}
<div class="modal fade" id="modalAiAssistant" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 28px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title font-weight-bold" style="font-size: 1.1rem; color: #4f46e5;">
                    <i class="fas fa-robot mr-2"></i> Asisten AI
                </h6>
                <button type="button" class="close" data-dismiss="modal" style="outline: none;"><span>&times;</span></button>
            </div>
            <div class="modal-body p-4">
                <p class="text-muted small font-weight-bold mb-3">AI akan membantu Anda merangkum jurnal mengajar berdasarkan topik.</p>
                
                <label class="small font-weight-bold text-dark mb-1">Topik Utama</label>
                <input type="text" id="ai_topik" class="form-control form-control-modern mb-3" placeholder="Contoh: Aljabar Linear">
                
                <label class="small font-weight-bold text-dark mb-1">Metode/Kegiatan</label>
                <input type="text" id="ai_kegiatan" class="form-control form-control-modern mb-4" placeholder="Contoh: Diskusi Kelompok">
                
                <button type="button" onclick="generateJurnal()" id="btnGenerate" class="btn btn-ai btn-block rounded-pill py-2" style="font-size: 0.9rem;">
                    <i class="fas fa-sparkles mr-2"></i> Buat Jurnal Otomatis
                </button>
            </div>
        </div>
    </div>
</div>

@stop

@section('js')
<script>
    // ==========================================================
    // 1. INISIALISASI SAAT HALAMAN SIAP
    // ==========================================================
    $(document).ready(function() {
        console.log("Halaman Siap. Memuat plugin...");

        // Init Custom File Input
        try { bsCustomFileInput.init(); } catch(e) { console.error("BS File Input Error:", e); }

        // Init Summernote dengan Tampilan Bersih
        try {
            $('#summernote').summernote({
                height: 250,
                placeholder: 'Tuliskan poin-poin materi pembelajaran hari ini...',
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['para', ['ul', 'ol']],
                    ['view', ['fullscreen']]
                ]
            });
            // Hapus border default summernote agar menyatu dengan wrapper
            $('.note-editor').css('border', 'none'); 
            console.log("Summernote Berhasil Dimuat");
        } catch (e) {
            console.error("Gagal memuat Summernote:", e);
            $('#summernote').show(); 
        }
    });

    // ==========================================================
    // 2. FUNGSI PREVIEW GAMBAR
    // ==========================================================
    window.previewImage = function() {
        const file = document.getElementById('fotoKegiatan').files[0];
        const preview = document.getElementById('imgPreview');
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.add('show');
            }
            reader.readAsDataURL(file);
        }
    }

    // ==========================================================
    // 3. FUNGSI SUBMIT (VERSI ROBUST / ANTI MACET)
    // ==========================================================
    window.confirmFinish = function() {
        var htmlContent = '';
        var textOnly = '';

        try {
            if ($('#summernote').summernote) {
                htmlContent = $('#summernote').summernote('code');
            } else {
                htmlContent = $('#summernote').val();
            }
        } catch (e) {
            htmlContent = $('#summernote').val();
        }

        // Bersihkan Text untuk Validasi minimal huruf
        textOnly = htmlContent.replace(/<[^>]*>?/gm, '').replace(/&nbsp;/g, '').trim(); 
        
        if (textOnly.length < 3) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Materi Kosong',
                    text: 'Mohon isi materi pembelajaran minimal 3 huruf.',
                    confirmButtonColor: '#f59e0b',
                    customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4 font-weight-bold' }
                });
            } else {
                alert("Materi Kosong! Mohon isi minimal 3 huruf.");
            }
            return;
        }

        // Sinkronisasi Paksa
        $('#summernote').val(htmlContent);

        // Konfirmasi & Kirim
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Akhiri Sesi?',
                text: "Laporan akan dikirim dan sesi kelas ditutup.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Ya, Kirim Laporan',
                cancelButtonText: 'Batal',
                customClass: { 
                    popup: 'rounded-2xl', 
                    confirmButton: 'rounded-pill px-4 font-weight-bold',
                    cancelButton: 'rounded-pill px-4 font-weight-bold'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    
                    // Ubah tombol jadi loading agar tidak di-klik 2x
                    let btn = $('#btnSubmitReal');
                    btn.html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...');
                    btn.css('pointer-events', 'none');

                    Swal.fire({ title: 'Menyimpan Data...', allowOutsideClick: false, customClass: {popup: 'rounded-2xl'}, didOpen: () => { Swal.showLoading(); } });
                    
                    var form = document.getElementById('formLaporan');
                    if(form) form.submit();
                }
            });
        } else {
            if(confirm("Kirim Laporan? Sesi akan diakhiri.")) {
                document.getElementById('formLaporan').submit();
            }
        }
    }

   // ==========================================================
    // 4. LOGIKA AI (AI HELPER)
    // ==========================================================
    window.openAiModal = function() { 
        $('#modalAiAssistant').modal('show'); 
    }
    
    window.generateJurnal = function() {
        let topik = $('#ai_topik').val();
        let kegiatan = $('#ai_kegiatan').val();
        let mapelText = "{{ $sesi->jadwal->mataPelajaran->nama_mapel ?? 'Umum' }}";
        let kelasText = "{{ $sesi->kelas->nama_kelas ?? 'Umum' }}";

        if(!topik) { 
            Swal.fire({icon: 'info', title: 'Topik Kosong', text: 'Mohon isi topik materi.', customClass: {popup:'rounded-2xl'}});
            return; 
        }

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

        let urlApi = "{{ route('api.ai.jurnal') }}";

        $.ajax({
            url: urlApi, 
            method: 'POST',
            data: { 
                _token: '{{ csrf_token() }}',
                type: 'jurnal_mengajar', 
                mapel: mapelText,
                kelas: kelasText,
                topik: topik,
                metode: kegiatan
            },
            success: function(res) {
                let content = res.reply || res.content;
                if (content) {
                    try {
                        $('#summernote').summernote('code', content);
                    } catch(e) {
                        $('#summernote').val(content);
                    }
                    $('#modalAiAssistant').modal('hide');
                    Swal.fire({icon: 'success', title: 'Berhasil', text: 'Jurnal AI berhasil ditambahkan.', timer: 1500, showConfirmButton: false, customClass: {popup:'rounded-2xl'}});
                } else {
                    alert('AI tidak memberikan respon teks.');
                }
            },
            error: function(xhr) { 
                console.error(xhr.responseText);
                alert('Gagal menghubungi AI. Cek koneksi atau kuota API.'); 
            },
            complete: function() { 
                btn.prop('disabled', false).html(oldHtml); 
            }
        });
    }
</script>
@stop