@extends('vendor.layouts.app')

@section('title', 'Export Reports')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="sr-page-header d-flex align-items-center justify-content-between flex-wrap">
          <div>
            <h2 class="sr-title">Export Reports</h2>
            <p class="sr-sub">Download analytics and business reports</p>
          </div>
        </div>

        <div class="row">
          <!-- Quick Reports -->
          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Quick Reports</h3>
              <div class="er-report-list">
                <div class="er-report-row">
                  <div class="er-report-icon">??</div>
                  <div class="er-report-info">
                    <div class="er-report-name">Sales Summary</div>
                    <div class="er-report-sub">Monthly sales overview</div>
                  </div>
                  <button type="button" class="li-btn-outline er-download-btn">Download</button>
                </div>
                <div class="er-report-row">
                  <div class="er-report-icon">?? </div>
                  <div class="er-report-info">
                    <div class="er-report-name">Product Performance</div>
                    <div class="er-report-sub">Top performing products</div>
                  </div>
                  <button type="button" class="li-btn-outline er-download-btn">Download</button>
                </div>
                <div class="er-report-row">
                  <div class="er-report-icon">?? </div>
                  <div class="er-report-info">
                    <div class="er-report-name">Customer List</div>
                    <div class="er-report-sub">All customer data</div>
                  </div>
                  <button type="button" class="li-btn-outline er-download-btn">Download</button>
                </div>
                <div class="er-report-row">
                  <div class="er-report-icon">?? </div>
                  <div class="er-report-info">
                    <div class="er-report-name">Inventory Report</div>
                    <div class="er-report-sub">Current stock levels</div>
                  </div>
                  <button type="button" class="li-btn-outline er-download-btn">Download</button>
                </div>
                <div class="er-report-row">
                  <div class="er-report-icon">??</div>
                  <div class="er-report-info">
                    <div class="er-report-name">Financial Summary</div>
                    <div class="er-report-sub">Revenue and settlements</div>
                  </div>
                  <button type="button" class="li-btn-outline er-download-btn">Download</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Custom Report Builder -->
          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Custom Report Builder</h3>
              <form id="customReportForm">
                <div class="mb-3">
                  <label for="reportType" class="form-label">Report Type</label>
                  <select id="reportType" class="form-select">
                    <option selected disabled value="">Select report type</option>
                    <option value="sales">Sales Report</option>
                    <option value="inventory">Inventory Report</option>
                    <option value="customer">Customer Report</option>
                    <option value="financial">Financial Report</option>
                  </select>
                </div>

                <div class="mb-3">
                  <label class="form-label">Date Range</label>
                  <div class="row g-2">
                    <div class="col-6">
                      <input type="date" class="form-control" id="startDate" aria-label="Start Date">
                    </div>
                    <div class="col-6">
                      <input type="date" class="form-control" id="endDate" aria-label="End Date">
                    </div>
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label">Metrics to Include</label>
                  <div class="er-metrics-grid">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="metricRevenue">
                      <label class="form-check-label" for="metricRevenue">Revenue</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="metricOrders">
                      <label class="form-check-label" for="metricOrders">Orders</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="metricProducts">
                      <label class="form-check-label" for="metricProducts">Products Sold</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="metricCustomers">
                      <label class="form-check-label" for="metricCustomers">Customer Count</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="metricAOV">
                      <label class="form-check-label" for="metricAOV">Avg Order Value</label>
                    </div>
                  </div>
                </div>

                <div class="mb-4">
                  <label class="form-label">Export Format</label>
                  <div class="er-format-group" role="group" aria-label="Export format">
                    <button type="button" class="er-format-btn" data-format="pdf">PDF</button>
                    <button type="button" class="er-format-btn" data-format="excel">Excel</button>
                    <button type="button" class="er-format-btn" data-format="csv">CSV</button>
                  </div>
                </div>

                <button type="submit" class="er-generate-btn w-100">Generate &amp; Download</button>
              </form>
            </div>
          </div>
        </div>

        <!-- Recent Downloads -->
         <div class="col-md-12">
          <div class="li-panel last">
            <h3 class="li-panel-title">Recent Downloads</h3>
            <div class="er-download-list">
              <div class="er-download-row">
                <div class="er-file-icon">??</div>
                <div class="er-file-info">
                  <div class="er-file-name">Sales_Report_April_2026.pdf</div>
                  <div class="er-file-meta">Apr 26, 2026 14:30 &bull; 2.4 MB</div>
                </div>
                <a href="#" class="er-download-again">Download Again</a>
              </div>
              <div class="er-download-row">
                <div class="er-file-icon">??</div>
                <div class="er-file-info">
                  <div class="er-file-name">Inventory_Export_Apr2026.xlsx</div>
                  <div class="er-file-meta">Apr 20, 2026 09:15 &bull; 1.8 MB</div>
                </div>
                <a href="#" class="er-download-again">Download Again</a>
              </div>
              <div class="er-download-row">
                <div class="er-file-icon">??</div>
                <div class="er-file-info">
                  <div class="er-file-name">Customer_List_Q1_2026.csv</div>
                  <div class="er-file-meta">Apr 15, 2026 10:45 &bull; 856 KB</div>
                </div>
                <a href="#" class="er-download-again">Download Again</a>
              </div>
            </div>
          </div>
        </div>
</main>
@endsection

@section('script')
<script>
document.querySelectorAll('.er-format-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.er-format-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
      });
    });

    document.getElementById('customReportForm').addEventListener('submit', e => e.preventDefault());
</script>
@endsection