@extends('layouts.app')

@section('title', 'Chỉnh sửa: ' . $article->title)

@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-warning-subtle text-dark py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">
                    <i class="bi bi-pencil-square me-2"></i>Chỉnh sửa Bài viết #{{ $article->id }}
                </h5>
                <span class="badge bg-dark">PUT {{ route('articles.update', $article, false) }}</span>
            </div>
            <div class="card-body p-4">
                @if($errors->any())
                    <x-alert type="danger" :dismissible="true">
                        <strong>Dữ liệu cập nhật chưa hợp lệ:</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.update', $article) }}" method="POST" novalidate>
                    @csrf
                    @method('PUT')

                    <x-input
                        name="title"
                        label="Tiêu đề bài viết"
                        :value="$article->title"
                        :required="true"
                    />

                    <div class="row">
                        <div class="col-md-6">
                            <x-input
                                name="slug"
                                label="Đường dẫn tĩnh (Slug)"
                                :value="$article->slug"
                                :required="true"
                            />
                        </div>
                        <div class="col-md-3">
                            <x-input
                                name="category"
                                label="Chuyên mục"
                                :value="$article->category"
                                :required="true"
                            />
                        </div>
                        <div class="col-md-3">
                            <x-input
                                name="author"
                                label="Tác giả"
                                :value="$article->author"
                                :required="true"
                            />
                        </div>
                    </div>

                    <x-input
                        name="summary"
                        type="textarea"
                        rows="2"
                        label="Tóm tắt ngắn"
                        :value="$article->summary"
                        :required="true"
                    />

                    <x-input
                        name="content"
                        type="textarea"
                        rows="6"
                        label="Nội dung chi tiết"
                        :value="$article->content"
                        :required="true"
                    />

                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <a href="{{ route('articles.show', $article) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Quay lại chi tiết
                        </a>
                        <x-button type="submit" variant="warning" icon="bi-save">
                            Cập nhật bài viết (PUT)
                        </x-button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection