@extends('layouts.app')
@section('title','Collector Dashboard')
@push('styles')
<style>
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.4);}50%{box-shadow:0 0 0 8px rgba(76,175,80,0);}}
.col-hero{background:linear-gradient(135deg,#071a14,#0f2318,#1a3a22);border:1px solid rgba(45,212,191,.2);border-radius:22px;padding:2rem;margin-bottom:1.75rem;position:relative;overflow:hidden;}
.col-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(45,212,191,.12),transparent 70%);border-radius:50%;}
.col-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.75rem;}
@media(max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.sc{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;transition:.35s;position:relative;overflow:hidden;animation:fadeInUp .4s ease both;}
.sc:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.4);}
.sc::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.07;}
.sc.t::before{background:#2dd4bf;}.sc.b::before{background:#60a5fa;}.sc.g::before{background:var(--gl);}.sc.p::before{background:#a78bfa;}
.sc-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:.85rem;}
.sc-icon.t{background:rgba(45,212,191,.15);color:#2dd4bf;}.sc-icon.b{background:rgba(96,165,250,.15);color:#60a5fa;}
.sc-icon.g{background:rgba(76,175,80,.15);color:var(--gl);}.sc-icon.p{background:rgba(167,139,250,.15);color:#a78bfa;}
.sc-val{font-size:1.8rem;font-weight:900;color:#fff;line-height:1;}
.sc-lbl{font-size:.75rem;color:var(--muted);margin-top:.3rem;}
.pickup-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.25rem 1.5rem;margin-bottom:1rem;transition:.35s;position:relative;overflow:hidden;animation:fadeInUp .4s ease both;}
.pickup-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.pickup-card.active{border-left:4px solid var(--gl);}
.pickup-card.active::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--gl);animation:pulse 2s infinite;}
.pickup-card.urgent{border-left:4px solid #fbbf24;}
.pu-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.85rem;flex-wrap:wrap;gap:.5rem;}
.pu-user{display:flex;align-items:center;gap:.65rem;}
.pu-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--gl));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0;}
.pu-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.05);}
.earnings-card{background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(245,158,11,.04));border:1px solid rgba(251,191,36,.2);border-radius:16px;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
</style>
@endpush
@section('content')
@php $collector = auth()->user(); @endphp

<div class="col-hero">
  <div class="col-inner">
    <div>
      <div style="font-size:.72rem;color:rgba(45,212,191,.6);text-transform:uppercase;letter-spacing:1px;margin-bottom:.35rem;"> Collector Dashboard</div>
      <div style="font-size:1.5rem;font-weight:900;color:#fff;">{{ $collector->name }}</div>
      <div style="font-size:.82rem;color:rgba(255,255,255,.45);margin-top:.25rem;">
        <i class="fas fa-coins" style="color:var(--gl);"></i> {{ number_format($collector->getCoins()) }} NC earned
        &nbsp;&nbsp; <i class="fas fa-check-circle" style="color:#2dd4bf;"></i> {{ $stats['confirmed'] }} completed
      </div>
    </div>
    <div style="display:flex;gap:.65rem;flex-wrap:wrap;">
      <a href="{{ route('collector.tasks') }}" class="btn" style="background:rgba(45,212,191,.12);color:#2dd4bf;border:1px solid rgba(45,212,191,.2);"><i class="fas fa-tasks"></i> My Tasks</a>
      <a href="{{ route('wallet') }}" class="btn btn-outline"><i class="fas fa-wallet"></i> Wallet</a>
    </div>
  </div>
</div>

{{-- Earnings Banner --}}
@if($collector->getCoins() > 0)
<div class="earnings-card">
  <div style="font-size:2rem;"></div>
  <div style="flex:1;">
    <div style="font-weight:800;color:#fbbf24;">Total Earnings from Pickups</div>
    <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.1rem;">You earn 10% of coins per confirmed pickup</div>
  </div>
  <div style="font-size:1.8rem;font-weight:900;color:#fbbf24;">{{ number_format($collector->getCoins()) }} NC</div>
</div>
@endif

