@extends('layouts.app')
@section('title','Report a Waste Issue')
@push('styles')
<style>
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.wr-hero{background:linear-gradient(135deg,#1a0a0a,#2e1a0a,#1a1a0a);border:1px solid rgba(239,68,68,.2);border-radius:22px;padding:2rem;margin-bottom:2rem;position:relative;overflow:hidden;}
.wr-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(239,68,68,.12),transparent 70%);border-radius:50%;}
.wr-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;}
.wr-stat .sv{font-size:1.6rem;font-weight:900;line-height:1;}
.wr-stat .sl{font-size:.7rem;color:rgba(255,255,255,.4);margin-top:.2rem;text-transform:uppercase;letter-spacing:.5px;}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
@media(max-width:900px){.wr-grid{grid-template-columns:1fr;}}
.sev-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .75rem;border-radius:50px;font-size:.72rem;font-weight:700;}
.sev-low{background:rgba(76,175,80,.12);color:var(--gl);border:1px solid rgba(76,175,80,.2);}
.sev-medium{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.2);}
.sev-high{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.2);}
.sev-critical{background:rgba(139,0,0,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.4);}
.report-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:1rem;transition:.3s;animation:fadeInUp .4s ease both;}
.report-card:hover{border-color:rgba(239,68,68,.25);transform:translateY(-2px);}
.report-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;}
.report-card.sev-low-border::before{background:var(--gl);}
.report-card.sev-medium-border::before{background:#fbbf24;}
.report-card.sev-high-border::before{background:#f87171;}
.report-card.sev-critical-border::before{background:#dc2626;}
.report-card{position:relative;}
.bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:.35rem;}
.bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#f87171,#ef4444);}
</style>
@endpush
@section('content')

<div class="wr-hero">
  <div class="wr-inner">
    <div>
      <div style="font-size:1.3rem;font-weight:900;margin-bottom:.3rem;">🗑️ Report a Waste Issue</div>
      <div style="font-size:.82rem;color:rgba(255,255,255,.45);">Help keep Nigeria clean. Report illegal dumpsites and environmental hazards.</div>
    </div>
    <div style="display:flex;gap:2rem;flex-wrap:wrap;">
      <div class="wr-stat"><div class="sv" style="color:#f87171;">{{ $stats['totalVerified'] }}</div><div class="sl">Verified Reports</div></div>
      <div class="wr-stat"><div class="sv" style="color:#fbbf24;">{{ $stats['totalPending'] }}</div><div class="sl">Pending Review</div></div>
      <div class="wr-stat"><div class="sv" style="color:var(--gl);">{{ $stats['byState']->count() }}</div><div class="sl">States Covered</div></div>
    </div>
  </div>
</div>

@if(session('success'))
<div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if($errors->any())
<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ $errors->first() }}</div>
@endif

