@extends('layout.user')

@section('content')
@php
  $gs   = \App\Models\GeneralSetting::first();
  $p1   = $gs->icon_color   ?? '#2563eb';   // Primary Blue
  $p2   = $gs->hover_color  ?? '#1e40af';   // Hover Blue
  $g3   = $gs->accent_color ?? '#E4002B';   // Accent Red
@endphp

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden; 
        background-color: #f8fafc;
    }

    :root {
        --p1: {{ $p1 }};
        --p2: {{ $p2 }};
        --bd-red: {{ $g3 }};
    }

    .fixed-form-box {
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 92%;
        max-width: 400px;
        background-color: white;
        border-radius: 1.5rem;
        padding: 2.2rem 1.8rem;
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
        border: 2.5px solid var(--p1);
    }

    .form-label {
        font-weight: 800;
        color: var(--p2);
        font-size: 14px;
        display: block;
        margin-bottom: 8px;
    }

    /* পাসওয়ার্ড ইনপুট গ্রুপ স্টাইল */
    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .form-input {
        width: 100%;
        border: 2px solid var(--p1) !important; 
        border-radius: 12px;
        padding: 12px 45px 12px 15px; /* ডানদিকে স্পেস রাখা হয়েছে আইকনের জন্য */
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
        background:#fff;
        outline: none;
        transition: .2s;
    }

    .form-input:focus {
        border-color: var(--p2) !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    }

    /* ✅ হাইড/আনহাইড বাটন স্টাইল */
    .toggle-password {
        position: absolute;
        right: 15px;
        cursor: pointer;
        color: var(--p1);
        font-size: 16px;
        z-index: 10;
        transition: 0.2s;
    }
    .toggle-password:hover { color: var(--p2); }

    .btn-flag {
        background: linear-gradient(90deg, var(--p1), var(--p2));
        color: #fff;
        font-weight: 900;
        padding: 14px;
        border-radius: 12px;
        transition: .3s;
        border: none;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
        cursor: pointer;
        font-size: 15px;
        width: 100%;
        margin-top: 10px;
    }

    .alert-success {
        background: linear-gradient(90deg, var(--p1), var(--p2));
        color: #fff;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 15px;
        text-align: center;
    }
</style>

<div class="fixed-form-box">
    <div class="text-center mb-6">
        <h2 class="text-2xl font-black" style="color:var(--p1);">
          🔐 সিকিউরিটি আপডেট
        </h2>
        <p class="text-sm text-gray-500 mt-2 font-medium">পাসওয়ার্ড পরিবর্তন করুন</p>
    </div>

    @if(session('success'))
        <div class="alert-success shadow">✅ {{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div style="background: #fef2f2; border: 1px solid #fee2e2; padding: 10px; border-radius: 10px; margin-bottom: 15px;">
            <ul style="color: #dc2626; font-size: 12px; font-weight: 700;">
                @foreach($errors->all() as $error)
                    <li><i class="fas fa-exclamation-triangle mr-1"></i> {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('user.change.password.update') }}" method="POST" class="space-y-4">
        @csrf

        <div>
            <label class="form-label">পুরাতন পাসওয়ার্ড</label>
            <div class="input-group">
                <input type="password" name="current_password" id="old_pass" placeholder="••••••••" required class="form-input">
                <i class="fas fa-eye-slash toggle-password" onclick="togglePass('old_pass', this)"></i>
            </div>
        </div>

        <div>
            <label class="form-label">নতুন পাসওয়ার্ড</label>
            <div class="input-group">
                <input type="password" name="new_password" id="new_pass" placeholder="••••••••" required class="form-input">
                <i class="fas fa-eye-slash toggle-password" onclick="togglePass('new_pass', this)"></i>
            </div>
        </div>

        <div>
            <label class="form-label">পাসওয়ার্ড নিশ্চিত করুন</label>
            <div class="input-group">
                <input type="password" name="new_password_confirmation" id="con_pass" placeholder="••••••••" required class="form-input">
                <i class="fas fa-eye-slash toggle-password" onclick="togglePass('con_pass', this)"></i>
            </div>
        </div>

        <button type="submit" class="btn-flag">✅ পাসওয়ার্ড আপডেট করুন</button>
    </form>
</div>

<script>
    // ✅ পাসওয়ার্ড হাইড/আনহাইড করার ফাংশন
    function togglePass(inputId, icon) {
        const input = document.getElementById(inputId);
        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        }
    }
</script>
@endsection
