@extends('back-end.master.app')

@section('title', 'Create Post')

@section('pageCSS')
@endsection

@section('body')
<main class="app-content">
    <div class="card">
        <div class="card-header">
            <h4>Create New Post</h4>
        </div>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('posts.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-9">
                        <div class="form-group">
                            <label>Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Date <span class="text-danger">*</span></label>
                            <input type="date" name="date" class="form-control" value="{{ old('date', date('Y-m-d')) }}" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Category <span class="text-danger">*</span></label>
                            <select name="cat_id" class="form-control select2" required>
                                <option value="">-- Select Category --</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('cat_id') == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Language <span class="text-danger">*</span></label>
                            <select name="language_id" class="form-control select2" required>
                                <option value="">-- Select Language --</option>
                                @foreach ($languages as $lang)
                                    <option value="{{ $lang->id }}" {{ old('language_id') == $lang->id ? 'selected' : '' }}>
                                        {{ $lang->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-9">
                        <div class="form-group">
                            <label>Meta Description <span class="text-danger">*</span></label>
                            <input type="text" name="meta_desc" class="form-control" value="{{ old('meta_desc') }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event)">
                            <img id="imagePreview" src="#" alt="Preview" style="max-width: 100%; max-height: 150px; display: none; margin-top:10px;">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Meta Keywords <span class="text-danger">*</span></label>
                            <input type="text" name="meta_keyword" class="form-control" value="{{ old('meta_keyword') }}" required>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Content <span class="text-danger">*</span></label>
                            <textarea id="details" name="details" rows="10" class="form-control">{{ old('details') }}</textarea>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a href="{{ route('posts.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    // Initialize Select2
    $('.select2').select2();

    // Initialize CKEditor
    ClassicEditor.create(document.querySelector('#details')).catch(error => {
        console.error(error);
    });

    // Image preview
    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function(){
            const output = document.getElementById('imagePreview');
            output.src = reader.result;
            output.style.display = 'block';
        }
        reader.readAsDataURL(event.target.files[0]);
    }

    // Active menu
    $(".app-menu").removeClass("active");
    $("#nav_stocki").addClass("active");
    $("#stocki").addClass("is-expanded");
    $("#posts").addClass("active");
</script>
@endsection
