@extends('admin.layouts.app')

@section('title', 'Tambah Kategori')
@section('page-title', 'Tambah Kategori Baru')
@section('page-subtitle', 'Buat kategori package baru')

@section('header-actions')
    <a href="{{ route('admin.category-packages.index') }}" class="btn-secondary">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Kembali
    </a>
@endsection

@section('content')
<div class="max-w-xl">
    <form method="POST" action="{{ route('admin.category-packages.store') }}">
        @csrf

        <div class="bg-white rounded-xl border border-slate-200 p-6">
            <h2 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                <span class="w-5 h-5 bg-brand-100 text-brand-600 rounded flex items-center justify-center text-xs">1</span>
                Informasi Kategori
            </h2>

            <div>
                <label class="form-label">Nama Kategori <span class="text-red-400">*</span></label>
                <input
                    type="text"
                    name="name"
                    value="{{ old('name') }}"
                    placeholder="Contoh: Wisata Alam"
                    autofocus
                    class="form-input @error('name') border-red-400 @enderror"
                >
                @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="flex items-center gap-2 mt-5 pt-5 border-t border-slate-100">
                <button type="submit" class="btn-primary">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                    </svg>
                    Simpan Kategori
                </button>
                <a href="{{ route('admin.category-packages.index') }}" class="btn-secondary">Batal</a>
            </div>
        </div>
    </form>
</div>
@endsection