@extends('crm.master')

@section('title', 'Transactions')

@php
  $selectedPaymentTypes = $filters['payment_types'] ?? [];
  $selectedEvents = $filters['events'] ?? [];
  $selectedStaff = $filters['staff'] ?? [];
  $selectedCategoryIds = array_map('intval', $filters['category_ids'] ?? []);
  $paymentTypeSummary = count($selectedPaymentTypes) ? count($selectedPaymentTypes) . ' selected' : 'All payment types';
  $eventSummary = count($selectedEvents) ? count($selectedEvents) . ' selected' : 'All events';
  $staffSummary = count($selectedStaff) ? count($selectedStaff) . ' selected' : 'All staff';
  $categorySummary = count($selectedCategoryIds) ? count($selectedCategoryIds) . ' selected' : 'All categories';
@endphp

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

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

    <div class="transactions-card transactions-card--filters">
      <form method="GET" action="{{ route('crm.reports.transactions') }}" class="transactions-filter-form">
        <div class="transactions-filter-grid">
          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Date</label>
            <select name="date_range" class="transactions-filter-control" onchange="this.form.submit()">
              @foreach($options['date_ranges'] as $value => $label)
                <option value="{{ $value }}" {{ $filters['date_range'] === $value ? 'selected' : '' }}>{{ $label }}</option>
              @endforeach
            </select>
          </div>

          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Payment Type</label>
            <div class="transactions-multiselect" data-multiselect>
              <button type="button" class="transactions-multiselect-trigger" data-multiselect-trigger>
                <span>{{ $paymentTypeSummary }}</span>
                <i class="ti tabler-chevron-down"></i>
              </button>
              <div class="transactions-multiselect-menu" data-multiselect-menu>
                @foreach($options['payment_types'] as $value => $label)
                  <label class="transactions-check-option">
                    <input type="checkbox" name="payment_types[]" value="{{ $value }}" {{ in_array($value, $selectedPaymentTypes, true) ? 'checked' : '' }}>
                    <span>{{ $label }}</span>
                  </label>
                @endforeach
              </div>
            </div>
          </div>

          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Event</label>
            <div class="transactions-multiselect" data-multiselect>
              <button type="button" class="transactions-multiselect-trigger" data-multiselect-trigger>
                <span>{{ $eventSummary }}</span>
                <i class="ti tabler-chevron-down"></i>
              </button>
              <div class="transactions-multiselect-menu" data-multiselect-menu>
                @foreach($options['events'] as $value => $label)
                  <label class="transactions-check-option">
                    <input type="checkbox" name="events[]" value="{{ $value }}" {{ in_array($value, $selectedEvents, true) ? 'checked' : '' }}>
                    <span>{{ $label }}</span>
                  </label>
                @endforeach
              </div>
            </div>
          </div>

          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Staff</label>
            <div class="transactions-multiselect" data-multiselect>
              <button type="button" class="transactions-multiselect-trigger" data-multiselect-trigger>
                <span>{{ $staffSummary }}</span>
                <i class="ti tabler-chevron-down"></i>
              </button>
              <div class="transactions-multiselect-menu" data-multiselect-menu>
                @foreach($options['staff'] as $staffName)
                  <label class="transactions-check-option">
                    <input type="checkbox" name="staff[]" value="{{ $staffName }}" {{ in_array($staffName, $selectedStaff, true) ? 'checked' : '' }}>
                    <span>{{ $staffName }}</span>
                  </label>
                @endforeach
              </div>
            </div>
          </div>

          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Category</label>
            <div class="transactions-multiselect" data-multiselect>
              <button type="button" class="transactions-multiselect-trigger" data-multiselect-trigger>
                <span>{{ $categorySummary }}</span>
                <i class="ti tabler-chevron-down"></i>
              </button>
              <div class="transactions-multiselect-menu" data-multiselect-menu>
                @foreach($options['categories'] as $category)
                  <label class="transactions-check-option">
                    <input type="checkbox" name="category_ids[]" value="{{ $category->id }}" {{ in_array($category->id, $selectedCategoryIds, true) ? 'checked' : '' }}>
                    <span>{{ $category->name }}</span>
                  </label>
                @endforeach
              </div>
            </div>
          </div>

          <div class="transactions-filter-field">
            <label class="transactions-filter-label">Search</label>
            <input type="text" name="search" value="{{ $filters['search'] }}" class="transactions-filter-control" placeholder="Booking, customer, provider...">
          </div>
        </div>

        @if($filters['date_range'] === 'custom')
          <div class="transactions-filter-grid transactions-filter-grid--custom">
            <div class="transactions-filter-field">
              <label class="transactions-filter-label">From</label>
              <input type="date" name="date_from" value="{{ $filters['date_from'] }}" class="transactions-filter-control">
            </div>

            <div class="transactions-filter-field">
              <label class="transactions-filter-label">To</label>
              <input type="date" name="date_to" value="{{ $filters['date_to'] }}" class="transactions-filter-control">
            </div>
          </div>
        @endif

        <div class="transactions-filter-actions">
          <button type="submit" class="transactions-apply-btn">
            <i class="ti tabler-search me-1"></i> Apply
          </button>
          <a href="{{ route('crm.reports.transactions') }}" class="transactions-clear-btn">
            <i class="ti tabler-x me-1"></i> Clear
          </a>
        </div>
      </form>
    </div>

    <div class="transactions-card transactions-card--table">
      <div class="transactions-summary">
        <div class="transactions-summary-item">
          <span class="transactions-summary-label">Transactions</span>
          <strong>{{ number_format($summary['count']) }}</strong>
        </div>
        <div class="transactions-summary-item">
          <span class="transactions-summary-label">Total Amount</span>
          <strong>${{ number_format($summary['amount'], 2) }}</strong>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table transactions-table mb-0">
          <thead>
            <tr>
              <th>Booking No</th>
              <th>Date</th>
              <th>Event</th>
              <th class="text-end">Amount</th>
              <th>Payment Type</th>
              <th>User Account</th>
              <th>Payment Customer</th>
              <th>Payment Provider</th>
              <th class="transactions-col-provider">Provider Transaction</th>
              <th class="transactions-col-booking-date">Booking Date</th>
              <th>Booking Code</th>
              <th>Item Name</th>
              <th>Category</th>
            </tr>
          </thead>
          <tbody>
            @forelse($transactions as $transaction)
              <tr>
                <td>
                  <a href="{{ route('crm.booking.confirmation', $transaction->booking->booking_number) }}" class="transactions-link">
                    {{ $transaction->booking?->booking_number }}
                  </a>
                </td>
                <td>
                  {{ optional($transaction->processed_at ?? $transaction->created_at)?->format('m/d/y') }}<br>
                  <span class="transactions-muted">{{ optional($transaction->processed_at ?? $transaction->created_at)?->format('h:i A') }}</span>
                </td>
                <td>
                  <span class="transactions-event transactions-event--{{ $transaction->type }}">
                    {{ strtoupper($transaction->event_label) }}
                  </span>
                </td>
                <td class="text-end">${{ number_format((float) $transaction->amount, 2) }}</td>
                <td>
                  <span class="transactions-pill">{{ $transaction->payment_type_label }}</span>
                </td>
                <td>{{ $transaction->staff_label }}</td>
                <td>{{ $transaction->booking?->customer_name }}</td>
                <td>{{ $transaction->payment_provider ?: 'None' }}</td>
                <td class="transactions-ref transactions-provider-cell">{{ $transaction->provider_reference ?: '-' }}</td>
                <td class="transactions-booking-date-cell">
                  <span class="transactions-date-badge">{{ optional($transaction->booking?->start_datetime)?->format('m/d/y') ?: '-' }}</span>
                </td>
                <td>{{ $transaction->booking?->booking_number }}</td>
                <td class="transactions-wrap-cell">{{ $transaction->item_names ?: '-' }}</td>
                <td class="transactions-wrap-cell">{{ $transaction->category_names ?: '-' }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="13" class="text-center text-muted py-4">No transactions found for the selected filters.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

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

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

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

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

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

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

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

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

.transactions-card--filters {
  padding: 18px;
}

.transactions-filter-form {
  display: grid;
  gap: 16px;
}

.transactions-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.transactions-filter-grid--custom {
  grid-template-columns: repeat(2, minmax(0, 220px));
}

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

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

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

.transactions-multiselect {
  position: relative;
}

.transactions-multiselect-trigger {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #17355a;
}

.transactions-multiselect-trigger i {
  color: #7b8794;
}

.transactions-multiselect-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.transactions-multiselect.is-open .transactions-multiselect-menu {
  display: grid;
  gap: 4px;
}

.transactions-check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: #17355a;
}

