@extends('backoffice.authentification.layouts_auth.app_auth')
@section('content')

<div class="min-vh-100 d-flex align-items-center py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="container">
        <div class="row g-0 bg-white shadow-lg rounded-4 overflow-hidden" style="max-width: 1200px; margin: 0 auto;">
            <div class="col-lg-6 d-none d-lg-block position-relative">
                <div class="h-100" style="background: linear-gradient(rgb(109 130 222 / 15%), rgb(109 130 222 / 15%)), url('{{ asset('assets/img/hero/images.jpg') }}'); background-size: cover; background-position: center; min-height: 600px;">
                    <div class="position-absolute bottom-0 start-0 p-5 text-white">
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="p-4 p-md-5">
                    <div class="text-center mb-4">
                        <h2 class="h3 mb-3">تعيين كلمة المرور </h2>
                        <p class="text-muted">الرجاء إدخال كلمة المرور الجديدة</p>
                    </div>

                    @if(session('success'))
                        <div class="alert alert-success rounded-3 border-0 shadow-sm">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger rounded-3 border-0 shadow-sm">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form id="set-password-form" action="{{ route('admin.password.update', $utilisateur->id) }}" method="POST" novalidate>
                        @csrf
                        <input type="hidden" name="token" value="{{ request('token') }}">
                        <input type="hidden" name="email" value="{{ request('email') }}">
                        <div class="mb-4">
                            <label class="form-label fw-bold">كلمة المرور الجديدة</label>
                            <div class="position-relative">
                                <input type="password" id="password" name="mdp" class="form-control form-control-lg rounded-3 shadow-sm"
                                    style="direction: rtl; padding: 0.6rem 0.75rem; padding-right: 45px;" 
                                    placeholder="أدخل كلمة المرور الجديدة" 
                                    required 
                                    oninput="validatePassword()">
                                <span onclick="togglePassword('password', this)" 
                                    class="position-absolute top-50 end-0 translate-middle-y pe-3" 
                                    style="cursor: pointer;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                                    </svg>
                                </span>
                            </div>
                            @error('password')
                                <span class="text-danger small">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-bold">تأكيد كلمة المرور</label>
                            <div class="position-relative">
                                <input type="password" id="password_confirmation" name="mdp_confirmation" class="form-control form-control-lg rounded-3 shadow-sm"
                                    style="direction: rtl; padding: 0.6rem 0.75rem; padding-right: 45px;" 
                                    placeholder="أعد كتابة كلمة المرور" 
                                    required>
                                <span onclick="togglePassword('password_confirmation', this)" 
                                    class="position-absolute top-50 end-0 translate-middle-y pe-3" 
                                    style="cursor: pointer;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                                    </svg>
                                </span>
                            </div>
                            @error('password_confirmation')
                                <span class="text-danger small">{{ $message }}</span>
                            @enderror
							<div id="confirmHelp" class="small mt-2"></div>

                        </div>
                        <ul id="password-requirements" class="small mb-4" style="list-style: none; padding-right: 0;">
                            <li id="min-length" style="color: #dc3545;">✗ يجب أن تحتوي على 8 أحرف على الأقل</li>
                            <li id="uppercase" style="color: #dc3545;">✗ يجب أن تحتوي على حرف كبير واحد على الأقل</li>
                            <li id="lowercase" style="color: #dc3545;">✗ يجب أن تحتوي على حرف صغير واحد على الأقل</li>
                            <li id="special-char" style="color: #dc3545;">✗ يجب أن تحتوي على رمز خاص واحد على الأقل</li>
                        </ul>
                        <div class="mb-4">
                            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                            <span id="recaptcha-error" class="invalid-feedback" style="display: block;"></span>
                        </div>
                        <div class="d-flex justify-content-center mb-4">
                           <button id="setPasswordSubmit"
									class="btn btn-lg it-btn-orange rounded-3"
									type="submit"
									disabled
									aria-disabled="true">
                                <span class="d-flex align-items-center justify-content-center">
                                    تعيين كلمة المرور
                                    <svg width="16" height="16" viewBox="0 0 12 13" fill="none" class="ms-2"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                                            fill="white" />
                                    </svg>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* rule colors */
