<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>パスワード変更 - So-Manager</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .password-change-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            max-width: 600px;
            width: 100%;
            padding: 40px;
        }

        .panel-title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 30px;
            border-bottom: 3px solid #007bff;
            padding-bottom: 15px;
        }

        .alert-warning-custom {
            background-color: #fff3cd;
            border: 2px solid #dc3545;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            color: #333;
            line-height: 1.8;
        }

        .alert-warning-custom .text-danger {
            color: #dc3545;
            font-weight: 600;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: block;
            font-size: 15px;
        }

        .form-group input[type="password"] {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s ease;
            width: 100%;
        }

        .form-group input[type="password"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
            outline: none;
        }

        .form-group input.is-invalid {
            border-color: #dc3545;
        }

        .form-group input.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
        }

        .invalid-feedback {
            color: #dc3545;
            font-size: 13px;
            margin-top: 5px;
            display: block;
        }

        .requirements {
            background-color: #f8f9fa;
            border-left: 4px solid #dc3545;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 4px;
            font-size: 14px;
            color: #555;
        }

        .requirements ul {
            margin: 0;
            padding-left: 20px;
        }

        .requirements li {
            margin-bottom: 8px;
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background-color: #f5f5f5;
            border: 2px solid #333;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .submit-btn:hover {
            background-color: #e8e8e8;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .error-message {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 6px;
            padding: 12px 15px;
            margin-bottom: 20px;
            color: #721c24;
        }

        .error-message ul {
            margin: 0;
            padding-left: 20px;
        }

        .error-message li {
            margin-bottom: 5px;
        }

        .password-change-container {
            max-width: 720px;
            /* 或者 800 */
        }
    </style>
</head>

<body>
    <div class="password-change-container">
        {{-- パネルタイトル --}}
        <div class="panel-title">So-Manager 管理パネル</div>

        {{-- バリデーションエラー表示 --}}
        @if ($errors->any())
            <div class="error-message">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- 警告メッセージ --}}
        <div class="alert-warning-custom">
            <p>
                セキュリティを維持するため、
                <span class="text-danger">
                    パスワードの有効期限が切れました（3ヶ月）。<br>
                </span>
            <span class="text-danger">
                新しいパスワードへの変更をお願いいたします。<br>
            </span>
                安全にご利用いただくため、定期的なパスワード更新が必要です。<br>
                変更後、引き続きシステムをご利用いただけます。
            </p>
        </div>

        {{-- パスワード変更フォーム --}}
        <form action="{{ route('password.change.update') }}" method="POST">
            @csrf

            {{-- 当前パスワード --}}
            <div class="form-group">
                <label for="current_password">現在のパスワード:</label>
                <input type="password" class="@error('current_password') is-invalid @enderror" id="current_password"
                    name="current_password" required minlength="8" maxlength="64">
                @error('current_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- 新パスワード --}}
            <div class="form-group">
                <label for="password">新しいパスワード:</label>
                <input type="password" class="@error('password') is-invalid @enderror" id="password" name="password"
                    required minlength="8" maxlength="64" pattern="[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};:'\",.<>?/\\|`~]+">
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- 新パスワード確認 --}}
            <div class="form-group">
                <label for="password_confirmation">新しいパスワード（確認):</label>
                <input type="password" class="@error('password_confirmation') is-invalid @enderror"
                    id="password_confirmation" name="password_confirmation" required minlength="8" maxlength="64"
                    pattern="[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};:'\",.<>?/\\|`~]+">
                @error('password_confirmation')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- 要件説明 --}}
            <div class="requirements">
                <strong>※新しいパスワードは、以下の条件を満たす必要があります。</strong>
                <ul>
                    <li>8文字以上64文字以内</li>
                    <li>半角英数字および記号のみ使用可能</li>
                    <li>現在のパスワードと同一のものは使用できません</li>
                </ul>
            </div>

            {{-- Hidden フィールド（設計書に記載） --}}
            <input type="hidden" name="updated_at" value="{{ now()->format('Y-m-d H:i:s') }}">
            <input type="hidden" name="ope_pass_changed_at" value="{{ now()->format('Y-m-d H:i:s') }}">

            {{-- 送信ボタン & キャンセルボタン --}}
            <div class="button-group">
                <button type="submit" class="submit-btn">
                    パスワードを変更する
                </button>
                <a href="{{ route('logout') }}" class="cancel-btn">
                    ログイン画面へ
                </a>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>

</html>
