@extends('layouts.app')

@section('content')
    <div class="dashboard-wrap pb-5">
        <header class="dashboard-header d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
            <div>
                <p class="dashboard-eyebrow mb-1">DEALERSHIP OVERVIEW</p>
                <h1 class="h3 fw-bold mb-1">Dashboard</h1>
                <p class="text-secondary mb-0">A live snapshot of today's activity and your business modules.</p>
            </div>
            <div class="dashboard-date"><i
                    class="bi bi-calendar3 me-2"></i>{{ \Illuminate\Support\Carbon::parse($date)->format('l, d M Y') }}</div>
        </header>

        @if ($isSuperAdmin)
            <button type="button" class="investment-summary mb-4" data-bs-toggle="modal"
                data-bs-target="#investmentBreakdownModal" aria-haspopup="dialog" aria-controls="investmentBreakdownModal">
                <span class="investment-total-icon"><i class="bi bi-safe2"></i></span>
                <span class="investment-summary-copy">
                    <span class="metric-label">Total Investment</span>
                    <strong>{{ number_format($totalInvestment, 2) }} <small>Tk</small></strong>
                    <span class="investment-breakdown">View amount by source</span>
                </span>
                <span class="investment-summary-action">Breakdown <i class="bi bi-chevron-right"></i></span>
            </button>

            <div class="modal fade" id="investmentBreakdownModal" tabindex="-1" aria-labelledby="investmentBreakdownTitle"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0 shadow">
                        <div class="modal-header">
                            <div>
                                <h2 class="modal-title h5 fw-semibold mb-1" id="investmentBreakdownTitle">Investment
                                    Breakdown</h2>
                                <p class="text-secondary small mb-0">Current total by source</p>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-0">
                            <table class="table table-hover align-middle mb-0">
                                <tbody>
                                    @foreach ($investmentBreakdown as $source => $amount)
                                        <tr>
                                            <th class="ps-4 fw-medium">{{ $source }}</th>
                                            <td class="text-end pe-4 text-nowrap">৳{{ number_format($amount, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th class="ps-4">Total Investment</th>
                                        <th class="text-end pe-4 text-nowrap">৳{{ number_format($totalInvestment, 2) }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <section aria-labelledby="today-heading" class="mb-5">
            <div class="section-heading d-flex align-items-center gap-2 mb-3">
                <span class="section-mark"></span>
                <h2 id="today-heading" class="h6 fw-bold mb-0">Today's performance</h2>
            </div>
            <div class="row g-3">
                <div class="col-6 col-xl-3">
                    <a class="metric-tile metric-green" href="{{ route('sales.index') }}">
                        <span class="metric-icon"><i class="bi bi-currency-exchange"></i></span>
                        <span class="metric-label">Sales today</span>
                        <strong>{{ number_format($totalSalesToday, 2) }} <small>Tk</small></strong>
                        <span class="metric-foot">{{ number_format($totalInvoices) }} invoices <i
                                class="bi bi-arrow-up-right"></i></span>
                    </a>
                </div>
                <div class="col-6 col-xl-3">
                    <a class="metric-tile metric-blue" href="{{ route('reports.profitLoss') }}">
                        <span class="metric-icon"><i class="bi bi-graph-up-arrow"></i></span>
                        <span class="metric-label">Profit today</span>
                        <strong>{{ number_format($totalProfitToday, 2) }} <small>Tk</small></strong>
                        <span class="metric-foot">Today's recorded profit <i class="bi bi-arrow-up-right"></i></span>
                    </a>
                </div>
                <div class="col-6 col-xl-3">
                    <a class="metric-tile metric-amber" href="{{ route('customers.index') }}">
                        <span class="metric-icon"><i class="bi bi-wallet2"></i></span>
                        <span class="metric-label">Outstanding dues</span>
                        <strong>{{ number_format($totalOutstandingDue, 2) }} <small>Tk</small></strong>
                        <span class="metric-foot">{{ number_format($todaysReceivedDues, 2) }} Tk received today <i
                                class="bi bi-arrow-up-right"></i></span>
                    </a>
                </div>
                <div class="col-6 col-xl-3">
                    <a class="metric-tile metric-coral" href="{{ route('expense-heads.index') }}">
                        <span class="metric-icon"><i class="bi bi-receipt"></i></span>
                        <span class="metric-label">Expenses today</span>
                        <strong>{{ number_format($todaysExpenses, 2) }} <small>Tk</small></strong>
                        <span class="metric-foot">Net office cash {{ number_format($netHandCash, 2) }} Tk <i
                                class="bi bi-arrow-up-right"></i></span>
                    </a>
                </div>
            </div>
        </section>

        @php
            $moduleGroups = [];
            $moduleGroups['Operations'] = [
                ['label' => 'Sales', 'route' => 'sales.index', 'value' => 'sales', 'count' => 'sales', 'icon' => 'bi-receipt', 'tone' => 'green'],
                ['label' => 'Purchases', 'route' => 'purchases.index', 'value' => 'purchases', 'count' => 'purchases', 'icon' => 'bi-cart3', 'tone' => 'blue'],
                ['label' => 'Returns', 'route' => 'returns.index', 'value' => 'returns', 'count' => 'returns', 'icon' => 'bi-arrow-return-left', 'tone' => 'blue'],
                ['label' => 'Damages', 'route' => 'damages.index', 'value' => 'damages', 'count' => 'damages', 'icon' => 'bi-exclamation-triangle', 'tone' => 'coral'],
                ['label' => 'Free Items Ledger', 'route' => 'sales.company-free-items-ledger', 'value' => 'free_items', 'count' => null, 'icon' => 'bi-gift', 'tone' => 'amber'],
            ];

            $moduleGroups['Inventory'] = [['label' => 'Stock', 'route' => 'stocks.index', 'value' => 'stock', 'count' => 'stock', 'icon' => 'bi-box-seam', 'tone' => 'amber']];
            if (auth()->user()->role === 'superadmin') {
                $moduleGroups['Inventory'][] = ['label' => 'Products & Unit Prices', 'route' => 'medicines.index', 'count' => 'products', 'icon' => 'bi-capsule', 'tone' => 'coral'];
            } else {
                $moduleGroups['Inventory'][] = ['label' => 'Unit Prices', 'route' => 'unit-prices.index', 'count' => 'unit_prices', 'icon' => 'bi-tags', 'tone' => 'blue'];
            }

            $moduleGroups['Companies'] = [
                ['label' => 'Companies', 'route' => 'companies.index', 'count' => 'companies', 'icon' => 'bi-buildings', 'tone' => 'blue'],
                ['label' => 'Company Codes', 'route' => 'company-codes.index', 'value' => 'company_codes', 'count' => 'company_codes', 'icon' => 'bi-upc-scan', 'tone' => 'amber'],
            ];
            $moduleGroups['People'] = [
                ['label' => 'Salesmen', 'route' => 'salesman.index', 'count' => 'salesmen', 'icon' => 'bi-person-badge', 'tone' => 'amber'],
                ['label' => 'Customers', 'route' => 'customers.index', 'value' => 'customers', 'count' => 'customers', 'icon' => 'bi-people', 'tone' => 'green'],
            ];
            $moduleGroups['Finance'] = [
                ['label' => 'Journal', 'route' => 'journal.index', 'value' => 'journal', 'count' => 'journal', 'icon' => 'bi-journal-bookmark', 'tone' => 'green'],
                ['label' => 'Loans Given', 'route' => 'loans.index', 'value' => 'loans', 'count' => 'loans', 'icon' => 'bi-cash-coin', 'tone' => 'blue'],
                ['label' => 'Bank Accounts', 'route' => 'bank_accounts.index', 'value' => 'bank_accounts', 'count' => 'bank_accounts', 'icon' => 'bi-bank', 'tone' => 'blue'],
                ['label' => 'Hand Cash', 'route' => 'hand-cash.index', 'value' => 'hand_cash', 'count' => 'hand_cash', 'icon' => 'bi-wallet2', 'tone' => 'amber'],
                ['label' => 'Expense Heads', 'route' => 'expense-heads.index', 'value' => 'expense_heads', 'count' => 'expense_heads', 'icon' => 'bi-receipt-cutoff', 'tone' => 'coral'],
                ['label' => 'Fixed Assets', 'route' => 'fixed-assets.index', 'value' => 'fixed_assets', 'count' => 'fixed_assets', 'icon' => 'bi-building-gear', 'tone' => 'amber'],
            ];
            $moduleGroups['Finance'][] = ['label' => 'Extra Income', 'route' => 'extra_income.index', 'value' => 'extra_income', 'count' => 'extra_income', 'icon' => 'bi-cash-coin', 'tone' => 'green'];
            $moduleGroups['Finance'][] = ['label' => 'Investments', 'route' => 'investments.index', 'value' => 'investments', 'count' => 'investments', 'icon' => 'bi-graph-up-arrow', 'tone' => 'coral'];
            $moduleGroups['Reports'] = [['label' => 'Reports Overview', 'route' => 'reports.index', 'count' => null, 'icon' => 'bi-bar-chart-line', 'tone' => 'green']];
            $moduleGroups['Administration'] = [
                ['label' => 'Users', 'route' => 'users.index', 'count' => 'users', 'icon' => 'bi-person-gear', 'tone' => 'coral'],
                ['label' => 'Permissions', 'route' => 'permissions.index', 'count' => null, 'icon' => 'bi-shield-lock', 'tone' => 'blue'],
            ];
            $moduleGroups = collect($moduleGroups)
                ->map(function ($modules) {
                    return array_values(array_filter($modules, function ($module) {
                        $permissionModule = \App\Support\PermissionRegistry::moduleForRoute($module['route'] ?? null);
                        return $permissionModule === null || auth()->user()->hasAppPermission($permissionModule, 'view');
                    }));
                })
                ->filter(fn($modules) => count($modules) > 0)
                ->all();
        @endphp

        @foreach ($moduleGroups as $group => $modules)
            <section class="module-section mb-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
                <div class="section-heading d-flex align-items-center gap-2 mb-3">
                    <span class="section-mark"></span>
                    <h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="h6 fw-bold mb-0">{{ $group }}
                    </h2>
                    <span class="text-secondary small">{{ count($modules) }} modules</span>
                </div>
                <div class="row g-2 g-md-3">
                    @foreach ($modules as $module)
                        <div class="col-12 col-sm-6 col-md-4 col-xl-3">
                            <a class="module-tile" href="{{ route($module['route']) }}">
                                <span class="module-icon tone-{{ $module['tone'] }}"><i
                                        class="bi {{ $module['icon'] }}"></i></span>
                                <span class="module-copy">
                                    <span class="module-name">{{ $module['label'] }}</span>
                                    <span
                                        class="module-count">{{ !empty($module['value']) ? $moduleValues[$module['value']] : ($module['count'] ? number_format($moduleCounts[$module['count']]) . ' records' : 'View overview') }}</span>
                                </span>
                                <i class="bi bi-arrow-up-right module-arrow"></i>
                            </a>
                        </div>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>

    <style>
        .dashboard-wrap {
            max-width: 1440px;
            margin: 0 auto;
        }

        .dashboard-header {
            border-bottom: 1px solid #dfe5e4;
            padding-bottom: 1.25rem;
        }

        .dashboard-eyebrow {
            color: #087e70;
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .1em;
        }

        .dashboard-header h1 {
            color: #182a2c;
        }

        .dashboard-date {
            color: #425456;
            font-size: .9rem;
            font-weight: 600;
            padding: .65rem .85rem;
            background: #fff;
            border: 1px solid #dfe5e4;
            border-radius: 6px;
        }

        .investment-summary {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
            padding: 1rem 1.25rem;
            border: 1px solid #dfe5e4;
            border-left: 4px solid #13856f;
            border-radius: 6px;
            background: #fff;
            box-shadow: 0 4px 14px rgba(28, 54, 52, .05);
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: box-shadow .16s ease, transform .16s ease;
        }

        .investment-summary:hover {
            box-shadow: 0 8px 20px rgba(28, 54, 52, .09);
            transform: translateY(-1px);
        }

        .investment-summary:focus-visible {
            outline: 3px solid rgba(19, 133, 111, .35);
            outline-offset: 2px;
        }

        .investment-total-icon {
            display: grid;
            place-items: center;
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            border-radius: 6px;
            background: #e6f3ef;
            color: #087e70;
            font-size: 1.35rem;
        }

        .investment-summary-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: .15rem;
        }

        .investment-summary-copy strong {
            color: #203234;
            font-size: 1.5rem;
            font-variant-numeric: tabular-nums;
            overflow-wrap: anywhere;
        }

        .investment-summary-copy strong small {
            color: #667575;
            font-size: .8rem;
            font-weight: 600;
        }

        .investment-breakdown {
            color: #667575;
            font-size: .76rem;
        }

        .investment-summary-action {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            margin-left: auto;
            color: #087e70;
            font-size: .82rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .section-heading {
            color: #243638;
        }

        .section-mark {
            height: 18px;
            width: 4px;
            border-radius: 2px;
            background: #087e70;
        }

        .metric-tile {
            min-height: 170px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: .3rem;
            padding: 1rem;
            border: 1px solid #e0e7e5;
            border-top: 3px solid var(--accent);
            border-radius: 6px;
            background: #fff;
            color: #203234;
            text-decoration: none;
            transition: transform .16s ease, box-shadow .16s ease;
        }

        .metric-tile:hover,
        .module-tile:hover {
            color: #203234;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(28, 54, 52, .08);
        }

        .metric-green {
            --accent: #13856f;
        }

        .metric-blue {
            --accent: #3977a5;
        }

        .metric-amber {
            --accent: #c38925;
        }

        .metric-coral {
            --accent: #cf6551;
        }

        .metric-icon {
            color: var(--accent);
            font-size: 1.1rem;
        }

        .metric-label {
            color: #667575;
            font-size: .9rem;
            font-weight: 600;
        }

        .metric-tile strong {
            font-size: clamp(1.2rem, 2.2vw, 1.65rem);
            font-variant-numeric: tabular-nums;
            overflow-wrap: anywhere;
        }

        .metric-tile strong small {
            color: #6b7979;
            font-size: .72rem;
            font-weight: 600;
        }

        .metric-foot {
            display: flex;
            align-items: center;
            gap: .4rem;
            margin-top: auto;
            color: #667575;
            font-size: .8rem;
        }

        .metric-foot i {
            color: var(--accent);
        }

        .module-tile {
            min-height: 92px;
            display: flex;
            align-items: center;
            gap: .85rem;
            padding: 1rem;
            border: 1px solid #e0e7e5;
            border-radius: 6px;
            background: #fff;
            color: #203234;
            text-decoration: none;
            transition: transform .16s ease, box-shadow .16s ease;
        }

        .module-icon {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border-radius: 6px;
            font-size: 1.15rem;
        }

        .tone-green {
            color: #087e70;
            background: #e6f3ef;
        }

        .tone-blue {
            color: #3977a5;
            background: #eaf1f7;
        }

        .tone-amber {
            color: #a87212;
            background: #fbf2df;
        }

        .tone-coral {
            color: #b95340;
            background: #faece8;
        }

        .module-copy {
            min-width: 0;
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: .1rem;
        }

        .module-name {
            overflow: hidden;
            color: #26383a;
            font-size: 1rem;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .module-count {
            color: #788585;
            font-size: .85rem;
            font-weight: 500;
            line-height: 1.3;
        }

        .module-arrow {
            align-self: flex-start;
            color: #899594;
            font-size: .95rem;
        }

        @media (max-width: 575.98px) {
            .dashboard-header h1 {
                font-size: 1.4rem;
            }

            .dashboard-header p:not(.dashboard-eyebrow) {
                font-size: .82rem;
            }

            .metric-tile {
                min-height: 165px;
                padding: .9rem;
            }

            .metric-foot {
                font-size: .72rem;
            }

            .module-tile {
                min-height: 82px;
                gap: .65rem;
                padding: .8rem;
            }

            .module-icon {
                flex-basis: 38px;
                width: 38px;
                height: 38px;
            }

            .module-name {
                font-size: .92rem;
            }

            .module-count {
                font-size: .8rem;
            }

            .investment-summary {
                align-items: flex-start;
                padding: .9rem;
            }

            .investment-total-icon {
                flex-basis: 40px;
                width: 40px;
                height: 40px;
            }

            .investment-summary-copy strong {
                font-size: 1.25rem;
            }

            .investment-summary-action {
                font-size: .72rem;
            }
        }
    </style>
@endsection