<div class="wr-grid">

  {{-- Report Form --}}
  <div>
    <div class="card">
      <div class="card-title" style="color:#f87171;"><i class="fas fa-triangle-exclamation" style="color:#f87171;"></i> Submit a Report</div>
      <form method="POST" action="{{ route('waste-reports.store') }}" enctype="multipart/form-data">
        @csrf

        @guest
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem;">
          <div class="form-group" style="margin-bottom:0;">
            <input type="text" name="reporter_name" class="form-control" placeholder="Your Name *" value="{{ old('reporter_name') }}" required>
          </div>
          <div class="form-group" style="margin-bottom:0;">
            <input type="email" name="reporter_email" class="form-control" placeholder="Email (optional)" value="{{ old('reporter_email') }}">
          </div>
        </div>
        <div class="form-group">
          <input type="text" name="reporter_phone" class="form-control" placeholder="Phone (optional)" value="{{ old('reporter_phone') }}">
        </div>
        @else
        <input type="hidden" name="reporter_name" value="{{ auth()->user()->name }}">
        <div style="background:rgba(76,175,80,.06);border:1px solid rgba(76,175,80,.12);border-radius:10px;padding:.65rem .9rem;margin-bottom:1rem;font-size:.82rem;color:var(--gl);">
          <i class="fas fa-user-check"></i> Reporting as <strong>{{ auth()->user()->name }}</strong>
        </div>
        @endguest

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem;">
          <div class="form-group" style="margin-bottom:0;">
            <label>State *</label>
            <select name="state" class="form-control" required>
              <option value="">Select State</option>
              @foreach(['Abia','Adamawa','Akwa Ibom','Anambra','Bauchi','Bayelsa','Benue','Borno','Cross River','Delta','Ebonyi','Edo','Ekiti','Enugu','FCT','Gombe','Imo','Jigawa','Kaduna','Kano','Katsina','Kebbi','Kogi','Kwara','Lagos','Nasarawa','Niger','Ogun','Ondo','Osun','Oyo','Plateau','Rivers','Sokoto','Taraba','Yobe','Zamfara'] as $s)
              <option value="{{ $s }}" {{ old('state') == $s ? 'selected' : '' }}>{{ $s }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group" style="margin-bottom:0;">
            <label>LGA *</label>
            <input type="text" name="lga" class="form-control" placeholder="Local Government Area" value="{{ old('lga') }}" required>
          </div>
        </div>

        <div class="form-group">
          <label>Street Address / Landmark *</label>
          <input type="text" name="address" class="form-control" placeholder="e.g. Behind Eko Hotel, Victoria Island" value="{{ old('address') }}" required>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem;">
          <div class="form-group" style="margin-bottom:0;">
            <label>Waste Type *</label>
            <select name="waste_type" class="form-control" required>
              <option value="">Select type</option>
              @foreach(['plastic'=>'🧴 Plastic','electronic'=>'💻 Electronic','organic'=>'🌿 Organic','metal'=>'🔩 Metal','glass'=>'🪟 Glass','mixed'=>'🗑️ Mixed','other'=>'❓ Other'] as $v=>$l)
              <option value="{{ $v }}" {{ old('waste_type')==$v?'selected':'' }}>{{ $l }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group" style="margin-bottom:0;">
            <label>Severity *</label>
            <select name="severity" class="form-control" required>
              <option value="">Select severity</option>
              <option value="low" {{ old('severity')=='low'?'selected':'' }}>🟢 Low — Minor littering</option>
              <option value="medium" {{ old('severity')=='medium'?'selected':'' }}>🟡 Medium — Moderate dump</option>
              <option value="high" {{ old('severity')=='high'?'selected':'' }}>🔴 High — Large illegal dump</option>
              <option value="critical" {{ old('severity')=='critical'?'selected':'' }}>⚫ Critical — Environmental hazard</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label>Description *</label>
          <textarea name="description" class="form-control" rows="3" placeholder="Describe the waste issue in detail..." required>{{ old('description') }}</textarea>
        </div>

        <div class="form-group">
          <label>Photo <span style="color:var(--muted);">(optional, max 3MB)</span></label>
          <input type="file" name="image" class="form-control" accept="image/*">
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem;">
          <div class="form-group" style="margin-bottom:0;">
            <label>Latitude</label>
            <input type="number" name="latitude" id="lat" class="form-control" placeholder="e.g. 6.5244" step="any" value="{{ old('latitude') }}">
          </div>
          <div class="form-group" style="margin-bottom:0;">
            <label>Longitude</label>
            <input type="number" name="longitude" id="lng" class="form-control" placeholder="e.g. 3.3792" step="any" value="{{ old('longitude') }}">
          </div>
        </div>
        <button type="button" onclick="getLocation()" style="background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);border-radius:10px;padding:.5rem 1rem;font-size:.8rem;font-weight:700;cursor:pointer;width:100%;margin-bottom:1rem;">
          <i class="fas fa-location-crosshairs"></i> Use My GPS Location
        </button>

        <button type="submit" class="btn" style="width:100%;justify-content:center;background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;padding:.75rem;font-size:.9rem;">
          <i class="fas fa-paper-plane"></i> Submit Report
        </button>
      </form>
    </div>
  </div>

  {{-- Stats Panel --}}
  <div>
    {{-- Severity breakdown --}}
    @if($stats['bySeverity']->count())
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:1.25rem;">
      @foreach(['low'=>['var(--gl)','🟢'],'medium'=>['#fbbf24','🟡'],'high'=>['#f87171','🔴'],'critical'=>['#dc2626','⚫']] as $sev=>[$color,$icon])
      <div style="background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.85rem;text-align:center;transition:.3s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform=''">
        <div style="font-size:1.4rem;">{{ $icon }}</div>
        <div style="font-size:1.4rem;font-weight:900;color:{{ $color }};line-height:1.2;">{{ $stats['bySeverity'][$sev] ?? 0 }}</div>
        <div style="font-size:.68rem;color:var(--muted);text-transform:capitalize;margin-top:.15rem;">{{ $sev }}</div>
      </div>
      @endforeach
    </div>
    @endif

    {{-- By State --}}
    @if($stats['byState']->count())
    <div class="card" style="margin-bottom:1.25rem;">
      <div class="card-title" style="color:#f87171;"><i class="fas fa-map-location-dot" style="color:#f87171;"></i> Reports by State</div>
      @php $maxState = $stats['byState']->max('total') ?: 1; @endphp
      @foreach($stats['byState']->take(8) as $row)
      <div style="margin-bottom:.65rem;">
        <div style="display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.2rem;">
          <span>{{ $row->state }}</span>
          <span style="font-weight:700;color:#f87171;">{{ $row->total }}</span>
        </div>
        <div class="bar-wrap"><div class="bar-fill" style="width:{{ round(($row->total/$maxState)*100) }}%"></div></div>
      </div>
      @endforeach
    </div>
    @endif

    {{-- Top LGAs --}}
    @if($stats['byLga']->count())
    <div class="card">
      <div class="card-title" style="color:#f87171;"><i class="fas fa-building" style="color:#f87171;"></i> Top LGAs</div>
      @foreach($stats['byLga']->take(8) as $row)
      <div style="display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.04);">
        <div style="flex:1;">
          <div style="font-size:.855rem;font-weight:600;">{{ $row->lga }}</div>
          <div style="font-size:.72rem;color:var(--muted);">{{ $row->state }}</div>
        </div>
        <span style="background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);border-radius:50px;padding:.15rem .6rem;font-size:.72rem;font-weight:700;">{{ $row->total }} reports</span>
      </div>
      @endforeach
    </div>
    @endif
  </div>

</div>

@push('scripts')
<script>
function getLocation() {
  if (!navigator.geolocation) return alert('Geolocation not supported.');
  navigator.geolocation.getCurrentPosition(pos => {
    document.getElementById('lat').value = pos.coords.latitude.toFixed(7);
    document.getElementById('lng').value = pos.coords.longitude.toFixed(7);
    const t = document.createElement('div');
    t.style.cssText = 'position:fixed;bottom:2rem;right:2rem;background:#2d7a3a;color:#fff;padding:.75rem 1.25rem;border-radius:10px;font-size:.875rem;font-weight:600;z-index:9999;';
    t.textContent = '📍 Location captured!';
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 2500);
  }, () => alert('Could not get location.'));
}
</script>
@endpush
@endsection