@extends('layouts.master')
@section('title', $title)

@section('page_css')
<style>
    :root {
        --card-radius: 12px;
        --muted: #6c757d;
    }

    /* --- Stat Cards --- */
    .stat-card {
        border-radius: var(--card-radius);
        padding: 18px;
        color: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    }
    .stat-card .label { font-size: 13px; color: rgba(255,255,255,0.85); }
    .stat-card .value { font-size: 28px; font-weight: 700; margin-top: 6px; }

    /* --- Chart Boxes --- */
    .chart-box {
        background: #fff;
        padding: 18px;
        border-radius: var(--card-radius);
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

    /* --- Small Cards --- */
    .small-card {
        background: #fff;
        border-radius: 12px;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        transition: transform 0.3s, box-shadow 0.3s;
        text-align: center;
    }
    .small-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    }
    .small-card .icon i { transition: transform 0.3s; }
    .small-card:hover .icon i { transform: scale(1.2); }
    .small-card .label { font-size: 14px; font-weight: 500; }
    .small-card .h4 { font-size: 22px; font-weight: 700; margin-top: 6px; }

    /* --- Table --- */
    .table-xs td, .table-xs th { padding: .45rem .5rem; font-size: 13px; }
    .badge-paid { background: #1cc88a; color:#fff; padding:6px 10px; border-radius: 999px; }
    .badge-unpaid { background: #e74a3b; color:#fff; padding:6px 10px; border-radius: 999px; }

    /* --- Gradients --- */
    .card-gradient-1 { background: linear-gradient(135deg, #1cc88a, #17a673); color:#fff; }
    .card-gradient-2 { background: linear-gradient(135deg, #36b9cc, #2c9faf); color:#fff; }
    .card-gradient-3 { background: linear-gradient(135deg, #4e73df, #2e59d9); color:#fff; }
    .card-gradient-4 { background: linear-gradient(135deg, #f6c23e, #dda20a); color:#fff; }
    .card-gradient-5 { background: linear-gradient(135deg, #e74a3b, #c0392b); color:#fff; }
    .card-gradient-6 { background: linear-gradient(135deg, #858796, #5a5c69); color:#fff; }
    .card-gradient-7 { background: linear-gradient(135deg, #36b9cc, #2c9faf); color:#fff; }
    .card-gradient-8 { background: linear-gradient(135deg, #1cc88a, #17a673); color:#fff; }
    .card-gradient-9 { background: linear-gradient(135deg, #f6c23e, #dda20a); color:#fff; }
    .card-gradient-10 { background: linear-gradient(135deg, #e74a3b, #c0392b); color:#fff; }
    .card-gradient-11 { background: linear-gradient(135deg, #4e73df, #2e59d9); color:#fff; }
    .card-gradient-12 { background: linear-gradient(135deg, #858796, #5a5c69); color:#fff; }

    .stat-card {
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


</style>
@endsection

@section('content')

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<div class="container-fluid my-4">

    {{-- Top Stats --}}
   <div class="row g-3">
    <div class="col-lg-3 col-md-6 d-flex">
        <div class="stat-card bg-primary h-100 w-100">
            <div class="label">Total Staff</div>
            <div class="value">{{ $staff_total }}</div>
            <small class="d-block mt-2">{{ $permenant_staff }} Permenant • {{ $temporary_staff }} Temporary</small>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 d-flex">
        <div class="stat-card bg-success h-100 w-100">
            <div class="label">Monthly Salary Expense</div>
            <div class="value">{{ number_format((float)$monthly_salary_expense, 2) }}</div>
            <small class="d-block mt-2">This month</small>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 d-flex">
        <div class="stat-card bg-danger h-100 w-100">
            <div class="label">Last Month Salary Generated</div>
            <div class="value">{{number_format( $unpaid_salary_generated, 0) }}</div>
            <small class="d-block mt-2">{{number_format( $paid_salary_generated, 0) }} paid</small>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 d-flex">
        <div class="stat-card bg-warning h-100 w-100">
            <div class="label">Attendance Today</div>
            <div class="value">{{ $attendance_today }}</div>
            <small class="d-block mt-2">Present today</small>
        </div>
    </div>
</div>


    {{-- Quick Cards --}}
    <div class="row g-3 mt-3">
        {{-- @php
            $quickCards = [
                ['icon'=>'fa-building','label'=>'Branches','value'=>$branches,'gradient'=>'card-gradient-1'],
                ['icon'=>'fa-sitemap','label'=>'Departments','value'=>$departments,'gradient'=>'card-gradient-2'],
                ['icon'=>'fa-clock','label'=>'Shifts','value'=>$shifts,'gradient'=>'card-gradient-3'],
                ['icon'=>'fa-hand-holding-usd','label'=>'Loans','value'=>$total_loans,'gradient'=>'card-gradient-4'],
                ['icon'=>'fa-wallet','label'=>'Advances','value'=>$total_advances,'gradient'=>'card-gradient-5'],
                ['icon'=>'fa-id-badge','label'=>'Job Titles','value'=>$job_titles,'gradient'=>'card-gradient-6'],
            ];
        @endphp --}}

        {{-- @foreach($quickCards as $card)
        <div class="col-lg-2 col-md-4 col-sm-6">
            <div class="small-card py-4 {{ $card['gradient'] }}">
                <div class="icon mb-2"><i class="fas {{ $card['icon'] }} fa-2x"></i></div>
                <div class="label text-white">{{ $card['label'] }}</div>
                <div class="h4 mt-1 text-white">{{ $card['value'] }}</div>
            </div>
        </div>
        @endforeach --}}
    </div>

    {{-- Attendance Cards --}}
    <div class="row g-3 mt-4">
     <div class="card mb-4 shadow-sm">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Attendance This Month (from today)</h5>
        <small>Fridays excluded • Active & Suspended Staff</small>
    </div>
    <div class="card-body">
        <canvas id="attendanceChart" height="120"></canvas>
    </div>
</div>


        {{-- @foreach($attendanceCards as $card)
        <div class="col-lg-2 col-md-4 col-sm-6">
            <div class="small-card py-4 {{ $card['gradient'] }}">
                <div class="icon mb-2"><i class="fas {{ $card['icon'] }} fa-2x"></i></div>
                <div class="label text-white">{{ $card['label'] }}</div>
                <div class="h4 mt-1 text-white">{{ $card['value'] }}</div>
            </div>
        </div>
        @endforeach --}}
    </div>

    {{-- Attendance Chart --}}
    <div class="row mt-4">
        <div class="col-12">
            <div class="chart-box shadow-lg rounded-3 p-3">
                <h5 class="mb-3">Attendance Overview (Current Month)</h5>
                <div id="attendance_chart" style="height:320px;"></div>
            </div>
        </div>
    </div>

    {{-- Main Charts and Lists --}}
    <div class="row g-4 mt-4">

        <div class="col-xl-7 col-lg-7">
            <div class="chart-box mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Salary Payments — last 6 months</h5>
                    <small class="text-muted">Trend of total salary per month</small>
                </div>
                <div id="salaryChart" style="height:320px;"></div>
            </div>

            <div class="chart-box">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Paid vs Unpaid (rows)</h5>
                    <small class="text-muted">Proportion of paid/unpaid salary rows</small>
                </div>
                <div id="paidUnpaidChart" style="height:280px;"></div>
            </div>
        </div>

        <div class="col-xl-5 col-lg-5">

            <div class="small-card mb-3 p-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="label text-muted">Top Paid Staff</div>
                        <div class="h5 mt-1">{{ $top_staff_name }}</div>
                        <div class="small text-muted">Salary: {{ number_format($top_staff_salary,2) }}</div>
                    </div>
                    <div class="text-end">
                        <a href="#" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                </div>
            </div>

            <div class="small-card mb-3 p-3">
                <h6 class="mb-2">Branch Summary</h6>
                <ul class="list-unstyled mb-0">
                    @forelse($branch_summary as $b)
                        <li class="d-flex justify-content-between py-1 border-bottom">
                            <div>{{ $b['branch_name'] }}</div>
                            <div><strong>{{ $b['total'] }}</strong></div>
                        </li>
                    @empty
                        <li>No branches found</li>
                    @endforelse
                </ul>
            </div>

            <div class="small-card p-3">
                <h6 class="mb-2">Salary Heads Summary</h6>
                <div class="d-flex justify-content-between">
                    <div>Paid Heads</div>
                    <div><strong>{{ $paidHeads }}</strong></div>
                </div>
                <div class="d-flex justify-content-between mt-1">
                    <div>Unpaid Heads</div>
                    <div><strong>{{ $unpaidHeads }}</strong></div>
                </div>
            </div>

        </div>
    </div>

    {{-- Recent Payments & Unpaid Rows --}}
    <div class="row g-4 mt-4">
        <div class="col-lg-6">
            <div class="chart-box">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Recent Payments</h5>
                    <small class="text-muted">Latest salary payments</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-xs">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Staff</th>
                                <th>Amount</th>
                                <th>Type</th>
                                <th>Date</th>
                                <th class="text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_payments as $p)
                                <tr>
                                    <td>{{ $p->id }}</td>
                                    <td>{{ optional(\App\Models\Employee\Staff::find($p->staff_id))->name ?? 'N/A' }}</td>
                                    <td>{{ number_format((float)$p->payment_amount,2) }}</td>
                                    <td>{{ $p->payment_type }}</td>
                                    <td>{{ \Carbon\Carbon::parse($p->date)->format('Y-m-d') }}</td>
                                    <td class="text-end">
                                        <span class="{{ $p->status == 'Paid' ? 'badge-paid' : 'badge-unpaid' }}">{{ $p->status }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="6">No payments yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="chart-box">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Recent Unpaid Salary Rows</h5>
                    <small class="text-muted">Action required</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-xs">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Staff</th>
                                <th>Net Salary</th>
                                <th>Month</th>
                                <th class="text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_unpaid as $d)
                                <tr>
                                    <td>{{ $d->id }}</td>
                                    <td>{{ optional(\App\Models\Employee\Staff::find($d->staff_id))->name ?? 'N/A' }}</td>
                                    <td>{{ number_format((float)$d->net_salary,2) }}</td>
                                    <td>{{ optional(\App\Models\Payroll\PayrollSalaryHead::find($d->salary_head_id))->month ?? 'N/A' }}</td>
                                    <td class="text-end">
                                        <span class="{{ $d->status == 'Paid' ? 'badge-paid' : 'badge-unpaid' }}">{{ $d->status }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5">All paid — no unpaid rows</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('page_js')
<script>
    // --- Salary Chart ---
    var salaryChart = echarts.init(document.getElementById('salaryChart'));
    salaryChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: @json($salary_months) },
        yAxis: { type: 'value' },
        series: [{
            name: 'Total Salary',
            type: 'bar',
            data: @json($salary_totals),
            barMaxWidth: 40,
            itemStyle: { color: '#4e73df' }
        }],
        grid: { left: '6%', right: '4%', bottom: '6%', top: '12%' }
    });

    // --- Paid vs Unpaid ---
    var paidChart = echarts.init(document.getElementById('paidUnpaidChart'));
    paidChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 10 },
        series: [{
            name: 'Salary rows',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: { show: false },
            emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
            data: [
                { value: {{ $paid_salary }}, name: 'Paid' },
                { value: {{ $unpaid_salary }}, name: 'Unpaid' }
            ],
            color: ['#1cc88a', '#e74a3b']
        }]
    });

    // --- Attendance Chart ---
    var chartDom = document.getElementById('attendance_chart');
    var myChart = echarts.init(chartDom);
    myChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['Attendance', 'Late', 'Early Leave', 'Overtime', 'Absent'] },
        xAxis: { type: 'category', data: ['Attendance','Late','Early Leave','Overtime','Absent'] },
        yAxis: { type: 'value' },
        series: [{
            name: 'Count',
            type: 'bar',
            data: [
                {{ $total_attendance }},
                {{ $late_count }},
                {{ $early_count }},
                {{ $overtime_count }},
                {{ $absent_count }}
            ],
            itemStyle: {
                color: function(params){
                    const colors = ['#1cc88a','#f6c23e','#e74a3b','#4e73df','#858796'];
                    return colors[params.dataIndex];
                }
            }
        }]
    });

    // --- Make charts responsive ---
    window.addEventListener('resize', function () {
        salaryChart.resize();
        paidChart.resize();
        myChart.resize();
    });





    
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('attendanceChart').getContext('2d');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: @json($attendance_chart['dates']),
        datasets: [
            {
                label: 'Present',
                data: @json($attendance_chart['present']),
                backgroundColor: 'rgba(40, 167, 69, 0.8)',
                borderRadius: 4,
            },
            {
                label: 'Absent',
                data: @json($attendance_chart['absent']),
                backgroundColor: 'rgba(220, 53, 69, 0.8)',
                borderRadius: 4,
            }
        ]
    },
    options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': ' + context.parsed.y;
                    }
                }
            },
            legend: { position: 'top' }
        },
        scales: {
            x: {
                stacked: true,
                ticks: { font: { size: 12, weight: '500' } }
            },
            y: {
                stacked: true,
                beginAtZero: true,
                ticks: { stepSize: 5, font: { size: 12 } }
            }
        }
    }
});
</script>

@endsection