{{-- Stats --}}
<div class="stats-row">
  <div class="sc t" style="animation-delay:.05s;"><div class="sc-icon t"><i class="fas fa-inbox"></i></div><div class="sc-val">{{ $stats['pending_all'] }}</div><div class="sc-lbl">Available</div></div>
  <div class="sc b" style="animation-delay:.1s;"><div class="sc-icon b"><i class="fas fa-user-check"></i></div><div class="sc-val">{{ $stats['assigned'] }}</div><div class="sc-lbl">Assigned to Me</div></div>
  <div class="sc g" style="animation-delay:.15s;"><div class="sc-icon g"><i class="fas fa-truck"></i></div><div class="sc-val">{{ $stats['on_the_way'] }}</div><div class="sc-lbl">On the Way</div></div>
  <div class="sc p" style="animation-delay:.2s;"><div class="sc-icon p"><i class="fas fa-check-circle"></i></div><div class="sc-val">{{ $stats['confirmed'] }}</div><div class="sc-lbl">Completed</div></div>
</div>

{{-- My Active Pickups --}}
@if($myPickups->count() > 0)
<div style="font-size:.75rem;font-weight:700;color:#2dd4bf;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.85rem;"><i class="fas fa-truck"></i> My Active Pickups ({{ $myPickups->count() }})</div>
@foreach($myPickups as $log)
<div class="pickup-card active">
  <div class="pu-header">
    <div class="pu-user">
      <div class="pu-av">{{ strtoupper(substr($log->user->name,0,2)) }}</div>
      <div>
        <div style="font-weight:700;font-size:.9rem;">{{ $log->user->name }}</div>
        <div style="font-size:.75rem;color:var(--muted);">{{ $log->user->phone ?? 'No phone' }}</div>
      </div>
    </div>
    <span class="badge badge-{{ $log->status === 'on_the_way' ? 'pending' : 'confirmed' }}">{{ $log->statusLabel() }}</span>
  </div>
  <div style="font-size:.875rem;margin-bottom:.35rem;"><i class="fas fa-map-marker-alt" style="color:var(--gl);width:16px;"></i> {{ $log->address }}</div>
  <div style="font-size:.8rem;color:var(--muted);">
    <i class="fas fa-recycle" style="width:16px;"></i> {{ ucfirst($log->waste_category) }}
    @if($log->weight_kg) &nbsp;&nbsp; {{ $log->weight_kg }} kg @endif
    @if($log->scheduled_date) &nbsp;&nbsp; <strong style="color:#fbbf24;">{{ \Carbon\Carbon::parse($log->scheduled_date)->format('d M Y') }}</strong> @endif
    @if($log->user->isPremium()) &nbsp;&nbsp; <span style="color:#fbbf24;"> Premium (2x coins)</span> @endif
  </div>
  <div class="pu-actions">
    @if($log->status === 'assigned')
    <form method="POST" action="{{ route('collector.on-the-way', $log) }}">@csrf
      <button class="btn btn-outline btn-sm"><i class="fas fa-truck"></i> Mark On the Way</button>
    </form>
    @endif
    @if(in_array($log->status, ['assigned','on_the_way']))
    <form method="POST" action="{{ route('collector.confirm', $log) }}" style="display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;">
      @csrf
      <input type="number" name="coins_earned" class="form-control" style="width:80px;padding:.35rem .6rem;" placeholder="NC" min="1" required>
      <input type="number" name="weight_kg" class="form-control" style="width:80px;padding:.35rem .6rem;" placeholder="kg" step="0.1" min="0.1" value="{{ $log->weight_kg }}">
      <input type="text" name="collector_note" class="form-control" style="width:150px;padding:.35rem .6rem;" placeholder="Note (optional)">
      <button class="btn btn-green btn-sm"><i class="fas fa-check"></i> Confirm & Earn</button>
    </form>
    <form method="POST" action="{{ route('collector.reject', $log) }}" style="display:flex;gap:.4rem;">@csrf
      <input type="text" name="reason" class="form-control" style="width:140px;padding:.35rem .6rem;" placeholder="Rejection reason">
      <button class="btn btn-danger btn-sm" onclick="return confirm('Reject this pickup?')"><i class="fas fa-times"></i> Reject</button>
    </form>
    @endif
  </div>
</div>
@endforeach
@endif

{{-- Available Pickups --}}
<div style="font-size:.75rem;font-weight:700;color:#fbbf24;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.85rem;margin-top:1.5rem;"><i class="fas fa-inbox"></i> Available Pickups ({{ $unassigned->count() }})</div>
@forelse($unassigned as $log)
<div class="pickup-card urgent" style="animation-delay:{{ $loop->index * 0.05 }}s;">
  <div class="pu-header">
    <div class="pu-user">
      <div class="pu-av" style="background:linear-gradient(135deg,#b45309,#f59e0b);">{{ strtoupper(substr($log->user->name,0,2)) }}</div>
      <div>
        <div style="font-weight:700;font-size:.9rem;">{{ $log->user->name }}</div>
        <div style="font-size:.75rem;color:var(--muted);">{{ $log->user->phone ?? 'No phone' }} &nbsp;&nbsp; {{ $log->created_at->diffForHumans() }}</div>
      </div>
    </div>
    <span class="badge badge-pending">{{ $log->user->isPremium() ? ' Premium  Priority' : 'Unassigned' }}</span>
  </div>
  <div style="font-size:.875rem;margin-bottom:.35rem;"><i class="fas fa-map-marker-alt" style="color:#fbbf24;width:16px;"></i> {{ $log->address }}</div>
  <div style="font-size:.8rem;color:var(--muted);">
    <i class="fas fa-recycle" style="width:16px;"></i> {{ ucfirst($log->waste_category) }}
    @if($log->weight_kg) &nbsp;&nbsp; ~{{ $log->weight_kg }} kg @endif
    @if($log->scheduled_date) &nbsp;&nbsp; <strong style="color:#fbbf24;">{{ \Carbon\Carbon::parse($log->scheduled_date)->format('d M Y') }}</strong> @endif
    @if($log->scheduled_time) &nbsp;{{ $log->scheduled_time }} @endif
  </div>
  <div class="pu-actions">
    <form method="POST" action="{{ route('collector.assign', $log) }}">@csrf
      <button class="btn btn-green btn-sm"><i class="fas fa-hand-pointer"></i> Accept Pickup</button>
    </form>
    @if($log->user->phone)
    <a href="tel:{{ $log->user->phone }}" class="btn btn-outline btn-sm"><i class="fas fa-phone"></i> Call User</a>
    @endif
  </div>
</div>
@empty
<div style="text-align:center;padding:2.5rem;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:16px;">
  <i class="fas fa-check-circle" style="font-size:2.5rem;opacity:.2;display:block;margin-bottom:.75rem;color:var(--gl);"></i>
  <div style="font-weight:700;margin-bottom:.35rem;">No unassigned pickups right now</div>
  <div style="font-size:.82rem;">Check back soon or refresh the page.</div>
</div>
@endforelse

{{-- Completed --}}
@if($completed->count() > 0)
<div style="font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.85rem;margin-top:1.5rem;"><i class="fas fa-history"></i> Recently Completed</div>
<div class="card">
  <div class="table-wrap">
    <table>
      <thead><tr><th>User</th><th>Category</th><th>Weight</th><th>User Earned</th><th>Your Reward</th><th>Date</th></tr></thead>
      <tbody>
        @foreach($completed as $log)
        <tr>
          <td style="font-weight:600;font-size:.875rem;">{{ $log->user->name }}</td>
          <td>{{ ucfirst($log->waste_category) }}</td>
          <td>{{ $log->weight_kg ? $log->weight_kg.' kg' : '-' }}</td>
          <td><span class="coin-badge">{{ $log->coins_earned }} NC</span></td>
          <td><span style="color:#fbbf24;font-weight:700;font-size:.82rem;">+{{ max(1, (int)round($log->coins_earned * 0.10)) }} NC</span></td>
          <td style="font-size:.8rem;color:var(--muted);">{{ $log->confirmed_at?->format('d M Y') ?? $log->updated_at->format('d M Y') }}</td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
@endif
@endsection