@extends('frontend.layouts.main')
@section('title', 'Xác nhận mật khẩu')
@section('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/login.css') }}">
@endsection

@section('content')
<section class="form-login-section">
    <div class="ctnr">
        <div class="content">
            <div class="form-login">
                <div class="header">
                    <h1>Xác nhận mật khẩu</h1>
                    <p>Vui lòng nhập mật khẩu để tiếp tục</p>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul style="margin: 0; padding-left: 20px;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                    <div class="form-group">
                        <label for="password">Mật khẩu <span class="required">*</span></label>
                        <div class="input-with-icon">
                            <svg height="20" viewBox="-64 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="..."/></svg>

                            <input type="password" name="password" class="password-input" placeholder="Nhập mật khẩu" required>

                            <!-- Mắt mở -->
                            <svg class="toggle-password-eye show-eye" height="20" viewBox="0 0 24 24"><path d="..."/></svg>

                            <!-- Mắt đóng -->
                            <svg class="toggle-password-eye hide-eye d-none" height="20" viewBox="0 0 24 24"><path d="..."/></svg>
                        </div>

                        @error('password')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="submit-btn">Xác nhận mật khẩu</button>

                    @if (Route::has('password.request'))
                        <div class="form-footer">
                            <p>
                                Quên mật khẩu?
                                <a href="{{ route('password.request') }}">Lấy lại mật khẩu</a>
                            </p>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script>
    $(document).ready(function () {
        $('.toggle-password-eye').on('click', function () {
            const $container = $(this).closest('.input-with-icon');
            const $input = $container.find('input.password-input');
            const isPassword = $input.attr('type') === 'password';

            $input.attr('type', isPassword ? 'text' : 'password');
            $container.find('.show-eye').toggleClass('d-none', isPassword);
            $container.find('.hide-eye').toggleClass('d-none', !isPassword);
        });
    });
</script>
@endsection