@extends('layouts.app')

@section('title', 'Edit Catatan - SIAKAD')
@section('page-title', 'Edit Catatan')

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Edit Catatan</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.catatan.update', $catatan) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label for="title" class="form-label">Judul Catatan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title', $catatan->title) }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Isi Catatan <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="4" required>{{ old('content', $catatan->content) }}</textarea>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Supports HTML tags</small>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="color" class="form-label">Warna</label>
                            <select class="form-select @error('color') is-invalid @enderror" id="color" name="color">
                                <option value="primary" {{ old('color', $catatan->color) == 'primary' ? 'selected' : '' }}>Biru (Primary)</option>
                                <option value="success" {{ old('color', $catatan->color) == 'success' ? 'selected' : '' }}>Hijau (Success)</option>
                                <option value="warning" {{ old('color', $catatan->color) == 'warning' ? 'selected' : '' }}>Kuning (Warning)</option>
                                <option value="danger" {{ old('color', $catatan->color) == 'danger' ? 'selected' : '' }}>Merah (Danger)</option>
                                <option value="info" {{ old('color', $catatan->color) == 'info' ? 'selected' : '' }}>Biru Muda (Info)</option>
                                <option value="secondary" {{ old('color', $catatan->color) == 'secondary' ? 'selected' : '' }}>Abu-abu (Secondary)</option>
                            </select>
                            @error('color')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="icon" class="form-label">Icon</label>
                            <select class="form-select @error('icon') is-invalid @enderror" id="icon" name="icon">
                                <option value="bi-info-circle" {{ old('icon', $catatan->icon) == 'bi-info-circle' ? 'selected' : '' }}>Info</option>
                                <option value="bi-exclamation-triangle" {{ old('icon', $catatan->icon) == 'bi-exclamation-triangle' ? 'selected' : '' }}>Warning</option>
                                <option value="bi-check-circle" {{ old('icon', $catatan->icon) == 'bi-check-circle' ? 'selected' : '' }}>Success</option>
                                <option value="bi-x-circle" {{ old('icon', $catatan->icon) == 'bi-x-circle' ? 'selected' : '' }}>Error</option>
                                <option value="bi-lightbulb" {{ old('icon', $catatan->icon) == 'bi-lightbulb' ? 'selected' : '' }}>Idea</option>
                                <option value="bi-megaphone" {{ old('icon', $catatan->icon) == 'bi-megaphone' ? 'selected' : '' }}>Pengumuman</option>
                                <option value="bi-calendar" {{ old('icon', $catatan->icon) == 'bi-calendar' ? 'selected' : '' }}>Kalender</option>
                                <option value="bi-clock" {{ old('icon', $catatan->icon) == 'bi-clock' ? 'selected' : '' }}>Jam</option>
                                <option value="bi-book" {{ old('icon', $catatan->icon) == 'bi-book' ? 'selected' : '' }}>Buku</option>
                                <option value="bi-star" {{ old('icon', $catatan->icon) == 'bi-star' ? 'selected' : '' }}>Star</option>
                                <option value="bi-heart" {{ old('icon', $catatan->icon) == 'bi-heart' ? 'selected' : '' }}>Heart</option>
                                <option value="bi-pin" {{ old('icon', $catatan->icon) == 'bi-pin' ? 'selected' : '' }}>Pin</option>
                            </select>
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="order" class="form-label">Urutan Tampil</label>
                            <input type="number" class="form-control @error('order') is-invalid @enderror" id="order" name="order" value="{{ old('order', $catatan->order) }}" min="0">
                            @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Angka kecil tampil lebih dulu</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ $catatan->is_active ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Aktif</label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>Simpan Perubahan
                        </button>
                        <a href="{{ route('admin.catatan.index') }}" class="btn btn-outline-secondary">
                            Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Preview</h5>
            </div>
            <div class="card-body">
                <div id="previewCatatan" class="catatan-preview border-start border-4 border-{{ $catatan->color }} rounded p-3">
                    <div class="d-flex align-items-start gap-3">
                        <div class="preview-icon bg-{{ $catatan->color }} text-white rounded p-2">
                            <i class="bi {{ $catatan->icon }}"></i>
                        </div>
                        <div>
                            <h6 class="mb-1" id="previewTitle">{{ $catatan->title }}</h6>
                            <p class="mb-0 text-muted small" id="previewContent">{!! Str::limit(strip_tags($catatan->content), 100) !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('title');
    const contentInput = document.getElementById('content');
    const colorSelect = document.getElementById('color');
    const iconSelect = document.getElementById('icon');

    function updatePreview() {
        document.getElementById('previewTitle').textContent = titleInput.value;
        document.getElementById('previewContent').textContent = contentInput.value;

        const color = colorSelect.value;
        const icon = iconSelect.value;

        const preview = document.getElementById('previewCatatan');
        preview.className = 'catatan-preview border-start border-4 border-' + color + ' rounded p-3';

        const iconDiv = preview.querySelector('.preview-icon');
        iconDiv.className = 'preview-icon bg-' + color + ' text-white rounded p-2';
        iconDiv.innerHTML = '<i class="bi ' + icon + '"></i>';
    }

    titleInput.addEventListener('input', updatePreview);
    contentInput.addEventListener('input', updatePreview);
    colorSelect.addEventListener('change', updatePreview);
    iconSelect.addEventListener('change', updatePreview);
});
</script>
@endpush

<style>
.catatan-preview {
    background: var(--gray-50);
}
.preview-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
</style>
@endsection