@extends('layouts.app')

@section('content')
  {{-- Header actions --}}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div>
      <h1 class="text-2xl font-bold tracking-tight">Telecalling Dashboard</h1>
      <p class="text-ink-500 text-sm mt-1">Snapshot of your activity and quick actions.</p>
    </div>
    <div class="flex items-center gap-2">
      <a href="{{ route('tele.records.create') }}"
         class="inline-flex items-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-sm px-3 py-2 shadow-soft">
        + New Record
      </a>
      <a href="{{ route('tele.records.index') }}"
         class="inline-flex items-center gap-2 rounded-xl bg-white border hover:bg-slate-50 text-slate-900 text-sm px-3 py-2 shadow-soft">
        View Records
      </a>
    </div>
  </div>

  {{-- KPI cards --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-2xl p-6 shadow-card border">
      <div class="text-sm text-ink-500">Today Records</div>
      <div class="text-4xl font-extrabold mt-2 tracking-tight">{{ $todayCount ?? 0 }}</div>
    </div>
    <div class="bg-white rounded-2xl p-6 shadow-card border">
      <div class="text-sm text-ink-500">With Audio</div>
      <div class="text-4xl font-extrabold mt-2 tracking-tight">{{ $withAudio ?? 0 }}</div>
    </div>
    <div class="bg-white rounded-2xl p-6 shadow-card border">
      <div class="text-sm text-ink-500">Total Records</div>
      <div class="text-4xl font-extrabold mt-2 tracking-tight">{{ $totalRecords ?? 0 }}</div>
    </div>
  </div>

  {{-- Location-wise totals: SIMPLE COUNT ONLY --}}
  <div class="bg-white rounded-2xl p-6 shadow-card border mb-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold">Location-wise totals</h2>
    </div>

    @if(($byOutlet ?? collect())->isEmpty())
      <div class="py-8 text-center text-ink-500">No records yet.</div>
    @else
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="text-xs uppercase text-ink-500">
            <tr>
              <th class="text-left py-2 pr-4">Brand</th>
              <th class="text-left py-2 pr-4">Location</th>
              <th class="text-right py-2">Total</th>
            </tr>
          </thead>
          <tbody class="divide-y">
            @foreach ($byOutlet as $row)
              <tr class="hover:bg-slate-50">
                <td class="py-2 pr-4 font-medium text-slate-900">{{ $row->brand }}</td>
                <td class="py-2 pr-4 text-slate-700">{{ $row->location ?: '—' }}</td>
                <td class="py-2 text-right font-semibold">{{ $row->total }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>

  {{-- Recent list --}}
  <div class="bg-white rounded-2xl p-6 shadow-card border">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold">Recent</h2>
      <a href="{{ route('tele.records.index') }}" class="text-sm text-brand-700 hover:underline">View all</a>
    </div>

    <div class="divide-y">
      @forelse(($recent ?? collect()) as $r)
        <div class="py-3 flex items-center gap-3">
          <div class="w-8 h-8 rounded-lg bg-slate-100 grid place-items-center text-slate-700 font-medium">
            {{ strtoupper(mb_substr($r->name, 0, 1)) }}
          </div>
          <div class="flex-1">
            <div class="font-medium">{{ $r->name }}</div>
            <div class="text-sm text-ink-500">
              {{ $r->outlet?->display_name ?? '—' }} • {{ $r->created_at->format('d M, h:i A') }}
              @if($r->phone) • {{ $r->phone }} @endif
            </div>
          </div>
          <a href="{{ route('tele.records.edit', $r) }}"
             class="text-sm px-3 py-1.5 rounded-lg bg-slate-900 text-white hover:bg-slate-800">Edit</a>
        </div>
      @empty
        <div class="py-10 text-center text-ink-500">No recent records.</div>
      @endforelse
    </div>
  </div>
@endsection
