@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('page-title', 'Admin Dashboard')
@section('page-subtitle', 'Influencer overview')

@push('styles')
<style>
/* ── Font ── */
body, input, select, button, textarea {
    font-family: 'Proxima Nova','Proxima Nova Rg',ui-sans-serif,system-ui,
                 -apple-system,'Helvetica Neue',Arial,sans-serif !important;
}

.dash-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.dash-filter-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #93A0B0; white-space: nowrap;
}

.dash-filter-select-wrap { position: relative; }
.dash-filter-select-wrap svg {
    position: absolute; right: 11px; top: 50%;
    transform: translateY(-50%);
    width: 13px; height: 13px;
    color: #93A0B0; pointer-events: none;
}
.dash-filter-select {
    background: #fff !important;
    border: 1.5px solid #DDE4ED !important;
    border-radius: 8px !important;
    padding: 9px 34px 9px 13px !important;
    font-size: 12.5px !important; font-weight: 500 !important;
    font-family: inherit !important;
    color: #374151 !important;
    outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 200px;
}
.dash-filter-select:focus {
    border-color: #34BDEB !important;
    box-shadow: 0 0 0 3px rgba(52,189,235,.12) !important;
}
.dash-filter-select.active {
    border-color: #34BDEB !important;
    background: #E0F7FF !important;
    color: #0369A1 !important;
    font-weight: 700 !important;
}

.dash-filter-clear {
    display: none;
    align-items: center; gap: 5px;
    padding: 9px 13px;
    background: #E0F7FF;
    border: 1.5px solid #BAE6FD;
    border-radius: 8px;
    font-size: 12px; font-weight: 700;
    color: #0369A1; cursor: pointer;
    font-family: inherit; transition: all .15s;
    white-space: nowrap;
}
.dash-filter-clear:hover { background: #BAE6FD; }
.dash-filter-clear.visible { display: inline-flex; }
.dash-filter-clear svg { width: 11px; height: 11px; }

.dash-filter-badge {
    display: none;
    align-items: center; gap: 6px;
    padding: 5px 12px;
    background: rgba(52,189,235,.1);
    border: 1px solid rgba(52,189,235,.25);
    border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
    color: #0369A1;
}
.dash-filter-badge.visible { display: inline-flex; }
.dash-filter-badge svg { width: 11px; height: 11px; }


.section-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: #93A0B0;
    margin-bottom: 14px;
    padding-left: 2px;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stats-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .stats-grid   { grid-template-columns: repeat(2, 1fr); }
    .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .stats-grid   { grid-template-columns: 1fr; }
    .stats-grid-2 { grid-template-columns: 1fr; }
}


.stat-card {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 22px 22px 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(11,22,40,.06), 0 6px 18px rgba(11,22,40,.04);
    transition: box-shadow .18s, transform .18s;
    cursor: default;
}
.stat-card:hover {
    box-shadow: 0 4px 16px rgba(11,22,40,.1), 0 10px 28px rgba(11,22,40,.06);
    transform: translateY(-2px);
}

/* Accent top bar */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent, #34BDEB);
    border-radius: 14px 14px 0 0;
}

/* Icon bubble */
.stat-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: var(--icon-bg, rgba(52,189,235,.12));
    border: 1px solid var(--icon-bdr, rgba(52,189,235,.2));
}
.stat-icon svg { width: 19px; height: 19px; }

.stat-value {
    font-size: 34px; font-weight: 800;
    color: #0F1D2E;
    line-height: 1; margin-bottom: 6px;
    letter-spacing: -.6px;
    transition: opacity .2s;
}
.stat-value.updating { opacity: .35; }

.stat-label {
    font-size: 13px; font-weight: 600;
    color: #374151; margin-bottom: 3px;
}
.stat-sub { font-size: 11.5px; color: #93A0B0; }

.stat-filtered-note {
    display: none;
    align-items: center; gap: 4px;
    margin-top: 8px;
    font-size: 10.5px; font-weight: 600;
    color: #0369A1;
    background: #E0F7FF;
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    padding: 2px 9px;
    width: fit-content;
}
.stat-filtered-note.visible { display: flex; }
.stat-filtered-note svg { width: 10px; height: 10px; }

.stat-card::after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: var(--ring-bg, rgba(52,189,235,.06));
    pointer-events: none;
}
</style>
@endpush

@section('content')

<div class="dash-filter-bar">
    <span class="dash-filter-label">Filter by Industry</span>
    <div class="dash-filter-select-wrap">
        <select class="dash-filter-select" id="dashIndFilter">
            <option value="">All Industries</option>
            @foreach($industries as $val => $label)
                <option value="{{ $val }}">{{ $label }}</option>
            @endforeach
        </select>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="6 9 12 15 18 9"/>
        </svg>
    </div>
    <button class="dash-filter-clear" id="dashFilterClear">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Clear Filter
    </button>
    <span class="dash-filter-badge" id="dashFilterBadge">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
        </svg>
        <span id="dashFilterBadgeText"></span>
    </span>
</div>

