@extends('layouts.app')

@section('content')
<div class="container-fluid py-fluid">
    <!-- Page Header -->
    <div class="flex justify-between items-center mb-fluid">
        <div>
            <h1 class="text-fluid-2xl font-bold text-gray-800 dark:text-gray-100">Settings</h1>
            <p class="text-fluid-sm text-gray-600 dark:text-gray-400 mt-1">Manage your admin account credentials</p>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @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

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-fluid-lg">
        <!-- Add Admin Button -->
        <div class="col-span-1 lg:col-span-2 mb-fluid">
            <a href="{{ route('admin.add.form') }}" class="inline-block btn-fluid bg-indigo-600 text-white font-medium rounded-fluid hover:bg-indigo-700 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all">
                Add New Admin
            </a>
        </div>
        <!-- Profile Settings -->
        <div class="glass-effect rounded-fluid shadow-md p-fluid-lg">
            <h2 class="text-fluid-xl font-semibold text-gray-800 dark:text-gray-100 mb-fluid">
                <span class="inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    Profile Information
                </span>
            </h2>

            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                @method('PUT')

                <!-- Name -->
                <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', $user->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>

                <!-- Email -->
                <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', $user->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>

                <button 
                    type="submit" 
                    class="btn-fluid bg-purple-600 text-white font-medium rounded-fluid hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all"
                >
                    Update Profile
                </button>
            </form>
        </div>

        <!-- Password Change -->
        <div class="glass-effect rounded-fluid shadow-md p-fluid-lg">
            <h2 class="text-fluid-xl font-semibold text-gray-800 dark:text-gray-100 mb-fluid">
                <span class="inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                    </svg>
                    Change Password
                </span>
            </h2>

            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                @method('PUT')

                <!-- Current Password -->
                <div class="mb-fluid">
                    <label for="current_password" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">
                        Current Password
                    </label>
                    <input 
                        type="password" 
                        name="current_password" 
                        id="current_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"
                        placeholder="Enter current password"
                    >
                    <p class="text-fluid-xs text-gray-500 dark:text-gray-400 mt-1">Required only if changing password</p>
                </div>

                <!-- New Password -->
                <div class="mb-fluid">
                    <label for="new_password" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">
                        New Password
                    </label>
                    <input 
                        type="password" 
                        name="new_password" 
                        id="new_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"
                        placeholder="Enter new password (min 8 characters)"
                    >
                </div>

                <!-- Confirm New Password -->
                <div class="mb-fluid">
                    <label for="new_password_confirmation" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">
                        Confirm New Password
                    </label>
                    <input 
                        type="password" 
                        name="new_password_confirmation" 
                        id="new_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"
                        placeholder="Confirm new password"
                    >
                </div>

                <button 
                    type="submit" 
                    class="btn-fluid bg-indigo-600 text-white font-medium rounded-fluid hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all"
                >
                    Change Password
                </button>
            </form>
        </div>
    </div>

    <!-- Account Info -->
    <div class="mt-fluid-lg">
        <div class="glass-effect rounded-fluid shadow-md p-fluid-lg">
            <h2 class="text-fluid-xl font-semibold text-gray-800 mb-fluid">
                <span class="inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Account Information
                </span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-fluid">
                <div class="p-fluid bg-gray-50 rounded-fluid">
                    <p class="text-fluid-xs text-gray-500 uppercase tracking-wide">User ID</p>
                    <p class="text-fluid-base font-medium text-gray-800 mt-1">#{{ $user->id }}</p>
                </div>
                <div class="p-fluid bg-gray-50 rounded-fluid">
                    <p class="text-fluid-xs text-gray-500 uppercase tracking-wide">Created At</p>
                    <p class="text-fluid-base font-medium text-gray-800 mt-1">{{ $user->created_at->format('M d, Y') }}</p>
                </div>
                <div class="p-fluid bg-gray-50 rounded-fluid">
                    <p class="text-fluid-xs text-gray-500 uppercase tracking-wide">Last Updated</p>
                    <p class="text-fluid-base font-medium text-gray-800 mt-1">{{ $user->updated_at->format('M d, Y') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection