@extends('crm.master')

@section('title', 'CRM Dashboard')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="mb-4">
    <h4 class="mb-1 fw-bold">Dashboard</h4>
    <p class="text-muted mb-0">Track booking activity, monthly calendar signals, and business volume at a glance.</p>
  </div>

  <div class="row g-4">
    <div class="col-12">
    <div class="card dashboard-card dashboard-calendar-card">
      <div class="card-header dashboard-card-head">
        <div>
          <h5 class="dashboard-card-title"><span id="dashboardCalendarTitle">{{ $calendarMonthLabel }}</span> Booking Calendar</h5>
          <div class="dashboard-card-subtitle">Clean monthly booking view with daily totals and quick drill-down.</div>
        </div>
        <div class="dashboard-card-actions">
          <label class="dashboard-month-picker" title="Choose month">
            <i class="ti tabler-calendar-event"></i>
            <input type="month" id="dashboardCalendarMonthPicker" value="{{ $calendarMonthStart->format('Y-m') }}">
          </label>
          <a href="{{ route('crm.dashboard', ['date' => $calendarPrevDate]) }}" class="dashboard-icon-btn" title="Previous month" id="dashboardCalendarPrev" data-calendar-nav>
            <i class="ti tabler-chevron-left"></i>
          </a>
          <a href="{{ route('crm.dashboard', ['date' => $calendarNextDate]) }}" class="dashboard-icon-btn" title="Next month" id="dashboardCalendarNext" data-calendar-nav>
            <i class="ti tabler-chevron-right"></i>
          </a>
          <button type="button" class="dashboard-icon-btn" title="Expand">
            <i class="ti tabler-arrows-maximize"></i>
          </button>
          <button type="button" class="dashboard-icon-btn" title="Close">
            <i class="ti tabler-x"></i>
          </button>
        </div>
      </div>
      <div class="card-body">
        <div class="dashboard-calendar-weekdays">
          @foreach(['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] as $weekday)
            <div>{{ $weekday }}</div>
          @endforeach
        </div>
        <div class="dashboard-calendar-grid" id="dashboardCalendarGrid">
          @foreach($calendarWeeks as $week)
            @foreach($week as $day)
              @php
                $dayPayload = [
                  'label' => $day['label'],
                  'date_link' => route('crm.booking.index', [
                    'date_src' => 'start_datetime',
                    'date_range' => 'custom',
                    'date_from' => $day['date'],
                    'date_to' => $day['date'],
                  ]),
                  'new_booking_url' => route('crm.booking.index'),
                  'booking_count' => $day['booking_count'],
                  'quantity' => $day['quantity'],
                  'total' => number_format($day['total'], 2, '.', ''),
                  'rows' => $day['rows'],
                ];
              @endphp
              <button
                type="button"
                class="dashboard-day-cell {{ $day['in_month'] ? '' : 'is-muted' }} {{ $day['is_selected'] ? 'is-selected' : '' }} {{ $day['booking_count'] > 0 ? 'is-booked' : '' }}"
                data-day-payload='@json($dayPayload)'
              >
                <span class="dashboard-day-number">{{ $day['day_number'] }}</span>
                @if($day['booking_count'] > 0)
                  <span class="dashboard-day-badge">{{ $day['booking_count'] }}</span>
                @endif
              </button>
            @endforeach
          @endforeach
        </div>
      </div>
    </div>

    </div>
  </div>

  <div class="row g-4 mt-1">
    <div class="col-12 col-md-6">
    <div class="card dashboard-card h-100 dashboard-chart-card">
      <div class="card-header dashboard-card-head">
        <div>
          <h5 class="dashboard-card-title">Bookings by Month</h5>
          <div class="dashboard-card-subtitle">Monthly booking count across the last 12 months.</div>
        </div>
        <div class="dashboard-card-actions">
          <button type="button" class="dashboard-icon-btn" title="Expand">
            <i class="ti tabler-external-link"></i>
          </button>
          <button type="button" class="dashboard-icon-btn" title="Close">
            <i class="ti tabler-x"></i>
          </button>
        </div>
      </div>
      <div class="card-body dashboard-chart-body">
        <div class="dashboard-revenue-filters">
          <div class="dashboard-date-field">
            <label class="dashboard-date-label" for="bookingsChartStart">From</label>
            <input type="date" id="bookingsChartStart" class="dashboard-date-input"
              value="{{ $monthlyChart['start_date'] }}">
          </div>
          <div class="dashboard-date-sep"><i class="ti tabler-arrow-right"></i></div>
          <div class="dashboard-date-field">
            <label class="dashboard-date-label" for="bookingsChartEnd">To</label>
            <input type="date" id="bookingsChartEnd" class="dashboard-date-input"
              value="{{ $monthlyChart['end_date'] }}">
          </div>
          <button type="button" id="bookingsChartApply" class="dashboard-apply-btn">
            <i class="ti tabler-refresh"></i> Apply
          </button>
        </div>
        <div id="dashboardMonthlyBookingsChart" class="dashboard-monthly-chart"></div>
      </div>
    </div>
    </div>

    <div class="col-12 col-md-6">
      <div class="card dashboard-card h-100 dashboard-chart-card">
        <div class="card-header dashboard-card-head">
          <div>
            <h5 class="dashboard-card-title">Revenue by Month</h5>
            <div class="dashboard-card-subtitle">Monthly revenue trend across the last 12 months.</div>
          </div>
          <div class="dashboard-card-actions">
            <button type="button" class="dashboard-icon-btn" title="Expand">
              <i class="ti tabler-external-link"></i>
            </button>
            <button type="button" class="dashboard-icon-btn" title="Close">
              <i class="ti tabler-x"></i>
            </button>
          </div>
        </div>
        <div class="card-body dashboard-chart-body">
          <div class="dashboard-revenue-filters">
            <div class="dashboard-date-field">
              <label class="dashboard-date-label" for="revenueChartStart">From</label>
              <input type="date" id="revenueChartStart" class="dashboard-date-input"
                value="{{ $revenueChart['start_date'] }}">
            </div>
            <div class="dashboard-date-sep"><i class="ti tabler-arrow-right"></i></div>
            <div class="dashboard-date-field">
              <label class="dashboard-date-label" for="revenueChartEnd">To</label>
              <input type="date" id="revenueChartEnd" class="dashboard-date-input"
                value="{{ $revenueChart['end_date'] }}">
            </div>
            <button type="button" id="revenueChartApply" class="dashboard-apply-btn">
              <i class="ti tabler-refresh"></i> Apply
            </button>
          </div>

          <div id="dashboardRevenueChart" class="dashboard-monthly-chart"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="calendarDayModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content" id="dialog-data">
      <div class="modal-header dashboard-modal-head d-flex align-items-center justify-content-between">
        <h4 class="mb-0">
          <i class="ti tabler-calendar-event me-2" style="opacity:.7;"></i><span id="calendarModalTitle">Day Details</span>
        </h4>
        <div class="d-flex align-items-center gap-2">
          <a href="#" id="calendarModalExternalLink" class="dashboard-modal-link" target="_blank" rel="noopener" title="View bookings for this day">
            <i class="ti tabler-external-link"></i>
          </a>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>
      <div class="modal-body p-0">
        <div class="px-4 pt-3 pb-0" style="display:none;">{{-- legacy link moved to header --}}</div>
        <div class="dashboard-modal-table-wrap" style="border-radius:0;">
          <table class="table mb-0" style="min-width: 700px">
            <thead>
              <tr>
                <th>Booking</th>
                <th>Time</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Amount</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="calendarModalBody">
              <tr>
                <td colspan="5" class="text-center text-muted py-4">No bookings for this day.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer dashboard-modal-footer">
        <div class="dashboard-modal-summary">
          <span><strong>Bookings:</strong> <span id="calendarModalBookings">0</span></span>
          <span><strong>Qty:</strong> <span id="calendarModalQty">0</span></span>
          <span><strong>Total:</strong> $<span id="calendarModalTotal">0.00</span></span>
        </div>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
          <a href="{{ route('crm.booking.index') }}" id="calendarModalNewBooking" class="btn btn-primary">New Booking</a>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('head-extra')
<style>
/* ── Dashboard Cards ── */
.dashboard-card {
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 16px 40px rgba(15, 23, 42, 0.06);
}

.dashboard-calendar-card .card-body {
  padding: 20px;
  background: #fff;
}

.dashboard-chart-card .card-body {
  padding: 22px 24px;
  background: #fff;
}

.dashboard-card-head {
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #fafcff 0%, #fff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
}

.dashboard-card-title {
  margin: 0;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dashboard-card-subtitle {
  margin-top: 4px;
  color: #94a3b8;
  font-size: .8rem;
  font-weight: 500;
}

.dashboard-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dashboard-month-picker {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.dashboard-month-picker input {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  outline: none;
}

.dashboard-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: .95rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dashboard-icon-btn:hover {
  background: #f0f7ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

/* ── Calendar ── */
.dashboard-calendar-weekdays,
.dashboard-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.dashboard-calendar-weekdays {
  margin-bottom: 8px;
}

.dashboard-calendar-weekdays div {
  text-align: center;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 0;
}

.dashboard-day-cell {
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  background: #fafcff;
  padding: 9px 9px 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  transition: border-color .18s ease, transform .2s cubic-bezier(.22,.68,0,1.2), box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}

.dashboard-day-cell:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px) scale(1.01);
}

.dashboard-day-cell.is-muted {
  background: #f8fafc;
  border-color: #f1f5f9;
  opacity: .55;
}
.dashboard-day-cell.is-muted:hover {
  opacity: .8;
}

.dashboard-day-cell.is-selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 8px 20px rgba(59, 130, 246, 0.1);
}

.dashboard-day-cell.is-booked {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.dashboard-day-cell.is-booked:hover {
  border-color: #60a5fa;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}

.dashboard-day-number {
  font-size: .85rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.dashboard-day-cell.is-muted .dashboard-day-number {
  color: #cbd5e1;
}
.dashboard-day-cell.is-selected .dashboard-day-number {
  color: #1d4ed8;
}

.dashboard-day-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* ── Chart section ── */
.dashboard-chart-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 220px);
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-range-box {
  min-height: 52px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-size: .9rem;
  font-weight: 700;
  gap: 8px;
}

.dashboard-range-box i {
  color: #94a3b8;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dashboard-monthly-chart {
  min-height: 320px;
}

/* ── Modal ── */
.dashboard-modal-head {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  border-bottom: 0;
  color: #fff;
  padding: 18px 24px;
}
.dashboard-modal-head h4 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.dashboard-modal-link {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 1.1rem;
}
.dashboard-modal-link:hover { color: #fff; }

.dashboard-modal-table-wrap {
  height: 400px;
  overflow: auto;
  border: 1px solid #e7edf3;
  border-radius: 14px;
}

.dashboard-modal-table-wrap thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  font-weight: 700;
  padding: 12px 14px;
}

.dashboard-modal-table-wrap tbody td {
  padding: 12px 14px;
  font-size: .9rem;
  vertical-align: middle;
  border-color: #f1f5f9;
}

.dashboard-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 14px 20px;
}

.dashboard-modal-summary {
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .88rem;
}
.dashboard-modal-summary strong {
  color: #0f172a;
}

/* ── Revenue date filters ── */
.dashboard-revenue-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dashboard-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 130px;
}
.dashboard-date-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  margin: 0;
}
.dashboard-date-input {
  height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font-size: .88rem;
  font-weight: 600;
  padding: 0 12px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dashboard-date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  background: #fff;
}
.dashboard-date-sep {
  color: #cbd5e1;
  font-size: 1rem;
  padding-bottom: 8px;
  flex-shrink: 0;
}
.dashboard-apply-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 14px rgba(29,78,216,.3);
  align-self: flex-end;
}
.dashboard-apply-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(29,78,216,.38);
}
.dashboard-apply-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 767.98px) {
  .dashboard-calendar-card .card-body,
  .dashboard-chart-card .card-body {
    padding: 14px;
  }
  .dashboard-calendar-weekdays,
  .dashboard-calendar-grid {
    gap: 4px;
  }
  .dashboard-day-cell {
    min-height: 62px;
    padding: 8px;
  }
  .dashboard-chart-filters {
    grid-template-columns: 1fr;
  }
  .dashboard-modal-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const calendarTitle       = document.getElementById('dashboardCalendarTitle');
  const calendarGrid        = document.getElementById('dashboardCalendarGrid');
  const prevButton          = document.getElementById('dashboardCalendarPrev');
  const nextButton          = document.getElementById('dashboardCalendarNext');
  const monthPicker         = document.getElementById('dashboardCalendarMonthPicker');
  const calendarAjaxUrl     = @json($calendarAjaxUrl);
  const monthlyChartElement = document.getElementById('dashboardMonthlyBookingsChart');
  const revenueChartElement = document.getElementById('dashboardRevenueChart');
  const bookingsStartInput  = document.getElementById('bookingsChartStart');
  const bookingsEndInput    = document.getElementById('bookingsChartEnd');
  const bookingsApplyBtn    = document.getElementById('bookingsChartApply');
  const modalElement        = document.getElementById('calendarDayModal');
  let monthlyChart = null;
  let revenueChart = null;

  var initialSeries = @json($monthlyChart['series']);
  var initialCategories = @json($monthlyChart['categories']);

  function buildChartColors(count) {
    var palette = [
      '#2563eb','#3b82f6','#1d4ed8','#60a5fa','#2563eb','#3b82f6',
      '#1d4ed8','#60a5fa','#2563eb','#3b82f6','#1d4ed8','#60a5fa','#93c5fd'
    ];
    return Array.from({ length: count }, function (_, i) { return palette[i % palette.length]; });
  }

  function buildChartOptions(categories, series) {
    return {
      chart: {
        type: 'bar',
        height: 320,
        toolbar: { show: false },
        animations: { enabled: true, easing: 'easeinout', speed: 450 }
      },
      series: [{ name: 'Bookings', data: series }],
      colors: buildChartColors(series.length),
      plotOptions: {
        bar: { columnWidth: '60%', borderRadius: 5, distributed: true }
      },
      dataLabels: { enabled: false },
      legend: { show: false },
      grid: { borderColor: '#f1f5f9', strokeDashArray: 5, padding: { left: 0, right: 0 } },
      xaxis: {
        categories: categories,
        labels: {
          rotate: -32,
          style: { colors: '#94a3b8', fontSize: '11px', fontWeight: 600 }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
      },
      yaxis: {
        labels: { style: { colors: ['#94a3b8'], fontSize: '11px' } },
        min: 0
      },
      tooltip: {
        theme: 'light',
        y: {
          formatter: function (v) {
            return Number(v).toLocaleString() + ' booking' + (v === 1 ? '' : 's');
          }
        }
      },
      states: { hover: { filter: { type: 'lighten', value: 0.1 } } }
    };
  }

  function renderMonthlyChart(categories, series) {
    if (!monthlyChartElement || typeof ApexCharts === 'undefined') return;
    if (monthlyChart) {
      monthlyChart.destroy();
      monthlyChart = null;
    }
    monthlyChart = new ApexCharts(monthlyChartElement, buildChartOptions(categories, series));
    monthlyChart.render();
  }

  var initialRevenueCategories = @json($revenueChart['categories']);
  var initialRevenueSeries     = @json($revenueChart['series']);

  function buildRevenueColors(count) {
    var palette = [
      '#059669','#10b981','#047857','#34d399','#059669','#10b981',
      '#047857','#34d399','#059669','#10b981','#047857','#34d399','#6ee7b7'
    ];
    return Array.from({ length: count }, function (_, i) { return palette[i % palette.length]; });
  }

  function renderRevenueChart(categories, series) {
    if (!revenueChartElement || typeof ApexCharts === 'undefined') return;
    if (revenueChart) { revenueChart.destroy(); revenueChart = null; }
    revenueChart = new ApexCharts(revenueChartElement, {
      chart: {
        type: 'bar',
        height: 320,
        toolbar: { show: false },
        animations: { enabled: true, easing: 'easeinout', speed: 450 }
      },
      series: [{ name: 'Revenue', data: series }],
      colors: buildRevenueColors(series.length),
      plotOptions: { bar: { columnWidth: '60%', borderRadius: 5, distributed: true } },
      dataLabels: { enabled: false },
      legend: { show: false },
      grid: { borderColor: '#f1f5f9', strokeDashArray: 5, padding: { left: 0, right: 0 } },
      xaxis: {
        categories: categories,
        labels: {
          rotate: -32,
          style: { colors: '#94a3b8', fontSize: '11px', fontWeight: 600 }
        },
        axisBorder: { show: false },
        axisTicks: { show: false }
      },
      yaxis: {
        labels: {
          formatter: function (v) { return '$' + Number(v / 1000).toFixed(v >= 1000 ? 1 : 0) + (v >= 1000 ? 'k' : ''); },
          style: { colors: ['#94a3b8'], fontSize: '11px' }
        },
        min: 0
      },
      tooltip: {
        theme: 'light',
        y: {
          formatter: function (v) {
            return '$' + Number(v).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
          }
        }
      },
      states: { hover: { filter: { type: 'lighten', value: 0.1 } } }
    });
    revenueChart.render();
  }

  renderRevenueChart(initialRevenueCategories, initialRevenueSeries);

  // ── Revenue date-range filter ──
  const revenueStartInput = document.getElementById('revenueChartStart');
  const revenueEndInput   = document.getElementById('revenueChartEnd');
  const revenueApplyBtn   = document.getElementById('revenueChartApply');

  async function loadRevenueChart() {
    const startVal = revenueStartInput?.value;
    const endVal   = revenueEndInput?.value;
    if (!startVal || !endVal) return;
    if (startVal > endVal) {
      revenueEndInput.style.borderColor = '#f87171';
      return;
    }
    revenueEndInput.style.borderColor = '';

    if (revenueApplyBtn) { revenueApplyBtn.disabled = true; }
    try {
      const url = new URL(calendarAjaxUrl, window.location.origin);
      url.searchParams.set('ajax', '1');
      url.searchParams.set('chart_type', 'revenue');
      url.searchParams.set('chart_start', startVal);
      url.searchParams.set('chart_end', endVal);

      const res = await fetch(url.toString(), {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
      });
      if (!res.ok) throw new Error('Request failed');

      const data = await res.json();
      if (data.revenueChart) {
        renderRevenueChart(data.revenueChart.categories || [], data.revenueChart.series || []);
      }
    } catch (e) {
      console.error('Revenue chart load error', e);
    } finally {
      if (revenueApplyBtn) { revenueApplyBtn.disabled = false; }
    }
  }

  if (revenueApplyBtn) {
    revenueApplyBtn.addEventListener('click', loadRevenueChart);
  }
  if (revenueStartInput) {
    revenueStartInput.addEventListener('change', function () {
      // auto-correct end date if start > end
      if (revenueEndInput && this.value > revenueEndInput.value) {
        revenueEndInput.value = this.value;
      }
    });
  }

  renderMonthlyChart(initialCategories, initialSeries);

  if (!modalElement) {
    return;
  }

  const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
  const title = document.getElementById('calendarModalTitle');
  const body = document.getElementById('calendarModalBody');
  const bookingsTotal = document.getElementById('calendarModalBookings');
  const qtyTotal = document.getElementById('calendarModalQty');
  const amountTotal = document.getElementById('calendarModalTotal');
  const externalLink = document.getElementById('calendarModalExternalLink');
  const newBookingLink = document.getElementById('calendarModalNewBooking');

  function openDayModal(payload) {
    title.textContent = payload.label || 'Day Details';
    bookingsTotal.textContent = payload.booking_count || 0;
    qtyTotal.textContent = payload.quantity || 0;
    amountTotal.textContent = payload.total || '0.00';
    externalLink.href = payload.date_link || '#';
    newBookingLink.href = payload.new_booking_url || '{{ route('crm.booking.index') }}';

    if (!payload.rows || !payload.rows.length) {
      body.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">No bookings for this day.</td></tr>';
    } else {
      body.innerHTML = payload.rows.map(function (row) {
        return `
          <tr>
            <td>
              <a href="${row.confirmation_url}" class="fw-semibold text-decoration-none">${row.customer_name}</a>
              <div><em>${row.product_name}</em></div>
            </td>
            <td>${row.time_label}</td>
            <td class="text-end">${row.quantity}</td>
            <td class="text-end">$${Number(row.amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
            <td><span class="badge bg-${row.status_badge}">${row.status_label}</span></td>
          </tr>
        `;
      }).join('');
    }

    modal.show();
  }

  function bindCalendarDayClicks() {
    document.querySelectorAll('.dashboard-day-cell[data-day-payload]').forEach(function (button) {
      button.addEventListener('click', function () {
        openDayModal(JSON.parse(this.dataset.dayPayload || '{}'));
      });
    });
  }

  function buildDayCell(day) {
    const payload = {
      label: day.label,
      date_link: '{{ route('crm.booking.index') }}' + '?date_src=start_datetime&date_range=custom&date_from=' + day.date + '&date_to=' + day.date,
      new_booking_url: '{{ route('crm.booking.index') }}',
      booking_count: day.booking_count,
      quantity: day.quantity,
      total: day.total,
      rows: day.rows || []
    };
    const classes = [
      'dashboard-day-cell',
      day.in_month ? '' : 'is-muted',
      day.is_selected ? 'is-selected' : '',
      day.booking_count > 0 ? 'is-booked' : ''
    ].filter(Boolean).join(' ');

    return `
      <button type="button" class="${classes}" data-day-payload='${JSON.stringify(payload).replace(/'/g, '&#39;')}'>
        <span class="dashboard-day-number">${day.day_number}</span>
        ${day.booking_count > 0 ? `<span class="dashboard-day-badge">${day.booking_count}</span>` : ''}
      </button>
    `;
  }

  async function loadCalendarMonth(url) {
    if (!calendarGrid || !calendarTitle) {
      return;
    }

    prevButton?.classList.add('disabled');
    nextButton?.classList.add('disabled');

    try {
      const target = new URL(url, window.location.origin);
      target.searchParams.set('ajax', '1');

      const response = await fetch(target.toString(), {
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error('Calendar request failed');
      }

      const payload = await response.json();
      calendarTitle.textContent = payload.calendarMonthLabel;
      if (monthPicker && payload.calendarMonthValue) {
        monthPicker.value = payload.calendarMonthValue;
      }
      calendarGrid.innerHTML = (payload.calendarWeeks || []).map(function (week) {
        return week.map(buildDayCell).join('');
      }).join('');

      if (payload.monthlyChart) {
        var mc = payload.monthlyChart;
        if (bookingsStartInput && mc.start_date) bookingsStartInput.value = mc.start_date;
        if (bookingsEndInput   && mc.end_date)   bookingsEndInput.value   = mc.end_date;
        renderMonthlyChart(mc.categories || [], mc.series || []);
      }

      if (prevButton && payload.calendarPrevDate) {
        prevButton.href = calendarAjaxUrl + '?date=' + payload.calendarPrevDate;
      }
      if (nextButton && payload.calendarNextDate) {
        nextButton.href = calendarAjaxUrl + '?date=' + payload.calendarNextDate;
      }

      bindCalendarDayClicks();
    } catch (error) {
      window.location.href = url;
    } finally {
      prevButton?.classList.remove('disabled');
      nextButton?.classList.remove('disabled');
    }
  }

  document.querySelectorAll('[data-calendar-nav]').forEach(function (button) {
    button.addEventListener('click', function (event) {
      event.preventDefault();
      loadCalendarMonth(this.href);
    });
  });

  if (monthPicker) {
    monthPicker.addEventListener('change', function () {
      if (!this.value) {
        return;
      }

      loadCalendarMonth(calendarAjaxUrl + '?date=' + this.value + '-01');
    });
  }

  // ── Bookings date-range filter ──
  async function loadBookingsChart() {
    const startVal = bookingsStartInput?.value;
    const endVal   = bookingsEndInput?.value;
    if (!startVal || !endVal) return;
    if (startVal > endVal) {
      bookingsEndInput.style.borderColor = '#f87171';
      return;
    }
    bookingsEndInput.style.borderColor = '';

    if (bookingsApplyBtn) bookingsApplyBtn.disabled = true;
    try {
      const url = new URL(calendarAjaxUrl, window.location.origin);
      url.searchParams.set('ajax', '1');
      url.searchParams.set('chart_type', 'bookings');
      url.searchParams.set('chart_start', startVal);
      url.searchParams.set('chart_end', endVal);

      const res = await fetch(url.toString(), {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
      });
      if (!res.ok) throw new Error('Request failed');

      const data = await res.json();
      if (data.monthlyChart) {
        renderMonthlyChart(data.monthlyChart.categories || [], data.monthlyChart.series || []);
      }
    } catch (e) {
      console.error('Bookings chart load error', e);
    } finally {
      if (bookingsApplyBtn) bookingsApplyBtn.disabled = false;
    }
  }

  if (bookingsApplyBtn) {
    bookingsApplyBtn.addEventListener('click', loadBookingsChart);
  }
  if (bookingsStartInput) {
    bookingsStartInput.addEventListener('change', function () {
      if (bookingsEndInput && this.value > bookingsEndInput.value) {
        bookingsEndInput.value = this.value;
      }
    });
  }

  bindCalendarDayClicks();
});
</script>
@endsection