@extends('layouts.app')

@section('title', 'Tạo bài viết mới - Laravel Lab 07')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0 fw-bold">
                    <i class="bi bi-plus-circle me-2"></i>Tạo Bài viết mới (POST {{ route('articles.store', [], false) }})
                </h5>
            </div>
            <div class="card-body p-4">
                @if($errors->any())
                    <x-alert type="danger" :dismissible="true">
                        <strong>Vui lòng kiểm tra lại dữ liệu nhập vào:</strong>
                        <ul class="mb-0 mt-1 ps-3">
                            @foreach($errors->all() as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                    </x-alert>
                @endif

                <form action="{{ route('articles.store') }}" method="POST" novalidate>
                    @csrf

                    <x-input
                        name="title"
                        label="Tiêu đề bài viết"
                        placeholder="Nhập tiêu đề bài viết (ít nhất 5 ký tự)..."
                        :required="true"
                    />

                    <div class="row">
                        <div class="col-md-6">
                            <x-input
                                name="slug"
                                label="Đường dẫn tĩnh (Slug - tùy chọn)"
                                placeholder="vi-du-tieu-de-bai-viet"
                            />
                        </div>
                        <div class="col-md-3">
                            <x-input
                                name="category"
                                label="Chuyên mục"
                                value="Laravel"
                                :required="true"
                            />
                        </div>
                        <div class="col-md-3">
                            <x-input
                                name="author"
                                label="Tác giả"
                                value="Hoàng Vũ"
                                :required="true"
                            />
                        </div>
                    </div>

                    <x-input
                        name="summary"
                        type="textarea"
                        rows="2"
                        label="Tóm tắt ngắn"
                        placeholder="Mô tả tóm tắt nội dung bài viết (10 - 500 ký tự)..."
                        :required="true"
                    />

                    <x-input
                        name="content"
                        type="textarea"
                        rows="6"
                        label="Nội dung chi tiết"
                        placeholder="Nhập nội dung đầy đủ của bài viết (tối thiểu 20 ký tự)..."
                        :required="true"
                    />

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('articles.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Hủy bỏ
                        </a>
                        <x-button type="submit" variant="primary" icon="bi-check2-circle">
                            Lưu bài viết mới
                        </x-button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Tự động gợi ý slug từ tiêu đề bài viết
    document.getElementById('title')?.addEventListener('input', function (e) {
        const slugInput = document.getElementById('slug');
        if (slugInput && !slugInput.dataset.touched) {
            slugInput.value = e.target.value
                .toLowerCase()
                .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                .replace(/đ/g, 'd')
                .replace(/[^a-z0-9\s-]/g, '')
                .trim()
                .replace(/\s+/g, '-');
        }
    });
</script>
@endpush