@extends('layouts.app')
@section('title', 'Đổi Mật Khẩu')

@section('content')
<div class="form-container mt-10">
    <div class="form-header">
        <h3 class="form-header-title">Đổi Mật Khẩu</h3>
    </div>
    
    <form action="{{ route('user.update_password') }}" method="POST">
        @csrf
        <div class="form-body">
            @if(Auth::user()->first_login == \App\Models\User::FIRST_LOGIN_TRUE)
                <div class="mb-6 p-4 bg-orange-50 border border-orange-200 text-orange-800 rounded-lg text-sm font-medium leading-relaxed flex items-start gap-2 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 shrink-0 text-orange-500 mt-0.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    <span>Đây là lần đầu tiên bạn đăng nhập vào hệ thống. Để đảm bảo an toàn, hệ thống yêu cầu bạn đổi mật khẩu trước khi sử dụng các chức năng.</span>
                </div>
            @endif
            
            <div class="form-group">
                <label class="form-label" for="password">Mật khẩu mới <span class="text-red-500">*</span></label>
                <div class="form-input-group">
                    <span class="form-input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0V10.5m-2.812 10.5h14.625c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125H3.75c-.621 0-1.125.504-1.125 1.125v7.875c0 .621.504 1.125 1.125 1.125z" />
                        </svg>
                    </span>
                    <input type="password" name="password" id="password" class="form-input form-input-with-icon" required placeholder="Nhập mật khẩu mới">
                </div>
                @error('password')<span class="error-text">{{ $message }}</span>@enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="password_confirmation">Xác nhận lại mật khẩu mới <span class="text-red-500">*</span></label>
                <div class="form-input-group">
                    <span class="form-input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </span>
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-input form-input-with-icon" required placeholder="Nhập lại mật khẩu mới">
                </div>
            </div>
        </div>

        <div class="form-footer">
            @if(Auth::user()->first_login != \App\Models\User::FIRST_LOGIN_TRUE)
                <a href="{{ route('user.dashboard') }}" class="btn-secondary">Hủy bỏ</a>
            @endif
            <button type="submit" class="btn-primary">Xác Nhận Đổi Mật Khẩu</button>
        </div>
    </form>
</div>
@endsection