@extends('crm.master')

@section('title', 'Revenue')

@php
  $dateRanges = [
    'last_12_months' => 'Last 12 months',
    'this_month' => 'This month',
    'last_month' => 'Last month',
    'last_3_months' => 'Last 3 months',
    'last_6_months' => 'Last 6 months',
    'all' => 'All bookings',
    'custom' => 'Custom',
  ];
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y revenue-page">
  <div class="revenue-shell">
    <div class="revenue-head">
      <div>
        <h4 class="revenue-title">Revenue</h4>
        <div class="revenue-subtitle">{{ $label }}</div>
      </div>

      <div class="revenue-actions">
        <a href="{{ route('crm.reports.revenue.export', request()->query()) }}" class="revenue-icon-btn" title="Export CSV">
          <i class="ti tabler-download"></i>
        </a>
      </div>
    </div>

    <div class="revenue-filter-row">
      <form method="GET" action="{{ route('crm.reports.revenue') }}" class="revenue-filter-form">
        <div class="revenue-filter-field">
          <label class="revenue-filter-label">Date</label>
          <select name="date_range" class="revenue-filter-control" onchange="this.form.submit()">
            @foreach($dateRanges as $value => $optionLabel)
              <option value="{{ $value }}" {{ $dateRange === $value ? 'selected' : '' }}>{{ $optionLabel }}</option>
            @endforeach
          </select>
        </div>

        @if($dateRange === 'custom')
          <div class="revenue-filter-field">
            <label class="revenue-filter-label">From</label>
            <input type="date" name="date_from" value="{{ $dateFrom }}" class="revenue-filter-control">
          </div>
          <div class="revenue-filter-field">
            <label class="revenue-filter-label">To</label>
            <input type="date" name="date_to" value="{{ $dateTo }}" class="revenue-filter-control">
          </div>
          <div class="revenue-filter-actions">
            <button type="submit" class="revenue-apply-btn">Apply</button>
          </div>
        @endif
      </form>
    </div>

    <div class="revenue-card revenue-card--table">
      <div class="table-responsive">
        <table class="table revenue-table mb-0">
          <thead>
            <tr>
              <th>Date</th>
              <th class="text-end">Transactions</th>
              <th class="text-end">Payments</th>
              <th class="text-end">Refunds</th>
              <th class="text-end">Total</th>
            </tr>
          </thead>
          <tbody>
            @forelse($rows as $row)
              <tr>
                <td>{{ $row->date_label }}</td>
                <td class="text-end">{{ number_format($row->transactions) }}</td>
                <td class="text-end">${{ number_format($row->payments, 2) }}</td>
                <td class="text-end">${{ number_format($row->refunds, 2) }}</td>
                <td class="text-end fw-semibold">${{ number_format($row->total, 2) }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="5" class="text-center text-muted py-4">No revenue data found for the selected period.</td>
              </tr>
            @endforelse
          </tbody>
          <tfoot>
            <tr>
              <th>Total</th>
              <th class="text-end">{{ number_format($totals['transactions']) }}</th>
              <th class="text-end">${{ number_format($totals['payments'], 2) }}</th>
              <th class="text-end">${{ number_format($totals['refunds'], 2) }}</th>
              <th class="text-end">${{ number_format($totals['total'], 2) }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@section('head-extra')
<style>
.revenue-page {
  background: #f8f8fb;
}

.revenue-shell {
  display: grid;
  gap: 20px;
}

.revenue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.revenue-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #1f3557;
}

.revenue-subtitle {
  margin-top: 6px;
  font-size: 15px;
  color: #49658f;
}

.revenue-actions {
  display: flex;
  gap: 10px;
}

.revenue-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #8090a7;
  text-decoration: none;
}

.revenue-card {
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.revenue-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.revenue-filter-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.revenue-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.revenue-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: #465d80;
}

.revenue-filter-control {
  min-width: 220px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fff;
}

.revenue-apply-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

.revenue-card--table {
  overflow: hidden;
}

.revenue-table thead th {
  background: #f8fafc;
  color: #31517b;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid #e7edf5;
}

.revenue-table tbody td,
.revenue-table tfoot th,
.revenue-table tfoot td {
  padding: 16px 14px;
  border-color: #edf2f7;
  color: #17355a;
  font-size: 15px;
}

.revenue-table tbody tr:hover {
  background: #fbfdff;
}

.revenue-table tfoot tr {
  background: #fafcff;
}

.revenue-table tfoot th,
.revenue-table tfoot td {
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .revenue-head {
    flex-direction: column;
  }

  .revenue-filter-control {
    min-width: 100%;
  }

  .revenue-filter-form {
    width: 100%;
  }

  .revenue-filter-field,
  .revenue-filter-actions {
    width: 100%;
  }
}
</style>
@endsection