@php
use App\Models\GeneralSetting;

$me = auth()->user();

$photo = $me && !empty($me->profile_photo)
    ? asset(ltrim($me->profile_photo,'/'))
    : asset('images/logo.png');

$name = $me?->name ?? 'GUEST';
$mobile = $me?->mobile ?? '----'; // মোবাইল নাম্বার
$ref = $me?->referral_code ?? '------';
$isActiveVal = (int)($me->is_active ?? 0);

$acctLabel = $isActiveVal === 1 ? 'VERIFIED SELLER' : 'GENERAL CUSTOMER';

$appVersion = config('app.version','1.0');

$displayName = trim((string)$name);
$words = preg_split('/\s+/u', $displayName, -1, PREG_SPLIT_NO_EMPTY);

if ($words && count($words) > 3) {
    $displayName = $words[0].' '.$words[1];
}

$socialRow = GeneralSetting::where('key','social_links')->value('value');
$social = $socialRow ? json_decode($socialRow, true) : [];

$fb = $social['facebook'] ?? '#';
$wa = $social['whatsapp'] ?? '#';
$tg = $social['telegram'] ?? '#';
$yt = $social['youtube'] ?? '#';
@endphp

<style>
.drw-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 101, 255, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10050;
    backdrop-filter: blur(0px);
}

.drw-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

.drw {
    --drw-primary: #0a65ff;
    --drw-accent: #00d2ff;
    --drw-bg-glow: #f4f8ff;
    --drw-card: #ffffff;
    --drw-text-main: #1e293b;
    --drw-text-muted: #64748b;
    --drw-border: #e2e8f0;
    --drw-red: #ff3b30;
    --drw-green: #34c759;
    --drw-gold: #ffcc00;
    --drw-hero-grad: linear-gradient(135deg, #0a65ff 0%, #004cd2 100%);
    --brand-fb: #1877f2;
    --brand-yt: #ff0000;
    --brand-tg: #26a5e4;
    --brand-wa: #25d366;

    position: fixed;
    top: 0;
    left: 0;
    width: 324px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 10060;
    transform: translate3d(-110%, 0, 0);
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s ease;
    display: flex;
    flex-direction: column;
    border-radius: 0 30px 30px 0;
    border-right: 1px solid rgba(10, 101, 255, 0.1);
    font-family: 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
    overflow: hidden;
    will-change: transform;
}

.drw.open {
    transform: translate3d(0, 0, 0);
    box-shadow: 25px 0 60px rgba(10, 101, 255, 0.18);
}

.drw-hero {
    position: relative;
    flex-shrink: 0;
    padding: 24px 18px;
    background: var(--drw-hero-grad);
    border-radius: 0 0 32px 32px;
    box-shadow: 0 12px 30px rgba(10, 101, 255, 0.22);
    overflow: hidden;
}

.drw-hero::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    top: -40px;
    left: -40px;
}

.drw-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s ease;
}

.drw-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.drw-profile-center {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.drw-avatar-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 26px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.drw-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    background: #ffffff;
    border: 2px solid #ffffff;
    display: block;
}

.drw-avatar-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--drw-green);
    border: 3.5px solid #ffffff;
    box-shadow: 0 0 12px rgba(52, 199, 89, 0.6);
}

.drw-user-info {
    margin-top: 14px;
    max-width: 250px;
}

.drw-user-info h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

/* মোবাইল নাম্বার স্টাইল */
.drw-user-mobile {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.10);
    padding: 4px 16px;
    border-radius: 30px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.drw-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

.drw-ref-section {
    position: relative;
    z-index: 3;
    margin: 18px 0 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--drw-text-main);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    text-transform: uppercase;
}

.drw-ref-section b {
    color: var(--drw-primary);
    font-weight: 800;
    margin-left: 4px;
}

.drw-ref-section i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--drw-bg-glow);
    color: var(--drw-primary);
    font-size: 13px;
    transition: all 0.2s;
}

.drw-ref-section:active i {
    transform: scale(0.9);
}

.drw-premium-strip {
    margin: 16px 16px 0;
    border-radius: 20px;
    padding: 14px;
    background: linear-gradient(90deg, #fffcf5 0%, #ffffff 100%);
    border: 1px dashed #ffe0b2;
    box-shadow: 0 6px 15px rgba(255, 204, 0, 0.05);
}

.drw-verified-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
}

.drw-verified-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drw-crown-box {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 204, 0, 0.15);
    color: #e6b800;
    font-size: 15px;
}

.drw-verified-card span {
    font-weight: 700;
    font-size: 14px;
    color: var(--drw-text-main);
    text-transform: uppercase;
}

.drw-verified-btn {
    background: var(--drw-hero-grad);
    color: #fff;
    font-size: 11px;
    padding: 7px 16px;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(10, 101, 255, 0.2);
    text-transform: uppercase;
}

