@extends('layouts.main')

@section('content')

<div class="container py-4">

    <!-- Page Title -->
    <h4 class="mb-4 fw-bold">Account Settings</h4>

    <!-- Top Menu -->
    <div class="account-menu mb-4">

        <a href="{{ route('doctor.settings') }}" 
           class="menu-item {{ request()->routeIs('doctor.settings') ? 'active' : '' }}">
            ⚙️ Settings
        </a>

        <a href="{{ route('doctor.change.password') }}" 
           class="menu-item {{ request()->routeIs('doctor.change.password') ? 'active' : '' }}">
            🔒 Change Password
        </a>

        <a href="{{ route('doctor.documents') }}" 
           class="menu-item {{ request()->routeIs('doctor.documents') ? 'active' : '' }}">
            📄 Documents
        </a>

        <a href="{{ route('doctor.privacy') }}" 
           class="menu-item {{ request()->routeIs('doctor.privacy') ? 'active' : '' }}">
            🛡️ Privacy Policy
        </a>
        <a href="{{ route('doctor.terms') }}" 
           class="menu-item {{ request()->routeIs('doctor.terms') ? 'active' : '' }}">
             📜 Terms & Conditions
        </a>

    </div>

    <!-- Card -->
    <div class="card shadow-sm border-0 rounded-4">

        <div class="card-header bg-white border-0">
            <h5 class="mb-0 fw-semibold">Change Password</h5>
        </div>

        <div class="card-body">

            <!-- Success Message -->
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <!-- Form -->
            <form action="#" method="POST">
                @csrf

                <!-- Current Password -->
                <div class="mb-3">
                    <label class="form-label">Current Password</label>
                    <div class="input-group">
                        <input type="password" name="current_password" class="form-control" required>
                        <span class="input-group-text toggle-password">👁️</span>
                    </div>
                    @error('current_password')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <!-- New Password -->
                <div class="mb-3">
                    <label class="form-label">New Password</label>
                    <div class="input-group">
                        <input type="password" name="new_password" class="form-control" required>
                        <span class="input-group-text toggle-password">👁️</span>
                    </div>
                    @error('new_password')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <!-- Confirm Password -->
                <div class="mb-3">
                    <label class="form-label">Confirm Password</label>
                    <div class="input-group">
                        <input type="password" name="new_password_confirmation" class="form-control" required>
                        <span class="input-group-text toggle-password">👁️</span>
                    </div>
                </div>

                <!-- Button -->
                <div class="text-end">
                    <button class="btn btn-primary px-4">
                        Update Password
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

<!-- Styling -->
<style>
.account-menu {
    display: flex;
    gap: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.menu-item {
    text-decoration: none;
    font-weight: 500;
    color: #555;
    padding-bottom: 6px;
    position: relative;
    transition: 0.3s;
}

.menu-item:hover {
    color: #0d6efd;
}

.menu-item.active {
    color: #0d6efd;
    font-weight: 600;
}

.menu-item::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: #0d6efd;
    left: 0;
    bottom: -2px;
    transition: 0.3s;
}

.menu-item:hover::after,
.menu-item.active::after {
    width: 100%;
}

/* Card look */
.card {
    max-width: 600px;
    margin: auto;
}

/* Eye button */
.toggle-password {
    cursor: pointer;
}
</style>

<!-- JS for Show/Hide Password -->
<script>
document.querySelectorAll('.toggle-password').forEach(function(el) {
    el.addEventListener('click', function() {
        let input = this.previousElementSibling;
        input.type = input.type === 'password' ? 'text' : 'password';
    });
});
</script>

@endsection