@extends('layouts.app')

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

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

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

    {{-- ERROR --}}
    @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 --}}
    <form method="POST" action="{{ route('password.update') }}">
        @csrf
        @method('PUT')

        <div class="mb-2">
            <label>Password Baru</label>
            <input type="password"
                name="password"
                id="password"
                placeholder="Minimal 8 karakter"
                class="form-control"
                required>
        </div>

        <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>

    {{-- ✅ PESAN BERHASIL --}}
    @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>

    <form id="logout-form" action="{{ route('logout') }}" method="POST">
        @csrf
    </form>

    <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() {
        document.querySelectorAll('input[type=password]')
            .forEach(el => el.type = el.type === 'password' ? 'text' : 'password');
    }
</script>
@endsection