.drw-menu {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.drw-menu::-webkit-scrollbar {
    width: 4px;
}

.drw-menu::-webkit-scrollbar-thumb {
    background: rgba(10, 101, 255, 0.15);
    border-radius: 10px;
}

.drw-menu-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--drw-primary);
    padding: 0 8px 8px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.drw-menu-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px rgba(10, 101, 255, 0.02);
}

.drw-menu-item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-radius: 16px;
    text-decoration: none !important;
    color: var(--drw-text-main);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    border: 0;
    background: transparent;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.drw-menu-item:last-child {
    margin-bottom: 0;
}

.drw-menu-item i.drw-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    margin-right: 12px;
    font-size: 15px;
    background: var(--drw-bg-glow);
    color: var(--drw-primary);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.drw-menu-item:hover {
    color: var(--drw-primary);
    background: var(--drw-bg-glow);
    transform: translateX(5px);
}

.drw-menu-item:hover i.drw-icon {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 101, 255, 0.15);
}

.drw-menu-item.active {
    background: var(--drw-hero-grad);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(10, 101, 255, 0.25);
    font-weight: 700;
}

.drw-menu-item.active i.drw-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.drw-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 6px;
}

.drw-social-btn {
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 18px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.drw-social-btn.fb { border: 1px solid rgba(24, 119, 242, 0.2); color: var(--brand-fb); }
.drw-social-btn.yt { border: 1px solid rgba(255, 0, 0, 0.2); color: var(--brand-yt); }
.drw-social-btn.tg { border: 1px solid rgba(38, 165, 228, 0.2); color: var(--brand-tg); }
.drw-social-btn.wa { border: 1px solid rgba(37, 211, 102, 0.2); color: var(--brand-wa); }

.drw-social-btn:hover {
    transform: translateY(-3px);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.drw-social-btn.fb:hover { background: var(--brand-fb); border-color: var(--brand-fb); }
.drw-social-btn.yt:hover { background: var(--brand-yt); border-color: var(--brand-yt); }
.drw-social-btn.tg:hover { background: var(--brand-tg); border-color: var(--brand-tg); }
.drw-social-btn.wa:hover { background: var(--brand-wa); border-color: var(--brand-wa); }

.drw-logout-form {
    margin-top: 8px;
}

.drw-logout-btn {
    color: var(--drw-red);
    border: 1px solid rgba(255, 59, 48, 0.05);
}

.drw-logout-btn i.drw-icon {
    background: rgba(255, 59, 48, 0.06);
    color: var(--drw-red);
}

.drw-logout-btn:hover {
    background: rgba(255, 59, 48, 0.08);
    color: var(--drw-red);
}

.drw-foot {
    padding: 16px;
    text-align: center;
    font-size: 11.5px;
    color: var(--drw-text-muted);
    font-weight: 700;
    background: var(--drw-bg-glow);
    border-top: 1px solid #e2e8f0;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.drw-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: #1e293b;
    color: #fff;
    padding: 12px 26px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10070;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

.drw-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.drw-locked {
    overflow: hidden !important;
    touch-action: none;
}
</style>

<!-- ব্যাকড্রপ -->
<div id="drawerBackdrop" class="drw-backdrop"></div>

<!-- সাইডবার ড্রয়ার -->
<aside id="drawer" class="drw">

    <!-- হিরো সেকশন -->
    <div class="drw-hero">
        <button id="btnDrawerClose" type="button" class="drw-close">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <div class="drw-profile-center">
            <div class="drw-avatar-wrap">
                <img src="{{ $photo }}" class="drw-user-avatar" alt="User Avatar">
                <span class="drw-avatar-status"></span>
            </div>

            <div class="drw-user-info">
                <h3>{{ $displayName }}</h3>
                <!-- মোবাইল নাম্বার দেখানো হলো -->
                <span class="drw-user-mobile">
                    <i class="fa-solid fa-phone" style="margin-right:6px;"></i> {{ $mobile }}
                </span>
                <span class="drw-badge">{{ $acctLabel }}</span>
            </div>
        </div>

        <div class="drw-ref-section" id="copyCode" data-copy="{{ $ref }}">
            <span>REFERRAL CODE: <b>{{ $ref }}</b></span>
            <i class="fa-regular fa-copy"></i>
        </div>
    </div>

    <!-- ভেরিফিকেশন ব্যানার -->
    @if($isActiveVal === 0)
    <div class="drw-premium-strip">
        <a href="{{ url('/activation') }}" class="drw-verified-card">
            <div class="drw-verified-left">
                <div class="drw-crown-box">
                    <i class="fa-solid fa-crown"></i>
                </div>
                <span>VERIFIED SELLER</span>
            </div>
            <div class="drw-verified-btn">JOIN</div>
        </a>
    </div>
    @endif

    <!-- মেনু -->
    <div class="drw-menu">

        <div class="drw-menu-label">MAIN NAVIGATION</div>
        <div class="drw-menu-card">

            <a href="{{ url('/earning-projects') }}"
               class="drw-menu-item {{ request()->is('earning-projects') ? 'active' : '' }}">
                <i class="fa-solid fa-house drw-icon"></i>
                DASHBOARD
            </a>

            <a href="{{ url('/earning-projects') }}"
               class="drw-menu-item {{ request()->is('earning-projects') ? 'active' : '' }}">
                <i class="fa-solid fa-money-bill-trend-up drw-icon"></i>
                EARNING PROJECTS
            </a>

            <a href="{{ url('/earning-income') }}"
               class="drw-menu-item {{ request()->is('earning-income') ? 'active' : '' }}">
                <i class="fa-solid fa-chart-line drw-icon"></i>
                INCOME BALANCE
            </a>

            <a href="{{ url('/earning-referral') }}"
               class="drw-menu-item {{ request()->is('earning-referral') ? 'active' : '' }}">
                <i class="fa-solid fa-users drw-icon"></i>
                REFERRAL
            </a>

            <a href="{{ url('/earning-history') }}"
               class="drw-menu-item {{ request()->is('earning-history') ? 'active' : '' }}">
                <i class="fa-solid fa-clock-rotate-left drw-icon"></i>
                TRANSACTION HISTORY
            </a>

            <a href="{{ url('/earning-settings') }}"
               class="drw-menu-item {{ request()->is('earning-settings') ? 'active' : '' }}">
                <i class="fa-solid fa-gear drw-icon"></i>
                SETTINGS
            </a>

        </div>

        <div class="drw-menu-label">SOCIAL PLATFORMS</div>
        <div class="drw-menu-card drw-social-grid">
            <a href="{{ $fb }}" target="_blank" class="drw-social-btn fb">
                <i class="fa-brands fa-facebook-f"></i>
            </a>
            <a href="{{ $yt }}" target="_blank" class="drw-social-btn yt">
                <i class="fa-brands fa-youtube"></i>
            </a>
            <a href="{{ $tg }}" target="_blank" class="drw-social-btn tg">
                <i class="fa-brands fa-telegram"></i>
            </a>
            <a href="{{ $wa }}" target="_blank" class="drw-social-btn wa">
                <i class="fa-brands fa-whatsapp"></i>
            </a>
        </div>

        <!-- লগআউট -->
        <form method="POST" action="{{ route('user.logout') }}" class="drw-logout-form">
            @csrf
            <button type="submit" class="drw-menu-item drw-logout-btn">
                <i class="fa-solid fa-power-off drw-icon"></i>
                LOGOUT ACCOUNT
            </button>
        </form>

    </div>

    <!-- ফুটার -->
    <div class="drw-foot">
        APP VERSION {{ $appVersion }}
    </div>

</aside>

<!-- টোস্ট -->
<div id="drwToast" class="drw-toast">COPIED TO CLIPBOARD!</div>

<script>
(function(){
    const backdrop = document.getElementById('drawerBackdrop');
    const drawer   = document.getElementById('drawer');
    const openBtn  = document.getElementById('btnDrawerOpen');
    const closeBtn = document.getElementById('btnDrawerClose');

    function openDrawer(){
        if(drawer) drawer.classList.add('open');
        if(backdrop) backdrop.classList.add('show');
        document.body.classList.add('drw-locked');
    }

    function closeDrawer(){
        if(drawer) drawer.classList.remove('open');
        if(backdrop) backdrop.classList.remove('show');
        document.body.classList.remove('drw-locked');
    }

    if(openBtn) openBtn.addEventListener('click', openDrawer);
    if(closeBtn) closeBtn.addEventListener('click', closeDrawer);
    if(backdrop) backdrop.addEventListener('click', closeDrawer);

    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape') closeDrawer();
    });

    window.openDrawer = openDrawer;
    window.closeDrawer = closeDrawer;
})();

(function(){
    const copyBtn = document.getElementById('copyCode');
    const toast = document.getElementById('drwToast');

    function showToast(){
        if(!toast) return;
        toast.classList.add('show');
        setTimeout(function(){ toast.classList.remove('show'); }, 2000);
    }

    function fallbackCopy(text){
        const area = document.createElement('textarea');
        area.value = text || '';
        area.style.position = 'fixed';
        area.style.left = '-99999px';
        area.style.top = '-99999px';
        area.style.opacity = '0';
        document.body.appendChild(area);
        area.focus();
        area.select();
        try{ document.execCommand('copy'); showToast(); }catch(e){}
        document.body.removeChild(area);
    }

    if(copyBtn){
        copyBtn.addEventListener('click', function(){
            const txt = this.dataset.copy;
            if(!txt || txt === '------') return;
            if(navigator.clipboard && window.isSecureContext){
                navigator.clipboard.writeText(txt).then(showToast).catch(function(){
                    fallbackCopy(txt);
                });
            }else{
                fallbackCopy(txt);
            }
        });
    }
})();
</script>