@extends('adminlte::page')

@section('title', 'Edit Halaman | Smart Cendekia')

{{-- Aktifkan Plugin --}}
@section('plugins.Summernote', true)
@section('plugins.BsCustomFileInput', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif; font-size: 1.5rem;">
                Edit Halaman
            </h1>
            <p class="text-muted small mb-0">Perbarui konten halaman <span class="text-purple font-weight-bold">{{ $page->title }}</span>.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.website.pages.index') }}">Halaman</a></li>
            <li class="breadcrumb-item active">Edit</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    <form action="{{ route('admin.website.pages.update', $page->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT') {{-- Wajib untuk Update --}}
        
        <div class="row">
            {{-- KOLOM KIRI: EDITOR UTAMA --}}
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-purple">
                            <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-muted text-xs text-uppercase">Judul Halaman <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control form-control-lg border-0 bg-light shadow-sm @error('title') is-invalid @enderror" 
                                   value="{{ old('title', $page->title) }}" required style="border-radius: 10px;">
                            @error('title') <span class="invalid-feedback pl-2">{{ $message }}</span> @enderror
                        </div>

                        {{-- SUMMERNOTE --}}
                        <div class="form-group mt-4">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Isi Halaman <span class="text-danger">*</span></label>
                            <textarea id="summernote" name="content" class="form-control @error('content') is-invalid @enderror">{{ old('content', $page->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 --}}
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-dark">
                            <i class="fas fa-image mr-2 text-muted"></i> Media
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Gambar Utama</label>
                            
                            {{-- Preview Image --}}
                            <div class="text-center mb-3 p-1 border rounded bg-light position-relative" style="border-radius: 10px !important; overflow: hidden;">
                                @if($page->featured_image)
                                    <img id="previewImg" src="{{ asset('storage/' . $page->featured_image) }}" 
                                         alt="Preview" class="img-fluid" style="width: 100%; height: 180px; object-fit: cover; border-radius: 8px;">
                                @else
                                    <img id="previewImg" src="https://via.placeholder.com/400x200?text=No+Image" 
                                         alt="Preview" class="img-fluid" style="width: 100%; height: 180px; object-fit: cover; border-radius: 8px;">
                                @endif
                            </div>

                            <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: 10px;">Ganti File...</label>
                            </div>
                            <small class="text-muted d-block mt-2">Biarkan kosong jika tidak ingin mengubah gambar.</small>
                            @error('featured_image') <span class="text-danger text-xs font-weight-bold">{{ $message }}</span> @enderror
                        </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-purple btn-block font-weight-bold shadow-sm rounded-pill py-2 mb-2">
                            <i class="fas fa-save mr-2"></i> Simpan Perubahan
                        </button>
                        <a href="{{ route('admin.website.pages.index') }}" class="btn btn-light btn-block font-weight-bold text-muted shadow-sm rounded-pill py-2 border">
                            <i class="fas fa-arrow-left mr-2"></i> Batal
                        </a>
                    </div>
                </div>

                {{-- CARD INFO META --}}
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-body py-3 text-xs text-muted">
                        <div class="d-flex justify-content-between mb-2">
                            <span><i class="fas fa-calendar-plus mr-1"></i> Dibuat:</span>
                            <span class="font-weight-bold text-dark">{{ $page->created_at->format('d M Y') }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span><i class="fas fa-clock mr-1"></i> Update Terakhir:</span>
                            <span class="font-weight-bold text-dark">{{ $page->updated_at->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>

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

@push('css')
<style>
    /* Tema Ungu Apex Modern */
    .text-purple { color: #6f42c1 !important; }
    .bg-light-purple { background-color: #f2eefa; }
    .btn-purple { 
        background-color: #6f42c1; 
        color: white; 
        border: none;
        transition: all 0.3s;
    }
    .btn-purple:hover { 
        background-color: #5a32a3; 
        color: white; 
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    }

    /* Custom Input & Summernote */
    .form-control:focus { box-shadow: none; border-color: #6f42c1; }
    .note-editor.card { margin-bottom: 0; box-shadow: none !important; border: 1px solid #ebedf3 !important; }
    .custom-file-label::after { content: "Browse"; background-color: #f8f9fa; color: #5e6278; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        // 1. Summernote Init
        $('#summernote').summernote({
            height: 350,
            placeholder: 'Tulis isi halaman lengkap di sini...',
            border: false,
            toolbar: [
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['fullscreen', 'codeview']]
            ],
            callbacks: {
                onInit: function() {
                    $('.note-editor').addClass('border-0 shadow-sm').css('border-radius', '10px');
                    $('.note-toolbar').addClass('bg-light border-bottom-0').css('border-radius', '10px 10px 0 0');
                    $('.note-statusbar').addClass('bg-light').css('border-radius', '0 0 10px 10px');
                }
            }
        });

        // 2. Custom File Input
        bsCustomFileInput.init();

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