@extends('layouts.app')

@section('title', 'Account Reports')

@section('topbar-actions')
    <form method="POST" action="{{ route('reports.sync') }}">
        @csrf
        <input type="hidden" name="start_date" value="{{ $startDate }}">
        <input type="hidden" name="end_date" value="{{ $endDate }}">
        <button type="submit" class="btn btn-primary">↻ Sync Reports</button>
    </form>
@endsection

@section('content')

{{-- Date filter --}}
<div class="card mb-4 card-sm">
    <form method="GET" class="form-row" style="align-items:flex-end;">
        <div class="form-group" style="margin:0;">
            <label class="form-label">Start Date</label>
            <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
        </div>
        <div class="form-group" style="margin:0;">
            <label class="form-label">End Date</label>
            <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
        </div>
        <button type="submit" class="btn btn-primary" style="height:38px;">Apply</button>
    </form>
</div>

{{-- Totals --}}
@if($totals)
<div class="grid grid-4 mb-4" style="gap:12px;">
    <div class="stat-card blue">
        <div class="stat-label">Total Calls</div>
        <div class="stat-value">{{ number_format($totals->total_calls ?? 0) }}</div>
    </div>
    <div class="stat-card green">
        <div class="stat-label">Messages</div>
        <div class="stat-value">{{ number_format($totals->total_messages ?? 0) }}</div>
    </div>
    <div class="stat-card amber">
        <div class="stat-label">Bookings</div>
        <div class="stat-value">{{ number_format($totals->total_bookings ?? 0) }}</div>
    </div>
    <div class="stat-card rose">
        <div class="stat-label">Total Spend</div>
        <div class="stat-value" style="font-size:22px;">${{ number_format($totals->total_spend ?? 0, 2) }}</div>
    </div>
</div>
@endif

{{-- Table --}}
<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Account</th>
                <th>Business</th>
                <th class="text-right">Impressions</th>
                <th class="text-right">Calls</th>
                <th class="text-right">Messages</th>
                <th class="text-right">Bookings</th>
                <th class="text-right">Spend</th>
                <th class="text-right">⭐ Rating</th>
            </tr>
        </thead>
        <tbody>
            @forelse($reports as $report)
            <tr>
                <td class="font-semibold">{{ $report->report_date->format('M j, Y') }}</td>
                <td class="text-muted text-sm">{{ $report->account_id }}</td>
                <td>{{ $report->business_name ?? '—' }}</td>
                <td class="text-right">{{ number_format($report->impressions) }}</td>
                <td class="text-right">{{ number_format($report->phone_calls) }}</td>
                <td class="text-right">{{ number_format($report->messages) }}</td>
                <td class="text-right">{{ number_format($report->bookings) }}</td>
                <td class="text-right">${{ number_format($report->total_cost, 2) }}</td>
                <td class="text-right">
                    @if($report->average_five_star_rating)
                        ⭐ {{ number_format($report->average_five_star_rating, 1) }}
                        <span class="text-muted">({{ $report->num_reviews }})</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9" style="text-align:center; padding: 40px; color: #94a3b8;">
                    No report data for this date range. Sync to pull data from Google LSA.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="pagination">{{ $reports->links('pagination::simple-default') }}</div>
@endsection