@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <style>
    .refund-card {
      border: 0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(31, 36, 48, 0.07);
    }

    .refund-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.6rem 2rem 1.25rem;
      background: #fff;
      border-bottom: 1px solid #f1ebe3;
    }

    .refund-card-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 700;
      color: #1d2433;
      position: relative;
      display: inline-flex;
      align-items: center;
      padding-bottom: 0.45rem;
    }

    .refund-card-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 2.1rem;
      height: 3px;
      border-radius: 999px;
      background: var(--user-accent, #ff9208);
    }

    .refund-help-icon {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #171717;
      color: #fff;
      font-size: 1rem;
      box-shadow: 0 8px 18px rgba(23, 23, 23, 0.16);
    }

    .refund-section-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      background: #f5f1eb;
      border-bottom: 1px solid #eee5da;
    }

    .refund-section-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 1.25rem;
      min-height: 3.9rem;
      font-size: 1.45rem;
      font-weight: 700;
      color: #1d2433;
      text-decoration: none;
      background: #f5f1eb;
      transition: color 0.2s ease, background-color 0.2s ease;
    }

    .refund-section-tab.active {
      color: var(--user-accent, #ff9208);
      background: #fff;
    }

    .refund-scope-tabs {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 0 2rem;
      border-bottom: 1px solid #f1ebe3;
      background: #fff;
    }

    .refund-scope-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 0 0.85rem;
      border-bottom: 2px solid transparent;
      font-size: 1.2rem;
      font-weight: 700;
      color: #1d2433;
      text-decoration: none;
    }

    .refund-scope-tab.active {
      color: var(--user-accent, #ff9208);
      border-bottom-color: var(--user-accent, #ff9208);
    }

    .refund-note {
      padding: 1.15rem 2rem;
      border-bottom: 1px solid #f1ebe3;
      background: #fff;
      text-align: center;
      font-size: 1.05rem;
      color: #1f2430;
    }

    .refund-content {
      min-height: 360px;
      padding: 2rem;
      background: #fff;
    }

    .refund-list {
      display: grid;
      gap: 1rem;
    }

    .refund-item {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: center;
      padding: 1rem 1.2rem;
      border: 1px solid #f1ebe3;
      border-radius: 18px;
      background: #fffaf5;
    }

    .refund-item strong {
      display: block;
      color: #1d2433;
      font-size: 1rem;
      font-weight: 700;
    }

    .refund-item span {
      display: block;
      color: #6c7280;
      font-size: 0.92rem;
      margin-top: 0.2rem;
    }

    .refund-item-amount {
      text-align: right;
      font-weight: 700;
      color: #1d2433;
      white-space: nowrap;
    }

    .refund-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 8rem;
      padding: 0.5rem 0.85rem;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .refund-status-pill.processing {
      background: rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
      color: var(--user-accent, #ff9208);
    }

    .refund-status-pill.completed {
      background: rgba(40, 199, 111, 0.14);
      color: #28a745;
    }

    .refund-empty-state {
      min-height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      color: #1d2433;
    }

    .refund-empty-illustration {
      position: relative;
      width: 96px;
      height: 96px;
      opacity: 0.42;
    }

    .refund-empty-illustration::before,
    .refund-empty-illustration::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
    }

    .refund-empty-illustration::before {
      width: 52px;
      height: 36px;
      bottom: 10px;
      border: 3px solid #e7dfd2;
      border-top-width: 16px;
      border-radius: 6px;
      box-shadow: 14px 14px 0 rgba(231, 223, 210, 0.38);
    }

    .refund-empty-illustration::after {
      width: 22px;
      height: 22px;
      top: 10px;
      right: 16px;
      border-top: 3px solid #e7dfd2;
      border-right: 3px solid #e7dfd2;
      transform: rotate(35deg);
    }

    .refund-empty-state p {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 500;
      color: #1d2433;
    }

    @media (max-width: 767.98px) {
      .refund-card-header,
      .refund-note,
      .refund-content {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .refund-section-tab {
        font-size: 1.05rem;
      }

      .refund-scope-tabs {
        gap: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .refund-item {
        grid-template-columns: 1fr;
      }

      .refund-item-amount {
        text-align: left;
      }
    }
  </style>

  <div class="card refund-card">
    <div class="refund-card-header">
      <h1 class="refund-card-title">Refund</h1>
      <span class="refund-help-icon">
        <i class="icon-base ti tabler-help-circle icon-sm"></i>
      </span>
    </div>

    <div class="refund-section-tabs">
      <a href="{{ route('refunds.owner') }}" class="refund-section-tab {{ $activeSection === 'owner' ? 'active' : '' }}">
        Owner
      </a>
      <a href="{{ route('refunds.co-subscribers') }}" class="refund-section-tab {{ $activeSection === 'co-subscribers' ? 'active' : '' }}">
        Co-subscribers
      </a>
    </div>

    @if($activeSection === 'owner')
      <div class="refund-scope-tabs">
        <a href="{{ route('refunds.owner', ['scope' => 'processing']) }}" class="refund-scope-tab {{ $activeScope === 'processing' ? 'active' : '' }}">
          Processing
        </a>
        <a href="{{ route('refunds.owner', ['scope' => 'all']) }}" class="refund-scope-tab {{ $activeScope === 'all' ? 'active' : '' }}">
          All
        </a>
      </div>
    @endif

    <div class="refund-note">
      {{ $infoMessage }}
    </div>

    <div class="refund-content">
      @if($records->isNotEmpty())
        <div class="refund-list">
          @foreach($records as $record)
            @php
              $serviceName = $record->sharedSubscription?->service?->name ?? 'Service';
              $planName = $record->sharedSubscription?->servicePlan?->name ?? 'Plan';
              $counterpartyName = $activeSection === 'owner'
                  ? ($record->user?->name ?? 'Co-subscriber')
                  : ($record->sharedSubscription?->owner?->name ?? 'Owner');
              $statusLabel = $record->status === 'cancel_requested' ? 'Processing' : 'Approved';
              $statusClass = $record->status === 'cancel_requested' ? 'processing' : 'completed';
            @endphp

            <div class="refund-item">
              <div>
                <strong>{{ $serviceName }} - {{ $planName }}</strong>
                <span>
                  {{ $activeSection === 'owner' ? 'Requested by' : 'Owner' }}: {{ $counterpartyName }}
                </span>
                <span>
                  Requested: {{ optional($record->cancel_requested_at ?? $record->updated_at)->format('d M Y, h:i A') }}
                </span>
              </div>
              <div class="refund-item-amount">
                ${{ number_format((float) $record->subscription_amount, 2) }}
              </div>
              <div>
                <span class="refund-status-pill {{ $statusClass }}">{{ $statusLabel }}</span>
              </div>
            </div>
          @endforeach
        </div>
      @else
        <div class="refund-empty-state">
          <div class="refund-empty-illustration" aria-hidden="true"></div>
          <p>No refund record</p>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection