@extends('crm.master')

@section('title', 'Booking Daily List - ' . $date->format('M j, Y'))

@php
  $queryWithoutView = request()->except('view');
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div>
      <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
        <i class="ti tabler-list-details"></i> Booking Daily List
      </h4>
      <p class="text-muted small mb-0">View bookings by product, time, and daily summary totals.</p>
    </div>
    <a href="{{ route('crm.booking.index') }}" target="_blank" class="btn btn-primary btn-sm">
      <i class="ti tabler-plus me-1"></i> New Booking
    </a>
  </div>

  @include('crm.components.alerts')

  <div class="card mb-4">
    <div class="card-body py-3">
      <form method="GET" action="{{ route('crm.daily-list') }}">
        <input type="hidden" name="view" value="{{ $view }}">

        <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
          <a href="{{ route('crm.daily-list', array_merge(request()->except('date'), ['date' => $date->copy()->subDay()->toDateString()])) }}"
             class="btn btn-sm btn-outline-secondary">
            <i class="ti tabler-chevron-left"></i>
          </a>

          <a href="{{ route('crm.daily-list', array_merge(request()->except('date'), ['date' => \Carbon\Carbon::today()->toDateString()])) }}"
             class="btn btn-sm {{ $date->isToday() ? 'btn-primary' : 'btn-outline-secondary' }}">
            Today {{ $todayCount }}
          </a>
          <a href="{{ route('crm.daily-list', array_merge(request()->except('date'), ['date' => \Carbon\Carbon::tomorrow()->toDateString()])) }}"
             class="btn btn-sm {{ $date->isTomorrow() ? 'btn-primary' : 'btn-outline-secondary' }}">
            Tomorrow {{ $tomorrowCount }}
          </a>

          <input type="date" name="date" class="form-control form-control-sm" style="width:160px"
                 value="{{ $date->toDateString() }}" onchange="this.form.submit()">

          <a href="{{ route('crm.daily-list', array_merge(request()->except('date'), ['date' => $date->copy()->addDay()->toDateString()])) }}"
             class="btn btn-sm btn-outline-secondary">
            <i class="ti tabler-chevron-right"></i>
          </a>
        </div>

        <div class="row g-2 align-items-end">
          <div class="col-md-2">
            <label class="form-label small mb-1">Date Type</label>
            <select name="type" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="starting" {{ $type === 'starting' ? 'selected' : '' }}>Starting</option>
              <option value="ending" {{ $type === 'ending' ? 'selected' : '' }}>Ending</option>
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Category</label>
            <select name="category_id" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All Categories</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}" {{ $catId == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Status</label>
            <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All Statuses</option>
              @foreach(\App\Models\Booking::STATUS_OPTIONS as $val => $label)
                <option value="{{ $val }}" {{ $status === $val ? 'selected' : '' }}>{{ $label }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Product</label>
            <select name="product_id" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All Products</option>
              @foreach($products as $prod)
                <option value="{{ $prod->id }}" {{ $prodId == $prod->id ? 'selected' : '' }}>{{ $prod->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Search</label>
            <input type="text" name="search" class="form-control form-control-sm"
                   placeholder="Name, ID, Email..." value="{{ $search }}">
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Time (from)</label>
            <input type="time" name="time" class="form-control form-control-sm"
                   value="{{ $time }}" onchange="this.form.submit()">
          </div>
        </div>

        <div class="d-flex align-items-center justify-content-between gap-2 mt-3 flex-wrap">
          <div class="btn-group btn-group-sm">
            <a href="{{ route('crm.daily-list', array_merge($queryWithoutView, ['view' => 'item'])) }}"
               class="btn {{ $view === 'item' ? 'btn-primary' : 'btn-outline-secondary' }}">Products</a>
            <a href="{{ route('crm.daily-list', array_merge($queryWithoutView, ['view' => 'time'])) }}"
               class="btn {{ $view === 'time' ? 'btn-primary' : 'btn-outline-secondary' }}">Time</a>
          </div>

          <button type="submit" class="btn btn-sm btn-primary">
            <i class="ti tabler-search me-1"></i> Apply
          </button>
        </div>
      </form>
    </div>
  </div>



  <div class="card mb-4 daily-list-card">
    <div class="card-header py-3">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="fw-semibold">Daily Booking Summary</div>
        <div class="small text-muted">
          {{ $totalBookings }} bookings | Qty {{ $totalQuantity }} | ${{ number_format($totalRevenue, 2) }}
        </div>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-sm mb-0 align-middle daily-list-table">
        <thead class="table-light">
          <tr>
            <th class="ps-3">Product</th>
            <th>Inventory Consumed</th>
            <th>Bookings</th>
            <th>Total Quantity</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          @forelse($summaryRows as $row)
            <tr>
              <td class="ps-3">
                <div class="fw-semibold">{{ $row->product_name }}</div>
                <div class="small text-muted">{{ $row->category_name ?: 'Uncategorized' }}</div>
              </td>
              <td>
                @if(!is_null($row->consumed_percentage))
                  <div class="daily-progress-wrap">
                    <div class="daily-progress"><span style="width: {{ $row->consumed_percentage }}%"></span></div>
                    <small class="text-muted">{{ $row->total_quantity }}/{{ $row->inventory_amount }}</small>
                  </div>
                @else
                  <span class="text-muted small">N/A</span>
                @endif
              </td>
              <td>{{ $row->bookings_count }}</td>
              <td>{{ $row->total_quantity }}</td>
              <td>${{ number_format($row->total_amount, 2) }}</td>
            </tr>
          @empty
            <tr>
              <td colspan="5" class="text-center text-muted py-4">No summary data for this day.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  @if($view === 'time')
    @forelse($timeGroups as $timeGroup)
      <div class="card mb-4 daily-list-card">
        <div class="card-header py-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
          <div class="fw-semibold">{{ $timeGroup->time_label }}</div>
          <div class="small text-muted">Qty {{ $timeGroup->total_quantity }} | ${{ number_format($timeGroup->total_amount, 2) }}</div>
        </div>
        @foreach($timeGroup->products as $productGroup)
          <div class="daily-section-header">
            <strong>{{ $productGroup->product_name }}</strong>
          </div>
          <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 align-middle daily-list-table">
              <thead class="table-light">
                <tr>
                  <th class="ps-3">ID</th>
                  <th>Booker</th>
                  <th>Start Time</th>
                  <th>End Time</th>
                  <th>Email</th>
                  <th>Total Quantity</th>
                  <th>Total</th>
                  <th>Status</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                @foreach($productGroup->rows as $entry)
                  @php
                    $booking = $entry['booking'];
                    $noteText = $booking->notes ?: $booking->internal_notes ?: $booking->purpose;
                  @endphp
                  <tr>
                    <td class="ps-3">
                      <a href="{{ route('crm.booking.confirmation', $booking->booking_number) }}" class="fw-semibold text-primary text-decoration-none">
                        {{ $booking->booking_number }}
                      </a>
                    </td>
                    <td>{{ $booking->customer_name }}</td>
                    <td class="text-nowrap">{{ $booking->start_datetime->format('h:i A') }}</td>
                    <td class="text-nowrap">{{ $booking->end_datetime->format('h:i A') }}</td>
                    <td>{{ $booking->customer_email }}</td>
                    <td>{{ $entry['quantity'] }}</td>
                    <td>${{ number_format($entry['amount'], 2) }}</td>
                    <td><span class="badge bg-{{ $booking->status_badge }}">{{ $booking->status_label }}</span></td>
                    <td class="small text-muted">{{ $noteText ? \Illuminate\Support\Str::limit($noteText, 60) : '-' }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endforeach
      </div>
    @empty
      <div class="card"><div class="card-body text-center text-muted py-5">No bookings for this date.</div></div>
    @endforelse
  @else
    @forelse($itemGroups as $categoryGroup)
      <div class="card mb-4 daily-list-card">
        <div class="card-header py-3 fw-semibold">{{ $categoryGroup->category_name }}</div>
        @foreach($categoryGroup->products as $productGroup)
          <div class="daily-section-header d-flex justify-content-between gap-2 flex-wrap">
            <strong>{{ $productGroup->product_name }}</strong>
            <span class="small text-muted">{{ $productGroup->booking_count }} bookings | Qty {{ $productGroup->total_quantity }} | ${{ number_format($productGroup->total_amount, 2) }}</span>
          </div>
          <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 align-middle daily-list-table">
              <thead class="table-light">
                <tr>
                  <th class="ps-3">ID</th>
                  <th>Booker</th>
                  <th>Start Time</th>
                  <th>End Time</th>
                  <th>Email</th>
                  <th>Total Quantity</th>
                  <th>Total</th>
                  <th>Status</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                @foreach($productGroup->rows as $entry)
                  @php
                    $booking = $entry['booking'];
                    $noteText = $booking->notes ?: $booking->internal_notes ?: $booking->purpose;
                  @endphp
                  <tr>
                    <td class="ps-3">
                      <a href="{{ route('crm.booking.confirmation', $booking->booking_number) }}" class="fw-semibold text-primary text-decoration-none">
                        {{ $booking->booking_number }}
                      </a>
                    </td>
                    <td>{{ $booking->customer_name }}</td>
                    <td class="text-nowrap">{{ $booking->start_datetime->format('m/d/y h:i A') }}</td>
                    <td class="text-nowrap">{{ $booking->end_datetime->format('m/d/y h:i A') }}</td>
                    <td>{{ $booking->customer_email }}</td>
                    <td>{{ $entry['quantity'] }}</td>
                    <td>${{ number_format($entry['amount'], 2) }}</td>
                    <td><span class="badge bg-{{ $booking->status_badge }}">{{ $booking->status_label }}</span></td>
                    <td class="small text-muted">{{ $noteText ? \Illuminate\Support\Str::limit($noteText, 60) : '-' }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endforeach
      </div>
    @empty
      <div class="card"><div class="card-body text-center text-muted py-5">No bookings for this date.</div></div>
    @endforelse
  @endif
</div>
@endsection

<style>
.daily-list-card {
  border: 1px solid #e5ebf3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
  background: #fff;
}

.daily-list-card .card-header {
  border-bottom: 1px solid #e7edf3;
  background: #fff;
}

.daily-list-table th {
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5f6b7a;
  font-weight: 700;
}

.daily-list-table td {
  font-size: 12px;
  vertical-align: middle;
}

.daily-list-table tbody td .small,
.daily-list-table tbody td small {
  font-size: 10.5px !important;
}

.daily-section-header {
  padding: 0.8rem 1rem;
  background: #fbfcfe;
  border-top: 1px solid #edf2f7;
}

.daily-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.daily-progress {
  width: 88px;
  height: 12px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
  border: 1px solid #d9e3ef;
}

.daily-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5ab0f3 0%, #85cbff 100%);
}

@media (max-width: 767.98px) {
}
</style>

@section('page-script')
<script>
</script>
@endsection