@extends('admin.layouts.master')

@section('title', 'Dashboard')

@push('styles')
<style>
    .tom-dash {
        --dash-ink: #2a221e;
        --dash-muted: #8a7b70;
        --dash-line: rgba(42, 34, 30, .08);
        --dash-card: #ffffff;
    }
    .tom-dash-hero {
        background:
            radial-gradient(900px 220px at 0% 0%, rgba(157, 111, 82, .16), transparent 55%),
            radial-gradient(700px 200px at 100% 0%, rgba(28, 135, 95, .10), transparent 50%),
            linear-gradient(135deg, #ffffff 0%, #f8f4f0 100%);
        border: 1px solid rgba(157, 111, 82, .12);
        border-radius: 1rem;
        padding: 1.15rem 1.35rem;
        margin-bottom: 1.15rem;
    }
    .tom-dash-hero h3 {
        color: var(--tom-primary-dark);
        font-weight: 700;
        margin: 0 0 .2rem;
        font-size: 1.35rem;
    }
    .tom-kpi {
        background: var(--dash-card);
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 10px 28px rgba(42, 34, 30, .06);
        height: 100%;
        overflow: hidden;
        position: relative;
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .tom-kpi:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(42, 34, 30, .1);
    }
    .tom-kpi::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--tom-primary);
    }
    .tom-kpi.accent-green::before { background: var(--tom-accent); }
    .tom-kpi.accent-dark::before { background: var(--tom-primary-dark); }
    .tom-kpi .kpi-icon {
        width: 46px;
        height: 46px;
        border-radius: .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(157, 111, 82, .12);
        color: var(--tom-primary-dark);
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    .tom-kpi.accent-green .kpi-icon {
        background: rgba(28, 135, 95, .12);
        color: var(--tom-accent);
    }
    .tom-kpi .kpi-value {
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--dash-ink);
        line-height: 1.1;
        margin: 0;
    }
    .tom-kpi .kpi-label {
        color: var(--dash-muted);
        font-size: .82rem;
        margin: 0 0 .15rem;
    }
    .tom-kpi .kpi-meta {
        color: #a0948a;
        font-size: .74rem;
        margin-top: .45rem;
    }
    .tom-panel {
        background: var(--dash-card);
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 10px 28px rgba(42, 34, 30, .06);
        height: 100%;
    }
    .tom-panel .card-header {
        background: transparent;
        border-bottom: 1px solid var(--dash-line);
        padding: .95rem 1.15rem .75rem;
    }
    .tom-panel .card-title {
        margin: 0;
        font-size: .98rem;
        font-weight: 650;
        color: var(--dash-ink);
    }
    .tom-panel .card-subtitle {
        margin: .12rem 0 0;
        font-size: .76rem;
        color: var(--dash-muted);
    }
    .tom-mini-table th {
        border-top: 0;
        font-size: .68rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--dash-muted);
        font-weight: 600;
    }
    .tom-mini-table td {
        font-size: .875rem;
        vertical-align: middle;
    }
    .tom-quick {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .8rem .95rem;
        border-radius: .85rem;
        border: 1px solid rgba(157, 111, 82, .14);
        color: var(--dash-ink);
        text-decoration: none;
        transition: .15s ease;
        background: #fff;
    }
    .tom-quick:hover {
        background: rgba(157, 111, 82, .06);
        border-color: rgba(157, 111, 82, .3);
        color: var(--dash-ink);
    }
    .tom-quick i {
        width: 34px;
        height: 34px;
        border-radius: .65rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(157, 111, 82, .12);
        color: var(--tom-primary-dark);
    }
</style>
@endpush

