@extends('admin.layouts.master')
@section('title')
    @lang('translation.dashboards')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
@endsection

@section('content')
<div class="row mb-3">
    <div class="col-md-4">
        <label>Select Date Filter</label>
        <select id="dateFilterSelect" class="form-control">
            <option value="all">All</option>
            <option value="1_month">Last 1 Month</option>
            <option value="3_months">Last 3 Months</option>
            <option value="6_months">Last 6 Months</option>
            <option value="1_year">Last 1 Year</option>
            <option value="custom">Custom Range</option>
        </select>
    </div>
    <div class="col-md-4" id="customDateWrapper" style="display: none;">
        <label>Custom Date Range</label>
        <input type="text" class="form-control daterange-picker" id="dateRangePicker" readonly>
    </div>
</div>

<div class="row" id="dashboard-widgets">
    <div class="col-md-3">
        <div class="card card-body shadow">
            <h5>Total Employees</h5>
            <h3 id="totalEmployees">0</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-body shadow">
            <h5>Total Employers</h5>
            <h3 id="totalEmployers">0</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-body shadow">
            <h5>Total Jobs</h5>
            <h3 id="totalJobs">0</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-body shadow">
            <h5>Fulfilled Jobs</h5>
            <h3 id="fulfilledJobs">0</h3>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
<script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ URL::asset('build/js/pages/dashboard-ecommerce.init.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script>
$(function () {
    function fetchDashboardData(dateRange = '') {
        $.ajax({
            url: '{{ route("admin.dashboard.data") }}',
            type: 'GET',
            data: { date_range: dateRange },
            success: function(res) {
                $('#totalEmployees').text(res.total_employees);
                $('#totalEmployers').text(res.total_employers);
                $('#totalJobs').text(res.total_jobs);
                $('#fulfilledJobs').text(res.fulfilled_jobs);
            },
            error: function(err) {
                console.error("Dashboard fetch error:", err);
            }
        });
    }

    $('.daterange-picker').daterangepicker({
        autoUpdateInput: false,
        locale: { cancelLabel: 'Clear' }
    });

    $('.daterange-picker').on('apply.daterangepicker', function(ev, picker) {
        const range = picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD');
        $(this).val(range);
        fetchDashboardData(range);
    });

    $('.daterange-picker').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        fetchDashboardData('');
    });

    $('#dateFilterSelect').on('change', function () {
        const selected = $(this).val();
        let range = '';

        if (selected === 'custom') {
            $('#customDateWrapper').show();
            $('#dateRangePicker').trigger('click');
            return;
        }

        $('#customDateWrapper').hide();
        $('#dateRangePicker').val('');

        const to = moment().format('YYYY-MM-DD');
        let from;

        switch (selected) {
            case '1_month':
                from = moment().subtract(1, 'months').format('YYYY-MM-DD');
                break;
            case '3_months':
                from = moment().subtract(3, 'months').format('YYYY-MM-DD');
                break;
            case '6_months':
                from = moment().subtract(6, 'months').format('YYYY-MM-DD');
                break;
            case '1_year':
                from = moment().subtract(1, 'years').format('YYYY-MM-DD');
                break;
            case 'all':
            default:
                fetchDashboardData('');
                return;
        }

        range = `${from} to ${to}`;
        fetchDashboardData(range);
    });

    fetchDashboardData('');
});
</script>
@endsection