<div class="section-label">Signed-Up Influencers</div>
<div class="stats-grid">

    <div class="stat-card" style="
        --accent: #34BDEB;
        --icon-bg: rgba(52,189,235,.12);
        --icon-bdr: rgba(52,189,235,.2);
        --ring-bg: rgba(52,189,235,.06);
    ">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#34BDEB" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
        </div>
        <div class="stat-value" id="val-signed-up">{{ number_format($stats['signed_up_influencers']) }}</div>
        <div class="stat-label">Total Signed Up</div>
        <div class="stat-sub" id="sub-signed-up">All influencer accounts</div>
        <div class="stat-filtered-note" id="note-signed-up">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtered by industry
        </div>
    </div>

    {{-- Approved --}}
    <div class="stat-card" style="
        --accent: #16A34A;
        --icon-bg: rgba(22,163,74,.1);
        --icon-bdr: rgba(22,163,74,.2);
        --ring-bg: rgba(22,163,74,.05);
    ">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
        </div>
        <div class="stat-value" id="val-approved">{{ number_format($stats['approved_influencers']) }}</div>
        <div class="stat-label">Approved</div>
        <div class="stat-sub" id="sub-approved">Active &amp; approved accounts</div>
        <div class="stat-filtered-note" id="note-approved">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtered by industry
        </div>
    </div>

    {{-- Pending --}}
    <div class="stat-card" style="
        --accent: #F59E0B;
        --icon-bg: rgba(245,158,11,.1);
        --icon-bdr: rgba(245,158,11,.2);
        --ring-bg: rgba(245,158,11,.05);
    ">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="8"  x2="12"   y2="12"/>
                <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
        </div>
        <div class="stat-value" id="val-pending">{{ number_format($stats['pending_influencers']) }}</div>
        <div class="stat-label">Pending Approval</div>
        <div class="stat-sub" id="sub-pending">Awaiting review</div>
        <div class="stat-filtered-note" id="note-pending">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtered by industry
        </div>
    </div>

</div>

<div class="section-label">Imported Influencers</div>
<div class="stats-grid-2">

    {{-- Imported --}}
    <div class="stat-card" style="
        --accent: #7C3AED;
        --icon-bg: rgba(124,58,237,.1);
        --icon-bdr: rgba(124,58,237,.2);
        --ring-bg: rgba(124,58,237,.05);
    ">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
                <polyline points="10 9 9 9 8 9"/>
            </svg>
        </div>
        <div class="stat-value" id="val-imported">{{ number_format($stats['imported_influencers']) }}</div>
        <div class="stat-label">Imported Influencers</div>
        <div class="stat-sub" id="sub-imported">Tracked channels added by admin</div>
        <div class="stat-filtered-note" id="note-imported">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtered by industry
        </div>
    </div>

    {{-- Total combined --}}
    <div class="stat-card" style="
        --accent: #0B1628;
        --icon-bg: rgba(11,22,40,.08);
        --icon-bdr: rgba(11,22,40,.15);
        --ring-bg: rgba(11,22,40,.03);
    ">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#0B1628" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
        </div>
        <div class="stat-value" id="val-total">{{ number_format($stats['signed_up_influencers'] + $stats['imported_influencers']) }}</div>
        <div class="stat-label">Total Influencers</div>
        <div class="stat-sub" id="sub-total">Signed up + imported combined</div>
        <div class="stat-filtered-note" id="note-total">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtered by industry
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
(function () {
    var COUNTS = @json($industryCounts ?? []);
    var ALL = {
        signed_up: {{ $stats['signed_up_influencers'] }},
        approved:  {{ $stats['approved_influencers'] }},
        pending:   {{ $stats['pending_influencers'] }},
        imported:  {{ $stats['imported_influencers'] }},
    };

    var filterSel = document.getElementById('dashIndFilter');
    var clearBtn  = document.getElementById('dashFilterClear');
    var badge     = document.getElementById('dashFilterBadge');
    var badgeText = document.getElementById('dashFilterBadgeText');

    function fmt(n) {
        n = parseInt(n, 10) || 0;
        if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
        if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
        if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
        return n.toLocaleString();
    }

    function setVal(id, n) {
        var el = document.getElementById('val-' + id);
        if (!el) return;
        el.classList.add('updating');
        setTimeout(function () {
            el.textContent = fmt(n);
            el.classList.remove('updating');
        }, 120);
    }

    function setNote(id, visible) {
        var el = document.getElementById('note-' + id);
        if (el) el.classList.toggle('visible', visible);
    }

    function applyFilter(industry) {
        var filtered = !!industry;
        var d = (!filtered || !COUNTS[industry]) ? ALL : COUNTS[industry];

        var signedUp = parseInt(d.signed_up || d.signed_up_influencers || 0, 10);
        var approved = parseInt(d.approved  || d.approved_influencers  || 0, 10);
        var pending  = parseInt(d.pending   || d.pending_influencers   || 0, 10);
        var imported = parseInt(d.imported  || d.imported_influencers  || 0, 10);

        setVal('signed-up', signedUp);
        setVal('approved',  approved);
        setVal('pending',   pending);
        setVal('imported',  imported);
        setVal('total',     signedUp + imported);

        ['signed-up','approved','pending','imported','total'].forEach(function(id) {
            setNote(id, filtered);
        });

        filterSel.classList.toggle('active', filtered);
        clearBtn.classList.toggle('visible', filtered);
        badge.classList.toggle('visible', filtered);
        if (filtered) {
            var opt = filterSel.options[filterSel.selectedIndex];
            badgeText.textContent = opt ? opt.textContent : industry;
        }
    }

    filterSel.addEventListener('change', function () { applyFilter(this.value); });
    clearBtn.addEventListener('click', function () {
        filterSel.value = '';
        filterSel.classList.remove('active');
        applyFilter('');
    });
})();
</script>
@endpush