@extends('layouts.admin')

@section('title', 'Add Role')
@section('header', 'Add New Role')

@section('content')
<div class="max-w-2xl mx-auto">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Roles', 'url' => route('admin.masters.roles.index')],
            ['name' => 'Add Role', 'url' => route('admin.masters.roles.create')]
        ]
    ])

    <div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
        <form action="{{ route('admin.masters.roles.store') }}" method="POST" class="p-8 space-y-6">
            @csrf
            
            <div class="space-y-2">
                <label for="name" class="text-sm font-semibold text-slate-700">Role Name</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
                    placeholder="e.g. Manager">
                @error('name')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="space-y-2">
                <label for="status" class="text-sm font-semibold text-slate-700">Status</label>
                <select name="status" id="status" required
                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                    <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Activate</option>
                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Deactivate</option>
                </select>
                @error('status')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="pt-4 flex flex-col sm:flex-row items-center gap-3">
                <button type="submit" class="w-full sm:w-auto px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors shadow-sm">
                    Save Role
                </button>
                <button type="submit" name="create_another" value="1" class="w-full sm:w-auto px-6 py-2.5 bg-white border border-slate-200 text-slate-700 font-semibold rounded-lg hover:bg-slate-50 transition-colors">
                    Save and Create Another
                </button>
                <a href="{{ route('admin.masters.roles.index') }}" class="w-full sm:w-auto px-6 py-2.5 bg-slate-100 text-slate-600 font-semibold rounded-lg hover:bg-slate-200 transition-colors text-center">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection