@extends('layouts.master')

@section('page_title', 'Payroll Dashboard')

@section('content')
<div class="content-wrapper">
    <!-- Content area -->
    <div class="content">
        <!-- Page header -->
        <div class="page-header page-header-light">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4>
                        <i class="icon-cash3 mr-2"></i>
                        <span class="font-weight-semibold">Payroll Dashboard</span>
                    </h4>
                    <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
                </div>

                <div class="header-elements d-none">
                    <div class="d-flex justify-content-center">
                        <a href="{{ route('payroll.processing') }}" class="btn btn-primary">
                            <i class="icon-cog mr-1"></i>
                            Process Payroll
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page header -->

        <!-- Statistics Cards -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <h3 class="font-weight-semibold mb-0">{{ $stats['total_employees'] }}</h3>
                                <span class="opacity-75">Active Employees</span>
                            </div>
                            <div class="ml-auto">
                                <i class="icon-users4 icon-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <h3 class="font-weight-semibold mb-0">{{ $stats['pending_batches'] }}</h3>
                                <span class="opacity-75">Pending Batches</span>
                            </div>
                            <div class="ml-auto">
                                <i class="icon-clock2 icon-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <h3 class="font-weight-semibold mb-0">{{ \App\Helpers\Mk::formatCurrency($stats['this_month_processed'], 0) }}</h3>
                                <span class="opacity-75">This Month Paid</span>
                            </div>
                            <div class="ml-auto">
                                <i class="icon-cash3 icon-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <h3 class="font-weight-semibold mb-0">{{ $stats['active_loans'] }}</h3>
                                <span class="opacity-75">Active Loans</span>
                            </div>
                            <div class="ml-auto">
                                <i class="icon-credit-card icon-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /statistics cards -->

        <div class="row">
            <!-- Recent Payroll Batches -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="icon-list mr-2"></i>
                            Recent Payroll Batches
                        </h6>
                        <div class="header-elements">
                            <a href="{{ route('payroll.processing') }}" class="btn btn-light btn-sm">
                                View All
                            </a>
                        </div>
                    </div>

                    <div class="card-body">
                        @if($recentBatches->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Batch Name</th>
                                            <th>Employees</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentBatches as $batch)
                                            <tr>
                                                <td>
                                                    <a href="{{ route('payroll.batch-details', $batch->id) }}" class="font-weight-semibold">
                                                        {{ $batch->batch_name }}
                                                    </a>
                                                </td>
                                                <td>{{ $batch->total_employees }}</td>
                                                <td class="font-weight-semibold">{{ \App\Helpers\Mk::formatCurrency($batch->total_net_amount, 0) }}</td>
                                                <td>
                                                    <span class="badge badge-{{ 
                                                        $batch->status === 'paid' ? 'success' : 
                                                        ($batch->status === 'approved' ? 'primary' : 
                                                        ($batch->status === 'calculated' ? 'warning' : 'secondary')) 
                                                    }}">
                                                        {{ ucfirst($batch->status) }}
                                                    </span>
                                                </td>
                                                <td>{{ $batch->created_at->format('M d, Y') }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="icon-info22 icon-2x text-muted mb-3"></i>
                                <h6 class="text-muted">No payroll batches yet</h6>
                                <p class="text-muted">Create your first payroll batch to get started</p>
                                <a href="{{ route('payroll.processing') }}" class="btn btn-primary">
                                    <i class="icon-plus2 mr-1"></i>
                                    Create Batch
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="icon-lightning mr-2"></i>
                            Quick Actions
                        </h6>
                    </div>

                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <a href="{{ route('payroll.employees') }}" class="list-group-item list-group-item-action">
                                <div class="d-flex align-items-center">
                                    <i class="icon-users4 mr-3 text-primary"></i>
                                    <div>
                                        <div class="font-weight-semibold">Manage Employees</div>
                                        <small class="text-muted">Setup employee profiles and bank details</small>
                                    </div>
                                </div>
                            </a>

                            <a href="{{ route('payroll.processing') }}" class="list-group-item list-group-item-action">
                                <div class="d-flex align-items-center">
                                    <i class="icon-cog mr-3 text-success"></i>
                                    <div>
                                        <div class="font-weight-semibold">Process Payroll</div>
                                        <small class="text-muted">Create and process payroll batches</small>
                                    </div>
                                </div>
                            </div>
                            </a>

                            <a href="{{ route('payroll.salary-templates') }}" class="list-group-item list-group-item-action">
                                <div class="d-flex align-items-center">
                                    <i class="icon-cash2 mr-3 text-warning"></i>
                                    <div>
                                        <div class="font-weight-semibold">Salary Templates</div>
                                        <small class="text-muted">Configure salary structures and components</small>
                                    </div>
                                </div>
                            </a>

                            <a href="{{ route('payroll.benefits') }}" class="list-group-item list-group-item-action">
                                <div class="d-flex align-items-center">
                                    <i class="icon-gift mr-3 text-info"></i>
                                    <div>
                                        <div class="font-weight-semibold">Benefits & Loans</div>
                                        <small class="text-muted">Manage employee benefits and loans</small>
                                    </div>
                                </div>
                            </a>

                            <a href="{{ route('payroll.reports') }}" class="list-group-item list-group-item-action">
                                <div class="d-flex align-items-center">
                                    <i class="icon-stats-bars mr-3 text-danger"></i>
                                    <div>
                                        <div class="font-weight-semibold">Reports</div>
                                        <small class="text-muted">Generate payroll and tax reports</small>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- System Status -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="icon-pulse2 mr-2"></i>
                            System Status
                        </h6>
                    </div>

                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span>Employee Setup</span>
                            <span class="badge badge-success">{{ $stats['total_employees'] }}/{{ App\Models\User::whereIn('user_type', ['teacher', 'admin', 'librarian', 'accountant'])->count() }}</span>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span>Pending Approvals</span>
                            @if($stats['pending_batches'] > 0)
                                <span class="badge badge-warning">{{ $stats['pending_batches'] }} pending</span>
                            @else
                                <span class="badge badge-success">All Clear</span>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span>Active Loans</span>
                            @if($stats['active_loans'] > 0)
                                <span class="badge badge-info">{{ $stats['active_loans'] }} active</span>
                            @else
                                <span class="badge badge-light">None</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Overview Chart -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="icon-stats-growth mr-2"></i>
                            Monthly Payroll Overview (Last 6 Months)
                        </h6>
                    </div>

                    <div class="card-body">
                        <div id="payroll-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /content area -->
</div>

@push('scripts')
<script src="{{ asset('global_assets/js/plugins/visualization/echarts/echarts.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Payroll Overview Chart
    const chartElement = document.getElementById('payroll-chart');
    if (chartElement) {
        const chart = echarts.init(chartElement);
        
        // Sample data - in real implementation, this would come from backend
        const option = {
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(function(item) {
                        result += item.marker + ' ' + item.seriesName + ': {{ \App\Helpers\Mk::getCurrencySymbol() }}' + 
                                item.value.toLocaleString() + '<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['Gross Amount', 'Net Amount', 'Deductions']
            },
            xAxis: {
                type: 'category',
                data: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{{ \App\Helpers\Mk::getCurrencySymbol() }}{value}'
                }
            },
            series: [
                {
                    name: 'Gross Amount',
                    type: 'bar',
                    data: [850000, 920000, 880000, 950000, 890000, 1050000],
                    itemStyle: {
                        color: '#26a69a'
                    }
                },
                {
                    name: 'Net Amount',
                    type: 'bar',
                    data: [720000, 780000, 750000, 810000, 760000, 890000],
                    itemStyle: {
                        color: '#42a5f5'
                    }
                },
                {
                    name: 'Deductions',
                    type: 'line',
                    data: [130000, 140000, 130000, 140000, 130000, 160000],
                    itemStyle: {
                        color: '#ff7043'
                    }
                }
            ]
        };
        
        chart.setOption(option);
        
        // Responsive
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }
});
</script>
@endpush
@endsection