#password-requirements li { color: #6c757d; } /* fallback */
.pw-rule-valid { color: #198754 !important; } /* green */
.pw-rule-invalid { color: #dc3545 !important; } /* red */

/* disabled submit look */
[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
</style>

<script>
    // toggle eye: swaps input type and toggles svg path for eye/eye-slash
    function togglePassword(id, el) {
        const input = document.getElementById(id);
        const svg = el.querySelector('svg');
        if (!input || !svg) return;

        if (input.type === "password") {
            input.type = "text";
            // eye open paths
            svg.innerHTML = '<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>';
            svg.setAttribute('data-state','eye');
        } else {
            input.type = "password";
            // eye-slash paths (original)
            svg.innerHTML = '<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>';
            svg.setAttribute('data-state','eye-slash');
        }
        // keep focus in input so the eye doesn't jump
        input.focus();
    }

    document.addEventListener('DOMContentLoaded', function() {
        const pwd = document.getElementById('password');
        const conf = document.getElementById('password_confirmation');
        const submitBtn = document.getElementById('setPasswordSubmit');

        const minLengthEl = document.getElementById('min-length');
        const upperEl = document.getElementById('uppercase');
        const lowerEl = document.getElementById('lowercase');
        const specialEl = document.getElementById('special-char');
        const confirmHelp = document.getElementById('confirmHelp');

        // regex tests
        const reLen = /.{8,}/;
        const reUpper = /[A-Z]/;
        const reLower = /[a-z]/;
        const reSpecial = /[!@#$%^&*(),.?":{}|<>_\-\\[\]\\\/`~;+=()]/; // broader

        function checkRules(value) {
            return {
                len: reLen.test(value),
                upper: reUpper.test(value),
                lower: reLower.test(value),
                special: reSpecial.test(value)
            };
        }

        function updateRulesUI(state) {
            if (minLengthEl) {
                minLengthEl.classList.remove('pw-rule-valid','pw-rule-invalid');
                minLengthEl.classList.add(state.len ? 'pw-rule-valid' : 'pw-rule-invalid');
                minLengthEl.textContent = (state.len ? '✓ ' : '✗ ') + 'يجب أن تحتوي على 8 أحرف على الأقل';
            }
            if (upperEl) {
                upperEl.classList.remove('pw-rule-valid','pw-rule-invalid');
                upperEl.classList.add(state.upper ? 'pw-rule-valid' : 'pw-rule-invalid');
                upperEl.textContent = (state.upper ? '✓ ' : '✗ ') + 'يجب أن تحتوي على حرف كبير واحد على الأقل';
            }
            if (lowerEl) {
                lowerEl.classList.remove('pw-rule-valid','pw-rule-invalid');
                lowerEl.classList.add(state.lower ? 'pw-rule-valid' : 'pw-rule-invalid');
                lowerEl.textContent = (state.lower ? '✓ ' : '✗ ') + 'يجب أن تحتوي على حرف صغير واحد على الأقل';
            }
            if (specialEl) {
                specialEl.classList.remove('pw-rule-valid','pw-rule-invalid');
                specialEl.classList.add(state.special ? 'pw-rule-valid' : 'pw-rule-invalid');
                specialEl.textContent = (state.special ? '✓ ' : '✗ ') + 'يجب أن تحتوي على رمز خاص واحد على الأقل';
            }
        }

        function updateSubmitState() {
            if (!submitBtn) return;
            const pv = pwd ? (pwd.value || '') : '';
            const cv = conf ? (conf.value || '') : '';

            // require non-empty password meeting all rules and confirmation match
            const state = checkRules(pv);
            const rulesOk = state.len && state.upper && state.lower && state.special;
            const confirmOk = pv.length > 0 && pv === cv;

            if (rulesOk && confirmOk) {
                submitBtn.disabled = false;
                submitBtn.removeAttribute('aria-disabled');
            } else {
                submitBtn.disabled = true;
                submitBtn.setAttribute('aria-disabled','true');
            }
        }

        // initial state
        updateRulesUI({len:false,upper:false,lower:false,special:false});
        updateSubmitState();

        // listeners
        if (pwd) {
            pwd.addEventListener('input', function() {
                const v = pwd.value || '';
                updateRulesUI(checkRules(v));
                // hide confirm message when user types password
                if (confirmHelp) { confirmHelp.textContent = ''; confirmHelp.style.color = ''; }
                updateSubmitState();
            });

            pwd.addEventListener('focus', function() {
                // show current rule state
                updateRulesUI(checkRules(pwd.value || ''));
            });

            pwd.addEventListener('blur', function() {
                // do nothing (keeps rules visible as list)
            });
        }

        if (conf) {
            conf.addEventListener('input', function() {
                const pv = pwd ? (pwd.value || '') : '';
                if (conf.value !== pv) {
                    confirmHelp.textContent = 'تأكيد كلمة المرور غير مطابق.';
                    confirmHelp.style.color = '#dc3545';
                } else {
                    confirmHelp.textContent = '✔ متطابق';
                    confirmHelp.style.color = '#198754';
                }
                updateSubmitState();
            });
        }

        // final client-side check before submit
        const form = document.getElementById('set-password-form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const pv = pwd ? (pwd.value || '') : '';
                const cv = conf ? (conf.value || '') : '';

                const state = checkRules(pv);
                const ok = state.len && state.upper && state.lower && state.special;

                if (!ok) {
                    updateRulesUI(state);
                    if (confirmHelp) {
                        confirmHelp.textContent = 'صيغة كلمة المرور غير صحيحة. الرجاء اتباع المتطلبات.';
                        confirmHelp.style.color = '#dc3545';
                    }
                    e.preventDefault();
                    updateSubmitState();
                    return;
                }

                if (pv !== cv) {
                    if (confirmHelp) {
                        confirmHelp.textContent = 'تأكيد كلمة المرور غير مطابق.';
                        confirmHelp.style.color = '#dc3545';
                    }
                    e.preventDefault();
                    updateSubmitState();
                    return;
                }

                // Allow server to validate recaptcha and final checks
            });
        }

        // Keep eye position stable on window resize / font changes by ensuring CSS used above;
        // no further JS required for that.
    });
</script>



@endsection