@section('content')
<div class="tom-dash mt-4">
    <div class="tom-dash-hero d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div>
            <h3>Welcome back, {{ $adminName }}</h3>
            <p class="mb-0 text-muted">{{ now()->format('l, F j, Y') }} · Tree Of Memories overview</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('admin.funeral.create') }}" class="btn btn-primary btn-sm">
                <i class="ti ti-plus me-1"></i>Add Memorial
            </a>
            @if ($role === 1)
                <a href="{{ route('admin.subadmin.create') }}" class="btn btn-light border btn-sm">
                    <i class="ti ti-building me-1"></i>Add Funeral Home
                </a>
            @endif
        </div>
    </div>

    <div class="row g-3 mb-3">
        @if ($role === 1)
            <div class="col-xl-3 col-md-6">
                <a href="{{ route('admin.users.index') }}" class="text-decoration-none">
                    <div class="card tom-kpi">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <p class="kpi-label">App Users</p>
                                    <h4 class="kpi-value">{{ number_format($appUserCount) }}</h4>
                                    <div class="kpi-meta">{{ $newUsersThisMonth }} new this month</div>
                                </div>
                                <span class="kpi-icon"><i class="ti ti-users"></i></span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-6">
                <a href="{{ route('admin.subadmin.index') }}" class="text-decoration-none">
                    <div class="card tom-kpi accent-dark">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <p class="kpi-label">Funeral Homes</p>
                                    <h4 class="kpi-value">{{ number_format($subAdminCount) }}</h4>
                                    <div class="kpi-meta">Active partners</div>
                                </div>
                                <span class="kpi-icon"><i class="ti ti-building-community"></i></span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        @endif

        <div class="col-xl-{{ $role === 1 ? 3 : 4 }} col-md-6">
            <a href="{{ route('admin.funeral.index') }}" class="text-decoration-none">
                <div class="card tom-kpi accent-green">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <p class="kpi-label">Memorials</p>
                                <h4 class="kpi-value">{{ number_format($funeralCount) }}</h4>
                                <div class="kpi-meta">{{ $memorialsThisMonth }} updated this month</div>
                            </div>
                            <span class="kpi-icon"><i class="ti ti-tree"></i></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-{{ $role === 1 ? 3 : 4 }} col-md-6">
            <a href="{{ route('admin.payment.index') }}" class="text-decoration-none">
                <div class="card tom-kpi">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <p class="kpi-label">Payments</p>
                                <h4 class="kpi-value">{{ number_format($paymentCount) }}</h4>
                                <div class="kpi-meta">USD ${{ number_format($paidAmount, 2) }} collected</div>
                            </div>
                            <span class="kpi-icon"><i class="ti ti-credit-card"></i></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        @if ($role === 2)
            <div class="col-xl-4 col-md-6">
                <div class="card tom-kpi accent-dark">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <p class="kpi-label">Paid Revenue</p>
                                <h4 class="kpi-value">USD ${{ number_format($paidAmount, 2) }}</h4>
                                <div class="kpi-meta">{{ $paidPayments }} paid · {{ $pendingPayments }} pending</div>
                            </div>
                            <span class="kpi-icon"><i class="ti ti-currency-dollar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card tom-panel">
                <div class="card-header">
                    <h5 class="card-title">Activity Overview</h5>
                    <p class="card-subtitle">Last 6 months · memorials & paid payments</p>
                </div>
                <div class="card-body pt-2">
                    <div id="tomActivityChart" style="min-height:340px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <div class="card tom-panel">
                <div class="card-header">
                    <h5 class="card-title">Memorial Status</h5>
                    <p class="card-subtitle">Active vs inactive</p>
                </div>
                <div class="card-body">
                    <div id="tomMemorialStatusChart" style="min-height:260px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card tom-panel">
                <div class="card-header">
                    <h5 class="card-title">Payment Status</h5>
                    <p class="card-subtitle">Paid vs pending</p>
                </div>
                <div class="card-body">
                    <div id="tomPaymentStatusChart" style="min-height:260px;"></div>
                </div>
            </div>
        </div>
    </div>

    @if ($role === 1)
        <div class="row g-3 mb-3">
            <div class="col-12">
                <div class="card tom-panel">
                    <div class="card-header">
                        <h5 class="card-title">New App Users</h5>
                        <p class="card-subtitle">Registrations over the last 6 months</p>
                    </div>
                    <div class="card-body pt-2">
                        <div id="tomUsersChart" style="min-height:280px;"></div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="row g-3 mb-1">
        <div class="col-xl-7">
            <div class="card tom-panel">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title">Recent Memorials</h5>
                        <p class="card-subtitle">Latest memorial records</p>
                    </div>
                    <a href="{{ route('admin.funeral.index') }}" class="btn btn-sm btn-light border">View all</a>
                </div>
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <table class="table tom-mini-table mb-0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    @if ($role === 1)<th>Funeral Home</th>@endif
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recentMemorials as $memorial)
                                    @php
                                        $home = $memorial->funeralHome;
                                        $homeName = $home ? ($home->funeral_home_name ?: $home->contact_person ?: $home->user_name) : '—';
                                    @endphp
                                    <tr>
                                        <td class="fw-semibold">{{ $memorial->f_name ?: '—' }}</td>
                                        @if ($role === 1)
                                            <td class="text-muted">{{ $homeName }}</td>
                                        @endif
                                        <td>
                                            @if ((string) $memorial->f_status === '1')
                                                <span class="badge bg-success-subtle text-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary-subtle text-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('admin.funeral.edit', $memorial->f_id) }}" class="btn btn-sm btn-soft-primary"><i class="ti ti-eye"></i></a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="{{ $role === 1 ? 4 : 3 }}" class="text-center text-muted py-4">No memorials yet</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-5">
            <div class="card tom-panel mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title">Recent Payments</h5>
                        <p class="card-subtitle">Latest transactions</p>
                    </div>
                    <a href="{{ route('admin.payment.index') }}" class="btn btn-sm btn-light border">View all</a>
                </div>
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <table class="table tom-mini-table mb-0">
                            <thead>
                                <tr>
                                    <th>Memorial</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recentPayments as $payment)
                                    <tr>
                                        <td>{{ $payment->funeral?->f_name ?: '—' }}</td>
                                        <td class="fw-semibold">USD ${{ number_format((float) ($payment->p_amount ?: 0), 2) }}</td>
                                        <td>
                                            @if ((string) $payment->p_status === '1')
                                                <span class="badge bg-success">Paid</span>
                                            @else
                                                <span class="badge bg-warning text-dark">Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted py-4">No payments yet</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
<script>
$(function () {
    var brand = @json(config('tom.brand.primary'));
    var brandDark = @json(config('tom.brand.primary_dark'));
    var accent = @json(config('tom.brand.accent'));
    var labels = @json($monthLabels);
    var memorials = @json($memorialSeries);
    var paymentCounts = @json($paymentCountSeries);
    var paymentAmounts = @json($paymentAmountSeries);
    var users = @json($userSeries);
    var role = @json($role);
    var memorialActive = {{ (int) $activeMemorials }};
    var memorialInactive = {{ (int) $inactiveMemorials }};
    var paidCount = {{ (int) $paidPayments }};
    var pendingCount = {{ (int) $pendingPayments }};

    function safeChart(selector, options) {
        var el = document.querySelector(selector);
        if (!el) return;
        if (typeof ApexCharts === 'undefined') {
            el.innerHTML = '<div class="text-muted text-center py-5">Chart library missing</div>';
            return;
        }
        try {
            new ApexCharts(el, options).render();
        } catch (e) {
            console.error(selector, e);
            el.innerHTML = '<div class="text-muted text-center py-5">Unable to load chart</div>';
        }
    }

    safeChart('#tomActivityChart', {
        chart: { type: 'area', height: 340, toolbar: { show: false }, zoom: { enabled: false }, fontFamily: 'inherit' },
        colors: [brand, accent],
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 3 },
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.3, opacityTo: 0.04, stops: [0, 90, 100] } },
        series: [
            { name: 'Memorials', data: memorials },
            { name: 'Paid Payments', data: paymentCounts }
        ],
        xaxis: {
            categories: labels,
            axisBorder: { show: false },
            axisTicks: { show: false },
            labels: { style: { colors: '#8a7b70' } }
        },
        yaxis: {
            min: 0,
            forceNiceScale: true,
            tickAmount: 4,
            labels: { style: { colors: '#8a7b70' }, formatter: function (v) { return Math.round(v); } }
        },
        grid: { borderColor: 'rgba(42,34,30,.08)', strokeDashArray: 4 },
        legend: { position: 'top', horizontalAlign: 'right' },
        tooltip: {
            shared: true,
            y: {
                formatter: function (val, opts) {
                    if (opts && opts.seriesIndex === 1) {
                        var amt = paymentAmounts[opts.dataPointIndex] || 0;
                        return val + ' (USD $' + Number(amt).toFixed(2) + ')';
                    }
                    return val;
                }
            }
        }
    });

    safeChart('#tomMemorialStatusChart', {
        chart: { type: 'donut', height: 260, fontFamily: 'inherit' },
        labels: ['Active', 'Inactive'],
        series: [Math.max(0, memorialActive), Math.max(0, memorialInactive)],
        colors: [accent, '#cbb7a8'],
        legend: { position: 'bottom' },
        dataLabels: { enabled: false },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function () { return String(memorialActive + memorialInactive); }
                        }
                    }
                }
            }
        }
    });

    safeChart('#tomPaymentStatusChart', {
        chart: { type: 'donut', height: 260, fontFamily: 'inherit' },
        labels: ['Paid', 'Pending'],
        series: [Math.max(0, paidCount), Math.max(0, pendingCount)],
        colors: [brand, '#e0b35a'],
        legend: { position: 'bottom' },
        dataLabels: { enabled: false },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function () { return String(paidCount + pendingCount); }
                        }
                    }
                }
            }
        }
    });

    if (role === 1) {
        safeChart('#tomUsersChart', {
            chart: { type: 'bar', height: 280, toolbar: { show: false }, fontFamily: 'inherit' },
            colors: [brandDark],
            series: [{ name: 'New Users', data: users }],
            plotOptions: { bar: { borderRadius: 8, columnWidth: '45%' } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: labels,
                labels: { style: { colors: '#8a7b70' } },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: {
                min: 0,
                forceNiceScale: true,
                tickAmount: 4,
                labels: { style: { colors: '#8a7b70' }, formatter: function (v) { return Math.round(v); } }
            },
            grid: { borderColor: 'rgba(42,34,30,.08)', strokeDashArray: 4 }
        });
    }
});
</script>
@endpush