@extends('layouts.app')
@section('title', 'My Machine Requests')

@section('content')
<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
  <div><h1>My Machine Requests</h1><p>Track your Nabola machine installation requests</p></div>
  <a href="{{ route('machine-request.create') }}" class="btn btn-green"><i class="fas fa-plus"></i> New Request</a>
</div>

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

@forelse($requests as $req)
<div class="card" style="margin-bottom:1rem;border-left:3px solid {{ ['pending'=>'#fbbf24','approved'=>'var(--gl)','rejected'=>'#f87171','installed'=>'#60a5fa'][$req->status] ?? 'var(--border)' }};">
  <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:.85rem;">
    <div>
      <div style="font-weight:800;font-size:1rem;">{{ $req->street_address }}</div>
      <div style="font-size:.78rem;color:var(--muted);">{{ $req->lga }}, {{ $req->state }} · {{ ucfirst($req->property_type) }}</div>
    </div>
    <span class="badge badge-{{ $req->statusColor() }}" style="font-size:.82rem;padding:.3rem .85rem;">{{ ucfirst($req->status) }}</span>
  </div>

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;font-size:.82rem;margin-bottom:.85rem;">
    <div><span style="color:var(--muted);">Submitted:</span> {{ $req->created_at->format('d M Y') }}</div>
    @if($req->installation_fee !== null)
    <div><span style="color:var(--muted);">Fee:</span> <strong style="color:{{ $req->isFree() ? 'var(--gl)' : '#fbbf24' }};">{{ $req->isFree() ? 'Free' : '₦' . number_format($req->installation_fee) }}</strong></div>
    @endif
    @if($req->machine)
    <div><span style="color:var(--muted);">Machine:</span> {{ $req->machine->name }}</div>
    @endif
  </div>

  @if($req->admin_note)
  <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:.65rem .9rem;font-size:.78rem;color:var(--muted);">
    <strong style="color:var(--text);">Admin note:</strong> {{ $req->admin_note }}
  </div>
  @endif
</div>
@empty
<div style="text-align:center;padding:4rem;color:var(--muted);">
  <i class="fas fa-robot" style="font-size:3rem;opacity:.15;display:block;margin-bottom:1rem;"></i>
  <div style="font-size:1rem;font-weight:700;margin-bottom:.5rem;">No requests yet</div>
  <p style="margin-bottom:1.5rem;font-size:.855rem;">Request a Nabola machine for your home or address.</p>
  <a href="{{ route('machine-request.create') }}" class="btn btn-green"><i class="fas fa-plus"></i> Submit Request</a>
</div>
@endforelse
@endsection