@extends('layouts.admin')

@section('title','Ganti Password')

@section('content')
<div class="container-fluid">

    <h4 class="fw-bold mb-3">Ganti Password</h4>

    @if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

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

        {{-- PASSWORD LAMA --}}
        <div class="mb-2">
            <label>Password Lama</label>
            <input type="password"
                name="password_lama"
                id="password_lama"
                class="form-control"
                required>
        </div>

        {{-- PASSWORD BARU --}}
        <div class="mb-2">
            <label>Password Baru</label>
            <input type="password"
                name="password"
                id="password"
                class="form-control"
                required>
        </div>

        {{-- KONFIRMASI --}}
        <div class="mb-2">
            <label>Konfirmasi Password Baru</label>
            <input type="password"
                name="password_confirmation"
                id="password_confirmation"
                class="form-control"
                required>
        </div>

        <div class="form-check mb-3">
            <input class="form-check-input"
                type="checkbox"
                onclick="togglePassword()">
            <label class="form-check-label">
                Lihat password
            </label>
        </div>

        <button class="btn btn-warning">
            Simpan Password
        </button>
    </form>

    @if(session('password_success'))
    <div class="alert alert-success mt-3">
        <strong>✅ PASSWORD BERHASIL DIGANTI</strong><br>
        Logout otomatis dalam <span id="countdown">5</span> detik...
    </div>

    <script>
        let sisa = 5;
        const timer = setInterval(() => {
            document.getElementById('countdown').innerText = --sisa;
            if (sisa <= 0) {
                clearInterval(timer);
                document.getElementById('logout-form').submit();
            }
        }, 1000);
    </script>
    @endif

</div>

<script>
    function togglePassword() {
        const fields = [
            document.getElementById('password_lama'),
            document.getElementById('password'),
            document.getElementById('password_confirmation'),
        ];

        fields.forEach(f => {
            if (f) f.type = f.type === 'password' ? 'text' : 'password';
        });
    }
</script>
@endsection