@extends('adminlte::page')

@section('title', 'Tambah Halaman Baru | Smart Cendekia')

{{-- Matikan plugin bawaan AdminLTE untuk Summernote karena kita pakai CDN --}}
@section('plugins.BsCustomFileInput', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <h1 class="font-weight-bold" style="font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: #5E5873;">
                Buat Halaman Baru
            </h1>
            <p class="text-muted small mb-0">Tambahkan halaman profil statis (Misal: Sejarah, Visi Misi).</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" style="color: #7367F0;">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.website.pages.index') }}" style="color: #7367F0;">Halaman</a></li>
            <li class="breadcrumb-item active text-muted">Baru</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    <form action="{{ route('admin.website.pages.store') }}" method="POST" enctype="multipart/form-data" id="pageForm">
        @csrf
        
        <div class="row">
            {{-- =================================== --}}
            {{-- KOLOM KIRI: EDITOR UTAMA --}}
            {{-- =================================== --}}
            <div class="col-lg-8">
                <div class="card border-0 apex-card">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h3 class="card-title font-weight-bold" style="color: #7367F0;">
                            <i class="fas fa-keyboard mr-2"></i> Konten Halaman
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- JUDUL --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-xs text-uppercase apex-label">Judul Halaman <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control form-control-lg border-0 bg-light apex-input @error('title') is-invalid @enderror" 
                                   placeholder="Contoh: Sejarah Singkat" value="{{ old('title') }}" required autofocus>
                            @error('title') <span class="invalid-feedback pl-2">{{ $message }}</span> @enderror
                        </div>

                        {{-- SUMMERNOTE EDITOR --}}
                        <div class="form-group mt-4">
                            <label class="font-weight-bold text-xs text-uppercase apex-label">Isi Halaman <span class="text-danger">*</span></label>
                            <textarea id="summernote" name="content" class="form-control @error('content') is-invalid @enderror">{{ old('content') }}</textarea>
                            @error('content') <span class="text-danger text-sm mt-1 d-block">{{ $message }}</span> @enderror
                        </div>

                    </div>
                </div>
            </div>

            {{-- =================================== --}}
            {{-- KOLOM KANAN: PENGATURAN & GAMBAR --}}
            {{-- =================================== --}}
            <div class="col-lg-4">
                
                {{-- CARD GAMBAR & STATUS --}}
                <div class="card border-0 apex-card mb-4">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h3 class="card-title font-weight-bold" style="color: #5E5873;">
                            <i class="fas fa-image mr-2 text-muted"></i> Media & Publikasi
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        <div class="form-group">
                            <label class="font-weight-bold text-xs text-uppercase apex-label">Gambar Utama (Opsional)</label>
                            
                            {{-- Preview Image Container --}}
                            <div class="text-center mb-3 p-1 border rounded bg-light position-relative" style="border-radius: 10px !important; overflow: hidden;">
                                <img id="previewImg" src="https://via.placeholder.com/400x200?text=Upload+Cover" 
                                     alt="Preview" class="img-fluid" style="width: 100%; height: 180px; object-fit: cover; border-radius: 8px;">
                            </div>

                            {{-- File Input --}}
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" accept="image/*">
                                <label class="custom-file-label border-0 shadow-sm" for="featured_image" style="border-radius: 8px; color: #5E5873;">Pilih file...</label>
                            </div>
                            <small class="text-muted d-block mt-2">Format: JPG, PNG, WEBP (Max 2MB)</small>
                            @error('featured_image') <span class="text-danger text-xs font-weight-bold d-block mt-1">{{ $message }}</span> @enderror
                        </div>

                        {{-- Status Publish --}}
                        <div class="form-group mt-4 pt-3 border-top">
                            <div class="custom-control custom-switch custom-switch-purple">
                                <input type="checkbox" class="custom-control-input" id="statusSwitch" name="status" value="published" checked>
                                <label class="custom-control-label font-weight-bold" for="statusSwitch" style="color: #5E5873;">Terbitkan Sekarang</label>
                            </div>
                        </div>

                    </div>
                    
                    {{-- TOMBOL AKSI --}}
                    <div class="card-footer bg-white border-top-0 pb-4" style="border-radius: 0 0 15px 15px;">
                        <button type="submit" class="btn btn-apex-purple btn-block font-weight-bold shadow-sm py-2 mb-2 hover-lift">
                            <i class="fas fa-save mr-2"></i> Simpan Halaman
                        </button>
                        <a href="{{ route('admin.website.pages.index') }}" class="btn btn-light btn-block font-weight-bold text-muted shadow-sm py-2 border hover-lift" style="border-radius: 8px;">
                            <i class="fas fa-arrow-left mr-2"></i> Batal
                        </a>
                    </div>
                </div>

                {{-- CARD INFO PENULIS --}}
                <div class="card border-0 apex-card">
                    <div class="card-body py-3 d-flex align-items-center">
                        <div class="symbol symbol-40px mr-3">
                            <div class="bg-light-purple rounded-circle d-flex align-items-center justify-content-center" style="width:45px; height:45px;">
                                <i class="fas fa-user-edit" style="color: #7367F0; font-size: 1.2rem;"></i>
                            </div>
                        </div>
                        <div>
                            <span class="text-xs d-block text-uppercase font-weight-bold" style="color: #B9B9C3;">Penulis</span>
                            <span class="font-weight-bold" style="color: #5E5873;">{{ Auth::user()->name ?? 'Administrator' }}</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>
@stop

@push('css')
{{-- MEMAKSA SUMMERNOTE LOAD DARI CDN --}}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* ==========================================
       TEMA APEX MODERN PURPLE
       ========================================== */
    body { font-family: 'Poppins', sans-serif; background-color: #F8F8F8; }
    
    /* Warna Dasar */
    .text-apex-purple { color: #7367F0 !important; }
    .bg-light-purple { background-color: #EAE8FD !important; }
    .apex-label { color: #B9B9C3; letter-spacing: 0.5px; }
    
    /* Card Styling */
    .apex-card {
        border-radius: 15px;
        box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.08) !important;
        transition: all 0.3s ease-in-out;
    }

    /* Input & Focus Styling */
    .apex-input {
        border-radius: 8px;
        color: #5E5873;
        transition: all 0.2s ease;
    }
    .form-control:focus { 
        box-shadow: 0 3px 10px rgba(115, 103, 240, 0.15); 
        border: 1px solid #7367F0; 
        background-color: #FFFFFF !important;
    }

    /* Tombol Utama */
    .btn-apex-purple { 
        background-color: #7367F0;
        color: white; 
        border: none;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px -8px #7367F0;
    }
    .btn-apex-purple:hover { 
        transform: translateY(-2px);
        box-shadow: 0 8px 25px -5px rgba(115, 103, 240, 0.6);
        color: white; 
        background-color: #5E50EE;
    }

    /* Efek Angkat (Hover Lift) */
    .hover-lift:hover {
        transform: translateY(-2px);
    }

    /* Custom Switch Ungu */
    .custom-switch-purple .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #7367F0;
        border-color: #7367F0;
    }

    /* ==========================================
       CUSTOM SUMMERNOTE THEME (APEX STYLE)
       ========================================== */
    .note-editor.note-frame { 
        border: 1px solid #D8D6DE !important; 
        box-shadow: none !important; 
        border-radius: 8px;
        overflow: hidden;
    }
    .note-toolbar { 
        background-color: #F8F8F8 !important; 
        border-bottom: 1px solid #D8D6DE !important; 
        padding: 10px 15px; 
    }
    .note-btn { color: #6E6B7B; border: none; }
    .note-btn:hover, .note-btn.active { 
        background-color: #EAE8FD !important; 
        color: #7367F0 !important; 
        border-radius: 6px; 
    }
    .note-dropdown-menu { min-width: 200px; border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); border: none; }
    .note-statusbar { border-top: 1px solid #D8D6DE !important; background-color: #F8F8F8 !important; }
    
    .custom-file-label::after { content: "Cari File"; background-color: #F8F8F8; color: #5E5873; border-radius: 0 8px 8px 0; }
</style>
@endpush

@push('js')
{{-- MEMAKSA JS SUMMERNOTE LOAD DARI CDN --}}
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<script>
    $(document).ready(function() {
        // 1. Inisialisasi Summernote dengan Fitur Ala Microsoft Word
        $('#summernote').summernote({
            height: 450,
            placeholder: 'Tulis konten halaman di sini...',
            tabsize: 2,
            
            // Daftarkan font
            fontNames: ['Poppins', 'Arial', 'Times New Roman', 'Courier New', 'Verdana', 'Helvetica'],
            fontNamesIgnoreCheck: ['Poppins'],
            
            // Konfigurasi Toolbar Lengkap
            toolbar: [
                ['history', ['undo', 'redo']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                ['font', ['superscript', 'subscript']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph', 'height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            
            lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0'],
            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
            
            // Callback untuk styling bawaan
            callbacks: {
                onInit: function() {
                    $('.note-editable').css('font-family', 'Poppins, sans-serif');
                    $('.note-editable').css('font-size', '14px');
                    $('.note-editable').css('line-height', '1.6');
                    $('.note-editable').css('color', '#5E5873');
                }
            }
        });

        // 2. Inisialisasi Custom File Input
        if (typeof bsCustomFileInput !== 'undefined') {
            bsCustomFileInput.init();
        }

        // 3. Logic Preview Gambar Real-time
        $('#featured_image').change(function(){
            const file = this.files[0];
            if(file){
                let reader = new FileReader();
                reader.onload = function(event){
                    $('#previewImg').attr('src', event.target.result);
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endpush