.transactions-check-option:hover {
  background: #f5f8fc;
}

.transactions-check-option input {
  width: 16px;
  height: 16px;
}

.transactions-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.transactions-apply-btn,
.transactions-clear-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.transactions-apply-btn {
  border: 0;
  background: #2563eb;
  color: #fff;
}

.transactions-clear-btn {
  border: 1px solid #d5deea;
  background: #fff;
  color: #465d80;
}

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

.transactions-summary {
  display: flex;
  gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf2f7;
  background: #fbfdff;
}

.transactions-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transactions-summary-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8090a7;
}

.transactions-table thead th {
  background: #f8fafc;
  color: #31517b;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #e7edf5;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.transactions-col-provider {
  min-width: 220px;
}

.transactions-col-booking-date {
  min-width: 116px;
}

.transactions-table tbody td {
  padding: 14px 12px;
  border-color: #edf2f7;
  color: #17355a;
  font-size: 13px;
  vertical-align: top;
  white-space: nowrap;
}

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

.transactions-table tbody tr:nth-child(even) {
  background: #fcfdff;
}

.transactions-link {
  color: #2458cc;
  text-decoration: none;
  font-weight: 700;
}

.transactions-muted {
  color: #7b8794;
  font-size: 12px;
}

.transactions-event {
  font-weight: 800;
}

