@extends('layouts.main')

@section('content')

<div class="container py-4">

    <!-- Page Title -->
    <h4 class="mb-4 fw-bold">📄 Documents</h4>

    <!-- Account 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>

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

    <h6 class="fw-bold mb-3">📄 Upload Medical Document</h6>

    <form>

        <div class="upload-box text-center p-4">

            <!-- Icon -->
            <div class="mb-3">
                <i class="bi bi-cloud-arrow-up fs-1 text-primary"></i>
            </div>

            <!-- Text -->
            <p class="mb-2 fw-semibold">
                Drag & Drop your file here
            </p>
            <p class="text-muted small mb-3">
                or click to browse (PDF, JPG, PNG)
            </p>

            <!-- Hidden Input -->
            <input type="file" class="form-control d-none" id="fileInput">

            <!-- Button -->
            <label for="fileInput" class="btn btn-outline-primary px-4">
                Browse File
            </label>

            <!-- File Name Preview -->
            <div id="fileName" class="mt-3 text-success small"></div>

        </div>

         
    </form>
</div>

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

.menu-item {
    text-decoration: none;
    font-weight: 500;
    color: #555;
    padding-bottom: 5px;
    position: relative;
    white-space: nowrap;
}

.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%;
}
</style>

@endsection