@extends('user.layout')

@section('title', 'Gmail Sales History')

@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

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  :root {
    --bd-green: {{ $g1 }};
    --bd-green-2: {{ $g2 }};
    --bd-red: {{ $g3 }};
    --ink: {{ $ink }};
  }

  a, a:hover, a:active, a:focus, a:visited { text-decoration: none !important; }
  a:focus-visible { outline: none; }
  * { -webkit-tap-highlight-color: transparent; }

  .bd-grad { background: linear-gradient(90deg, var(--bd-green), var(--bd-green-2)); }
  .bd-text-grad {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(90deg, var(--bd-green), var(--bd-green-2));
  }

  .card-flag {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
  .card-flag:hover { box-shadow: 0 14px 32px rgba(0,0,0,.08); }

  .hero {
    border-radius: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
  .hero .shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 60%);
    pointer-events: none;
  }
  .icon-bubble {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
  }

  .btn-bd {
    border: 2px solid var(--bd-green);
    color: var(--bd-green);
    font-weight: 800;
    border-radius: 12px;
    padding: .55rem .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: .18s;
    width: 100%;
    text-decoration: none !important;
    background: #fff;
  }
  .btn-bd:hover, .btn-bd.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--bd-green), var(--bd-green-2));
    box-shadow: 0 10px 22px rgba(11,93,30,.22);
    transform: translateY(-1px);
  }
  .btn-bd:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11,93,30,.35);
  }

  .copy-btn {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: var(--bd-green);
    padding: .35rem .55rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: .15s;
  }
  .copy-btn:hover { border-color: rgba(11,93,30,.35); }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .25rem .55rem;
    font-weight: 800;
    font-size: .78rem;
  }
  .pill-warn { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; }
  .pill-info { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
  .pill-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  .pill-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

  .empty {
    border: 1px dashed #e5e7eb;
    border-radius: 16px;
    background: #fcfcfd;
    padding: 36px 20px;
    color: #6b7280;
    text-align: center;
  }

  @media (max-width:575.98px) {
    .g-4 { --bs-gutter-y: 1rem; --bs-gutter-x: 1rem; }
  }
</style>

<div class="container py-3 py-sm-4">
  {{-- Header --}}
  <div class="hero bd-grad p-4 mb-4">
    <div class="shine"></div>
    <div class="d-flex align-items-start justify-content-between gap-2 flex-wrap">
      <div class="d-flex align-items-center gap-3">
        <span class="icon-bubble"><i class="fab fa-google fa-lg"></i></span>
        <div>
          <h2 class="h5 fw-black mb-1">Gmail Sales Dashboard</h2>
          <div class="small text-white-75">Track & review your Gmail-based sales entries</div>
        </div>
      </div>
      @isset($statusCounts)
        <div class="d-flex gap-2 flex-wrap">
          <span class="pill pill-warn"><i class="far fa-clock"></i> {{ $statusCounts['pending'] ?? 0 }}</span>
          <span class="pill pill-info"><i class="fas fa-search"></i> {{ $statusCounts['checked'] ?? 0 }}</span>
          <span class="pill pill-danger"><i class="fas fa-times-circle"></i> {{ $statusCounts['rejected'] ?? 0 }}</span>
          <span class="pill pill-success"><i class="fas fa-check-circle"></i> {{ $statusCounts['completed'] ?? 0 }}</span>
        </div>
      @endisset
    </div>
  </div>

  {{-- Filters --}}
  @php
    $statuses = [
      'pending'   => ['label' => 'Pending',    'icon' => 'far fa-clock'],
      'checked'   => ['label' => 'Processing', 'icon' => 'fas fa-search'],
      'rejected'  => ['label' => 'Returned',   'icon' => 'fas fa-times-circle'],
      'completed' => ['label' => 'Sold',       'icon' => 'fas fa-check-circle'],
    ];
  @endphp
  <div class="row g-2 mb-3">
    @foreach($statuses as $key => $info)
      <div class="col-6 col-md-3">
        <a class="btn-bd {{ $status === $key ? 'active' : '' }}"
           href="{{ route('user.gmail-sales.history', $key) }}">
          <i class="{{ $info['icon'] }}"></i> {{ $info['label'] }}
        </a>
      </div>
    @endforeach
  </div>

  {{-- Cards --}}
  <div class="row g-4">
    @forelse($gmailSales as $sale)
      @php
        $map = [
          'pending'   => ['label'=>'Pending','class'=>'pill pill-warn','icon'=>'far fa-clock'],
          'checked'   => ['label'=>'Processing','class'=>'pill pill-info','icon'=>'fas fa-search'],
          'rejected'  => ['label'=>'Returned','class'=>'pill pill-danger','icon'=>'fas fa-times-circle'],
          'completed' => ['label'=>'Sold','class'=>'pill pill-success','icon'=>'fas fa-check-circle'],
        ];
        $m = $map[$sale->status] ?? ['label'=>'Unknown','class'=>'pill pill-info','icon'=>'fas fa-question-circle'];
        $gid = 'gmail-'.$sale->id;
      @endphp

      <div class="col-12 col-sm-6 col-lg-4">
        <div class="card-flag h-100">
          <div class="p-3 p-sm-4 d-flex flex-column h-100">
            <div class="d-flex align-items-start justify-content-between gap-2">
              <h6 class="fw-bold mb-0 text-wrap" style="color:var(--bd-green);">
                <i class="fas fa-envelope-open text-dark me-2"></i>
                <span id="{{ $gid }}">{{ $sale->gmail }}</span>
              </h6>
              <button type="button" class="copy-btn" onclick="copyGmail('{{ $gid }}')">
                <i class="fas fa-copy"></i> কপি
              </button>
            </div>

            <ul class="list-unstyled small text-muted mt-3 mb-3">
              <li><strong>ID:</strong> #{{ $sale->id }}</li>
              <li><strong>Date:</strong> {{ $sale->created_at->format('d M Y') }}</li>
              <li><strong>Time:</strong> {{ $sale->created_at->format('h:i A') }}</li>
            </ul>

            <div class="mt-auto d-flex justify-content-between align-items-center">
              <span class="{{ $m['class'] }}"><i class="{{ $m['icon'] }}"></i> {{ $m['label'] }}</span>
              @if(!empty($sale->note))
                <span class="text-muted small" title="{{ $sale->note }}"><i class="far fa-sticky-note"></i> Note</span>
              @endif
            </div>
          </div>
        </div>
      </div>
    @empty
      <div class="col-12">
        <div class="empty">
          <i class="fas fa-inbox fa-2x mb-2"></i>
          <p class="mb-0">No Gmail sales found for <strong>{{ ucfirst($status) }}</strong>.</p>
        </div>
      </div>
    @endforelse
  </div>

  {{-- Pagination --}}
  @if(method_exists($gmailSales, 'hasPages') && $gmailSales->hasPages())
    <div class="mt-3 d-flex justify-content-center">
      {{ $gmailSales->withQueryString()->links() }}
    </div>
  @endif
</div>

<script>
  function copyGmail(id) {
    const el = document.getElementById(id);
    const txt = (el?.innerText || '').trim();
    if (!txt) return;
    navigator.clipboard.writeText(txt)
      .then(() => toast('✅ কপি হয়েছে'))
      .catch(() => toast('❌ কপি ব্যর্থ'));
  }

  function toast(msg) {
    const t = document.createElement('div');
    t.textContent = msg;
    Object.assign(t.style, {
      position:'fixed', left:'50%', transform:'translateX(-50%)',
      bottom:'18px', background:'linear-gradient(90deg,var(--bd-green),var(--bd-green-2))',
      color:'#fff', padding:'10px 14px', borderRadius:'12px', fontWeight:'800',
      boxShadow:'0 10px 24px rgba(0,0,0,.18)', zIndex:9999, opacity:0, transition:'opacity .2s, transform .2s'
    });
    document.body.appendChild(t);
    requestAnimationFrame(() => { t.style.opacity = '1'; t.style.transform = 'translate(-50%, -4px)'; });
    setTimeout(() => { t.style.opacity = '0'; t.style.transform = 'translate(-50%, 0)'; setTimeout(() => t.remove(), 180); }, 1400);
  }
</script>
@endsection