.transactions-event--payment {
  color: #16a34a;
}

.transactions-event--refund,
.transactions-event--chargeback {
  color: #dc2626;
}

.transactions-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #335c9e;
  font-weight: 700;
  white-space: nowrap;
}

.transactions-ref,
.transactions-wrap-cell {
  white-space: normal;
}

.transactions-ref {
  max-width: 180px;
  word-break: break-all;
}

.transactions-provider-cell {
  min-width: 220px;
  padding-right: 18px !important;
}

.transactions-booking-date-cell {
  min-width: 116px;
  padding-left: 18px !important;
  border-left: 1px solid #e7edf5;
}

.transactions-date-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f7ff;
  color: #335c9e;
  font-weight: 700;
  white-space: nowrap;
}

.transactions-wrap-cell {
  min-width: 160px;
}

@media (max-width: 1199.98px) {
  .transactions-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .transactions-filter-grid,
  .transactions-filter-grid--custom {
    grid-template-columns: 1fr;
  }

  .transactions-filter-control {
    width: 100%;
  }
}
</style>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[data-multiselect]').forEach(function (root) {
    var trigger = root.querySelector('[data-multiselect-trigger]');

    if (!trigger) {
      return;
    }

    trigger.addEventListener('click', function (event) {
      event.preventDefault();
      document.querySelectorAll('[data-multiselect].is-open').forEach(function (openRoot) {
        if (openRoot !== root) {
          openRoot.classList.remove('is-open');
        }
      });
      root.classList.toggle('is-open');
    });
  });

  document.addEventListener('click', function (event) {
    document.querySelectorAll('[data-multiselect].is-open').forEach(function (root) {
      if (!root.contains(event.target)) {
        root.classList.remove('is-open');
      }
    });
  });
});
</script>
@endsection