@extends('backend.layouts.app')
@section('title', 'Create Club')

@push('style')
<style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
    .image-preview-container {
        width: 100%;
        max-width: 300px;
        height: 200px;
        border: 2px dashed #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        overflow: hidden;
        border-radius: 8px;
        margin-top: 10px;
    }
    .image-preview-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        display: none;
    }
    .image-preview-text {
        color: #aaa;
        font-size: 14px;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">

            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Create New Club</h5>
                <a href="{{ route('admin.clubs.index') }}" class="btn btn-secondary btn-sm">
                    <i class="bx bx-arrow-back me-1"></i> Back to List
                </a>
            </div>

            <div class="card-body">

                <form action="{{ route('admin.clubs.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row">

                        <div class="col-md-12 mb-3">
                            <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   id="name" name="name" value="{{ old('name') }}"
                                   placeholder="Enter club name">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-4">
                            <label for="image" class="form-label">Feature Image <span class="text-danger">*</span></label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror"
                                   id="imageInput" name="image" accept="image/*" onchange="previewImage(event)">

                            <div class="image-preview-container mt-2">
                                <span class="image-preview-text">Image Preview</span>
                                <img id="previewImg" src="#" alt="Preview">
                            </div>

                            @error('image')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-4">
                            <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea name="description" id="description"
                                      class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <button type="submit" class="btn btn-primary px-5">Save
                            </button>
                        </div>

                    </div>
                </form>
                </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
    // 1. CKEditor Initialization
    ClassicEditor
        .create(document.querySelector('#description'), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'undo', 'redo' ]
        })
        .catch(error => {
            console.error(error);
        });

    // 2. Image Preview Function
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('previewImg');
            var text = document.querySelector('.image-preview-text');

            output.src = reader.result;
            output.style.display = 'block'; // ছবি দেখাও
            text.style.display = 'none';    // লেখা লুকাও
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endpush