@php
$user = \App\Models\User::find(session('user.id'));
@endphp

<div class="container-fluid px-2 px-lg-3">

    <div class="row align-items-center gy-3 my-3">

        {{-- LEFT SECTION --}}
        <div class="col-12 col-lg-2">

            <div class="d-flex align-items-center gap-3">

                <label for="sidebarToggle" class="btn toggle-btn mb-0 p-0 border-0 shadow-none">

                    <i class="bi bi-list fs-3"></i>

                </label>

                <div class="dash-title">

                    <small class="text-muted">
                        Pages / <b>@yield('page')</b>
                    </small>

                    <h4 class="mb-0 fw-bold">
                        @yield('page')
                    </h4>

                </div>

            </div>

        </div>

        <div class="col-12 col-lg-8">
            @if(request()->routeIs('omd.project.detail') && isset($headerProject))

                @php
                    $barColor = 'bg-success';

                    if ($headerPercentage >= 80 && $headerPercentage < 90) {
                        $barColor = 'bg-warning';
                    }

                    if ($headerPercentage >= 90) {
                        $barColor = 'bg-danger';
                    }
                @endphp

                <div class="budget-wrapper">

                    <div class="budget-top">
                        <div>
                            <div class="budget-title">
                                {{ \Illuminate\Support\Str::limit($headerProject->title, 28) }}
                            </div>
                            <div class="budget-subtitle">
                                Project Cost Overview
                            </div>
                        </div>

                        <div class="budget-percent">
                            {{ round($headerPercentage, 1) }}% Used
                        </div>
                    </div>

                    {{-- PROGRESS --}}
                    <div class="progress budget-progress">
                        <div class="progress-bar {{ $barColor }}" style="width: {{ min($headerPercentage, 100) }}%">
                        </div>
                    </div>

                   {{-- BOTTOM --}}
                    <div class="budget-bottom">
                        <div>
                            <div class="budget-label">
                                Spent
                            </div>
                            <div class="budget-value text-danger">
                                {{-- Use the new formatted variable --}}
                                ₹{{ $headerUsedFormatted }}
                            </div>
                        </div>

                        <div class="text-end">
                            <div class="budget-label">
                                Total Project Cost
                            </div>
                            <div class="budget-value text-success">
                                {{-- Use the new formatted variable --}}
                                ₹{{ $headerProjectCostFormatted }}
                            </div>
                        </div>
                    </div>

                </div>

            @endif
        </div>

        {{-- RIGHT SECTION --}}
        <div class="col-12 col-lg-2">

            <div class="d-flex flex-column flex-lg-row
                        align-items-stretch align-items-lg-center
                        justify-content-lg-end
                        gap-3">

                {{-- PROJECT TRACKER --}}


                {{-- ACTIONS --}}
                <div class="d-flex align-items-center justify-content-end gap-3">

                    {{-- NOTIFICATION --}}
                    <div style="position:relative;">

                        <div class="notification-bell" id="notify-bell">

                            <i class="bi bi-bell"></i>

                            <span id="sales-notify-count">
                                0
                            </span>

                        </div>

                        {{-- POPUP --}}
                        <div id="notification-popup">

                            <div class="popup-header">
                                Notifications
                            </div>

                            <ul id="sales-notify-list"></ul>

                        </div>

                    </div>

                    {{-- PROFILE --}}
                    <div class="dropdown">

                        <a class="d-flex align-items-center
                                  text-decoration-none gap-2
                                  dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">

                            <img src="{{ asset('assets/img/vikas.png') }}" class="rounded-circle" width="42"
                                height="42">

                            <div class="d-none d-md-block">

                                <div class="fw-semibold text-dark">
                                    {{ $user->name ?? 'Guest' }}
                                </div>

                                <small class="text-muted">
                                    {{ $user->role ?? 'omd' }}
                                </small>

                            </div>

                        </a>

                        <ul class="dropdown-menu dropdown-menu-end">

                            <li>
                                <a class="dropdown-item" href="#">
                                    <i class="bi bi-person-circle me-2"></i>
                                    Profile
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item" href="#">
                                    <i class="bi bi-gear me-2"></i>
                                    Settings
                                </a>
                            </li>

                            <li>
                                <hr class="dropdown-divider">
                            </li>

                            <li>

                                <form action="{{ route('logout') }}" method="POST">

                                    @csrf

                                    <button type="submit" class="dropdown-item text-danger">

                                        <i class="bi bi-box-arrow-right me-2"></i>
                                        Logout

                                    </button>

                                </form>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>
    .budget-wrapper {
        width: 100%;
        max-width: 100%;
        background: #fff;
        border-radius: 18px;
        padding: 7px 14px;
        border: 1px solid #ececec;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    .budget-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 0;
    }

    .budget-title {
        font-size: 15px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.2;
    }

    .budget-subtitle {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 2px;
    }

    .budget-percent {
        font-size: 12px;
        font-weight: 700;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 4px 10px;
        white-space: nowrap;
    }

    .budget-progress {
        height: 10px;
        border-radius: 50px;
        background: #e5e7eb;
        overflow: hidden;
    }

    .budget-progress .progress-bar {
        border-radius: 50px;
    }

    .budget-bottom {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .budget-label {
        font-size: 11px;
        color: #9ca3af;
        margin-bottom: 2px;
    }

    .budget-value {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    .notification-bell {
        position: relative;
        cursor: pointer;
        font-size: 20px;
    }


    .notification-bell span {
        position: absolute;
        top: -8px;
        right: -10px;
        background: red;
        color: #fff;
        width: 18px;
        height: 18px;
        font-size: 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    #notification-popup {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        width: 320px;
        background: #fff;
        border-radius: 14px;
        border: 1px solid #eee;
        overflow: hidden;
        z-index: 999;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .popup-header {
        padding: 14px;
        font-weight: 600;
        border-bottom: 1px solid #eee;
    }

    #sales-notify-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 300px;
        overflow-y: auto;
    }

    @media(max-width:991px) {

        .budget-wrapper {
            max-width: 100%;
        }

    }

    @media(max-width:576px) {

        .budget-wrapper {
            padding: 14px;
        }

        .budget-title {
            font-size: 14px;
        }

        .budget-value {
            font-size: 14px;
        }

        .budget-percent {
            font-size: 11px;
            padding: 3px 8px;
        }

        #notification-popup {
            width: 280px;
            right: -50px;
        }

    }
</style>