@extends('layouts.app')

@section('title', 'Edit Halaman')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0">
                        <i class="fas fa-edit"></i>
                        Edit Halaman: {{ $halamen->judul ?? 'Unknown' }}
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('halamen.update', $halamen) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="judul" class="form-label">Judul Halaman <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('judul') is-invalid @enderror" id="judul" name="judul" value="{{ old('judul', $halamen->judul) }}" required>
                                @error('judul')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="slug" class="form-label">Slug</label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug', $halamen->slug) }}" placeholder="Auto generate dari judul">
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="konten" class="form-label">Konten <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('konten') is-invalid @enderror" id="konten" name="konten" rows="15" required>{{ old('konten', $halamen->konten) }}</textarea>
                            @error('konten')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Gunakan editor di atas untuk memformat konten dengan mudah.</small>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status">
                                    <option value="draft" {{ old('status', $halamen->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published" {{ old('status', $halamen->status) == 'published' ? 'selected' : '' }}>Published</option>
                                    <option value="archived" {{ old('status', $halamen->status) == 'archived' ? 'selected' : '' }}>Archived</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="kategori_id" class="form-label">Kategori</label>
                                <select class="form-select @error('kategori_id') is-invalid @enderror" id="kategori_id" name="kategori_id">
                                    <option value="">-- Pilih Kategori --</option>
                                    @if(isset($kategoris))
                                        @foreach($kategoris as $kategori)
                                            <option value="{{ $kategori->id }}" {{ old('kategori_id', $halamen->kategori_id) == $kategori->id ? 'selected' : '' }}>
                                                {{ $kategori->breadcrumb }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                @error('kategori_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="urutan" class="form-label">Urutan</label>
                                <input type="number" class="form-control @error('urutan') is-invalid @enderror" id="urutan" name="urutan" value="{{ old('urutan', $halamen->urutan) }}" min="0">
                                @error('urutan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="template" class="form-label">Template</label>
                                <input type="text" class="form-control @error('template') is-invalid @enderror" id="template" name="template" value="{{ old('template', $halamen->template) }}" placeholder="default">
                                @error('template')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="meta_description" class="form-label">Meta Description</label>
                                <textarea class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" name="meta_description" rows="3">{{ old('meta_description', $halamen->meta_description) }}</textarea>
                                @error('meta_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="meta_keywords" class="form-label">Meta Keywords</label>
                                <textarea class="form-control @error('meta_keywords') is-invalid @enderror" id="meta_keywords" name="meta_keywords" rows="3" placeholder="keyword1, keyword2, keyword3">{{ old('meta_keywords', $halamen->meta_keywords) }}</textarea>
                                @error('meta_keywords')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="show_in_menu" name="show_in_menu" value="1" {{ old('show_in_menu', $halamen->show_in_menu) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_in_menu">
                                        Tampilkan di Menu
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Space for future fields -->
                            </div>
                        </div>

                        <!-- Paket Internet Section -->
                        @if(isset($paketInternet) && $paketInternet->count() > 0)
                        <div class="mb-4">
                            <h6 class="mb-3">
                                <i class="fas fa-wifi text-primary"></i>
                                Paket Internet (Klik untuk Insert ke Konten)
                            </h6>
                            <div class="row">
                                @foreach($paketInternet as $paket)
                                <div class="col-md-4 mb-2">
                                    <div class="card border-info cursor-pointer paket-card" 
                                         data-nama="{{ $paket->nama_layanan }}"
                                         data-kecepatan="{{ $paket->kecepatan_download }}/{{ $paket->kecepatan_upload }}"
                                         data-harga="{{ number_format($paket->harga_bulan, 0, ',', '.') }}"
                                         data-durasi="30"
                                         onclick="insertPaketToContent(this)">
                                        <div class="card-body p-2">
                                            <small class="fw-bold text-primary">{{ $paket->nama_layanan }}</small><br>
                                            <small class="text-muted">{{ $paket->kecepatan_download }}/{{ $paket->kecepatan_upload }} Mbps</small><br>
                                            <small class="text-success fw-bold">Rp {{ number_format($paket->harga_bulan, 0, ',', '.') }}/bulan</small>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="gambar_featured" class="form-label">Gambar Featured</label>
                                <input type="file" class="form-control @error('gambar_featured') is-invalid @enderror" id="gambar_featured" name="gambar_featured" accept="image/*">
                                @error('gambar_featured')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Format: JPG, PNG, GIF. Maksimal 2MB. Kosongkan jika tidak ingin mengubah gambar.</small>
                            </div>
                            <div class="col-md-6">
                                @if($halamen->gambar_featured ?? false)
                                <label class="form-label">Gambar Saat Ini</label>
                                <div>
                                    <img src="{{ asset('storage/' . $halamen->gambar_featured) }}" alt="{{ $halamen->judul }}" class="img-thumbnail" style="max-height: 100px;">
                                </div>
                                @endif
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update
                            </button>
                            <a href="{{ route('halamen.show', $halamen) }}" class="btn btn-info">
                                <i class="fas fa-eye"></i> Detail
                            </a>
                            <a href="{{ route('halamen.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.tox-tinymce {
    border-radius: 8px !important;
}
.tox .tox-toolbar {
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}
.paket-card {
    transition: all 0.3s ease;
    cursor: pointer;
}
.paket-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #0d6efd !important;
}
.cursor-pointer {
    cursor: pointer;
}
</style>
@endpush

@push('scripts')
<!-- Summernote CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-id-ID.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Summernote
    $('#konten').summernote({
        height: 400,
        lang: 'id-ID',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Segoe UI'],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
        styleTags: [
            'p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
        ],
        callbacks: {
            onImageUpload: function(files) {
                // Handle image upload
                for (let i = 0; i < files.length; i++) {
                    uploadImage(files[i]);
                }
            },
            onChange: function(contents, $editable) {
                // Auto-save functionality
                console.log('Content changed');
            }
        },
        placeholder: 'Tulis konten halaman di sini...',
        tabsize: 2,
        focus: false,
        disableResizeEditor: false
    });

    // Image upload function
    function uploadImage(file) {
        let reader = new FileReader();
        reader.onload = function(e) {
            $('#konten').summernote('insertImage', e.target.result, function($image) {
                $image.css('max-width', '100%');
                $image.css('height', 'auto');
                $image.addClass('img-fluid rounded');
            });
        };
        reader.readAsDataURL(file);
    }

    // Auto generate slug from title (only if slug is empty)
    $('#judul').on('input', function() {
        let currentSlug = $('#slug').val();
        if (!currentSlug || currentSlug === '') {
            let title = $(this).val();
            let slug = title.toLowerCase()
                .replace(/[^a-z0-9 -]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            $('#slug').val(slug);
        }
    });

    // Form validation
    $('form').on('submit', function(e) {
        // Update Summernote content to textarea
        $('#konten').summernote('triggerSave');
        
        // Check if content is empty
        var content = $('#konten').summernote('isEmpty');
        if (content) {
            e.preventDefault();
            alert('Konten tidak boleh kosong!');
            $('#konten').summernote('focus');
            return false;
        }
    });
});

// Function to insert paket internet into content
function insertPaketToContent(element) {
    var nama = $(element).data('nama');
    var kecepatan = $(element).data('kecepatan');
    var harga = $(element).data('harga');
    var durasi = $(element).data('durasi');
    
    var paketHtml = `
    <div class="alert alert-info border-start border-primary border-4 mb-3">
        <h5 class="alert-heading"><i class="fas fa-wifi me-2"></i>${nama}</h5>
        <p class="mb-2">
            <strong>Kecepatan:</strong> ${kecepatan} Mbps<br>
            <strong>Harga:</strong> Rp ${harga}/bulan<br>
            <strong>Durasi:</strong> ${durasi} hari
        </p>
        <hr>
        <p class="mb-0">
            <i class="fas fa-check-circle text-success me-1"></i> Cocok untuk kebutuhan internet rumah dan kantor<br>
            <i class="fas fa-check-circle text-success me-1"></i> Support streaming dan gaming<br>
            <i class="fas fa-check-circle text-success me-1"></i> Instalasi gratis dan dukungan 24/7
        </p>
    </div>
    `;
    
    // Insert into Summernote
    $('#konten').summernote('pasteHTML', paketHtml);
    
    // Show success message
    $(element).addClass('border-success');
    setTimeout(function() {
        $(element).removeClass('border-success');
    }, 1000);
}
</script>
@endpush