@extends('layouts.main')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    :root {
        --primary: #4f46e5;
        --primary-hover: #4338ca;
        --secondary: #38bdf8;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --surface: #ffffff;
        --bg-body: #f1f5f9;
        --text-main: #0f172a;
        --text-muted: #64748b;
        --border-light: #e2e8f0;
    }

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

    /* ================= HEADER & BACK BUTTON ================= */
    .content-header { padding: 2rem 1rem 1rem 1rem; }
    .header-title {
        font-weight: 800 !important; font-size: 1.8rem; letter-spacing: -0.03em;
        color: var(--text-main); display: flex; align-items: center; gap: 15px;
    }
    .btn-back {
        display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;
        background: var(--surface); border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        color: var(--primary); transition: all 0.3s ease;
    }
    .btn-back:hover {
        transform: translateX(-5px) scale(1.05); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
        background: var(--primary); color: #ffffff !important;
    }

    /* ================= MAIN CARD CONTAINER ================= */
    .modern-card {
        border: none !important; border-radius: 24px !important; background: var(--surface) !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05) !important; padding: 2rem; margin-bottom: 2rem;
    }

    /* ================= INFO WIDGET ================= */
    .info-widget-container {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;
        background: linear-gradient(145deg, #f8fafc, #f1f5f9); border: 1px solid var(--border-light);
        border-radius: 20px; padding: 1.5rem; margin-bottom: 2rem;
    }
    .info-item {
        display: flex; align-items: center; gap: 1rem; background: var(--surface);
        padding: 1rem 1.25rem; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);
        transition: transform 0.3s ease;
    }
    .info-item:hover { transform: translateY(-3px); }
    .info-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; }
    .icon-mapel { background: #e0e7ff; color: #4f46e5; }
    .icon-kelas { background: #fef3c7; color: #d97706; }
    .icon-guru { background: #d1fae5; color: #059669; }
    .info-text { display: flex; flex-direction: column; }
    .info-text small { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.2rem; }
    .info-text strong { font-size: 1rem; font-weight: 700; color: var(--text-main); }

    /* ================= ACTION BUTTONS ================= */
    .action-toolbar {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
        margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px dashed var(--border-light);
    }
    .left-buttons, .right-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
    
    .btn-modern {
        border: none !important; border-radius: 12px !important; padding: 0.7rem 1.2rem !important;
        font-weight: 700 !important; display: inline-flex; align-items: center; gap: 8px;
        transition: all 0.3s ease !important; color: #ffffff !important; font-size: 0.9rem; cursor: pointer;
    }
    .btn-modern:hover { transform: translateY(-3px) !important; }
    
    .btn-warning-modern { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; box-shadow: 0 8px 15px rgba(245, 158, 11, 0.25) !important; }
    .btn-primary-modern { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 8px 15px rgba(59, 130, 246, 0.25) !important; }
    .btn-success-modern { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; box-shadow: 0 8px 15px rgba(16, 185, 129, 0.25) !important; }
    .btn-danger-modern { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 8px 15px rgba(239, 68, 68, 0.25) !important; }
    .btn-info-modern { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; box-shadow: 0 8px 15px rgba(14, 165, 233, 0.25) !important; }

    /* ================= FLOATING TABLE & INPUTS ================= */
    .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
        border: 2px solid #e2e8f0 !important; border-radius: 10px !important; padding: 0.5rem 1rem !important;
        background-color: #f8fafc !important; outline: none !important; font-weight: 500; transition: all 0.3s;
    }
    .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary) !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important; }
    
    #myTableShow { border-collapse: separate !important; border-spacing: 0 10px !important; margin-top: 10px !important; }
    #myTableShow thead th {
        background-color: transparent !important; color: var(--text-muted) !important; font-size: 0.8rem;
        font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; border: none !important; padding: 0 1rem 0.5rem 1rem !important;
    }
    #myTableShow tbody tr { background-color: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; border-radius: 16px !important; transition: all 0.3s ease; }
    #myTableShow tbody tr:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important; transform: scale(1.002); }
    #myTableShow tbody td { border: 1px solid var(--border-light) !important; border-style: solid none solid none !important; padding: 1rem !important; vertical-align: middle !important; }
    #myTableShow tbody td:first-child { border-left: 1px solid var(--border-light) !important; border-radius: 16px 0 0 16px !important; font-weight: 700; color: var(--text-muted); text-align: center; }
    #myTableShow tbody td:last-child { border-right: 1px solid var(--border-light) !important; border-radius: 0 16px 16px 0 !important; }

    /* Input Nilai Styling */
    #myTableShow tbody input[type="number"], #myTableShow tbody input[type="text"] {
        border: 2px solid var(--border-light); border-radius: 10px; padding: 0.6rem; font-size: 1rem; font-weight: 700;
        text-align: center; width: 80px; transition: all 0.3s; color: var(--text-main); background: #f8fafc;
    }
    #myTableShow tbody input[type="number"]:focus, #myTableShow tbody input[type="text"]:focus {
        border-color: var(--primary); background: #ffffff; outline: none; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    }
    
    /* Checkbox Styling */
    #myTableShow tbody input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; transition: all 0.3s; }

    /* ================= INTERACTIVE FOOTER ================= */
    .confirmation-footer {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border-radius: 16px; padding: 1.5rem 2rem;
        display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1); border: 1px solid #c7d2fe;
    }
    .checkbox-wrapper { display: flex; align-items: center; gap: 12px; }
    .checkbox-wrapper input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
    .checkbox-wrapper label { margin: 0; font-weight: 700; color: #3730a3; font-size: 1.05rem; cursor: pointer; }

    #update-button {
        background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important; color: #ffffff !important; border: none !important;
        border-radius: 12px !important; padding: 0.8rem 2rem !important; font-weight: 700 !important; font-size: 1rem !important;
        letter-spacing: 0.03em !important; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3) !important; transition: all 0.3s ease !important;
    }
    #update-button:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 25px rgba(79, 70, 229, 0.4) !important; }
    @media (max-width: 768px) { .confirmation-footer { flex-direction: column; gap: 1.5rem; text-align: center; } .action-toolbar { flex-direction: column; align-items: stretch; } }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-1">
      <div class="col-sm-6">
        <h4 class="header-title m-0">
          <a href="#" class="btn-back text-decoration-none" onclick="history.back()">
            <i class="fas fa-arrow-left"></i>
          </a>
          Kelola Nilai Akhir
        </h4>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <form action="{{ route('nilaiakhir.update', $pembelajaran->id) }}" method="POST" id="form-update-nilai">
        @csrf
        @method('PUT')
          <div class="modern-card">
              
            <!-- INFO WIDGET -->
            <div class="info-widget-container">
                <div class="info-item">
                    <div class="info-icon icon-mapel"><i class="fas fa-book-open"></i></div>
                    <div class="info-text">
                        <small>Mata Pelajaran</small>
                        <strong>{{ $pembelajaran->mapel->name }}</strong>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon icon-kelas"><i class="fas fa-chalkboard-teacher"></i></div>
                    <div class="info-text">
                        <small>Kelas</small>
                        <strong>{{ $pembelajaran->kelas->name }}</strong>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon icon-guru"><i class="fas fa-user-tie"></i></div>
                    <div class="info-text">
                        <small>Guru Pengampu</small>
                        <strong>{{ $pembelajaran->guru_pengampu() }}</strong>
                    </div>
                </div>
            </div>
              
            @if ($tp->count() >= 1 &&$siswa->count() >= 1)
                <!-- ACTION TOOLBAR -->
                <div class="action-toolbar">
                  <div class="left-buttons">
                    <button type="button" class="btn-modern btn-warning-modern" data-id="{{ $pembelajaran->id }}" id="deskripsi-button">
                      <i class="fas fa-pencil-alt"></i>
                      <span>Edit Deskripsi</span>
                    </button>
                  </div>
                  
                  <div class="right-buttons">
                    <button type="button" class="btn-modern btn-primary-modern" onclick="exportWithAuth()">
                        <i class="fas fa-file-download"></i> Download Format
                    </button>

                    <button type="button" class="btn-modern btn-success-modern" onclick="importWithAuth()">
                        <i class="fas fa-file-upload"></i> Import Nilai
                    </button>
                    <input type="file" id="excel-upload" accept=".xlsx, .xls" style="display: none;" onchange="processImport(event)">

                    <button type="button" class="btn-modern btn-danger-modern" onclick="resetWithAuth()">
                        <i class="fas fa-undo"></i> Reset Nilai
                    </button>

                    <button type="button" class="btn-modern btn-info-modern" id="terapkan-nilai-rata-button">
                      <i class="fas fa-clipboard-check"></i> Terapkan Nilai Rata
                    </button>
                  </div>
                </div>
            @endif

            <!-- TABLE AREA -->
            <div class="card-body p-0">
              @if ($tp->count() < 1)
                <div class="text-center py-5">
                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486747.png" width="120" style="opacity: 0.5; margin-bottom: 1rem;">
                    <h5 class="text-muted fw-bold">Tujuan Pembelajaran Masih Kosong</h5>
                    <a href="{{ route('tujuanpembelajaran.show', $pembelajaran->id) }}" class="btn btn-primary mt-2">Kelola Tujuan Pembelajaran</a>
                </div>
              @elseif ($siswa->count() < 1)
                <div class="text-center py-5">
                    <h5 class="text-muted fw-bold">Data Siswa masih kosong di kelas ini!</h5>
                </div>
              @else
                <div class="table-responsive">
                  <table id="myTableShow" class="table w-100">
                    <thead>
                      <tr>
                        <th style="width: 5%">No.</th>
                        <th>NIS</th>
                        <th>Nama Siswa</th>
                        <th style="text-align: center;">Nilai</th>
                        <th>Capaian TP Optimal</th>
                        <th>Capaian TP Perlu Peningkatan</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              @endif
            </div>

            <!-- FOOTER KONFIRMASI -->
            @if ($tp->count() >= 1 &&$siswa->count() >= 1)
              <div class="confirmation-footer">
                <div class="checkbox-wrapper">
                  <input type="hidden" name="pembelajaran_id" id="pembelajaran_id" value="{{ $pembelajaran->id }}">
                  <input type="checkbox" class="form-check-input" id="update-confirm" required>
                  <label for="update-confirm">Saya yakin sudah mengisi data nilai dengan benar</label>
                </div>
                <button type="submit" id="update-button">
                    <i class="fas fa-save me-2"></i> Simpan Perubahan
                </button>
              </div>
            @endif
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

@include('pages.nilaiakhir._inputnilairata')
@endsection

@section('js')
  <!-- CDN SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <!-- CDN SheetJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

  @include('partials.toast2')
  @include('pages.nilaiakhir._scriptshow')

  <script>
    // ==========================================
    // SISTEM OTORISASI PASSWORD TERPUSAT
    // ==========================================
    function verifyPassword(actionName, callback) {
        Swal.fire({
            title: 'Otorisasi ' + actionName,
            text: 'Fitur ini rawan. Masukkan password Admin untuk melanjutkan.',
            input: 'password',
            inputAttributes: {
                autocapitalize: 'off',
                placeholder: 'Password (admin123)'
            },
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-unlock"></i> Lanjutkan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#4f46e5',
            cancelButtonColor: '#64748b',
            borderRadius: '16px'
        }).then((result) => {
            if (result.isConfirmed) {
                if (result.value === 'admin123') {
                    callback(); 
                } else {
                    Swal.fire({ icon: 'error', title: 'Akses Ditolak', text: 'Password yang Anda masukkan salah.' });
                }
            }
        });
    }

    function exportWithAuth() { verifyPassword('Download', exportExcel); }
    function importWithAuth() { 
        verifyPassword('Import Nilai', () => { document.getElementById('excel-upload').click(); }); 
    }
    function resetWithAuth() { verifyPassword('Reset Nilai', executeReset); }

    // ==========================================
    // 0. FITUR AUTO CHECKBOX (HANYA AKTIF SAAT IMPORT EXCEL)
    // ==========================================
    function autoCheckTP(rowElement) {
        const row = $(rowElement);
        const inputNilai = row.find('td').eq(3).find('input[type="number"], input[type="text"]'); 
        const optimalCheckboxes = row.find('td').eq(4).find('input[type="checkbox"]');
        const peningkatanCheckboxes = row.find('td').eq(5).find('input[type="checkbox"]');

        const nilaiStr = inputNilai.val();
        const nilai = parseFloat(nilaiStr);

        if (nilaiStr !== "" && !isNaN(nilai)) {
            if (nilai >= 65) {
                optimalCheckboxes.prop('checked', true);
                peningkatanCheckboxes.prop('checked', false);
            } else {
                optimalCheckboxes.prop('checked', false);
                peningkatanCheckboxes.prop('checked', true);
            }
        } else {
            optimalCheckboxes.prop('checked', false);
            peningkatanCheckboxes.prop('checked', false);
        }
    }

    // Catatan: Event listener untuk 'input' manual sengaja DIHAPUS, 
    // sehingga saat guru mengetik manual, checkbox tidak akan berubah otomatis.

    // ==========================================
    // 1. FUNGSI UNTUK EXPORT (DOWNLOAD FORMAT EXCEL)
    // ==========================================
    function exportExcel() {
        let excelData = [];
        let tableRows;
        if (typeof $!== 'undefined' &&$.fn && $.fn.dataTable && $.fn.dataTable.isDataTable('#myTableShow')) {
            tableRows = $('#myTableShow').DataTable().rows().nodes();
        } else {
            tableRows = document.querySelectorAll('#myTableShow tbody tr');
        }

        $(tableRows).each(function() {
            const cells = $(this).find('td');
            if (cells.length >= 4) {
                const nama = $(cells[2]).text().trim(); 
                const inputNilai = $(cells[3]).find('input[type="number"], input[type="text"]');
                const nilai = inputNilai.length ? inputNilai.val() : "";

                excelData.push({ "Nama Siswa": nama, "Nilai": nilai });
            }
        });

        if (excelData.length === 0) {
            Swal.fire('Info', 'Tidak ada data siswa untuk di-export.', 'info');
            return;
        }

        const ws = XLSX.utils.json_to_sheet(excelData);
        ws['!cols'] = [{wch: 40}, {wch: 15}];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Format Nilai");

        let mapelName = "{{ str_replace(' ', '_', $pembelajaran->mapel->name) }}";
        let kelasName = "{{ str_replace(' ', '_', $pembelajaran->kelas->name) }}";
        let fileName = `Format_Nilai_${mapelName}_${kelasName}.xlsx`;

        XLSX.writeFile(wb, fileName);
    }

    // ==========================================
    // 2. FUNGSI UNTUK IMPORT (MEMASUKKAN DARI EXCEL)
    // ==========================================
    function processImport(event) {
        const file = event.target.files[0];
        if (!file) return;
        const reader = new FileReader();

        reader.onload = function(e) {
            try {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                const excelData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });

                if (excelData.length === 0) {
                    Swal.fire('Error', 'File Excel kosong.', 'error');
                    document.getElementById('excel-upload').value = ''; return;
                }

                const keys = Object.keys(excelData[0]);
                const namaKey = keys.find(k => k.toLowerCase().includes('nama'));
                const nilaiKey = keys.find(k => k.toLowerCase().includes('nilai'));

                if (!namaKey || !nilaiKey) {
                    Swal.fire({ icon: 'error', title: 'Format Tidak Sesuai', text: 'Pastikan ada kolom "Nama Siswa" dan "Nilai".' });
                    document.getElementById('excel-upload').value = ''; return;
                }

                let matchCount = 0;
                let tableRows;
                if (typeof $!== 'undefined' &&$.fn && $.fn.dataTable && $.fn.dataTable.isDataTable('#myTableShow')) {
                    tableRows = $('#myTableShow').DataTable().rows().nodes();
                } else {
                    tableRows = document.querySelectorAll('#myTableShow tbody tr');
                }

                $(tableRows).each(function() {
                    const cells = $(this).find('td');
                    if (cells.length >= 4) {
                        const namaText = $(cells[2]).text().trim().toLowerCase(); 
                        const inputNilai = $(cells[3]).find('input[type="number"], input[type="text"]');
                        
                        if (namaText && inputNilai.length) {
                            const studentData = excelData.find(row => String(row[namaKey]).trim().toLowerCase() === namaText);
                            if (studentData && studentData[nilaiKey] !== "") {
                                inputNilai.val(studentData[nilaiKey]);
                                
                                // DI SINI SIHIRNYA: Hanya aktif saat import untuk mencentang checkbox otomatis
                                autoCheckTP(this); 
                                
                                matchCount++;
                            }
                        }
                    }
                });

                if (matchCount > 0) {
                    Swal.fire({ icon: 'success', title: 'Import Sukses!', text: `${matchCount} data nilai berhasil diisi otomatis dan checkbox disesuaikan.` });
                } else {
                    Swal.fire({ icon: 'warning', title: 'Tidak Ada Data Cocok', text: 'Tidak ada kecocokan Nama antara Excel dengan web.' });
                }
                document.getElementById('excel-upload').value = '';
            } catch (error) {
                console.error(error);
                Swal.fire('Error', 'Terjadi kesalahan sistem saat membaca Excel.', 'error');
                document.getElementById('excel-upload').value = '';
            }
        };
        reader.readAsArrayBuffer(file);
    }

    // ==========================================
    // 3. FUNGSI UNTUK EKSEKUSI RESET NILAI
    // ==========================================
    function executeReset() {
        let tableRows;
        if (typeof $!== 'undefined' &&$.fn && $.fn.dataTable && $.fn.dataTable.isDataTable('#myTableShow')) {
            tableRows = $('#myTableShow').DataTable().rows().nodes();
        } else {
            tableRows = document.querySelectorAll('#myTableShow tbody tr');
        }

        $(tableRows).each(function() {
            const cells = $(this).find('td');
            if (cells.length >= 4) {
                const inputNilai = $(cells[3]).find('input[type="number"], input[type="text"]');
                if (inputNilai.length) {
                    inputNilai.val(''); 
                    autoCheckTP(this); 
                }
            }
        });

        Swal.fire({ icon: 'success', title: 'Form Dikosongkan!', text: 'Semua kolom nilai dan checkbox telah di-reset.', timer: 1500, showConfirmButton: false });
    }
  </script>
@endsection