@extends('layouts.metor.admin')
@section('title','Dashboard')
@section('content')

<div class="row">
    <div class="col-12 col-xl-8">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Employees</p>
                                <h4 class="fw-bold text-primary d-flex align-items-center gap-2 mb-0">{{ number_format($stats['employees']) }}</h4>
                                <small class="text-muted">{{ number_format($stats['active_employees']) }} active</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-primary">
                                    <i class="ri-team-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Users</p>
                                <h4 class="fw-bold d-flex align-items-center gap-2 mb-0">{{ number_format($stats['users']) }}</h4>
                                <small class="text-muted">System accounts</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-success">
                                    <i class="ri-user-settings-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Attendances</p>
                                <h4 class="fw-bold d-flex align-items-center gap-2 mb-0">{{ number_format($stats['attendances_this_month']) }}</h4>
                                <small class="text-muted">This month</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-warning">
                                    <i class="ri-calendar-check-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Pending Payrolls</p>
                                <h4 class="fw-bold text-primary d-flex align-items-center gap-2 mb-0">{{ number_format($stats['pending_payrolls']) }}</h4>
                                <small class="text-muted">{{ number_format($stats['total_payrolls']) }} total payrolls</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-danger">
                                    <i class="ri-money-dollar-circle-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Leaves</p>
                                <h4 class="fw-bold d-flex align-items-center gap-2 mb-0">{{ number_format($stats['leaves']) }}</h4>
                                <small class="text-muted">Leave records</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-info">
                                    <i class="ri-calendar-event-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-6">
                <div class="card pb-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-3 card-title">Loans</p>
                                <h4 class="fw-bold d-flex align-items-center gap-2 mb-0">{{ number_format($stats['loans']) }}</h4>
                                <small class="text-muted">{{ number_format($stats['clients']) }} clients</small>
                            </div>
                            <div>
                                <div class="py-2 px-3 rounded-circle bg-secondary">
                                    <i class="ri-bank-line fs-25 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">Monthly Attendance</h4>
                            <p class="text-muted mb-0 small">Attendance records over the last 6 months</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="attendance-bar-chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">Monthly Net Payroll</h4>
                            <p class="text-muted mb-0 small">Total net salary paid over the last 6 months</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="payroll-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">Employees by Department</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="department-pie-chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">Module Overview</h4>
                            <p class="text-muted mb-0 small">Record counts across modules</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="module-pie-chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div>
                            <h4 class="card-title mb-0">Payroll Payment Status</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="payment-pie-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    const chartColors = ['#663ffa', '#1bb394', '#f9b931', '#ed5565', '#1e84c4', '#7f56da', '#5d7186', '#23c6c8'];
    const months = @json($months);
    const attendanceCounts = @json($attendanceCounts);
    const payrollTotals = @json($payrollTotals);
    const departmentLabels = @json($departmentLabels);
    const departmentSeries = @json($departmentSeries);
    const moduleLabels = @json($moduleLabels);
    const moduleSeries = @json($moduleSeries);
    const paymentStatusLabels = @json($paymentStatusLabels);
    const paymentStatusSeries = @json($paymentStatusSeries);

    const commonBarOptions = {
        chart: {
            height: 300,
            type: 'bar',
            toolbar: { show: false },
            parentHeightOffset: 0
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                columnWidth: '45%'
            }
        },
        dataLabels: { enabled: false },
        grid: {
            borderColor: '#f1f3fa',
            yaxis: { lines: { show: true } },
            xaxis: { lines: { show: false } }
        },
        xaxis: {
            categories: months,
            axisBorder: { show: false },
            axisTicks: { show: false },
            labels: {
                style: { fontSize: '12px', colors: '#4d5761' }
            }
        },
        yaxis: {
            labels: {
                style: { fontSize: '12px', colors: '#4d5761' }
            }
        },
        legend: { show: false }
    };

    new ApexCharts(document.querySelector('#attendance-bar-chart'), {
        ...commonBarOptions,
        series: [{ name: 'Attendances', data: attendanceCounts }],
        colors: ['#663ffa']
    }).render();

    new ApexCharts(document.querySelector('#payroll-bar-chart'), {
        ...commonBarOptions,
        series: [{ name: 'Net Payroll', data: payrollTotals }],
        colors: ['#1bb394'],
        yaxis: {
            labels: {
                style: { fontSize: '12px', colors: '#4d5761' },
                formatter: function (value) {
                    return value.toLocaleString();
                }
            }
        },
        tooltip: {
            y: {
                formatter: function (value) {
                    return value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            }
        }
    }).render();

    const pieOptions = {
        chart: {
            height: 280,
            type: 'pie'
        },
        colors: chartColors,
        legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center',
            fontSize: '12px',
            offsetY: 5
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: { height: 240 },
                legend: { show: false }
            }
        }]
    };

    new ApexCharts(document.querySelector('#department-pie-chart'), {
        ...pieOptions,
        series: departmentSeries,
        labels: departmentLabels
    }).render();

    new ApexCharts(document.querySelector('#module-pie-chart'), {
        ...pieOptions,
        series: moduleSeries,
        labels: moduleLabels
    }).render();

    new ApexCharts(document.querySelector('#payment-pie-chart'), {
        ...pieOptions,
        series: paymentStatusSeries,
        labels: paymentStatusLabels
    }).render();
</script>
@endsection
