@extends('layouts.main')
@section('title', 'Edit 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; }
    .current-image {
        border-radius: 10px;
        max-height: 200px;
        object-fit: cover;
        margin-bottom: 10px;
    }
    .invalid-feedback { display: block; font-size: 0.82rem; }
</style>
@endsection

@section('content')
<div class="form-hero">
    <div class="container">
        <h1>EDIT POST</h1>
        <p>Update your post content</p>
    </div>
</div>

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

                <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', $post->title) }}">
                    @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', $post->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">{{ old('body', $post->body) }}</textarea>
                    @error('body')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="form-label">Cover Image</label>
                    @if($post->image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $post->image) }}" class="current-image" alt="Current image">
                        <p class="text-muted" style="font-size:0.82rem;">Upload a new image to replace it</p>
                    </div>
                    @endif
                    <input type="file" name="image" class="form-control @error('image') is-invalid @enderror" accept="image/*">
                    @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', $post->status) === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status', $post->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-check2-circle me-2"></i>Save Changes
                    </button>
                    <a href="{{ route('posts.show', $post) }}" class="btn-cancel">
                        <i class="bi bi-x-circle me-1"></i>Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection