@extends('layouts.app')
@section('title', 'Reports')
@section('page-title', 'Reports & Analytics')
@section('content')
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small">Period</label>
                <select name="period" class="form-select form-select-sm">
                    <option value="today" {{ $period == 'today' ? 'selected' : '' }}>Today</option>
                    <option value="7days" {{ $period == '7days' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="30days" {{ $period == '30days' ? 'selected' : '' }}>Last 30 Days</option>
                    <option value="90days" {{ $period == '90days' ? 'selected' : '' }}>Last 90 Days</option>
                    <option value="this_month" {{ $period == 'this_month' ? 'selected' : '' }}>This Month</option>
                    <option value="last_month" {{ $period == 'last_month' ? 'selected' : '' }}>Last Month</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-sm btn-whatsapp">Apply</button>
            </div>
        </form>
    </div>
</div>

<div class="row g-3 mb-4">
    @foreach(['total_sent' => ['Sent', 'success', 'bi-arrow-up'], 'total_received' => ['Received', 'info', 'bi-arrow-down'], 'delivered' => ['Delivered', 'primary', 'bi-check-circle'], 'read' => ['Read', 'dark', 'bi-eye'], 'failed' => ['Failed', 'danger', 'bi-x-circle'], 'pending' => ['Pending', 'warning', 'bi-clock']] as $key => [$label, $color, $icon])
    <div class="col-md-2">
        <div class="card stat-card p-3 text-center">
            <i class="bi {{ $icon }} text-{{ $color }} fs-4"></i>
            <div class="fs-4 fw-bold mt-1">{{ $stats[$key] }}</div>
            <div class="text-muted small">{{ $label }}</div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Daily Activity</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light"><tr><th>Date</th><th>Total</th><th>Sent</th><th>Received</th></tr></thead>
                        <tbody>
                            @forelse($dailyStats as $day)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse($day->date)->format('M d, Y') }}</td>
                                <td>{{ $day->total }}</td>
                                <td class="text-success">{{ $day->sent }}</td>
                                <td class="text-info">{{ $day->received }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">No data for this period</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">By Device</h6></div>
            <div class="card-body p-0">
                @forelse($deviceStats as $ds)
                <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                    <div class="fw-semibold small">{{ $ds->name }}</div>
                    <span class="badge bg-primary">{{ $ds->messages_count }} msgs</span>
                </div>
                @empty
                <div class="p-3 text-center text-muted">No data</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection