@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-[#F8FAFC] flex items-center justify-center p-4">
    <div class="w-full max-w-2xl bg-white rounded-[3rem] shadow-2xl shadow-purple-100/50 p-12 relative overflow-hidden">
        
        {{-- Decorative Circle --}}
        <div class="absolute -top-10 -right-10 w-32 h-32 bg-purple-50 rounded-full opacity-50"></div>

        <div class="relative">
            <h2 class="text-4xl font-black italic tracking-tighter text-purple-950 uppercase mb-1">Create Department</h2>
            <p class="text-[10px] font-bold text-purple-400 uppercase tracking-[0.2em] mb-12">Organize your workforce structure</p>

            <form action="{{ route('admin.departments.store') }}" method="POST" class="space-y-8">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- 1. DEPARTMENT NAME --}}
                    <div class="space-y-2">
                        <label class="text-[9px] font-black uppercase tracking-widest text-purple-300 ml-4">Department Name</label>
                        <input type="text" name="name" required placeholder="e.g. IT Department" 
                            class="w-full bg-[#F8FAFC] border-none rounded-2xl px-6 py-5 text-sm font-bold text-purple-900 focus:ring-2 focus:ring-purple-500 placeholder:text-gray-300 shadow-sm">
                    </div>

                    {{-- 2. DEPARTMENT CODE --}}
                    <div class="space-y-2">
                        <label class="text-[9px] font-black uppercase tracking-widest text-purple-300 ml-4">Department Code</label>
                        <input type="text" name="code" required placeholder="e.g. IT" 
                            class="w-full bg-[#F8FAFC] border-none rounded-2xl px-6 py-5 text-sm font-bold text-purple-900 focus:ring-2 focus:ring-purple-500 placeholder:text-gray-300 shadow-sm">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- 3. MANAGER --}}
                    <div class="space-y-2">
                        <label class="text-[9px] font-black uppercase tracking-widest text-purple-300 ml-4">Department Manager</label>
                        <select name="manager_id" class="w-full bg-[#F8FAFC] border-none rounded-2xl px-6 py-5 text-sm font-bold text-purple-900 focus:ring-2 focus:ring-purple-500 appearance-none shadow-sm">
                            <option value="">Choose Manager...</option>
                            @foreach($managers as $manager)
                                <option value="{{ $manager->id }}">{{ $manager->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- 4. STATUS --}}
                    <div class="space-y-2">
                        <label class="text-[9px] font-black uppercase tracking-widest text-purple-300 ml-4">Department Status</label>
                        <select name="status" required class="w-full bg-[#F8FAFC] border-none rounded-2xl px-6 py-5 text-sm font-bold text-purple-900 focus:ring-2 focus:ring-purple-500 appearance-none shadow-sm">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>

                {{-- SUBMIT BUTTON --}}
                <div class="pt-4">
                    <button type="submit" class="w-full bg-[#6B21A8] text-white py-6 rounded-2xl font-black uppercase italic tracking-[0.3em] text-xs hover:bg-purple-600 transition-all shadow-xl shadow-gray-200">
                        Create Department
                    </button>
                    <div class="text-center mt-6">
                        <a href="{{ route('admin.departments.index') }}" class="text-[9px] font-black uppercase tracking-widest text-gray-300 hover:text-purple-500 no-underline transition-colors">View All Departments</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection