@extends('layouts.admin')

@section('title', 'Custom Report')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Custom Report Builder</h1>
            <p class="text-muted">Create customized reports with specific metrics and filters</p>
        </div>
        <div>
            <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Reports
            </a>
        </div>
    </div>

    <!-- Custom Report Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Report Configuration</h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.reports.custom') }}">
                @csrf
                
                <!-- Report Type -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="report_type" class="form-label">Report Type <span class="text-danger">*</span></label>
                        <select class="form-select @error('report_type') is-invalid @enderror" 
                                id="report_type" name="report_type" required>
                            <option value="">Select Report Type</option>
                            <option value="applications" {{ old('report_type') === 'applications' ? 'selected' : '' }}>
                                Applications Report
                            </option>
                            <option value="positions" {{ old('report_type') === 'positions' ? 'selected' : '' }}>
                                Positions Report
                            </option>
                            <option value="users" {{ old('report_type') === 'users' ? 'selected' : '' }}>
                                Users Report
                            </option>
                            <option value="departments" {{ old('report_type') === 'departments' ? 'selected' : '' }}>
                                Departments Report
                            </option>
                        </select>
                        @error('report_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="chart_type" class="form-label">Chart Type <span class="text-danger">*</span></label>
                        <select class="form-select @error('chart_type') is-invalid @enderror" 
                                id="chart_type" name="chart_type" required>
                            <option value="">Select Chart Type</option>
                            <option value="bar" {{ old('chart_type') === 'bar' ? 'selected' : '' }}>Bar Chart</option>
                            <option value="line" {{ old('chart_type') === 'line' ? 'selected' : '' }}>Line Chart</option>
                            <option value="pie" {{ old('chart_type') === 'pie' ? 'selected' : '' }}>Pie Chart</option>
                            <option value="table" {{ old('chart_type') === 'table' ? 'selected' : '' }}>Table</option>
                        </select>
                        @error('chart_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Date Range -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="date_from" class="form-label">From Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('date_from') is-invalid @enderror" 
                               id="date_from" name="date_from" value="{{ old('date_from', now()->subMonths(6)->format('Y-m-d')) }}" required>
                        @error('date_from')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="date_to" class="form-label">To Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('date_to') is-invalid @enderror" 
                               id="date_to" name="date_to" value="{{ old('date_to', now()->format('Y-m-d')) }}" required>
                        @error('date_to')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Metrics Selection -->
                <div class="mb-4">
                    <label class="form-label">Metrics to Include <span class="text-danger">*</span></label>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="metrics[]" value="count" 
                                       id="metric_count" {{ in_array('count', old('metrics', [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="metric_count">
                                    Total Count
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="metrics[]" value="average" 
                                       id="metric_average" {{ in_array('average', old('metrics', [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="metric_average">
                                    Average
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="metrics[]" value="growth_rate" 
                                       id="metric_growth" {{ in_array('growth_rate', old('metrics', [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="metric_growth">
                                    Growth Rate
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="metrics[]" value="percentage" 
                                       id="metric_percentage" {{ in_array('percentage', old('metrics', [])) ? 'checked' : '' }}>
                                <label class="form-check-label" for="metric_percentage">
                                    Percentage Distribution
                                </label>
                            </div>
                        </div>
                    </div>
                    @error('metrics')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Group By -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="group_by" class="form-label">Group By</label>
                        <select class="form-select" id="group_by" name="group_by">
                            <option value="">No Grouping</option>
                            <option value="month" {{ old('group_by') === 'month' ? 'selected' : '' }}>Month</option>
                            <option value="week" {{ old('group_by') === 'week' ? 'selected' : '' }}>Week</option>
                            <option value="day" {{ old('group_by') === 'day' ? 'selected' : '' }}>Day</option>
                            <option value="status" {{ old('group_by') === 'status' ? 'selected' : '' }}>Status</option>
                            <option value="department" {{ old('group_by') === 'department' ? 'selected' : '' }}>Department</option>
                        </select>
                    </div>
                </div>

                <!-- Additional Filters -->
                <div class="mb-4">
                    <h6 class="text-primary">Additional Filters</h6>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="filter_status" class="form-label">Status Filter</label>
                            <select class="form-select" id="filter_status" name="filters[status]">
                                <option value="">All Statuses</option>
                                <option value="draft" {{ old('filters.status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="submitted" {{ old('filters.status') === 'submitted' ? 'selected' : '' }}>Submitted</option>
                                <option value="published" {{ old('filters.status') === 'published' ? 'selected' : '' }}>Published</option>
                                <option value="closed" {{ old('filters.status') === 'closed' ? 'selected' : '' }}>Closed</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="filter_department" class="form-label">Department Filter</label>
                            <select class="form-select" id="filter_department" name="filters[department_id]">
                                <option value="">All Departments</option>
                                @foreach(\App\Models\Department::all() as $department)
                                    <option value="{{ $department->id }}" 
                                            {{ old('filters.department_id') == $department->id ? 'selected' : '' }}>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="filter_role" class="form-label">Role Filter</label>
                            <select class="form-select" id="filter_role" name="filters[role]">
                                <option value="">All Roles</option>
                                <option value="applicant" {{ old('filters.role') === 'applicant' ? 'selected' : '' }}>Applicant</option>
                                <option value="admin" {{ old('filters.role') === 'admin' ? 'selected' : '' }}>Admin</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.reports.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-chart-line me-1"></i>Generate Report
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Help Section -->
    <div class="card shadow mt-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-info">How to Use Custom Reports</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>Report Types:</h6>
                    <ul class="small">
                        <li><strong>Applications:</strong> Analyze application submissions and trends</li>
                        <li><strong>Positions:</strong> Track position performance and popularity</li>
                        <li><strong>Users:</strong> Monitor user registration and engagement</li>
                        <li><strong>Departments:</strong> Compare department-wise activity</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6>Chart Types:</h6>
                    <ul class="small">
                        <li><strong>Bar Chart:</strong> Compare values across categories</li>
                        <li><strong>Line Chart:</strong> Show trends over time</li>
                        <li><strong>Pie Chart:</strong> Display percentage distributions</li>
                        <li><strong>Table:</strong> Detailed data in tabular format</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection