@extends('layouts.app')

@section('content')
<div class="container-fluid py-fluid">
    <div class="max-w-lg mx-auto glass-effect rounded-fluid shadow-lg p-fluid-lg">
        <h1 class="text-fluid-2xl font-bold text-gray-800 dark:text-gray-100 mb-fluid">Add New Admin</h1>
        @if (session('success'))
            <div class="mb-fluid bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-fluid p-fluid">
                <p class="text-fluid-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
            </div>
        @endif
        @if ($errors->any())
            <div class="mb-fluid bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-fluid p-fluid">
                <ul class="list-disc list-inside text-fluid-sm text-red-600 dark:text-red-300">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form method="POST" action="{{ route('admin.add') }}">
            @csrf
            <div class="mb-fluid">
                <label for="name" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">Full Name</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500" required>
            </div>
            <div class="mb-fluid">
                <label for="email" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">Email Address</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}" class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500" required>
            </div>
            <div class="mb-fluid">
                <label for="password" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">Password</label>
                <input type="password" name="password" id="password" class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500" required>
            </div>
            <div class="mb-fluid">
                <label for="password_confirmation" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">Confirm Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500" required>
            </div>
            <button type="submit" class="btn-fluid w-full bg-purple-600 text-white font-medium rounded-fluid hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all">Add Admin</button>
        </form>
    </div>
</div>
@endsection
