@extends('layouts.main')
@section('title', 'Create Post – World Gymnastics')

@section('styles')
<style>
    .form-hero {
        background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d1b2a 100%);
        padding: 60px 0 40px;
    }
    .form-hero h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 2.2rem;
        color: #fff;
        letter-spacing: 3px;
    }
    .form-hero p { color: rgba(255,255,255,0.6); }
    .form-section {
        background: #f4f6fa;
        padding: 50px 0 80px;
    }
    .form-card {
        background: #fff;
        border-radius: 16px;
        padding: 40px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        max-width: 760px;
        margin: 0 auto;
    }
    .form-card .form-label {
        font-weight: 600;
        color: #1a1a3e;
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    .form-card .form-control,
    .form-card .form-select {
        border: 1.5px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.95rem;
        transition: border-color 0.2s;
    }
    .form-card .form-control:focus,
    .form-card .form-select:focus {
        border-color: #0d3b6e;
        box-shadow: 0 0 0 3px rgba(13,59,110,0.1);
    }
    .form-card textarea { min-height: 240px; resize: vertical; }
    .btn-submit {
        background: linear-gradient(135deg, #1a1a3e, #0d3b6e);
        color: #fff;
        border: none;
        padding: 12px 36px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: opacity 0.2s;
    }
    .btn-submit:hover { opacity: 0.85; color: #fff; }
    .btn-cancel {
        color: #666;
        font-size: 0.9rem;
        text-decoration: none;
    }
    .btn-cancel:hover { color: #333; }
    .image-preview-box {
        border: 2px dashed #d0d0d0;
        border-radius: 10px;
        padding: 24px;
        text-align: center;
        color: #aaa;
        font-size: 0.9rem;
        cursor: pointer;
        transition: border-color 0.2s;
    }
    .image-preview-box:hover { border-color: #0d3b6e; }
    .image-preview-box i { font-size: 2rem; display: block; margin-bottom: 8px; }
    .invalid-feedback { display: block; font-size: 0.82rem; }
</style>
@endsection

@section('content')
<div class="form-hero">
    <div class="container">
        <h1>CREATE POST</h1>
        <p>Share news, announcements, or articles</p>
    </div>
</div>

<div class="form-section">
    <div class="container">
        <div class="form-card">
            <form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
                @csrf

                <div class="mb-4">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                           value="{{ old('title') }}" placeholder="Enter post title…" autofocus>
                    @error('title')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="form-label">Category <span class="text-danger">*</span></label>
                    <select name="category" class="form-select @error('category') is-invalid @enderror">
                        @foreach(['News','Event','Results','Update'] as $cat)
                        <option value="{{ $cat }}" {{ old('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                        @endforeach
                    </select>
                    @error('category')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="form-label">Content <span class="text-danger">*</span></label>
                    <textarea name="body" class="form-control @error('body') is-invalid @enderror"
                              placeholder="Write your post content here…">{{ old('body') }}</textarea>
                    @error('body')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="form-label">Cover Image</label>
                    <div class="image-preview-box" onclick="document.getElementById('imageInput').click()">
                        <i class="bi bi-cloud-upload"></i>
                        Click to upload an image (JPG, PNG — max 2MB)
                    </div>
                    <input type="file" name="image" id="imageInput" class="d-none @error('image') is-invalid @enderror"
                           accept="image/*" onchange="previewImage(this)">
                    <img id="imagePreview" class="mt-3 rounded" style="max-width:100%;display:none;" alt="Preview">
                    @error('image')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-5">
                    <label class="form-label">Status <span class="text-danger">*</span></label>
                    <select name="status" class="form-select @error('status') is-invalid @enderror">
                        <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published</option>
                    </select>
                    @error('status')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="d-flex align-items-center gap-4">
                    <button type="submit" class="btn-submit">
                        <i class="bi bi-send me-2"></i>Publish Post
                    </button>
                    <a href="{{ route('posts.index') }}" class="btn-cancel">
                        <i class="bi bi-x-circle me-1"></i>Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function previewImage(input) {
    const preview = document.getElementById('imagePreview');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection