@extends('crm.master')

@section('title', 'Booking Volume')

@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',
  ];

  $nextDir = fn ($column) => $sort === $column && $dir === 'asc' ? 'desc' : 'asc';
  $sortLink = fn ($column) => route('crm.reports.booking-volume', array_merge(request()->query(), [
    'sort' => $column,
    'dir' => $nextDir($column),
  ]));
  $toggleChartLink = route('crm.reports.booking-volume', array_merge(request()->query(), [
    'show_chart' => $showChart ? 0 : 1,
  ]));
@endphp

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

      <div class="volume-actions">
        <a href="{{ $toggleChartLink }}" class="volume-icon-btn" title="{{ $showChart ? 'Hide chart' : 'Show chart' }}">
          <i class="ti {{ $showChart ? 'tabler-eye-off' : 'tabler-chart-line' }}"></i>
        </a>
        <a href="{{ route('crm.reports.booking-volume.export', request()->query()) }}" class="volume-icon-btn" title="Export CSV">
          <i class="ti tabler-download"></i>
        </a>
      </div>
    </div>

    <div class="volume-filter-row">
      <form method="GET" action="{{ route('crm.reports.booking-volume') }}" class="volume-filter-form">
        <input type="hidden" name="show_chart" value="{{ $showChart ? 1 : 0 }}">
        <div class="volume-filter-field">
          <label class="volume-filter-label">Date</label>
          <select name="date_range" class="volume-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="volume-filter-field">
            <label class="volume-filter-label">From</label>
            <input type="date" name="date_from" value="{{ $dateFrom }}" class="volume-filter-control">
          </div>
          <div class="volume-filter-field">
            <label class="volume-filter-label">To</label>
            <input type="date" name="date_to" value="{{ $dateTo }}" class="volume-filter-control">
          </div>
          <div class="volume-filter-actions">
            <button type="submit" class="volume-apply-btn">Apply</button>
          </div>
        @endif
      </form>
    </div>

    @if($showChart)
      <div class="volume-card volume-card--chart">
        <div id="bookingVolumeChart" class="volume-chart"></div>
      </div>
    @endif

    <div class="volume-card volume-card--table">
      <div class="table-responsive">
        <table class="table volume-table mb-0">
          <thead>
            <tr>
              <th><a href="{{ $sortLink('date') }}" class="volume-sort-link">Date</a></th>
              <th class="text-end"><a href="{{ $sortLink('bookings') }}" class="volume-sort-link">Bookings</a></th>
              <th class="text-end"><a href="{{ $sortLink('quantity') }}" class="volume-sort-link">Qty</a></th>
              <th class="text-end"><a href="{{ $sortLink('total') }}" class="volume-sort-link">Total</a></th>
            </tr>
          </thead>
          <tbody>
            @forelse($rows as $row)
              <tr>
                <td>{{ $row->date_label }}</td>
                <td class="text-end">{{ number_format($row->bookings) }}</td>
                <td class="text-end">{{ number_format($row->quantity) }}</td>
                <td class="text-end fw-semibold">${{ number_format($row->total, 2) }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="4" class="text-center text-muted py-4">No booking volume found for the selected period.</td>
              </tr>
            @endforelse
          </tbody>
          <tfoot>
            <tr>
              <th>Total</th>
              <th class="text-end">{{ number_format($totals['bookings']) }}</th>
              <th class="text-end">{{ number_format($totals['quantity']) }}</th>
              <th class="text-end">${{ number_format($totals['total'], 2) }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

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

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

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

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

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

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

.volume-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;
}

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

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

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

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

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

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

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

.volume-card--chart {
  padding: 14px 14px 8px;
}

.volume-chart {
  min-height: 360px;
}

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

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

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

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

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

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

.volume-sort-link {
  color: inherit;
  text-decoration: none;
}

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

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

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

  .volume-filter-field,
  .volume-filter-actions {
    width: 100%;
  }

  .volume-chart {
    min-height: 300px;
  }
}
</style>
@endsection

@section('page-script')
@if($showChart)
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const chartElement = document.querySelector('#bookingVolumeChart');

    if (!chartElement || typeof ApexCharts === 'undefined') {
      return;
    }

    const options = {
      chart: {
        height: 360,
        type: 'line',
        toolbar: { show: false },
        stacked: false
      },
      series: [
        {
          name: 'Total',
          type: 'column',
          data: @json($chart['totals'])
        },
        {
          name: 'Bookings',
          type: 'line',
          data: @json($chart['bookings'])
        },
        {
          name: 'Qty',
          type: 'line',
          data: @json($chart['quantity'])
        }
      ],
      colors: ['#2cb317', '#1d4ed8', '#60a5fa'],
      stroke: {
        width: [0, 3, 3],
        curve: 'straight'
      },
      dataLabels: {
        enabled: false
      },
      plotOptions: {
        bar: {
          columnWidth: '34%',
          borderRadius: 4
        }
      },
      xaxis: {
        categories: @json($chart['categories']),
        labels: {
          style: { colors: '#6b7a90' }
        }
      },
      yaxis: [
        {
          title: { text: 'Total' },
          labels: {
            formatter: function (value) {
              return '$' + Number(value).toLocaleString();
            }
          }
        },
        {
          opposite: true,
          title: { text: 'Bookings / Qty' },
          labels: {
            formatter: function (value) {
              return Number(value).toLocaleString();
            }
          }
        }
      ],
      tooltip: {
        shared: true,
        intersect: false,
        y: [
          {
            formatter: function (value) {
              return '$' + Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }
          },
          {
            formatter: function (value) {
              return Number(value).toLocaleString() + ' bookings';
            }
          },
          {
            formatter: function (value) {
              return Number(value).toLocaleString() + ' qty';
            }
          }
        ]
      },
      legend: {
        position: 'bottom'
      },
      grid: {
        borderColor: '#e6edf5'
      }
    };

    new ApexCharts(chartElement, options).render();
  });
</script>
@endif
@endsection