@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Change Password') }}</div>
                <div class="card-body">

                    {{-- Success Message --}}
                    @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

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

                        {{-- Old Password --}}
                        <div class="form-group row">
                            <label for="old_password" class="col-md-4 col-form-label text-md-right">
                                {{ __('Old Password') }}
                            </label>

                            <div class="col-md-6">
                                <input id="old_password" type="password" class="form-control @error('old_password') is-invalid @enderror" name="old_password" required>

                                @error('old_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        {{-- New Password --}}
                        <div class="form-group row">
                            <label for="new_password" class="col-md-4 col-form-label text-md-right">
                                {{ __('New Password') }}
                            </label>

                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="new_password" type="password" class="form-control @error('new_password') is-invalid @enderror" name="new_password" required>

                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('new_password', this)" style="border-left: 0;">
                                            <span class="toggle-text">Show</span>
                                        </button>
                                    </div>
                                </div>

                                @error('new_password')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                                {{-- Generate / Copy Buttons --}}
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generatePassword()">
                                        Generate Password
                                    </button>

                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyPassword()">
                                        Copy
                                    </button>
                                    <span id="copy-feedback" class="text-success ml-2" style="display: none;">
                                        Copied!
                                    </span>
                                </div>
                            </div>
                        </div>

                        {{-- Confirm Password --}}
                        <div class="form-group row">
                            <label for="new_password_confirmation" class="col-md-4 col-form-label text-md-right">
                                {{ __('Confirm Password') }}
                            </label>

                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="new_password_confirmation" type="password" class="form-control @error('new_password_confirmation') is-invalid @enderror" name="new_password_confirmation" required>

                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('new_password_confirmation', this)" style="border-left: 0;">
                                            <span class="toggle-text">Show</span>
                                        </button>
                                    </div>
                                </div>

                                @error('new_password_confirmation')
                                <span class="invalid-feedback d-block" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        {{-- Password Rules --}}
                        <div class="form-group row">
                            <div class="col-md-6 offset-md-4">
                                <small class="text-muted">
                                    <ul class="mb-0 ps-3">
                                        <li>Your password must be a minimum of 16 characters in length.</li>
                                        <li>It must include at least one uppercase letter (A-Z).</li>
                                        <li>It must include at least one lowercase letter (a-z).</li>
                                        <li>It must contain at least one number (0-9).</li>
                                        <li>
                                            It must contain at least one special character from the following set:
                                            <code>#</code>, <code>$</code>, <code>%</code>, <code>&amp;</code>,
                                            <code>*</code>, <code>(</code>, <code>)</code>.
                                        </li>
                                        <li>Avoid using the same character consecutively 3 times, e.g.,
                                            <code>"aaa"</code> or <code>"111"</code>.
                                        </li>
                                        <li>Avoid sequential characters in the password (e.g.,
                                            <code>"abc"</code> or <code>"123"</code>).
                                        </li>
                                        <li>Your new password cannot match any of your last 3 passwords.</li>
                                    </ul>
                                </small>
                            </div>
                        </div>

                        {{-- Submit --}}
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Change Password') }}
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JS --}}
<script>
    function generatePassword() {
        const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        const lower = "abcdefghijklmnopqrstuvwxyz";
        const numbers = "0123456789";
        const special = "#$%&*()";
        const all = upper + lower + numbers + special;

        let password = "";

        // Ensure rule compliance
        password += upper[Math.floor(Math.random() * upper.length)];
        password += lower[Math.floor(Math.random() * lower.length)];
        password += numbers[Math.floor(Math.random() * numbers.length)];
        password += special[Math.floor(Math.random() * special.length)];

        while (password.length < 16) {
            password += all[Math.floor(Math.random() * all.length)];
        }

        password = password.split('').sort(() => 0.5 - Math.random()).join('');

        document.getElementById('new_password').value = password;
        document.getElementById('new_password_confirmation').value = password;
    }

    function copyPassword() {
        const passwordField = document.getElementById('new_password');
        if (!passwordField.value) return;

        // Modern approach using Clipboard API
        navigator.clipboard.writeText(passwordField.value).then(function() {
            // Show success feedback
            const feedback = document.getElementById('copy-feedback');
            feedback.style.display = 'inline';

            setTimeout(function() {
                feedback.style.display = 'none';
            }, 2000);
        }).catch(function(err) {
            // Fallback for older browsers
            passwordField.select();
            passwordField.setSelectionRange(0, 99999);
            try {
                document.execCommand("copy");
                const feedback = document.getElementById('copy-feedback');
                feedback.style.display = 'inline';
                setTimeout(function() {
                    feedback.style.display = 'none';
                }, 2000);
            } catch (e) {
                alert('Copy failed. Please copy manually.');
            }
        });
    }

    function togglePasswordVisibility(fieldId, button) {
        const field = document.getElementById(fieldId);
        const toggleText = button.querySelector('.toggle-text');

        if (field.type === 'password') {
            field.type = 'text';
            toggleText.textContent = 'Hide';
        } else {
            field.type = 'password';
            toggleText.textContent = 'Show';
        }
    }

</script>
@endsection