@extends('admin.layouts.master')
@section('title') Reports @endsection

@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
@endsection

@section('content')
@component('components.breadcrumb')
    @slot('li_1') Reports @endslot
    @slot('title') Export Reports @endslot
@endcomponent

<div class="row">
    <div class="col-lg-12">

        {{-- Employee Report --}}
        <div class="card mb-4">
            <div class="card-header"><h5>Employee Report</h5></div>
            <div class="card-body">
                <form method="GET" action="{{ route('reports.export.employees') }}" class="report-form">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label>Status</label>
                            <select name="status" class="form-select">
                                <option value="">All</option>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Date Range</label>
                            <select class="form-select predefined-date-range">
                                <option value="">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>
                            <input type="text" name="date_range" class="form-control daterange-picker mt-2" placeholder="Select date range" readonly style="display: none;">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-success w-100">Export Employee Excel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Employer Report --}}
        <div class="card mb-4">
            <div class="card-header"><h5>Employer Report</h5></div>
            <div class="card-body">
                <form method="GET" action="{{ route('reports.export.employers') }}" class="report-form">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label>Status</label>
                            <select name="status" class="form-select">
                                <option value="">All</option>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Date Range</label>
                            <select class="form-select predefined-date-range">
                                <option value="">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>
                            <input type="text" name="date_range" class="form-control daterange-picker mt-2" placeholder="Select date range" readonly style="display: none;">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Export Employer Excel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Job Report --}}
        <div class="card mb-4">
            <div class="card-header"><h5>Job Report</h5></div>
            <div class="card-body">
                <form method="GET" action="{{ route('reports.export.jobs') }}" class="report-form">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label>Status</label>
                            <select name="status" class="form-select">
                                <option value="">All</option>
                                <option value="open">Open</option>
                                <option value="closed">Closed</option>
                                <option value="on-hold">On Hold</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Date Range</label>
                            <select class="form-select predefined-date-range">
                                <option value="">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>
                            <input type="text" name="date_range" class="form-control daterange-picker mt-2" placeholder="Select date range" readonly style="display: none;">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-warning w-100">Export Job Excel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection
@section('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>
    $(function () {
        $('.report-form').each(function () {
            const form = $(this);
            const predefined = form.find('.predefined-date-range');
            const dateInput = form.find('.daterange-picker');

            // Initialize but don't show input by default
            dateInput.daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                }
            });

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

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

            predefined.on('change', function () {
                const value = $(this).val();
                const now = moment();
                let start = null;
                let end = now.clone();

                if (value === 'custom') {
                    // Show input only for custom
                    dateInput.show().val('').trigger('click');
                    return;
                }

                // Hide custom input box for other predefined values
                dateInput.hide().val('');

                switch (value) {
                    case '1_month':
                        start = now.clone().subtract(1, 'months');
                        break;
                    case '3_months':
                        start = now.clone().subtract(3, 'months');
                        break;
                    case '6_months':
                        start = now.clone().subtract(6, 'months');
                        break;
                    case '1_year':
                        start = now.clone().subtract(1, 'years');
                        break;
                    default:
                        return;
                }

                if (start && end) {
                    // Fill value for submission, but keep input hidden
                    dateInput.val(start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                }
            });

            // Initially hide date range input
            dateInput.hide();
        });
    });
</script>
@endsection