@extends('admin.layouts.main')

@section('title', 'Tentang Kami - Admin Panel')

@section('content')
<div class="py-4">
    <h1 class="h3 mb-4">Tentang Kami</h1>
    
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Form Tentang Kami</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.about.update') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Judul <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title', $aboutUs->title ?? '') }}" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Konten <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('content') is-invalid @enderror" name="content" id="content" rows="10">{{ old('content', $aboutUs->content ?? '') }}</textarea>
                    @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Visi</label>
                    <textarea class="form-control @error('vision') is-invalid @enderror" name="vision" id="vision" rows="3">{{ old('vision', $aboutUs->vision ?? '') }}</textarea>
                    @error('vision')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Misi</label>
                    <textarea class="form-control @error('mission') is-invalid @enderror" name="mission" id="mission" rows="3">{{ old('mission', $aboutUs->mission ?? '') }}</textarea>
                    @error('mission')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Tahun Berdiri</label>
                        <input type="number" class="form-control @error('year_of_establishment') is-invalid @enderror" name="year_of_establishment" value="{{ old('year_of_establishment', $aboutUs->year_of_establishment ?? '') }}">
                        @error('year_of_establishment')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Total Siswa</label>
                        <input type="number" class="form-control @error('total_students') is-invalid @enderror" name="total_students" value="{{ old('total_students', $aboutUs->total_students ?? '') }}">
                        @error('total_students')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Total Instruktur</label>
                        <input type="number" class="form-control @error('total_trainers') is-invalid @enderror" name="total_trainers" value="{{ old('total_trainers', $aboutUs->total_trainers ?? '') }}">
                        @error('total_trainers')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Total Program</label>
                        <input type="number" class="form-control @error('total_programs') is-invalid @enderror" name="total_programs" value="{{ old('total_programs', $aboutUs->total_programs ?? '') }}">
                        @error('total_programs')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="d-flex">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-save me-2"></i>Simpan
                    </button>
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>Batal
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

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

@push('scripts')
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs5.min.js"></script>
<script>
    $(document).ready(function() {
        // Initialize Summernote for content field
        $('#content').summernote({
            height: 300,
            placeholder: 'Tulis konten tentang kami di sini...',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
            callbacks: {
                onImageUpload: function(files) {
                    // Handle image upload if needed
                    for (let i = 0; i < files.length; i++) {
                        uploadImage(files[i]);
                    }
                }
            }
        });
        
        // Initialize Summernote for vision field
        $('#vision').summernote({
            height: 150,
            placeholder: 'Tulis visi organisasi...',
            toolbar: [
                ['style', ['bold', 'italic', 'underline']],
                ['para', ['ul', 'ol']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ]
        });
        
        // Initialize Summernote for mission field
        $('#mission').summernote({
            height: 150,
            placeholder: 'Tulis misi organisasi...',
            toolbar: [
                ['style', ['bold', 'italic', 'underline']],
                ['para', ['ul', 'ol']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ]
        });
        
        // Function to upload image (optional)
        function uploadImage(file) {
            let data = new FormData();
            data.append("file", file);
            
            // You can implement image upload to server here
            // For now, we'll use base64
            let reader = new FileReader();
            reader.onloadend = function() {
                $('#content').summernote('insertImage', reader.result);
            }
            reader.readAsDataURL(file);
        }
    });
</script>
@endpush
@endsection