@extends('donamarmita-admin')
@section('title', 'Alteração de Password Obrigatória')
@section('content')

<div class="right_col" role="main" style="min-height: 100vh;">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8 col-sm-8" style="padding-left: 30px;">
                        <div class="page-title">
                            <h1><i class="fa fa-shield text-warning"></i> Alteração de Password Obrigatória</h1>
                            <p class="text-muted">Por questões de segurança, deve alterar a sua password</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 text-right" style="padding-right: 35px;">
                        <div class="user-welcome">
                            <small>Bem-vindo,</small>
                            <strong>{{ auth()->user()->client->cli_first_name }} {{ auth()->user()->client->cli_last_name }}</strong>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <!-- Alertas de Segurança -->
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-warning alert-dismissible fade show">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4><i class="fa fa-exclamation-triangle"></i> Alteração de Password Requerida</h4>
                        <p class="mb-0">Por questões de segurança, é obrigatório alterar a password temporária fornecida antes de aceder ao sistema.</p>
                    </div>
                </div>
            </div>

            <!-- Painel Principal -->
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <div class="card shadow-sm border-warning">
                        <div class="card-header bg-white">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h3 class="mb-0 text-warning"><i class="fa fa-lock"></i> Nova Password</h3>
                                </div>
                                <div class="col-md-4 text-right">
                                    <span class="badge badge-warning badge-lg">Obrigatório</span>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <strong>Erro!</strong> Corrija os seguintes problemas:
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <p>{{ $message }}</p>
                            </div>
                            @endif

                            <form method="POST" action="{{ route('admin.update-password') }}" id="passwordForm">
                                @csrf
                                
                                <!-- Informações do Utilizador -->
                                <div class="user-info-card mb-4">
                                    <div class="media">
                                        <img src="{{ auth()->user()->avatar ? asset('images/profile/' . auth()->user()->avatar) : asset('images/profile/user-ava-md.jpg') }}" 
                                             alt="{{ auth()->user()->name }}" 
                                             class="img-circle mr-3" 
                                             width="60" 
                                             height="60">
                                        <div class="media-body">
                                            <h5 class="mt-0">{{ auth()->user()->client->cli_first_name }} {{ auth()->user()->client->cli_last_name }}</h5>
                                            <p class="text-muted mb-1">{{ auth()->user()->email }}</p>
                                            <small class="text-warning"><i class="fa fa-info-circle"></i> Primeiro acesso ao sistema</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Password Atual -->
                                <div class="form-group">
                                    <label for="current_password" class="font-weight-bold">
                                        <i class="fa fa-key text-warning"></i> Password Temporária *
                                    </label>
                                    <input type="password" class="form-control @error('current_password') is-invalid @enderror" 
                                           id="current_password" name="current_password" 
                                           placeholder="Insira a password temporária que recebeu" required>
                                    <small class="form-text text-muted">
                                        Password temporária fornecida no email de boas-vindas.
                                    </small>
                                    @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Nova Password -->
                                <div class="form-group">
                                    <label for="new_password" class="font-weight-bold">
                                        <i class="fa fa-lock text-success"></i> Nova Password *
                                    </label>
                                    <input type="password" class="form-control @error('new_password') is-invalid @enderror" 
                                           id="new_password" name="new_password" 
                                           placeholder="Crie uma nova password segura" required>
                                    <small class="form-text text-muted">
                                        Mínimo de 8 caracteres. Recomenda-se usar letras, números e símbolos.
                                    </small>
                                    @error('new_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Confirmar Nova Password -->
                                <div class="form-group">
                                    <label for="new_password_confirmation" class="font-weight-bold">
                                        <i class="fa fa-check-circle text-success"></i> Confirmar Nova Password *
                                    </label>
                                    <input type="password" class="form-control" 
                                           id="new_password_confirmation" name="new_password_confirmation" 
                                           placeholder="Repita a nova password" required>
                                </div>

                                <!-- Indicador de Força da Password -->
                                <div class="password-strength mb-4">
                                    <label class="font-weight-bold">Força da Password:</label>
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar" id="passwordStrengthBar" 
                                             role="progressbar" style="width: 0%; background-color: #dc3545;"></div>
                                    </div>
                                    <small class="form-text" id="passwordStrengthText">A password deve ter pelo menos 8 caracteres</small>
                                </div>

                                <!-- Requisitos da Password -->
                                <div class="password-requirements">
                                    <h6 class="font-weight-bold"><i class="fa fa-list-ul"></i> Requisitos da Password:</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="list-unstyled">
                                                <li id="reqLength" class="text-muted">
                                                    <i class="fa fa-circle" style="font-size: 8px;"></i>
                                                    Mínimo 8 caracteres
                                                </li>
                                                <li id="reqLowercase" class="text-muted">
                                                    <i class="fa fa-circle" style="font-size: 8px;"></i>
                                                    Letra minúscula
                                                </li>
                                                <li id="reqUppercase" class="text-muted">
                                                    <i class="fa fa-circle" style="font-size: 8px;"></i>
                                                    Letra maiúscula
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <ul class="list-unstyled">
                                                <li id="reqNumber" class="text-muted">
                                                    <i class="fa fa-circle" style="font-size: 8px;"></i>
                                                    Número
                                                </li>
                                                <li id="reqSpecial" class="text-muted">
                                                    <i class="fa fa-circle" style="font-size: 8px;"></i>
                                                    Carácter especial
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Ações do Formulário -->
                                <div class="form-footer mt-4">
                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <button type="submit" class="btn btn-success btn-lg" id="submitButton">
                                                <i class="fa fa-save"></i> Alterar Password e Entrar no Sistema
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Informações de Segurança -->
                    <div class="card mt-4">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fa fa-shield-alt text-info"></i> Dicas de Segurança</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fa fa-check text-success mr-2"></i>Use uma password única</li>
                                        <li><i class="fa fa-check text-success mr-2"></i>Evite informações pessoais</li>
                                        <li><i class="fa fa-check text-success mr-2"></i>Não reuse passwords antigas</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fa fa-check text-success mr-2"></i>Mude periodicamente</li>
                                        <li><i class="fa fa-check text-success mr-2"></i>Use um gestor de passwords</li>
                                        <li><i class="fa fa-check text-success mr-2"></i>Nunca partilhe a sua password</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.user-welcome {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 5px;
    border-left: 4px solid #2A3F54;
}

.user-info-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid #2A3F54;
}

.password-requirements li {
    margin-bottom: 5px;
    transition: color 0.3s;
}

.password-requirements .valid {
    color: #28a745;
    font-weight: bold;
}

.password-requirements .valid i {
    color: #28a745;
}

.badge-lg {
    font-size: 0.9em;
    padding: 8px 12px;
}

.card.border-warning {
    border-width: 2px !important;
}

.progress {
    background-color: #e9ecef;
    border-radius: 4px;
}

.btn-lg {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    const $passwordInput = $('#new_password');
    const $strengthBar = $('#passwordStrengthBar');
    const $strengthText = $('#passwordStrengthText');
    const $submitButton = $('#submitButton');
    
    // Elementos dos requisitos
    const $reqLength = $('#reqLength');
    const $reqLowercase = $('#reqLowercase');
    const $reqUppercase = $('#reqUppercase');
    const $reqNumber = $('#reqNumber');
    const $reqSpecial = $('#reqSpecial');

    function checkPasswordStrength(password) {
        let strength = 0;
        let requirements = {
            length: false,
            lowercase: false,
            uppercase: false,
            number: false,
            special: false
        };

        // Verificar comprimento
        if (password.length >= 8) {
            strength += 20;
            requirements.length = true;
            $reqLength.addClass('valid').removeClass('text-muted');
        } else {
            $reqLength.removeClass('valid').addClass('text-muted');
        }

        // Verificar letras minúsculas
        if (/[a-z]/.test(password)) {
            strength += 20;
            requirements.lowercase = true;
            $reqLowercase.addClass('valid').removeClass('text-muted');
        } else {
            $reqLowercase.removeClass('valid').addClass('text-muted');
        }

        // Verificar letras maiúsculas
        if (/[A-Z]/.test(password)) {
            strength += 20;
            requirements.uppercase = true;
            $reqUppercase.addClass('valid').removeClass('text-muted');
        } else {
            $reqUppercase.removeClass('valid').addClass('text-muted');
        }

        // Verificar números
        if (/[0-9]/.test(password)) {
            strength += 20;
            requirements.number = true;
            $reqNumber.addClass('valid').removeClass('text-muted');
        } else {
            $reqNumber.removeClass('valid').addClass('text-muted');
        }

        // Verificar caracteres especiais
        if (/[^A-Za-z0-9]/.test(password)) {
            strength += 20;
            requirements.special = true;
            $reqSpecial.addClass('valid').removeClass('text-muted');
        } else {
            $reqSpecial.removeClass('valid').addClass('text-muted');
        }

        // Atualizar barra de progresso e texto
        $strengthBar.css('width', strength + '%');
        
        if (strength < 40) {
            $strengthBar.css('background-color', '#dc3545');
            $strengthText.text('Password fraca').css('color', '#dc3545');
        } else if (strength < 80) {
            $strengthBar.css('background-color', '#ffc107');
            $strengthText.text('Password média').css('color', '#ffc107');
        } else {
            $strengthBar.css('background-color', '#28a745');
            $strengthText.text('Password forte').css('color', '#28a745');
        }

        // Verificar se todos os requisitos são cumpridos
        const allRequirementsMet = Object.values(requirements).every(req => req === true);
        
        if (allRequirementsMet) {
            $submitButton.prop('disabled', false);
        } else {
            $submitButton.prop('disabled', true);
        }
    }

    // Event listener para verificar a password em tempo real
    $passwordInput.on('input', function() {
        const password = $(this).val();
        checkPasswordStrength(password);
    });

    // Validação do formulário
    $('#passwordForm').on('submit', function(e) {
        const newPassword = $('#new_password').val();
        const confirmPassword = $('#new_password_confirmation').val();
        
        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert('As passwords não coincidem. Por favor, verifique.');
            $('#new_password_confirmation').focus();
        }
        
        if (newPassword.length < 8) {
            e.preventDefault();
            alert('A password deve ter pelo menos 8 caracteres.');
            $('#new_password').focus();
        }
    });

    // Inicializar estado do botão
    $submitButton.prop('disabled', true);
});
</script>
@endpush

@endsection