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

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

@section('pageCSS')
@endsection

@section('body')
<main class="app-content">
    <div class="card">
        <div class="card-header">
            <h4>Edit 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.update', $post->id) }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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', $post->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', $post->date) }}" 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', $post->category_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', $post->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', $post->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)">
                            @if($post->image && $post->image != 'image/noimage.jpg')
                                <img src="{{ asset('storage/'.$post->image) }}" alt="Current" style="max-width: 100%; max-height: 150px; margin-top:10px;">
                            @endif
                            <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', $post->meta_keywords) }}" 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', $post->body) }}</textarea>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">Update</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>
    $('.select2').select2();
    ClassicEditor.create(document.querySelector('#details')).catch(error => { console.error(error); });

    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]);
    }

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