@extends('layouts.petugas')

@section('content')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: #f8fafc;
    }

    .card-auth {
        border-radius: 20px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.07);
        background: #fff;
        border: none;
    }

    .header-auth {
        background: #1e3c72;
        border-radius: 20px 20px 0 0;
        color: white;
        padding: 2.2rem 1.5rem;
        text-align: center;
    }

    .header-auth .icon-wrap {
        width: 60px;
        height: 60px;
        background: rgba(255,255,255,0.12);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    .header-auth h5 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .header-auth p {
        font-size: 13px;
        color: rgba(255,255,255,0.65);
        margin: 0;
    }

    .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 6px;
    }

    .input-group .form-control {
        border-right: none;
        border-radius: 10px 0 0 10px;
        padding: 10px 14px;
        font-size: 14px;
        border-color: #e2e8f0;
        background: #fcfcfd;
        color: #1e293b;
    }

    .input-group .form-control:focus {
        box-shadow: none;
        border-color: #1e3c72;
        background: #fff;
    }

    .input-group .form-control:focus + .input-group-text {
        border-color: #1e3c72;
    }

    .input-group-text {
        border-radius: 0 10px 10px 0;
        border-color: #e2e8f0;
        background: #f8fafc;
        color: #94a3b8;
        cursor: pointer;
        transition: color 0.2s;
    }

    .input-group-text:hover {
        color: #1e3c72;
        background: #f1f5f9;
    }

    .strength-bar-bg {
        height: 5px;
        border-radius: 99px;
        background: #f1f5f9;
        overflow: hidden;
        margin-top: 8px;
    }

    .strength-bar {
        height: 100%;
        width: 0%;
        border-radius: 99px;
        transition: all 0.4s ease;
    }

    .match-hint {
        font-size: 12px;
        margin-top: 5px;
        min-height: 16px;
    }

    .match-ok  { color: #10b981; }
    .match-no  { color: #ef4444; }

    .btn-main {
        background: #1e3c72;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 11px;
        font-size: 14px;
        font-weight: 600;
        transition: opacity 0.2s, transform 0.15s;
    }

    .btn-main:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        color: #fff;
    }

    .btn-main:active {
        transform: scale(0.98);
    }

    .divider {
        border-color: #f1f5f9;
        margin: 1.5rem 0;
    }

    .back-link a {
        font-size: 13px;
        color: #64748b;
        text-decoration: none;
        font-weight: 600;
    }

    .back-link a:hover {
        color: #1e3c72;
    }
</style>

<div class="container-fluid py-5">
    <div class="row justify-content-center">
        <div class="col-md-5 col-lg-4">

            <div class="card card-auth overflow-hidden">

                {{-- HEADER --}}
                <div class="header-auth">
                    <div class="icon-wrap">
                        <i class="bi bi-shield-lock-fill" style="font-size: 1.7rem;"></i>
                    </div>
                    <h5>Keamanan Akun</h5>
                    <p>Perbarui kata sandi Anda secara berkala</p>
                </div>

                <div class="p-4 p-md-5">

                    <form id="formGantiSandi" method="POST" action="{{ route('petugas.user.password.update') }}">
                        @csrf

                        {{-- KATA SANDI LAMA --}}
                        <div class="mb-4">
                            <label class="form-label">Kata Sandi Saat Ini</label>
                            <div class="input-group">
                                <input type="password" id="oldPass" name="old_password"
                                    class="form-control @error('old_password') is-invalid @enderror"
                                    placeholder="Masukkan kata sandi lama" autocomplete="current-password" required>
                                <span class="input-group-text" onclick="togglePass('oldPass', 'icon-old')">
                                    <i class="bi bi-eye" id="icon-old"></i>
                                </span>
                            </div>
                            @error('old_password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <hr class="divider">

                        {{-- KATA SANDI BARU --}}
                        <div class="mb-3">
                            <label class="form-label">Kata Sandi Baru</label>
                            <div class="input-group">
                                <input type="password" id="newPass" name="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Minimal 8 karakter" autocomplete="new-password"
                                    oninput="checkStrength(this.value)" required>
                                <span class="input-group-text" onclick="togglePass('newPass', 'icon-new')">
                                    <i class="bi bi-eye" id="icon-new"></i>
                                </span>
                            </div>
                            @error('password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <div class="strength-bar-bg">
                                <div class="strength-bar" id="strengthBar"></div>
                            </div>
                            <div class="d-flex justify-content-between mt-1">
                                <small id="strengthText" class="fw-bold" style="font-size: 11px; text-transform: uppercase; color: #94a3b8;">—</small>
                                <small class="text-muted" style="font-size: 11px;">Kekuatan</small>
                            </div>
                        </div>

                        {{-- KONFIRMASI KATA SANDI --}}
                        <div class="mb-4">
                            <label class="form-label">Ulangi Kata Sandi Baru</label>
                            <div class="input-group">
                                <input type="password" id="confirmPass" name="password_confirmation"
                                    class="form-control" placeholder="Konfirmasi kata sandi baru"
                                    autocomplete="new-password" oninput="checkMatch()" required>
                                <span class="input-group-text" onclick="togglePass('confirmPass', 'icon-confirm')">
                                    <i class="bi bi-eye" id="icon-confirm"></i>
                                </span>
                            </div>
                            <div class="match-hint" id="matchHint"></div>
                        </div>

                        <button type="submit" class="btn btn-main w-100">
                            <i class="bi bi-shield-check me-2"></i> Perbarui Kata Sandi
                        </button>

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

            <div class="text-center mt-4 back-link">
                <a href="{{ route('petugas.dashboard') }}">
                    <i class="bi bi-arrow-left me-1"></i> Kembali ke Dasbor
                </a>
            </div>

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

<script>
// Toggle tampil/sembunyi kata sandi
function togglePass(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('bi-eye', 'bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('bi-eye-slash', 'bi-eye');
    }
}

// Cek kekuatan kata sandi
function checkStrength(val) {
    const bar  = document.getElementById('strengthBar');
    const text = document.getElementById('strengthText');

    if (!val) {
        bar.style.width = '0%';
        text.textContent = '—';
        text.style.color = '#94a3b8';
        return;
    }

    let score = 0;
    if (val.length >= 8)          score += 25;
    if (/[A-Z]/.test(val))        score += 25;
    if (/[0-9]/.test(val))        score += 25;
    if (/[^A-Za-z0-9]/.test(val)) score += 25;

    const levels = {
        25:  { label: 'Sangat Lemah', color: '#ef4444' },
        50:  { label: 'Lumayan',      color: '#f59e0b' },
        75:  { label: 'Kuat',         color: '#3b82f6' },
        100: { label: 'Sangat Kuat',  color: '#10b981' },
    };

    const { label, color } = levels[score];
    bar.style.width           = score + '%';
    bar.style.backgroundColor = color;
    text.textContent          = label;
    text.style.color          = color;

    // Perbarui hint kecocokan jika kolom konfirmasi sudah ada isi
    if (document.getElementById('confirmPass').value) checkMatch();
}

// Cek kecocokan kata sandi
function checkMatch() {
    const np   = document.getElementById('newPass').value;
    const cp   = document.getElementById('confirmPass').value;
    const hint = document.getElementById('matchHint');

    if (!cp) { hint.textContent = ''; hint.className = 'match-hint'; return; }

    if (np === cp) {
        hint.textContent = '✓ Kata sandi cocok';
        hint.className   = 'match-hint match-ok';
    } else {
        hint.textContent = '✗ Kata sandi tidak cocok';
        hint.className   = 'match-hint match-no';
    }
}

// SweetAlert2 — notifikasi dari session
document.addEventListener('DOMContentLoaded', function () {

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: '{{ session('success') }}',
            confirmButtonColor: '#1e3c72',
            timer: 3000,
            timerProgressBar: true
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Gagal!',
            text: '{{ session('error') }}',
            confirmButtonColor: '#1e3c72'
        });
    @endif

    @if($errors->any())
        let msgs = '';
        @foreach($errors->all() as $err)
            msgs += '• {{ $err }}<br>';
        @endforeach
        Swal.fire({
            icon: 'warning',
            title: 'Terdapat Kesalahan!',
            html: `<div style="text-align:left;font-size:14px;">${msgs}</div>`,
            confirmButtonColor: '#1e3c72'
        });
    @endif

});

// Konfirmasi SweetAlert2 sebelum submit
document.getElementById('formGantiSandi').addEventListener('submit', function (e) {
    e.preventDefault();
    const form = this;

    const np = document.getElementById('newPass').value;
    const cp = document.getElementById('confirmPass').value;

    if (np !== cp) {
        Swal.fire({ icon: 'warning', title: 'Perhatian!', text: 'Kata sandi baru dan konfirmasi tidak cocok.', confirmButtonColor: '#1e3c72' });
        return;
    }

    Swal.fire({
        title: 'Konfirmasi Perubahan',
        text: 'Apakah Anda yakin ingin memperbarui kata sandi?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#1e3c72',
        cancelButtonColor: '#ef4444',
        confirmButtonText: 'Ya, Perbarui!',
        cancelButtonText: 'Batal'
    }).then(result => {
        if (result.isConfirmed) form.submit();
    });
});
</script>

@endsection