@extends('crm.master')

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

@php
  $dateRanges = [
    'today' => 'Today',
    'last_7_days' => 'Last 7 days',
    'last_30_days' => 'Last 30 days',
    'this_month' => 'This month',
    'all' => 'All notes',
    'custom' => 'Custom',
  ];
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y booking-notes-page">
  <div class="booking-notes-shell">
    <div class="booking-notes-head">
      <div>
        <h4 class="booking-notes-title">Booking Notes</h4>
        <div class="booking-notes-subtitle">{{ $label }}</div>
      </div>
      <a href="{{ route('crm.reports.booking-notes.export', request()->query()) }}" class="booking-notes-export">
        <i class="ti tabler-download me-1"></i> Export
      </a>
    </div>

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

        <div class="booking-notes-field">
          <label class="booking-notes-label">Staff</label>
          <select name="staff" class="booking-notes-control" onchange="this.form.submit()">
            <option value="">All staff</option>
            @foreach($staffOptions as $staffOption)
              <option value="{{ $staffOption }}" {{ $staff === $staffOption ? 'selected' : '' }}>{{ $staffOption }}</option>
            @endforeach
          </select>
        </div>

        <div class="booking-notes-search">
          <label class="booking-notes-label">Search</label>
          <div class="booking-notes-search-row">
            <input type="text" name="search" value="{{ $search }}" class="booking-notes-control" placeholder="Search notes">
            <button type="submit" class="booking-notes-search-btn"><i class="ti tabler-search"></i></button>
          </div>
        </div>

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

    <div class="booking-notes-card">
      <div class="table-responsive">
        <table class="table booking-notes-table mb-0">
          <thead>
            <tr>
              <th>Date</th>
              <th>Booking</th>
              <th>Staff</th>
              <th>Customer</th>
              <th>Note</th>
            </tr>
          </thead>
          <tbody>
            @forelse($rows as $row)
              <tr>
                <td>
                  <div>{{ $row->created_at?->format('m/d/y') }}</div>
                  <div class="booking-notes-time">{{ $row->created_at?->format('h:i a') }}</div>
                </td>
                <td>
                  @if($row->booking)
                    <a href="{{ route('crm.booking.confirmation', $row->booking->booking_number) }}" class="booking-notes-link">
                      {{ $row->booking->booking_number }}
                    </a>
                  @else
                    <span class="text-muted">Deleted booking</span>
                  @endif
                </td>
                <td>{{ $row->author_name ?: 'Staff' }}</td>
                <td>{{ $row->booking?->customer_name ?: '-' }}</td>
                <td>
                  <div>{{ $row->note }}</div>
                  @if($row->show_on_invoice)
                    <span class="booking-notes-visible">Shown on invoice</span>
                  @endif
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="5" class="text-center text-muted py-4">No booking notes found for the selected filters.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    @if($rows->hasPages())
      <div class="booking-notes-pagination">
        {{ $rows->links() }}
      </div>
    @endif
  </div>
</div>
@endsection

@section('head-extra')
<style>
.booking-notes-page {
  background: #f8f8fb;
}
.booking-notes-shell {
  display: grid;
  gap: 18px;
}
.booking-notes-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.booking-notes-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #1f3557;
}
.booking-notes-subtitle {
  margin-top: 6px;
  font-size: 15px;
  color: #49658f;
}
.booking-notes-export {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #d5deea;
  background: #fff;
  color: #31517b;
  text-decoration: none;
  font-weight: 700;
}
.booking-notes-filters,
.booking-notes-card {
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.booking-notes-filters {
  padding: 16px;
}
.booking-notes-filter-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.booking-notes-field,
.booking-notes-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.booking-notes-label {
  font-size: 13px;
  font-weight: 700;
  color: #465d80;
}
.booking-notes-control {
  min-width: 180px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fff;
}
.booking-notes-search-row {
  display: flex;
  gap: 8px;
}
.booking-notes-search-btn,
.booking-notes-apply {
  min-width: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}
.booking-notes-card {
  overflow: hidden;
}
.booking-notes-table thead th {
  background: #f8fafc;
  color: #31517b;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid #e7edf5;
}
.booking-notes-table tbody td {
  padding: 14px;
  border-color: #edf2f7;
  color: #17355a;
  font-size: 14px;
  vertical-align: top;
}
.booking-notes-table tbody tr:hover {
  background: #fbfdff;
}
.booking-notes-time {
  color: #6f7f96;
  font-size: 12px;
}
.booking-notes-link {
  color: #17355a;
  font-weight: 700;
  text-decoration: none;
}
.booking-notes-visible {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #edf5ff;
  color: #3267b0;
  font-size: 11px;
  font-weight: 700;
}
.booking-notes-pagination .pagination {
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .booking-notes-head {
    flex-direction: column;
  }
  .booking-notes-field,
  .booking-notes-search,
  .booking-notes-actions {
    width: 100%;
  }
  .booking-notes-control {
    min-width: 100%;
  }
}
</style>
@endsection