@extends('crm.master')

@section('title', 'Transactions - ' . $booking->booking_number)

@php
  $bookingRoutePrefix = request()->routeIs('crm.booking.*') ? 'crm.booking.' : 'booking.';
@endphp

@section('head-extra')
<style>
.trx-wrap {
  max-width: 1080px;
  margin: 28px auto 60px;
  padding: 0 16px;
}
.trx-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.trx-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: #5c6c84;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
}
.trx-tab.is-active {
  background: #58697f;
  color: #fff;
}
.trx-tab:not(.is-active) {
  background: #f4f7fb;
}
.trx-card {
  background: #fff;
  border: 1px solid #e7edf4;
  border-radius: 12px;
  overflow: hidden;
}
.trx-table {
  width: 100%;
  border-collapse: collapse;
}
.trx-table th,
.trx-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #edf2f7;
  font-size: 13px;
  vertical-align: top;
}
.trx-table th {
  background: #f8fafc;
  color: #54657d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.trx-status {
  font-weight: 800;
  color: #1f9d55;
}
.trx-status.refund {
  color: #dc2626;
}
.trx-muted {
  color: #7b8794;
  font-size: 12px;
}
.trx-provider-none {
  color: #6b7280;
}
.trx-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.trx-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}
.trx-modal .modal-header,
.trx-modal .modal-footer {
  border-color: #eef2f7;
}
@media (max-width: 768px) {
  .trx-table {
    min-width: 920px;
  }
}
</style>
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="trx-wrap">
    @include('crm.components.alerts')

    <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
      <div class="d-flex align-items-center gap-2">
        <a href="{{ route($bookingRoutePrefix . 'index') }}" class="btn btn-sm btn-outline-secondary">
          <i class="ti tabler-arrow-left me-1"></i> New Booking
        </a>
        <h6 class="mb-0 fw-bold" style="font-size:14px;">
          {{ $booking->customer_name }},
          <span class="text-muted fw-normal">{{ $booking->start_datetime->format('F d Y') }}</span>
        </h6>
      </div>
      <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
        <i class="ti tabler-credit-card me-1"></i> Add Payment
      </button>
    </div>

    <div class="trx-tabs">
      <a href="{{ route($bookingRoutePrefix . 'confirmation', $booking->booking_number) }}" class="trx-tab">Invoice</a>
      <a href="{{ route($bookingRoutePrefix . 'edit', $booking->booking_number) }}" class="trx-tab">Edit</a>
      <a href="{{ route($bookingRoutePrefix . 'transactions', $booking->booking_number) }}" class="trx-tab is-active">Transactions <span class="ms-1">({{ $booking->transactions->count() }})</span></a>
    </div>

    <div class="trx-card">
      <div class="table-responsive">
        <table class="trx-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Date</th>
              <th>Status</th>
              <th>Amount</th>
              <th>Payment</th>
              <th>Source</th>
              <th>Payment Provider</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @forelse($booking->transactions as $transaction)
              <tr>
                <td>
                  <span class="fw-semibold text-primary">#{{ $transaction->id }}</span>
                </td>
                <td>
                  {{ optional($transaction->processed_at)->format('m/d/y') ?: optional($transaction->created_at)->format('m/d/y') }}<br>
                  <span class="trx-muted">{{ optional($transaction->processed_at)->format('H:i:s') ?: optional($transaction->created_at)->format('H:i:s') }}</span>
                </td>
                <td><span class="trx-status {{ $transaction->status_class }}">{{ $transaction->status_label }}</span></td>
                <td>${{ number_format($transaction->amount, 2) }}</td>
                <td>
                  {{ $transaction->payment_display }}
                  @if($transaction->pos_type)
                    <div class="trx-muted">(POS)</div>
                  @endif
                </td>
                <td>{{ $transaction->source_name ?: 'System' }}</td>
                <td class="{{ blank($transaction->payment_provider) ? 'trx-provider-none' : '' }}">
                  {{ $transaction->payment_provider ?: 'None' }}
                </td>
                <td>
                  <div class="trx-actions">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary {{ $transaction->can_update_pos ? '' : 'disabled' }}"
                            {{ $transaction->can_update_pos ? '' : 'disabled' }}
                            data-bs-toggle="modal"
                            data-bs-target="#posTransactionModal"
                            data-transaction-id="{{ $transaction->id }}"
                            data-pos-type="{{ $transaction->pos_type ?: 'cash' }}"
                            data-pos-date="{{ optional($transaction->pos_date)->format('Y-m-d') ?: optional($transaction->processed_at)->format('Y-m-d') }}">
                      <i class="ti tabler-settings me-1"></i>Change
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-danger {{ $transaction->can_refund ? '' : 'disabled' }}"
                            {{ $transaction->can_refund ? '' : 'disabled' }}
                            data-bs-toggle="modal"
                            data-bs-target="#refundTransactionModal"
                            data-transaction-id="{{ $transaction->id }}"
                            data-refundable-amount="{{ number_format($transaction->refundable_amount, 2, '.', '') }}"
                            data-payment-display="{{ $transaction->payment_display }}"
                            data-payment-provider="{{ $transaction->payment_provider }}"
                            data-card-brand="{{ data_get($transaction->meta, 'card_brand') }}"
                            data-card-last4="{{ data_get($transaction->meta, 'card_last4') }}"
                            data-pos-type="{{ $transaction->pos_type ?: 'cash' }}">
                      <i class="ti tabler-arrow-back-up me-1"></i>Refund
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" disabled>
                      <i class="ti tabler-info-circle me-1"></i>Details
                    </button>
                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="8" class="text-center text-muted py-4">No transactions available for this booking yet.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@include('booking.partials.add-payment-modal')

