@extends('layouts.main')

@section('content')

<div class="container py-4">

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">⚙️ Account Settings</h4>
    </div>

    <!-- 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 settings-card shadow-lg border-0">
        <div class="card-body p-4">

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

            <form method="POST" action="{{ route('doctor.profile.update') }}" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <!-- LEFT FORM -->
                    <div class="col-md-8">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label>First Name</label>
                                <input type="text" name="first_name" class="form-control"
                                       value="{{ old('first_name', $user->first_name ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label>Last Name</label>
                                <input type="text" name="last_name" class="form-control"
                                       value="{{ old('last_name', $user->last_name ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control"
                                       value="{{ old('email', $user->email ?? '') }}">
                            </div>

                            <div class="col-md-6">
                                <label>Mobile</label>
                                <input type="text" name="mobile_number" class="form-control"
                                       value="{{ old('mobile_number', $user->mobile_number ?? '') }}">
                            </div>

                            <div class="col-md-4">
                                <label>Country</label>
                                <input type="text" name="country" class="form-control"
                                       value="{{ old('country', $user->country ?? '') }}">
                            </div>

                            <div class="col-md-4">
                                <label>State</label>
                                <input type="text" name="state" class="form-control"
                                       value="{{ old('state', $user->state ?? '') }}">
                            </div>

                            <div class="col-md-4">
                                <label>City</label>
                                <input type="text" name="city" class="form-control"
                                       value="{{ old('city', $user->city ?? '') }}">
                            </div>

                        </div>
                    </div>

                    <!-- RIGHT PROFILE -->
                    <div class="col-md-4 text-center border-start">
                        <h6 class="fw-semibold mb-3">Profile Image</h6>

                        <div class="profile-wrapper">
                            <img id="preview"
                                 src="{{ $user->profile_image ? asset('uploads/doctors/'.$user->profile_image) : 'https://via.placeholder.com/120' }}"
                                 class="rounded-circle shadow-sm">

                            <label class="upload-btn mt-2">
                                Change Photo
                                <input type="file" name="profile_image" hidden onchange="previewImage(event)">
                            </label>
                        </div>
                    </div>

                </div>

                <div class="text-end mt-4">
                    <button class="btn btn-primary px-4">
                        💾 Save Changes
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

<style>

/* MENU */
.account-menu {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.menu-item {
    text-decoration: none;
    font-weight: 500;
    color: #666;
    position: relative;
    transition: 0.3s;
}

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

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

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

/* CARD */
.settings-card {
    border-radius: 16px;
    background: #fff;
}

/* PROFILE */
.profile-wrapper img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

/* UPLOAD BUTTON */
.upload-btn {
    display: inline-block;
    background: #f1f5ff;
    color: #0d6efd;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

.upload-btn:hover {
    background: #0d6efd;
    color: #fff;
}

/* INPUT */
.form-control {
    border-radius: 10px;
    padding: 10px;
}

/* BUTTON */
.btn-primary {
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 500;
}

</style>

<script>
function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function(){
        document.getElementById('preview').src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
</script>

@endsection