@extends('dealer.layouts.app', ['title' => 'Dealer Dashboard'])

@push('head')
    <style>
        .dealer-dashboard-rate-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.65rem 0.95rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.78);
            color: #0f172a;
            font-weight: 700;
        }

        .dealer-account-row {
            background: rgba(248, 250, 252, 0.78);
            border-color: rgba(148, 163, 184, 0.22) !important;
        }

        html[data-theme="dark"] .dealer-dashboard-rate-badge {
            background: rgba(15, 23, 42, 0.88);
            border-color: rgba(148, 163, 184, 0.18);
            color: var(--admin-text);
        }

        html[data-theme="dark"] .dealer-account-row {
            background: rgba(15, 23, 42, 0.58);
            border-color: rgba(148, 163, 184, 0.18) !important;
        }

        html[data-theme="dark"] .dealer-account-row .fw-semibold {
            color: var(--admin-text);
        }

        html[data-theme="dark"] .admin-body .table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--admin-text);
            --bs-table-border-color: var(--admin-border);
            --bs-table-striped-bg: rgba(148, 163, 184, 0.04);
            --bs-table-striped-color: var(--admin-text);
            --bs-table-hover-bg: rgba(148, 163, 184, 0.06);
            --bs-table-hover-color: var(--admin-text);
        }

        html[data-theme="dark"] .admin-body .table > :not(caption) > * > * {
            background-color: transparent !important;
            color: var(--admin-text) !important;
            border-bottom-color: var(--admin-border) !important;
        }

        html[data-theme="dark"] .admin-body .table thead th {
            color: #cbd5e1 !important;
        }

        html[data-theme="dark"] .admin-body .table-responsive {
            border-radius: 1rem;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
        <div>
            <h1 class="h4 mb-1">Dealer Dashboard</h1>
            <div class="text-muted small">Assigned merchants, commission overview, and activity snapshot.</div>
        </div>
        <div class="dealer-dashboard-rate-badge">
            <i class="bi bi-percent"></i>
            <span>Commission Rate: {{ number_format((float) $dealer->commission_rate, 2) }}%</span>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12 col-md-6 col-xl-3"><div class="card admin-card h-100"><div class="card-body"><div class="admin-kpi-title">Assigned Merchants</div><div class="admin-kpi-value mt-2">{{ $summary['merchant_count'] }}</div><div class="small text-muted">{{ $summary['active_merchant_count'] }} active merchants</div></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card admin-card h-100"><div class="card-body"><div class="admin-kpi-title">Total Payin</div><div class="admin-kpi-value mt-2">{{ number_format($summary['payin_total'], 2) }}</div><div class="small text-muted">Combined amount across assigned merchants</div></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card admin-card h-100"><div class="card-body"><div class="admin-kpi-title">Total Payout</div><div class="admin-kpi-value mt-2">{{ number_format($summary['payout_total'], 2) }}</div><div class="small text-muted">Combined payout order amount</div></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card admin-card h-100"><div class="card-body"><div class="admin-kpi-title">Estimated Commission</div><div class="admin-kpi-value mt-2">{{ number_format($summary['estimated_commission'], 2) }}</div><div class="small text-muted">Calculated from total payin and your rate</div></div></div></div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-4">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="admin-kpi-title">Dealer Account</div>
                    <div class="admin-kpi-value mt-2">{{ $dealer->name }}</div>
                    <div class="small text-muted">{{ $dealer->email }}</div>

                    <div class="row g-2 mt-3 small">
                        <div class="col-12"><div class="dealer-account-row d-flex justify-content-between border rounded px-3 py-2"><span class="text-muted">Username</span><span class="fw-semibold">{{ $dealer->username }}</span></div></div>
                        <div class="col-12"><div class="dealer-account-row d-flex justify-content-between border rounded px-3 py-2"><span class="text-muted">Phone</span><span class="fw-semibold">{{ $dealer->phone ?: '-' }}</span></div></div>
                        <div class="col-12"><div class="dealer-account-row d-flex justify-content-between border rounded px-3 py-2"><span class="text-muted">Last Login</span><span class="fw-semibold">{{ $dealer->last_login_at?->format('Y-m-d H:i') ?: '-' }}</span></div></div>
                        <div class="col-12"><div class="dealer-account-row d-flex justify-content-between border rounded px-3 py-2"><span class="text-muted">Settlement Total</span><span class="fw-semibold">{{ number_format($summary['settlement_total'], 2) }}</span></div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-8">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <div class="admin-kpi-title">Assigned Merchants</div>
                            <div class="small text-muted">Merchants assigned by admin are listed here.</div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($assignedUsers as $user)
                                    <tr>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->username ?: '-' }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td><span class="badge {{ $user->status ? 'text-bg-success' : 'text-bg-secondary' }}">{{ $user->status ? 'Active' : 'Inactive' }}</span></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">No merchants assigned yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection