@extends('admin.layouts.admin')

@section('title', 'Changer le mot de passe - Admin KONTIXX')
@section('page-title', 'Changer le mot de passe')
@section('page-description', 'Modifiez votre mot de passe de manière sécurisée')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card-premium rounded-xl p-5">
        <div class="flex items-center mb-5">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mr-3 shadow-lg">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-900">Sécurité du compte</h2>
                <p class="text-xs text-gray-500 mt-0.5">Modifiez votre mot de passe pour renforcer la sécurité</p>
            </div>
        </div>

        <form action="{{ route('admin.change-password.update') }}" method="POST" class="space-y-4">
            @csrf

            {{-- MOT DE PASSE ACTUEL --}}
            <div>
                <label for="current_password" class="block text-xs font-semibold text-gray-700 mb-1.5">
                    Mot de passe actuel
                </label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <input type="password" 
                           id="current_password" 
                           name="current_password" 
                           required
                           autofocus
                           class="input-premium w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('current_password') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror"
                           placeholder="Entrez votre mot de passe actuel">
                </div>
                @error('current_password')
                    <p class="mt-1.5 text-xs text-red-600 flex items-center">
                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ $message }}
                    </p>
                @enderror
            </div>

            {{-- NOUVEAU MOT DE PASSE --}}
            <div>
                <label for="password" class="block text-xs font-semibold text-gray-700 mb-1.5">
                    Nouveau mot de passe
                </label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                        </svg>
                    </div>
                    <input type="password" 
                           id="password" 
                           name="password" 
                           required
                           class="input-premium w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('password') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror"
                           placeholder="Entrez votre nouveau mot de passe">
                </div>
                @error('password')
                    <p class="mt-1.5 text-xs text-red-600 flex items-center">
                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ $message }}
                    </p>
                @enderror
                <p class="mt-1.5 text-xs text-gray-500">
                    Le mot de passe doit contenir au moins 8 caractères.
                </p>
            </div>

            {{-- CONFIRMATION DU NOUVEAU MOT DE PASSE --}}
            <div>
                <label for="password_confirmation" class="block text-xs font-semibold text-gray-700 mb-1.5">
                    Confirmer le nouveau mot de passe
                </label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <input type="password" 
                           id="password_confirmation" 
                           name="password_confirmation" 
                           required
                           class="input-premium w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm @error('password_confirmation') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror"
                           placeholder="Confirmez votre nouveau mot de passe">
                </div>
                @error('password_confirmation')
                    <p class="mt-1.5 text-xs text-red-600 flex items-center">
                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ $message }}
                    </p>
                @enderror
            </div>

            {{-- INFORMATIONS DE SÉCURITÉ --}}
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                <div class="flex items-start">
                    <svg class="w-4 h-4 text-blue-600 mr-2.5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div class="text-xs text-blue-800">
                        <p class="font-semibold mb-1">Conseils de sécurité :</p>
                        <ul class="list-disc list-inside space-y-0.5 text-blue-700">
                            <li>Utilisez un mot de passe unique et fort</li>
                            <li>Ne partagez jamais votre mot de passe</li>
                            <li>Changez régulièrement votre mot de passe</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- BOUTONS D'ACTION --}}
            <div class="flex items-center justify-end space-x-3 pt-3">
                <a href="{{ route('admin.dashboard') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all duration-300 font-semibold text-sm">
                    Annuler
                </a>
                <button type="submit" class="btn-premium px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center text-sm">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Modifier le mot de passe
                </button>
            </div>
        </form>
    </div>
</div>
@endsection