@extends('layouts.app')

@section('header')
<div class="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
  <div class="flex items-center gap-3">
    <div class="h-9 w-9 rounded-xl bg-slate-900 text-white grid place-items-center text-sm font-bold">AD</div>
    <div>
      <div class="font-semibold">Add Department</div>
      <div class="text-xs text-slate-500">Create a new department</div>
    </div>
  </div>
  <a href="{{ route('admin.departments.index') }}" class="rounded-lg border px-4 py-2.5">Back</a>
</div>
@endsection

@section('sidebar')
<nav class="p-4">
  <div class="text-xs uppercase tracking-wider text-slate-400 mb-3">Admin</div>
  <a href="{{ route('admin.departments.index') }}" class="block px-3 py-2 rounded-lg hover:bg-slate-50">Departments</a>
  <a class="block px-3 py-2 rounded-lg bg-slate-50 font-medium">Add Department</a>
</nav>
@endsection

@section('content')
@if ($errors->any())
  <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-red-700">
    {{ $errors->first() }}
  </div>
@endif

<form method="POST" action="{{ route('admin.departments.store') }}" class="bg-white rounded-2xl border shadow-sm p-6 max-w-xl">
  @csrf
  <div class="grid gap-4">
    <div>
      <label class="block text-sm font-medium mb-1">Name</label>
      <input name="name" value="{{ old('name') }}" required
             class="w-full rounded-xl border-slate-300 focus:border-brand-500 focus:ring-brand-500"
             placeholder="e.g., IT Department">
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Color (optional)</label>
      <input name="color" value="{{ old('color') }}" placeholder="#2f8bff"
             class="w-full rounded-xl border-slate-300 focus:border-brand-500 focus:ring-brand-500">
      <p class="text-xs text-slate-500 mt-1">Hex color used for badges.</p>
    </div>
    <div class="pt-2">
      <button class="rounded-xl bg-brand-500 hover:bg-brand-600 text-white px-5 py-2.5 font-medium">
        Create Department
      </button>
    </div>
  </div>
</form>
@endsection
