@extends('layouts.master')
@section('title') @lang('translation.Admin_Dashboard') @endsection
@section('css')
<link href="{{ URL::asset('/assets/libs/admin-resources/admin-resources.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.css') }}" rel="stylesheet">
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1') Dashboard @endslot
@slot('title') Admin Overview @endslot
@endcomponent

<div class="row">
    <!-- Staff Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Staff</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $staffCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ $staffChange >= 0 ? 'success' : 'danger' }} text-{{ $staffChange >= 0 ? 'success' : 'danger' }}">
                                {{ $staffChange >= 0 ? '+' : '' }}{{ $staffChange }}
                            </span>
                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-user-tie"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.staff.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Staff</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Employer Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Employers</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $employerCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ $employerChange >= 0 ? 'success' : 'danger' }} text-{{ $employerChange >= 0 ? 'success' : 'danger' }}">
                                {{ $employerChange >= 0 ? '+' : '' }}{{ $employerChange }}
                            </span>
                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-building"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.employers.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Employers</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Client Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Clients</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $clientCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ ($clientChange ?? 0) >= 0 ? 'success' : 'danger' }} text-{{ ($clientChange ?? 0) >= 0 ? 'success' : 'danger' }}">
                                {{ ($clientChange ?? 0) >= 0 ? '+' . ($clientChange ?? 0) : ($clientChange ?? 0) }}
                            </span>

                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-users"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.clients.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Clients</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Departments</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $departmentCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ $departmentChange >= 0 ? 'success' : 'danger' }} text-{{ $departmentChange >= 0 ? 'success' : 'danger' }}">
                                {{ $departmentChange >= 0 ? '+' : '' }}{{ $departmentChange }}
                            </span>
                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-sitemap"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.departments.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Departments</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Branch Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Branches</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $branchCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ $branchChange >= 0 ? 'success' : 'danger' }} text-{{ $branchChange >= 0 ? 'success' : 'danger' }}">
                                {{ $branchChange >= 0 ? '+' : '' }}{{ $branchChange }}
                            </span>
                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-code-branch"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.branches.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Branches</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Position Summary -->
    <div class="col-xl-3 col-md-6">
        <div class="card card-h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="text-muted mb-3 lh-1 d-block text-truncate">Total Positions</span>
                        <h4 class="mb-3">
                            <span class="counter-value" data-target="{{ $positionCount }}">0</span>
                        </h4>
                        <div class="text-nowrap">
                            <span class="badge bg-soft-{{ $positionChange >= 0 ? 'success' : 'danger' }} text-{{ $positionChange >= 0 ? 'success' : 'danger' }}">
                                {{ $positionChange >= 0 ? '+' : '' }}{{ $positionChange }}
                            </span>
                            <span class="ms-1 text-muted font-size-13">Since last month</span>
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-end dash-widget">
                        <div class="avatar-sm">
                            <span class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                <i class="fas fa-briefcase"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ route('admin.positions.index') }}" class="btn btn-sm btn-outline-primary w-100">View All Positions</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Active vs Inactive Staff -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center mb-4">
                    <h5 class="card-title me-2">Staff Status Distribution</h5>
                    <div class="ms-auto">
                        <div class="dropdown">
                            <a class="dropdown-toggle text-reset" href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">This Year</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">This Year</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="staff-status-chart" class="apex-charts" data-colors='["#33c38e", "#f34e4e"]'></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Staff -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Recent Staff Members</h4>
                <div class="flex-shrink-0">
                    <a href="{{ route('admin.staff.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i> Add New
                    </a>
                </div>
            </div>

            <div class="card-body px-0">
                <div class="table-responsive px-3" data-simplebar style="max-height: 400px;">
                    <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                        <thead class="text-muted table-light">
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentStaff as $staff)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($staff->profile_picture)
                                            <img src="{{ asset('storage/'.$staff->profile_picture) }}" class="rounded-circle avatar-xs me-2" alt="">
                                        @else
                                            <div class="avatar-xs me-2">
                                                <span class="avatar-title rounded-circle bg-light text-primary">
                                                    @if($staff->user)
                                                        {{ substr($staff->user->first_name, 0, 1) }}{{ substr($staff->user->last_name, 0, 1) }}
                                                    @else
                                                        <i class="fas fa-user"></i>
                                                    @endif
                                                </span>
                                            </div>
                                        @endif
                                        <div>
                                            <h5 class="fs-14 mb-1">
                                                @if($staff->user)
                                                    {{ $staff->user->first_name }} {{ $staff->user->last_name }}
                                                @else
                                                    Unknown User
                                                @endif
                                            </h5>
                                            <p class="text-muted mb-0">{{ $staff->employee_id }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($staff->position)
                                        {{ $staff->position->position_name }}
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                </td>
                                <td>
                                    @if($staff->department)
                                        {{ $staff->department->name }}
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-soft-{{ $staff->is_active ? 'success' : 'secondary' }} text-{{ $staff->is_active ? 'success' : 'secondary' }}">
                                        {{ $staff->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('admin.staff.show', $staff->id) }}" class="btn btn-sm btn-light">View</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Employers -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Recent Employers</h4>
                <div class="flex-shrink-0">
                    <a href="{{ route('admin.employers.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i> Add New
                    </a>
                </div>
            </div>

            <div class="card-body px-0">
                <div class="table-responsive px-3" data-simplebar style="max-height: 400px;">
                    <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                        <thead class="text-muted table-light">
                            <tr>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>Clients</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentEmployers as $employer)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($employer->logo)
                                            <img src="{{ asset('storage/'.$employer->logo) }}" class="rounded-circle avatar-xs me-2" alt="">
                                        @else
                                            <div class="avatar-xs me-2">
                                                <span class="avatar-title rounded-circle bg-light text-primary">
                                                    {{ substr($employer->name, 0, 1) }}
                                                </span>
                                            </div>
                                        @endif
                                        <div>
                                            <h5 class="fs-14 mb-1">{{ $employer->name }}</h5>
                                            <p class="text-muted mb-0">{{ $employer->tax_id }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="text-muted mb-1">{{ $employer->contact_person }}</p>
                                    <p class="text-muted mb-0">{{ $employer->phone }}</p>
                                </td>
                                <td>
                                    <span class="badge bg-soft-primary">{{ $employer->clients_count }} Clients</span>
                                </td>
                                <td>
                                    <span class="badge bg-soft-{{ $employer->active ? 'success' : 'secondary' }} text-{{ $employer->active ? 'success' : 'secondary' }}">
                                        {{ $employer->active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('admin.employers.show', $employer->id) }}" class="btn btn-sm btn-light">View</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Department Staff Distribution -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center mb-4">
                    <h5 class="card-title me-2">Staff by Department</h5>
                    <div class="ms-auto">
                        <div class="dropdown">
                            <a class="dropdown-toggle text-reset" href="#" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">This Year</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">This Year</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="department-staff-chart" class="apex-charts" data-colors='["#3b5de7", "#45cb85", "#eeb902", "#ff715b", "#5d78ff", "#ffca3a", "#8fd3f4", "#ff6b6b", "#51cf66"]'></div>
            </div>
        </div>
    </div>

    <!-- Branch Staff Distribution -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center mb-4">
                    <h5 class="card-title me-2">Staff by Branch</h5>
                    <div class="ms-auto">
                        <div class="dropdown">
                            <a class="dropdown-toggle text-reset" href="#" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">This Year</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton3">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">This Year</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="branch-staff-chart" class="apex-charts" data-colors='["#3b5de7", "#45cb85", "#eeb902", "#ff715b", "#5d78ff", "#ffca3a", "#8fd3f4", "#ff6b6b", "#51cf66"]'></div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ URL::asset('/assets/libs/admin-resources/admin-resources.min.js') }}"></script>

<!-- dashboard init -->
<script src="{{ URL::asset('/assets/js/pages/dashboard.init.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Staff Status Chart
    var staffStatusChart = {
        chart: {
            height: 320,
            type: "pie",
        },
        series: [{{ $activeStaffCount }}, {{ $inactiveStaffCount }}],
        labels: ["Active", "Inactive"],
        colors: ["#33c38e", "#f34e4e"],
        legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center',
            itemMargin: {
                horizontal: 8,
                vertical: 8
            }
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: {
                    height: 240
                },
                legend: {
                    show: false
                }
            }
        }]
    };
    
    var chart = new ApexCharts(document.querySelector("#staff-status-chart"), staffStatusChart);
    chart.render();

    // Department Staff Chart
    var departmentStaffChart = {
        chart: {
            height: 320,
            type: "bar",
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: "45%",
                endingShape: "rounded"
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: 2,
            colors: ["transparent"]
        },
        series: [{
            name: "Staff Count",
            data: [{{ implode(',', $departmentStaffCounts->pluck('count')->toArray()) }}]
        }],
        colors: ["#3b5de7", "#45cb85", "#eeb902", "#ff715b", "#5d78ff", "#ffca3a", "#8fd3f4", "#ff6b6b", "#51cf66"],
        xaxis: {
            categories: {!! json_encode($departmentStaffCounts->pluck('name')->toArray()) !!},
        },
        yaxis: {
            title: {
                text: "Number of Staff"
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val + " staff";
                }
            }
        }
    };
    
    var chart2 = new ApexCharts(document.querySelector("#department-staff-chart"), departmentStaffChart);
    chart2.render();

    // Branch Staff Chart
    var branchStaffChart = {
        chart: {
            height: 320,
            type: "donut",
        },
        series: [{{ implode(',', $branchStaffCounts->pluck('count')->toArray()) }}],
        labels: {!! json_encode($branchStaffCounts->pluck('name')->toArray()) !!},
        colors: ["#3b5de7", "#45cb85", "#eeb902", "#ff715b", "#5d78ff", "#ffca3a", "#8fd3f4", "#ff6b6b", "#51cf66"],
        legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center',
            itemMargin: {
                horizontal: 8,
                vertical: 8
            }
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: {
                    height: 240
                },
                legend: {
                    show: false
                }
            }
        }]
    };
    
    var chart3 = new ApexCharts(document.querySelector("#branch-staff-chart"), branchStaffChart);
    chart3.render();
});
</script>
@endsection