@extends('layout.user')

@section('content')
@php
  $gs   = \App\Models\GeneralSetting::first();
  $g1   = $gs->icon_color   ?? '#0B5D1E';
  $g2   = $gs->hover_color  ?? '#0F7A2E';
  $g3   = $gs->accent_color ?? '#E4002B';
  $ink  = $gs->text_color   ?? '#0f172a';
@endphp

<div class="container py-4" id="driveHistoryRoot">
  <h3 class="mb-4 fw-bold d-inline-flex align-items-center gap-2" style="color:{{ $g1 }};">
    <i class="fas fa-history" style="color:{{ $g3 }};"></i>
    Drive Order History
  </h3>

  <div class="row g-2 mb-4" id="filterButtons">
    <div class="col-6 col-md-3">
      <button type="button" class="btn w-100 filter-btn is-active"
              data-status="all"
              style="--bd:{{ $g1 }};--fg:{{ $g1 }};">
        <i class="fas fa-list me-1"></i> All
      </button>
    </div>

    <div class="col-6 col-md-3">
      <button type="button" class="btn w-100 filter-btn"
              data-status="pending"
              style="--bd:#E49B0B;--fg:#9a6700;">
        <i class="fas fa-hourglass-half me-1"></i> Pending
      </button>
    </div>

    <div class="col-6 col-md-3">
      <button type="button" class="btn w-100 filter-btn"
              data-status="approved"
              style="--bd:{{ $g1 }};--fg:{{ $g1 }};">
        <i class="fas fa-check-circle me-1"></i> Completed
      </button>
    </div>

    <div class="col-6 col-md-3">
      <button type="button" class="btn w-100 filter-btn"
              data-status="rejected"
              style="--bd:{{ $g3 }};--fg:#B40022;">
        <i class="fas fa-times-circle me-1"></i> Cancelled
      </button>
    </div>
  </div>

  <div class="row row-cols-1 row-cols-md-2 g-4">
    @forelse($orders as $order)
      <div class="col order-card" data-status="{{ $order->status }}">
        <div class="card border-0 shadow-sm h-100 p-3"
             style="border-radius:14px; border:1px solid #eef2f7;">
          <div class="d-flex align-items-start mb-2">
            <img
              src="{{ asset($order->offer->logo ?? 'images/placeholder.png') }}"
              alt="Logo"
              style="height:50px;width:50px;object-fit:contain;border-radius:8px;background:#f8fafc;margin-right:10px;">

            <div>
              <h5 class="fw-bold mb-1" style="font-size:16px; color:{{ $g1 }};">
                {{ $order->offer->title }}
              </h5>
              <small class="text-muted">
                <i class="fas fa-calendar-alt me-1" style="color:{{ $g1 }};"></i>
                Validity: {{ $order->offer->validity }}
              </small>
            </div>
          </div>

          <p class="text-muted small mb-2" style="font-size:13px; line-height:1.5;">
            {{ $order->offer->description }}
          </p>

          <div class="d-flex justify-content-between align-items-center mb-2 small text-muted" style="font-size:13px;">
            <span>
              <i class="fas fa-phone me-1" style="color:{{ $g1 }};"></i>
              {{ $order->mobile_number }}
            </span>
            <span>
              @if($order->status == 'pending')
                <span class="badge"
                      style="background:#FFE08A; color:#6b4f00; font-weight:800;">
                  <i class="fas fa-hourglass-half me-1"></i> Pending
                </span>
              @elseif($order->status == 'approved')
                <span class="badge"
                      style="background:#C6F6D5; color:{{ $g1 }}; font-weight:800;">
                  <i class="fas fa-check-circle me-1"></i> Completed
                </span>
              @elseif($order->status == 'rejected')
                <span class="badge"
                      style="background:#FECACA; color:#B40022; font-weight:800;">
                  <i class="fas fa-times-circle me-1"></i> Cancelled
                </span>
              @endif
            </span>
          </div>

          <div class="d-flex justify-content-between">
            <span class="fw-bold" style="color:{{ $g1 }};">
              <i class="fas fa-money-bill-wave me-1"></i>
              Tk{{ $order->offer->price }}
            </span>
            <small class="text-muted d-inline-flex align-items-center gap-1">
              <i class="fas fa-clock" style="color:{{ $g3 }};"></i>
              {{ $order->created_at?->format('d M Y h:i A') }}
            </small>
          </div>
        </div>
      </div>
    @empty
      <div class="col-12">
        <div class="alert text-center"
             style="background:#FFF1F2; color:#B40022; border:1px solid #FECACA;">
          <i class="fas fa-exclamation-circle me-1"></i> No orders found.
        </div>
      </div>
    @endforelse
  </div>
</div>
@endsection

@push('styles')
<style>
#driveHistoryRoot a,
#driveHistoryRoot a:hover,
#driveHistoryRoot a:active,
#driveHistoryRoot a:focus { text-decoration: none !important; outline: none; }

#filterButtons .filter-btn{
  border:2px solid var(--bd, #e2e8f0);
  color:var(--fg, #0f172a);
  font-weight:800;
  background:#fff;
  transition:all .18s ease;
  -webkit-tap-highlight-color:transparent;
}
#filterButtons .filter-btn:hover{
  filter:brightness(1.03);
}
#filterButtons .filter-btn.is-active{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(90deg, var(--act1, {{ $g1 }}), var(--act2, {{ $g2 }})) !important;
}
#filterButtons .filter-btn[data-status="rejected"].is-active{
  --act1: {{ $g3 }};
  --act2: #ff5a6a;
}
</style>
@endpush

@section('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('#filterButtons .filter-btn');
    const cards = document.querySelectorAll('.order-card');

    function activate(btn){
      buttons.forEach(b => b.classList.remove('is-active'));
      btn.classList.add('is-active');
    }

    function applyFilter(status){
      cards.forEach(card => {
        card.style.display = (status === 'all' || card.dataset.status === status) ? '' : 'none';
      });
    }

    const initial = document.querySelector('#filterButtons .filter-btn.is-active') || buttons[0];
    if (initial) {
      activate(initial);
      applyFilter(initial.dataset.status);
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        activate(btn);
        applyFilter(btn.dataset.status);
      });
    });
  });
</script>
@endsection
