@extends('backend.app')
@section('title', 'Create User')


@section('content')
    <div class="app-content content ">
        <div class="row">
            <div class="col-lg-6 m-auto">
                <form action="{{ route('user.store') }}" method="POST">@csrf
                    <div class="card card-body">
                        <h4 class="mb-4">User <span id="Categorytitle">Create</span></h4>

                        <!-- Admin Warning Alert (Hidden by default) -->
                        <div id="adminWarningAlert" class="alert alert-danger alert-dismissible fade" role="alert" style="display: none;">
                            <div class="d-flex align-items-center">
                                <i class="ri-error-warning-fill me-3" style="font-size: 24px;"></i>
                                <div>
                                    <strong>⚠️ WARNING: Full Admin Access</strong>
                                    <p class="mb-0 mt-2">You are about to create an admin user with <strong>FULL ACCESS</strong> to the entire admin panel. This user will be able to:</p>
                                    <ul class="mb-0 mt-2">
                                        <li>Manage all users and content</li>
                                        <li>Configure system settings</li>
                                        <li>Process payments and payouts</li>
                                        <li>Access all admin functions</li>
                                    </ul>
                                    <p class="mb-0 mt-2 fw-bold">Please ensure you trust this user completely.</p>
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>

                        <div class="row mb-2">
                            <label for="roleSelect" class="col-3 col-form-label">User Role</label>
                            <div class="col-9">
                                <select name="role" class="form-control" id="roleSelect">
                                    <option value="">-- Select User Role --</option>
                                    @foreach ($roles as $r)
                                    <option value="{{$r->name}}">{{$r->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="" class="col-3 col-form-label"><i>Name</i></label>
                            <div class="col-9">
                                <input type="text" name="name" class="form-control" placeholder="Name..." value="{{ old('name') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="" class="col-3 col-form-label"><i>Username</i></label>
                            <div class="col-9">
                                <input type="text" name="username" class="form-control" placeholder="username..." value="{{ old('username') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="" class="col-3 col-form-label"><i>Email</i></label>
                            <div class="col-9">
                                <input type="text" name="email" class="form-control" placeholder="email..." value="{{ old('email') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="" class="col-3 col-form-label"><i>Password</i></label>
                            <div class="col-9">
                                <input type="password" name="password" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="" class="col-3 col-form-label"><i>Confirm Password</i></label>
                            <div class="col-9">
                                <input type="password" name="password_confirmation" class="form-control" placeholder="">
                            </div>
                        </div>

                        <!-- Admin Password Verification (Hidden by default) -->
                        <div id="adminPasswordField" style="display: none;">
                            <div class="row mb-2">
                                <label for="adminPassword" class="col-3 col-form-label">
                                    <i class="ri-lock-fill"></i> Your Password <span class="text-danger">*</span>
                                </label>
                                <div class="col-9">
                                    <input type="password" name="admin_password" id="adminPassword" class="form-control"
                                        placeholder="Enter your admin password to confirm" title="Required to create admin user">
                                    <small class="text-muted">Enter your password to authorize this action</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="text-end">
                                    <button type="submit" class="btn btn-success mt-2">
                                        <i class="ri-save-line"></i> Create
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const roleSelect = $('#roleSelect');
            const adminWarningAlert = $('#adminWarningAlert');
            const adminPasswordField = $('#adminPasswordField');
            const adminPassword = $('#adminPassword');

            // Show/hide warning and password field based on role selection
            roleSelect.on('change', function() {
                const selectedRole = $(this).val();

                if (selectedRole.toLowerCase() === 'admin') {
                    adminWarningAlert.fadeIn(300);
                    adminPasswordField.fadeIn(300);
                    adminPassword.prop('required', true);
                } else {
                    adminWarningAlert.fadeOut(300);
                    adminPasswordField.fadeOut(300);
                    adminPassword.prop('required', false).val('');
                }
            });

            // Form submit validation
            $('form').on('submit', function(e) {
                const selectedRole = roleSelect.val();

                if (selectedRole.toLowerCase() === 'admin') {
                    if (!adminPassword.val()) {
                        e.preventDefault();
                        Swal.fire('Error', 'Admin password is required to create an admin user', 'error');
                        adminPassword.focus();
                        return false;
                    }
                }
            });
        });
    </script>
@endsection