<div class="modal fade trx-modal" id="posTransactionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" id="posTransactionForm">
        @csrf
        @method('PATCH')
        <div class="modal-header">
          <h5 class="modal-title">Update POS Transaction</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">POS Type</label>
            <select name="pos_type" id="posTypeInput" class="form-select" required>
              @foreach(\App\Models\BookingTransaction::POS_TYPE_OPTIONS as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
              @endforeach
            </select>
          </div>

          <div>
            <label class="form-label fw-semibold">POS Date</label>
            <input type="date" name="pos_date" id="posDateInput" class="form-control" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Change</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade trx-modal" id="refundTransactionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" id="refundTransactionForm">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title"><i class="ti tabler-arrow-back-up me-1"></i>Refund</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">Refund Amount</label>
            <input type="number" name="amount" id="refundAmountInput" class="form-control" step="0.01" min="0.01" required>
            <div class="trx-muted mt-1" id="refundAmountHelp"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold d-block">Payment Type</label>
            <div class="btn-group" role="group" aria-label="Refund method">
              <input type="radio" class="btn-check" name="refund_method" id="refundMethodStripe" value="stripe">
              <label class="btn btn-outline-secondary" for="refundMethodStripe">Credit Card / POS</label>

              <input type="radio" class="btn-check" name="refund_method" id="refundMethodPos" value="pos" checked>
              <label class="btn btn-outline-secondary" for="refundMethodPos">POS</label>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Type</label>
            <select name="refund_type" id="refundTypeInput" class="form-select">
              @foreach(\App\Models\BookingTransaction::POS_TYPE_OPTIONS as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
              @endforeach
            </select>
            <div class="trx-muted mt-1" id="refundTypeHelp"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Notes</label>
            <textarea name="notes" class="form-control" rows="3" placeholder="Notes..."></textarea>
          </div>

          <div class="d-flex flex-column gap-2">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="1" id="refund_send_notification" name="send_notification">
              <label class="form-check-label" for="refund_send_notification">Send e-mail notifications</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="1" id="refund_show_note" name="show_note_on_invoice">
              <label class="form-check-label" for="refund_show_note">Show note on customer invoice</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Refund</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
  var modal = document.getElementById('posTransactionModal');
  var form = document.getElementById('posTransactionForm');
  var posTypeInput = document.getElementById('posTypeInput');
  var posDateInput = document.getElementById('posDateInput');
  var refundModal = document.getElementById('refundTransactionModal');
  var refundForm = document.getElementById('refundTransactionForm');
  var refundAmountInput = document.getElementById('refundAmountInput');
  var refundAmountHelp = document.getElementById('refundAmountHelp');
  var refundTypeInput = document.getElementById('refundTypeInput');
  var refundTypeHelp = document.getElementById('refundTypeHelp');
  var refundMethodStripe = document.getElementById('refundMethodStripe');
  var refundMethodPos = document.getElementById('refundMethodPos');

  if (modal && form) {
    modal.addEventListener('show.bs.modal', function (event) {
      var button = event.relatedTarget;
      if (!button) {
        return;
      }

      var transactionId = button.getAttribute('data-transaction-id');
      var posType = button.getAttribute('data-pos-type') || 'cash';
      var posDate = button.getAttribute('data-pos-date') || '{{ now()->format('Y-m-d') }}';

      form.action = '{{ route($bookingRoutePrefix . 'transactions.update', ['bookingNumber' => $booking->booking_number, 'transaction' => '__TRANSACTION__']) }}'
        .replace('__TRANSACTION__', transactionId);
      posTypeInput.value = posType;
      posDateInput.value = posDate;
    });
  }

  function updateRefundTypeState() {
    if (!refundForm) {
      return;
    }

    var stripeMode = refundMethodStripe.checked;
    refundTypeInput.disabled = stripeMode;

    if (stripeMode) {
      refundTypeHelp.textContent = 'Refund back to the original Stripe card when available.';
    } else {
      refundTypeHelp.textContent = 'Record the refund as a POS or manual refund type.';
    }
  }

  if (refundMethodStripe) {
    refundMethodStripe.addEventListener('change', updateRefundTypeState);
  }

  if (refundMethodPos) {
    refundMethodPos.addEventListener('change', updateRefundTypeState);
  }

  if (refundModal && refundForm) {
    refundModal.addEventListener('show.bs.modal', function (event) {
      var button = event.relatedTarget;
      if (!button) {
        return;
      }

      var transactionId = button.getAttribute('data-transaction-id');
      var refundableAmount = button.getAttribute('data-refundable-amount') || '0.00';
      var paymentProvider = button.getAttribute('data-payment-provider') || '';
      var paymentDisplay = button.getAttribute('data-payment-display') || 'Original payment';
      var posType = button.getAttribute('data-pos-type') || 'cash';

      refundForm.action = '{{ route($bookingRoutePrefix . 'transactions.refund', ['bookingNumber' => $booking->booking_number, 'transaction' => '__TRANSACTION__']) }}'
        .replace('__TRANSACTION__', transactionId);
      refundAmountInput.value = refundableAmount;
      refundAmountInput.max = refundableAmount;
      refundAmountHelp.textContent = 'Up to $' + refundableAmount + ' can be refunded for this transaction.';
      refundTypeInput.value = posType;

      if (paymentProvider === 'Stripe') {
        refundMethodStripe.checked = true;
        refundMethodStripe.disabled = false;
        refundMethodPos.checked = false;
        refundTypeHelp.textContent = 'Refund back to ' + paymentDisplay + ' or switch to POS to record an external refund.';
      } else {
        refundMethodPos.checked = true;
        refundMethodStripe.checked = false;
        refundMethodStripe.disabled = true;
        refundTypeHelp.textContent = 'Record the refund as a POS or manual refund type.';
      }

      updateRefundTypeState();
    });

    refundModal.addEventListener('hidden.bs.modal', function () {
      refundForm.reset();
      refundMethodStripe.disabled = false;
      refundMethodPos.checked = true;
      updateRefundTypeState();
    });
  }
});
</script>
@endsection