@extends('layouts.main')

@section('title', 'My Gift Cards')

@section('style')


  <style>
    .status-badge {
      padding: 0.35em 0.75em;
      border-radius: 50rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-complete {
      background-color: #198754;
      /* BS5 Success */
    }

    .status-processing {
      background-color: #0d6efd;
      /* BS5 Primary */
    }

    .status-pending {
      background-color: #ffc107;
      /* BS5 Warning */
      color: #212529;
    }

    .status-failed {
      background-color: #dc3545;
      /* BS5 Danger */
    }

    .status-unknown {
      background-color: #6c757d;
      /* BS5 Secondary */
    }

    .transaction-card {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      transition: box-shadow 0.2s ease-in-out;
    }

    .transaction-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .transaction-header {
      background-color: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .gift-card-item {
      border-bottom: 1px solid #f1f1f1;
    }

    .gift-card-item:last-child {
      border-bottom: none;
    }

    /* Add helper classes for mobile labels */
    .mobile-label {
      display: block;
      font-size: 0.8rem;
      color: #6c757d;
      /* BS5 Secondary */
      margin-bottom: 0.15rem;
      font-weight: normal;
    }

    /* Hide mobile labels on md and up */
    @media (min-width: 768px) {
      .mobile-label {
        display: none;
      }
    }
  </style>
@endsection

@section('content')
  <div class="container my-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1 class="h2 mb-0">My Gift Cards</h1>
    </div>
    <hr class="mb-4">

    <div class="card mb-4 shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Filter Orders</h5>
        <form action="{{ url()->current() }}" method="GET">
          <div class="row align-items-center">
            <div class="col-md-9">
              <div class="form-group mb-2 mb-md-0">
                <label for="search" class="visually-hidden">Search</label>
                <input type="text" id="search" name="search" class="form-control"
                  placeholder="Filter by product name & Checkout Id" value="{{ $search ?? '' }}">
              </div>
            </div>
            <!-- Added mt-2 for stacking space on mobile -->
            <div class="col-md-3 d-flex mt-2 mt-md-0">
              <button type="submit" class="btn btn-primary flex-grow-1 me-2">Filter</button>
              <a href="{{ url()->current() }}" class="btn btn-secondary flex-grow-1">Clear</a>
            </div>
          </div>
        </form>
      </div>
    </div>

    @forelse ($gift_cards as $checkout)
      <div class="card transaction-card mb-3">
        <div class="card-header transaction-header py-3 px-4">
          <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
            <div>
              <strong class="text-dark">Transaction on:</strong>
              <span>{{ $checkout->created_at->format('F j, Y, g:i a') }}</span>
              @if ($checkout->tran_id)
                <div class="text-muted small mt-1">
                  Checkout ID: {{ $checkout->checkout_id }}
                </div>
              @endif
            </div>
            <div class="mt-2 mt-md-0">
              <strong class="text-dark">Total Paid:</strong>
              <span class="text-success h5 mb-0">₹{{ AmountFormat($checkout->total_amount) }}</span>
              @if ($checkout->invoice_id != '')
                <div>
                  <a href="{{ route('woohoo.invoice', [$checkout->checkout_id]) }}"
                    class="btn btn-sm btn-info">Invoice</a>
                </div>
              @endif
            </div>
          </div>

        </div>

        <div class="card-body p-0">
          <ul class="list-group list-group-flush">
            @foreach ($checkout->orders as $order)
              @php
                $status = strtoupper($order->status);
                $statusClass = 'status-unknown';
                if ($status == 'COMPLETE') {
                    $statusClass = 'status-complete';
                } elseif ($status == 'PROCESSING') {
                    $statusClass = 'status-processing';
                } elseif ($status == 'PENDING') {
                    $statusClass = 'status-pending';
                } elseif ($status == 'FAILED') {
                    $statusClass = 'status-failed';
                }
              @endphp

              <li class="list-group-item gift-card-item py-3 px-3 px-md-4">
                <!-- Main row for stacking product vs details on mobile -->
                <div class="row align-items-center">

                  <!-- Product Info: Full width on mobile, 5 cols on desktop -->
                  <div class="col-12 col-md-5 d-flex align-items-center mb-3 mb-md-0">
                    <img src="{{ json_decode($order->product->images, true)['small'] }}"
                      alt="{{ optional($order->product)->name ?? 'Gift Card' }}" class="rounded me-3"
                      style="width: 80px; height: 50px; object-fit: cover;">
                    <div>
                      <h6 class="mb-0 fw-bold">{{ optional($order->product)->name ?? 'Product Not Found' }}</h6>
                      <small class="text-muted">SKU: {{ $order->product_sku }}</small>
                      <small class="d-block">Referance Id: {{ $order->refno }} </small>
                    </div>
                  </div>

                  <!-- Details Column: Full width on mobile, 7 cols on desktop -->
                  <div class="col-12 col-md-7">
                    <!-- Nested row for the details themselves -->
                    <div class="row align-items-center">
                      <!-- Amount -->
                      <div class="col-6 col-md-4 text-start">
                        <span class="mobile-label">Amount</span>
                        <span class="text-dark fw-bold">₹{{ AmountFormat($order->amount) }}</span>
                      </div>

                      <!-- Quantity -->
                      <div class="col-6 col-md-4 text-start text-md-center">
                        <span class="mobile-label">Qty</span>
                        <span class="text-muted">Qty: {{ $order->quantity }}</span>
                      </div>

                      <!-- Status -->
                      <div class="col-12 col-md-4 text-start text-md-end mt-2 mt-md-0">
                        <!-- Show label only on mobile (d-md-none) -->
                        <span class="mobile-label d-md-none">Status</span>
                        <span class="status-badge {{ $statusClass }}">{{ $order->status }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            @endforeach
          </ul>
        </div>
      </div>

    @empty
      <div class="card">
        <div class="card-body text-center">
          @if (!empty($productName))
            <h5 class="card-title">No Results Found</h5>
            <p class="card-text">
              No gift cards found matching your filter for "<strong>{{ $productName }}</strong>".
            </p>
            <a href="{{ url()->current() }}" class="btn btn-primary">Clear Filter</a>
          @else
            <h5 class="card-title">No Gift Cards Found</h5>
            <p class="card-text">You have not purchased any gift cards yet.</p>
            <a href="/shop" class="btn btn-primary">Shop for Gift Cards</a>
          @endif
        </div>
      </div>
    @endforelse

    <div class="d-flex justify-content-center mt-4">
      {{ $gift_cards->links() }}
    </div>

  </div>
@endsection