@extends('layouts.app')

@section('title', $article->exists ? 'Edit Article: ' . $article->title : 'Create Help Article')

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.knowledge.index') }}">Knowledge Base</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ $article->exists ? 'Edit' : 'Create' }}
                    </li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">
                {{ $article->exists ? 'Edit Help Article' : 'Create Help Article' }}
            </h1>
        </div>
        <div class="d-flex gap-2">
            @if($article->exists)
                <a href="{{ route('admin.knowledge.preview', $article) }}" class="btn btn-sm btn-info" target="_blank">
                    <i class="fas fa-external-link-alt me-1"></i> Preview
                </a>
            @endif
            <a href="{{ route('admin.knowledge.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- Error Alert --}}
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Form --}}
    <form
        method="POST"
        action="{{ $article->exists
            ? route('admin.knowledge.update', $article)
            : route('admin.knowledge.store') }}"
        id="articleForm"
    >
        @csrf

        @if($article->exists)
            @method('PUT')
        @endif

        <div class="row g-4">
            {{-- Main Content --}}
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h6 class="fw-700 mb-3"><i class="fas fa-edit me-2 text-primary"></i>Article Content</h6>

                        {{-- Title --}}
                        <div class="mb-3">
                            <label for="title" class="form-label fw-600">
                                Title <span class="text-danger">*</span>
                            </label>
                            <input
                                id="title"
                                type="text"
                                name="title"
                                class="form-control @error('title') is-invalid @enderror"
                                value="{{ old('title', $article->title) }}"
                                required
                                maxlength="500"
                                placeholder="Enter article title"
                            >
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Slug --}}
                        <div class="mb-3">
                            <label for="slug" class="form-label fw-600">Slug</label>
                            <div class="input-group">
                                <span class="input-group-text">/help/</span>
                                <input
                                    id="slug"
                                    type="text"
                                    name="slug"
                                    class="form-control @error('slug') is-invalid @enderror"
                                    value="{{ old('slug', $article->slug) }}"
                                    maxlength="500"
                                    placeholder="auto-generated from title"
                                >
                            </div>
                            <small class="text-muted">Leave blank to auto-generate from title</small>
                            @error('slug')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Content --}}
                        <div class="mb-3">
                            <label for="content" class="form-label fw-600">
                                Content <span class="text-danger">*</span>
                            </label>
                            <textarea
                                id="content"
                                name="content"
                                class="form-control @error('content') is-invalid @enderror"
                                rows="15"
                                required
                                placeholder="Write your help article content here..."
                            >{{ old('content', $article->content) }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                {{-- Publish Settings --}}
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <h6 class="fw-700 mb-3"><i class="fas fa-cog me-2 text-primary"></i>Settings</h6>

                        {{-- Language --}}
                        <div class="mb-3">
                            <label for="lang_id" class="form-label fw-600">
                                Language <span class="text-danger">*</span>
                            </label>
                            <select
                                id="lang_id"
                                name="lang_id"
                                class="form-select @error('lang_id') is-invalid @enderror"
                                required
                            >
                                <option value="">Select Language</option>
                                @foreach($languages as $language)
                                    <option value="{{ $language->id }}"
                                        @selected(old('lang_id', $article->lang_id) == $language->id)>
                                        {{ $language->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('lang_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Category --}}
                        <div class="mb-3">
                            <label for="category_id" class="form-label fw-600">
                                Category <span class="text-danger">*</span>
                            </label>
                            <select
                                id="category_id"
                                name="category_id"
                                class="form-select @error('category_id') is-invalid @enderror"
                                required
                            >
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}"
                                        @selected(old('category_id', $article->category_id) == $category->id)>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Content Order --}}
                        <div class="mb-3">
                            <label for="content_order" class="form-label fw-600">Content Order</label>
                            <input
                                id="content_order"
                                type="number"
                                name="content_order"
                                class="form-control @error('content_order') is-invalid @enderror"
                                value="{{ old('content_order', $article->content_order ?? 1) }}"
                                min="0"
                                max="32767"
                            >
                            <small class="text-muted">Lower numbers appear first</small>
                            @error('content_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>
                                {{ $article->exists ? 'Update Article' : 'Create Article' }}
                            </button>
                            <a href="{{ route('admin.knowledge.index') }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>

                @if($article->exists)
                    {{-- Article Info --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h6 class="fw-700 mb-3"><i class="fas fa-info-circle me-2 text-primary"></i>Article Info</h6>
                            <dl class="row mb-0 small">
                                <dt class="col-5 text-muted">Article ID</dt>
                                <dd class="col-7">#{{ $article->id }}</dd>

                                <dt class="col-5 text-muted">Created</dt>
                                <dd class="col-7">{{ $article->created_at?->format('M d, Y') ?? 'N/A' }}</dd>

                                <dt class="col-5 text-muted">Updated</dt>
                                <dd class="col-7">{{ $article->updated_at?->diffForHumans() ?? 'N/A' }}</dd>
                            </dl>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    textarea.form-control {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
    }
    #content {
        min-height: 400px;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from title
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');
    let slugManuallyEdited = false;

    if (titleInput && slugInput) {
        slugInput.addEventListener('input', function() {
            slugManuallyEdited = true;
        });

        titleInput.addEventListener('input', function() {
            if (!slugManuallyEdited && slugInput.value.trim() === '') {
                const slug = this.value
                    .toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-|-$/g, '')
                    .substring(0, 500);
                slugInput.value = slug;
            }
        });
    }
});
</script>
@endpush