{{-- resources/views/admin/akademik/kurikulum/cp_create.blade.php --}}
@php
    $isGuru = auth()->check() && auth()->user()->type == 3;
    $user = auth()->user();
    $guru = $isGuru ? \App\Models\Kepegawaian\Guru::where('email', $user->email)->first() : null;
@endphp

@extends($isGuru ? 'layouts.app' : 'layouts.admin')
@section('title', 'Tambah Capaian Pembelajaran (CP)')

@push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
@endpush

@section('content')
@if($isGuru)
    @include('public.guru._hero', ['user' => $user, 'guru' => $guru])
@endif

<div class="{{ $isGuru ? 'container py-5' : 'page-inner' }}" {!! $isGuru ? 'data-aos="fade-up"' : '' !!}>
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-2">Tambah Capaian Pembelajaran (CP)</h3>
      <h6 class="op-7 mb-0">Kelola Kurikulum: {{ $kurikulum->mapelNama->nama_mapel ?? '-' }} (Kelas {{ $kurikulum->levelKelas->level_kelas ?? '-' }})</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
        <a href="{{ route('admin.kurikulum.kelola', ['id' => $kurikulum->id, 'tab' => 'cp']) }}" class="btn btn-secondary btn-round shadow-sm">
            <i class="fas fa-arrow-left me-2"></i> Kembali
        </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card card-round shadow-sm border-0">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title fw-bold mb-0">Form Input Capaian Pembelajaran</h5>
            </div>
            <form action="{{ route('admin.kurikulum.cp.store') }}" method="POST">
                @csrf
                <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">
                <div class="card-body p-4">
                    
                    <div class="alert alert-info border-start border-info border-3">
                        <i class="fa fa-info-circle me-2"></i> Tahun Ajaran: <strong>{{ $kurikulum->tahunAjaran->tahun_ajaran ?? '-' }}</strong> &nbsp; | &nbsp; Author: <strong>{{ $kurikulum->guru->name ?? 'Admin' }}</strong>
                    </div>

                    <div class="form-group px-0 mt-3">
                        <label for="elemen" class="form-label fw-bold">Elemen Pembelajaran <span class="text-danger">*</span></label>
                        <input type="text" id="elemen" name="elemen" class="form-control form-control-lg border-primary" placeholder="Contoh: Berpikir Komputasional" required>
                    </div>

                    <div class="form-group px-0 mt-3">
                        <label for="summernote" class="form-label fw-bold">Deskripsi Capaian (CP) <span class="text-danger">*</span></label>
                        <textarea id="summernote" name="capaian_teks" required></textarea>
                    </div>

                </div>
                <div class="card-footer bg-light text-end">
                    <button type="submit" class="btn btn-primary btn-round px-4 py-2 fw-bold shadow-sm">
                        <i class="fa fa-save me-2"></i> Simpan Data CP
                    </button>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            placeholder: 'Ketikkan deskripsi lengkap Capaian Pembelajaran di sini...',
            tabsize: 2,
            height: 250,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear', 'italic']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });
</script>

@if($isGuru)
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
</style>
@endif
@endpush