@extends('layouts.dashboard')

@section('title', 'Create Admin')
@section('page-title', 'Create Admin')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="table-container">
            <div class="mb-4">
                <h5 class="mb-1">Create New Administrator</h5>
                <p class="text-muted mb-0">Add a new admin account with specified role and permissions</p>
            </div>

            <form action="{{ route('dashboard.admins.store') }}" method="POST">
                @csrf

                <div class="mb-4">
                    <label for="name" class="form-label fw-semibold">Full Name</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="email" class="form-label fw-semibold">Email Address</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                           id="email" name="email" value="{{ old('email') }}" required>
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="password" class="form-label fw-semibold">Password</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                           id="password" name="password" required minlength="8">
                    <div class="form-text">Minimum 8 characters</div>
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="role" class="form-label fw-semibold">Role</label>
                    <select class="form-select @error('role') is-invalid @enderror" id="role" name="role" required>
                        <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin (Limited Access)</option>
                        <option value="superadmin" {{ old('role') === 'superadmin' ? 'selected' : '' }}>Super Admin (Full Access)</option>
                    </select>
                    @error('role')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Role Description Boxes -->
                <div class="mb-4">
                    <div id="admin-description" class="alert" style="background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%); border: 1px solid rgba(79, 172, 254, 0.3);">
                        <h6 class="mb-2"><i class="bi bi-person-badge me-2"></i>Admin Role Features:</h6>
                        <ul class="mb-0 small">
                            <li>Create and manage users (up to defined limit)</li>
                            <li>View aggregated reports and analytics</li>
                            <li>Masked phone numbers and sensitive data</li>
                            <li>Cannot access system settings</li>
                            <li>Cannot manage other admins</li>
                        </ul>
                    </div>
                    <div id="superadmin-description" class="alert d-none" style="background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%); border: 1px solid rgba(240, 147, 251, 0.3);">
                        <h6 class="mb-2"><i class="bi bi-shield-check me-2"></i>Super Admin Role Features:</h6>
                        <ul class="mb-0 small">
                            <li><strong>Full access</strong> to all features</li>
                            <li>Create unlimited users</li>
                            <li>View full phone numbers and raw logs</li>
                            <li>Export data (CSV/Excel)</li>
                            <li>Manage system settings</li>
                            <li>Create and manage other admins</li>
                        </ul>
                    </div>
                </div>

                <div class="mb-4" id="max-users-field">
                    <label for="max_users" class="form-label fw-semibold">Maximum Users</label>
                    <input type="number" class="form-control @error('max_users') is-invalid @enderror" 
                           id="max_users" name="max_users" value="{{ old('max_users', 10) }}" min="0">
                    <div class="form-text">Maximum number of users this admin can create</div>
                    @error('max_users')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="d-flex gap-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-plus-lg me-2"></i>Create Admin
                    </button>
                    <a href="{{ route('dashboard.admins') }}" class="btn btn-outline-secondary">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('role').addEventListener('change', function() {
    const adminDesc = document.getElementById('admin-description');
    const superadminDesc = document.getElementById('superadmin-description');
    const maxUsersField = document.getElementById('max-users-field');
    
    if (this.value === 'superadmin') {
        adminDesc.classList.add('d-none');
        superadminDesc.classList.remove('d-none');
        maxUsersField.style.display = 'none';
    } else {
        adminDesc.classList.remove('d-none');
        superadminDesc.classList.add('d-none');
        maxUsersField.style.display = 'block';
    }
});
</script>
@endpush