@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 (PENGGANTI TABEL KUNING) ================= */
    .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 (ATAS) ================= */
    .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);
    }
    .btn-tambah-tp {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #ffffff !important;
        border: none !important; border-radius: 12px !important; padding: 0.7rem 1.5rem !important;
        font-weight: 700 !important; display: inline-flex; align-items: center; gap: 8px;
        box-shadow: 0 8px 15px rgba(16, 185, 129, 0.25) !important; transition: all 0.3s ease !important;
    }
    .btn-tambah-tp:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 20px rgba(16, 185, 129, 0.4) !important; }
    .btn-nilai-modern {
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; color: #ffffff !important;
        border: none !important; border-radius: 12px !important; padding: 0.7rem 1.5rem !important;
        font-weight: 700 !important; display: inline-flex; align-items: center; gap: 8px;
        box-shadow: 0 8px 15px rgba(245, 158, 11, 0.25) !important; transition: all 0.3s ease !important;
    }
    .btn-nilai-modern:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 20px rgba(245, 158, 11, 0.4) !important; }

    /* ================= FLOATING TABLE (DATATABLES) ================= */
    .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 12px !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; }
    
    @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    #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; animation: fadeSlideUp 0.5s ease-out forwards; opacity: 0; }
    #myTableShow tbody tr:nth-child(1) { animation-delay: 0.1s; } #myTableShow tbody tr:nth-child(2) { animation-delay: 0.2s; }
    #myTableShow tbody tr:nth-child(3) { animation-delay: 0.3s; } #myTableShow tbody tr:nth-child(4) { animation-delay: 0.4s; }
    #myTableShow tbody tr:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important; transform: scale(1.005); }
    #myTableShow tbody td { border: 1px solid var(--border-light) !important; border-style: solid none solid none !important; padding: 1.25rem 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; }

    #myTableShow tbody textarea { border: 2px solid var(--border-light) !important; border-radius: 12px !important; padding: 1rem !important; font-size: 0.95rem !important; background-color: #f8fafc !important; color: var(--text-main) !important; transition: all 0.3s ease !important; width: 100% !important; line-height: 1.5 !important; resize: vertical !important; }
    #myTableShow tbody textarea:focus { background-color: #ffffff !important; border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important; outline: none !important; }

    #myTableShow tbody .btn-danger { background: #fee2e2 !important; color: #ef4444 !important; border: none !important; border-radius: 10px !important; padding: 0.6rem 1.2rem !important; font-weight: 700 !important; font-size: 0.85rem !important; transition: all 0.3s ease !important; }
    #myTableShow tbody .btn-danger:hover { background: #ef4444 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3) !important; }

    /* ================= INTERACTIVE FOOTER (CONFIRMATION) ================= */
    .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: 2.5rem; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1); border: 1px solid #c7d2fe; }
    .checkbox-wrapper { display: flex; align-items: center; gap: 12px; }
    input[type="checkbox"].form-check-input { 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; }
    #update-button:disabled { background: #6366f1 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; opacity: 0.8 !important; }
    @media (max-width: 768px) { .confirmation-footer { flex-direction: column; gap: 1.5rem; text-align: center; } .action-toolbar { flex-direction: column; align-items: stretch; } .btn-tambah-tp, .btn-nilai-modern { justify-content: center; } }
</style>
@endsection

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <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 Tujuan Pembelajaran
        </h4>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        
        <form action="{{ route('tujuanpembelajaran.update', $pembelajaran->id) }}" method="POST" id="form-update-tp">
        @csrf
        @method('PUT')
          <div class="modern-card">
            
            <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>

            <div class="action-toolbar">
                <button type="button" class="btn-tambah-tp" id="create-button">
                  <i class="fas fa-plus-circle"></i> Tambah Tujuan Pembelajaran
                </button>
                <a href="/nilaiakhir/{{$pembelajaran->id }}" class="btn-nilai-modern show-projekpilihan-button">
                  <i class="fas fa-cog fa-spin-hover"></i> Pengaturan Nilai
                </a>
            </div>
            
            <div class="card-body p-0">
              @if ($tujuanpembelajaran->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">Data Tujuan Pembelajaran Masih Kosong</h5>
                    <p class="text-muted">Silakan klik tombol tambah di atas untuk mulai membuat.</p>
                </div>
              @else
                <div class="table-responsive">
                  <table id="myTableShow" class="table w-100">
                    <thead>
                      <tr>
                        <th style="width: 5%">No.</th>
                        <th>Keterangan Tujuan Pembelajaran (Max 150)</th>
                        <th style="width: 10%; text-align: center;">Hapus</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              @endif
            </div>

            @if ($tujuanpembelajaran->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 dengan benar</label>
                </div>
                <button type="submit" id="update-button">
                    <i class="fas fa-save me-2"></i> <span>Simpan Perubahan</span>
                </button>
              </div>
            @endif

          </div>
        </form>
      </div>
    </div>
  </div>
</section>

@include('pages.tujuanpembelajaran.kelola._delete')
@include('pages.tujuanpembelajaran.kelola._create')
@endsection

@section('js')
 <!-- CDN SweetAlert2 -->
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 @include('partials.toast2')

 <script>
  document.getElementById('form-update-tp').addEventListener('submit', function() {
      let btn = document.getElementById('update-button');
      if (btn) {
          btn.disabled = true;
          btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Menyimpan Data...';
      }
  });

  function confirmDelete(id) {
      Swal.fire({
          title: 'Hapus Tujuan Pembelajaran?',
          text: "TP ini dan TP paralel yang sama akan dihapus. Data tidak dapat dikembalikan!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#ef4444',
          cancelButtonColor: '#64748b',
          confirmButtonText: '<i class="fas fa-trash me-1"></i> Ya, Hapus!',
          cancelButtonText: 'Batal',
          borderRadius: '16px',
      }).then((result) => {
          if (result.isConfirmed) {
              document.getElementById('form-delete-' + id).submit();
          }
      })
  }

  function checkLength(textarea, id) {
      var textLength = textarea.value.length;
      var maxLength = 150;
      if (textLength > maxLength) {
          textarea.value = textarea.value.slice(0, maxLength);
          document.getElementById("error-edit-keterangan" + id).innerHTML = "Maksimal 150 karakter";
      } else {
          document.getElementById("error-edit-keterangan" + id).innerHTML = "";
      }
  }

  function limitInputTP(textarea, errorElement) {
      var maxLength = 150;
      if (textarea.value.length > maxLength) {
          textarea.value = textarea.value.slice(0, maxLength);
          errorElement.innerHTML = "Maksimal 150 karakter";
      } else {
          errorElement.innerHTML = "";
      }
  }
</script>

<script>
  // Logika Tambah Duplikat Form Input Create dengan MAXLENGTH KUNCI MUTLAK
  document.getElementById('duplikat-keterangan').addEventListener('click', function() {
      document.getElementById('reset').classList.remove('d-none');

      let uniqueId = Date.now();

      var newTextArea = document.createElement('textarea');
      newTextArea.className = 'form-control form-control-modern create-keterangan mt-3';
      newTextArea.name = 'keterangan[]';
      newTextArea.rows = '3';
      newTextArea.placeholder = 'Ketik Tujuan Pembelajaran';
      newTextArea.value = '';
      
      // Mencegah input lebih dari 150 agar database tidak error
      newTextArea.setAttribute('maxlength', '150');
      newTextArea.setAttribute('oninput', "limitInputTP(this, document.getElementById('error-ket-" + uniqueId + "'))");

      var errorDiv = document.createElement('div');
      errorDiv.id = 'error-ket-' + uniqueId;
      errorDiv.className = 'text-danger mt-1';
      errorDiv.style.fontSize = '0.85rem';

      var spacerDiv = document.createElement('div');
      spacerDiv.style.marginBottom = '15px'; 

      var duplikatElement = document.getElementById('duplikat');
      duplikatElement.appendChild(newTextArea);
      duplikatElement.appendChild(errorDiv);
      duplikatElement.appendChild(spacerDiv);
  });

  document.getElementById('reset').addEventListener('click', function() {
    resetInputTP();
    document.getElementById('reset').classList.add('d-none');
  });

  function resetInputTP(){
    var duplikatElement = document.getElementById('duplikat');
    while (duplikatElement.firstChild) {
        duplikatElement.removeChild(duplikatElement.firstChild);
    }
    var element = document.querySelector('.create-keterangan');
    if (element) {
      element.value = null;
    }
  }
</script>

@include('pages.tujuanpembelajaran.kelola._scriptshow')

<script>
    document.addEventListener("DOMContentLoaded", function() {
        
        // Mematikan paksa kuncian Modal Bootstrap agar form Password bisa diketik
        if (typeof $ !== 'undefined' && $.fn && $.fn.modal) {
            $.fn.modal.Constructor.prototype._enforceFocus = function() {};
            $.fn.modal.Constructor.prototype.enforceFocus = function() {};
        }

        const modalElement = document.getElementById('modal-create');
        if (modalElement) {
            modalElement.removeAttribute('tabindex');
        }

        // --- FITUR PASSWORD ---
        const checkboxParalel = document.getElementById('copy_to_parallel');
        if (checkboxParalel) {
            checkboxParalel.addEventListener('change', function(e) {
                if (this.checked) {
                    this.checked = false; 

                    Swal.fire({
                        title: 'Otorisasi Diperlukan',
                        text: 'Fitur ini sangat rawan. Tanyakan password ke Admin untuk menerapkan TP ke kelas paralel.',
                        input: 'password',
                        inputAttributes: {
                            autocapitalize: 'off',
                            placeholder: 'Masukkan Password Admin'
                        },
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-unlock"></i> Buka Akses',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#4f46e5',
                        cancelButtonColor: '#64748b',
                        borderRadius: '16px'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            
                            // PASSWORD DEFAULT DI SINI: admin123
                            if (result.value === 'admin123') {
                                document.getElementById('copy_to_parallel').checked = true;
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Akses Diberikan!',
                                    text: 'Tujuan Pembelajaran akan otomatis disalin ke kelas paralel saat disimpan.',
                                    timer: 2500,
                                    showConfirmButton: false
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Akses Ditolak',
                                    text: 'Password yang Anda masukkan salah.'
                                });
                            }
                        }
                    });
                }
            });
        }
    });
</script>
@endsection