@extends('layouts.admin')

@section('title', 'Create News Article')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.news.index') }}" style="color:var(--text-muted); text-decoration:none;">News</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary); font-weight:600;">Create Article</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Create Article</h1>
    </div>
    <a href="{{ route('admin.news.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<form method="POST" action="{{ route('admin.news.store') }}" enctype="multipart/form-data">
    @csrf
    <div style="display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start;">

        <!-- Left: Content -->
        <div class="admin-card" style="margin-bottom:0;">
            <div class="admin-card-header">
                <span class="admin-card-title"><i class="fas fa-newspaper" style="color:var(--primary);margin-right:8px;"></i> Article Content</span>
            </div>
            <div class="admin-card-body">
                <div class="form-group">
                    <label class="form-label">Title <span style="color:var(--secondary);">*</span></label>
                    <input type="text" name="title" class="form-control" value="{{ old('title') }}" required placeholder="Article headline...">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Content <span style="color:var(--secondary);">*</span></label>
                    <textarea name="content" class="form-control" rows="14" placeholder="Write the article content here...">{{ old('content') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Right: Sidebar Settings -->
        <div style="display:flex; flex-direction:column; gap:24px;">

            <div class="admin-card" style="margin-bottom:0;">
                <div class="admin-card-header">
                    <span class="admin-card-title"><i class="fas fa-sliders-h" style="color:var(--secondary);margin-right:8px;"></i> Publish Settings</span>
                </div>
                <div class="admin-card-body">
                    <div class="form-group">
                        <label class="form-label">Category <span style="color:var(--secondary);">*</span></label>
                        <select name="category_id" class="form-control" required>
                            <option value="">Select category</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status <span style="color:var(--secondary);">*</span></label>
                        <select name="status" class="form-control" required>
                            <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                            <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        </select>
                    </div>

                    <div class="form-group" style="margin-bottom:0;">
                        <label style="display:flex; align-items:center; gap:10px; cursor:pointer; font-size:0.9rem; color:var(--text-main); font-weight:500;">
                            <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}
                                   style="width:16px; height:16px; accent-color:var(--primary);">
                            <span><i class="fas fa-star" style="color:#f59e0b; margin-right:4px;"></i> Featured Article</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Cover Image -->
            <div class="admin-card" style="margin-bottom:0;">
                <div class="admin-card-header">
                    <span class="admin-card-title"><i class="fas fa-image" style="color:var(--secondary);margin-right:8px;"></i> Cover Image</span>
                </div>
                <div class="admin-card-body">
                    <div id="imgDropZone"
                         style="border:2px dashed var(--border-color);border-radius:10px;padding:24px 16px;text-align:center;cursor:pointer;transition:var(--transition);background-color:var(--bg-color);"
                         onclick="document.getElementById('imgInput').click()"
                         onmouseenter="this.style.borderColor='var(--primary)'"
                         onmouseleave="this.style.borderColor='var(--border-color)'">
                        <div id="imgPreviewWrap">
                            <i class="fas fa-cloud-upload-alt" style="font-size:1.8rem;color:var(--text-muted);opacity:0.5;margin-bottom:6px;display:block;"></i>
                            <p style="font-size:0.85rem;color:var(--text-main);margin:0;font-weight:500;">Click to upload</p>
                            <p style="font-size:0.72rem;color:var(--text-muted);margin-top:3px;">JPEG, PNG, WEBP · Max 4MB</p>
                        </div>
                        <img id="imgPreviewImg" src="" alt="Preview" style="display:none;width:100%;height:140px;object-fit:cover;border-radius:8px;">
                    </div>
                    <input type="file" id="imgInput" name="image" accept="image/*" style="display:none;" onchange="previewImg(this)">
                </div>
            </div>

            <!-- Actions -->
            <div class="admin-card" style="margin-bottom:0;">
                <div class="admin-card-body">
                    <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; padding:12px; margin-bottom:12px;">
                        <i class="fas fa-paper-plane"></i> Publish Article
                    </button>
                    <a href="{{ route('admin.news.index') }}" class="btn btn-outline" style="width:100%; justify-content:center; padding:12px;">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

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