@extends('admin.layout.main')

@section('title', isset($user) ? 'Edit User' : 'Add User')

@section('content')
    <div class="content-header"></div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ isset($user) ? 'Edit User' : 'Add User' }}</h3>
                            <a href="{{ route('users.index') }}" class="btn btn-primary float-right">Back</a>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    @if(isset($user))
                                        {!! Form::model($user, ['route' => ['users.update', $user->id], 'method' => 'PUT']) !!}
                                    @else
                                        {!! Form::open(['route' => 'users.store', 'method' => 'POST']) !!}
                                    @endif

                                    <!-- Name -->
                                    <div class="form-group">
                                        {!! Form::label('name', 'Name') !!}
                                        {!! Form::text('name', null, ['class' => 'form-control', 'required']) !!}
                                    </div>

                                    <!-- Email -->
                                    <div class="form-group">
                                        {!! Form::label('email', 'Email') !!}
                                        {!! Form::email('email', null, ['class' => 'form-control', 'required']) !!}
                                    </div>

                                    <!-- Password -->
                                    <div class="form-group">
                                        {!! Form::label('password', 'Password') !!}
                                        {!! Form::password('password', ['class' => 'form-control', isset($user) ? '' : 'required', 'id' => 'password']) !!}
                                        @if(isset($user))
                                            <small class="form-text text-muted">Leave blank to keep current password</small>
                                        @endif
                                        <span id="password-strength-status"></span>
                                    </div>

                                    <!-- Confirm Password -->
                                    <div class="form-group">
                                        {!! Form::label('password_confirmation', 'Confirm Password') !!}
                                        {!! Form::password('password_confirmation', ['class' => 'form-control', 'id' => 'password_confirmation']) !!}
                                    </div>

                                    <!-- Gender & Wallet Balance -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('gender', 'Gender') !!}
                                                {!! Form::select('gender', ['male' => 'Male', 'female' => 'Female', 'other' => 'Other'], null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('wallet_balance', 'Wallet Balance') !!}
                                                {!! Form::number('wallet_balance', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Country Code & Mobile No -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('country_code', 'Country Code') !!}
                                                {!! Form::text('country_code', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('mobile_no', 'Mobile No') !!}
                                                {!! Form::text('mobile_no', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Address Fields -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('street_no', 'Street No') !!}
                                                {!! Form::text('street_no', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('street_name', 'Street Name') !!}
                                                {!! Form::text('street_name', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('city', 'City') !!}
                                                {!! Form::text('city', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                {!! Form::label('country', 'Country') !!}
                                                {!! Form::text('country', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Is Admin & Is Active -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="checkbox">
                                                    <label>
                                                        <input name="is_admin" type="checkbox" value="1" {{ isset($user) && $user->is_admin ? 'checked' : '' }}> Is Admin?
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="checkbox">
                                                    <label>
                                                        <input name="status" type="checkbox" value="active" {{ isset($user) && $user->status == 'active' ? 'checked' : '' }}> Is Active?
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Submit Button -->
                                    <button type="submit" class="btn btn-success">{{ isset($user) ? 'Update User' : 'Add User' }}</button>

                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Password Strength Indicator
        const passwordField = document.getElementById('password');
        const passwordStatus = document.getElementById('password-strength-status');
        const passwordConfirmationField = document.getElementById('password_confirmation');

        passwordField.addEventListener('input', function() {
            const password = passwordField.value;
            let strength = getPasswordStrength(password);

            passwordStatus.textContent = `Password Strength: ${strength}`;
            passwordStatus.className = `badge badge-${getStrengthClass(strength)}`;
        });

        passwordConfirmationField.addEventListener('input', function() {
            const password = passwordField.value;
            const confirmPassword = passwordConfirmationField.value;

            if (password !== confirmPassword) {
                passwordConfirmationField.setCustomValidity("Passwords do not match!");
            } else {
                passwordConfirmationField.setCustomValidity("");
            }
        });

        function getPasswordStrength(password) {
            let strength = "Weak";
            const regexWeak = /.{8,}/;
            const regexMedium = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/;
            const regexStrong = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/;

            if (regexStrong.test(password)) {
                strength = "Strong";
            } else if (regexMedium.test(password)) {
                strength = "Medium";
            } else if (regexWeak.test(password)) {
                strength = "Weak";
            }

            return strength;
        }

        function getStrengthClass(strength) {
            switch (strength) {
                case "Strong":
                    return "success";
                case "Medium":
                    return "warning";
                default:
                    return "danger";
            }
        }
    </script>
@endsection