@php
  use App\Services\AddonService\IAddonService;
  use App\Services\FeatureFlagService;
  $title = 'Reports';

  $addonService = app(IAddonService::class);
  $featureFlags = app(FeatureFlagService::class);
  $tenantFeatureFlags = $featureFlags->getResolvedTenantFlags();

  $reports = [
    [
      'id' => 'attendance',
      'name' => 'Attendance',
      'description' => 'Generate attendance reports for selected period',
      'icon' => 'bx-time-five',
      'color' => 'primary'
    ]
  ];

  if(
    $addonService->isAddonEnabled(ModuleConstants::LEAVE_MANAGEMENT,true)
    && ($tenantFeatureFlags['reports_leave_enabled'] ?? false)
  ){
    $reports[] = [
      'id' => 'leave',
      'name' => 'Leave',
      'description' => 'Generate leave request reports for selected period',
      'icon' => 'bx-beach-access',
      'color' => 'info'
    ];
  }

  if(
    $addonService->isAddonEnabled(ModuleConstants::EXPENSE_MANAGEMENT,true)
    && ($tenantFeatureFlags['reports_expenses_enabled'] ?? false)
  ){
    $reports[] = [
      'id' => 'expense',
      'name' => 'Expense',
      'description' => 'Generate expense reports for selected period',
      'icon' => 'bx-receipt',
      'color' => 'success'
    ];
  }

  // Check both CLIENT_ACTIVITY (new) and legacy CLIENT_VISIT for backward compatibility
  if($addonService->isAddonEnabled(ModuleConstants::CLIENT_ACTIVITY,true) || $addonService->isAddonEnabled('ClientActivity',true) || $addonService->isAddonEnabled('ClientVisit',true)){
    $reports[] = [
      'id' => 'activity',
      'name' => 'Activity',
      'description' => 'Generate activity reports for selected period',
      'icon' => 'bx-map',
      'color' => 'warning'
    ];
  }

  if($addonService->isAddonEnabled(ModuleConstants::PRODUCT_ORDER)){
    $reports[] = [
      'id' => 'product_order',
      'name' => 'Product Order',
      'description' => 'Generate product order reports for selected period',
      'icon' => 'bx-shopping-bag',
      'color' => 'secondary'
    ];
  }
@endphp

@extends('layouts/layoutMaster')

@section('title', __($title))

<!-- Vendor Styles -->
@section('vendor-style')
  @vite(['resources/assets/vendor/libs/flatpickr/flatpickr.scss'])
  <style>
    .report-card {
      transition: all 0.3s ease;
    }
    .report-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .date-range-picker {
      display: none;
    }
    .date-range-picker.show {
      display: block;
    }
  </style>
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite(['resources/assets/vendor/libs/flatpickr/flatpickr.js'])
@endsection

@section('page-script')
  @vite(['resources/assets/js/app/reports-enhanced.js'])
@endsection

@section('content')
  <div class="row mb-4">
    <div class="col text-start">
      <h4 class="mt-4">{{$title}}</h4>
      <p class="text-muted">Generate comprehensive reports with flexible time frame selection</p>
    </div>
  </div>

  <!-- Time Frame Selection Section -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <i class="bx bx-calendar me-2"></i>Select Time Frame
          </h5>
        </div>
        <div class="card-body">
          <!-- Custom Date Range -->
          <div class="row">
            <div class="col-md-4">
              <label for="startDate" class="form-label">Start Date</label>
              <input type="text" class="form-control" id="startDate" name="start_date" placeholder="Select start date">
            </div>
            <div class="col-md-4">
              <label for="endDate" class="form-label">End Date</label>
              <input type="text" class="form-control" id="endDate" name="end_date" placeholder="Select end date">
            </div>
            <div class="col-md-4">
              <label for="employeeFilter" class="form-label">Employee (Optional)</label>
              <select class="form-select" id="employeeFilter" name="employee_id">
                <option value="">All Employees</option>
                @foreach(\App\Models\User::where('status', 'active')->orderBy('first_name')->get() as $employee)
                  <option value="{{ $employee->id }}">{{ $employee->getFullName() }} (ID: {{ $employee->id }})</option>
                @endforeach
              </select>
            </div>
          </div>

          <!-- Selected Time Frame Display -->
          <div class="mt-3" id="selectedTimeFrame" style="display: none;">
            <div class="alert alert-info">
              <i class="bx bx-info-circle me-2"></i>
              <span id="selectedTimeFrameText"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Reports Grid -->
  <div class="row" id="reportsGrid">
    @foreach($reports as $report)
      <div class="col-sm-6 col-lg-4 col-xl-3 mb-4">
        <div class="card report-card h-100" data-report-type="{{ $report['id'] }}">
          <div class="card-header text-center">
            <div class="avatar avatar-lg mx-auto mb-2">
              <div class="avatar-initial bg-{{ $report['color'] }}-subtle text-{{ $report['color'] }}">
                <i class="bx {{ $report['icon'] }}"></i>
              </div>
            </div>
            <h5 class="card-title mb-0">{{ $report['name'] }} Report</h5>
          </div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted small mb-3">{{ $report['description'] }}</p>
            <div class="mt-auto">
              <button type="button" class="btn btn-{{ $report['color'] }} w-100 generate-report-btn" 
                      data-report-type="{{ $report['id'] }}" disabled>
                <i class="bx bx-download me-2"></i>Generate Report
              </button>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>

  <!-- Loading Modal -->
  <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body text-center py-4">
          <div class="spinner-border text-primary mb-3" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mb-0">Generating report...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Success Modal -->
  <div class="modal fade" id="successModal" tabindex="-1" data-bs-backdrop="false" data-bs-keyboard="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header border-0 pb-0">
          <h5 class="modal-title text-center w-100">
            <i class="bx bx-check-circle text-success me-2"></i>Report Ready!
          </h5>
        </div>
        <div class="modal-body text-center py-3">
          <p id="successMessage" class="mb-3">Your report is being downloaded automatically...</p>
          <div class="alert alert-light border-0 mb-3">
            <i class="bx bx-info-circle me-2"></i>
            <span id="reportDetails" class="small"></span>
          </div>
          <div id="downloadFallback" class="d-none">
            <p class="text-muted small mb-2">Download didn't start automatically?</p>
            <a href="#" id="downloadLink" class="btn btn-outline-primary btn-sm">
              <i class="bx bx-download me-2"></i>Click Here to Download
            </a>
          </div>
        </div>
        <div class="modal-footer border-0 pt-0">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection