@props(['data', 'period' => 'daily'])

<div class="card h-100 dashboard-widget" data-period="{{ $period }}">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1">{{ $data['period'] ?? 'Summary' }}</h5>
                <h6 class="text-body-tertiary">{{ $data['date_range'] ?? 'Recent' }}</h6>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-6 col-md-4">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h4 class="mb-0 widget-value" id="total-invoices-{{ $period }}">
                            {{ $data['current']['total_invoices'] ?? 0 }}
                        </h4>
                        <p class="text-body-secondary fs-9 mb-0">Total Invoices</p>
                        @if(isset($data['comparison']['total_invoices']))
                            <small class="badge badge-phoenix
                                {{ $data['comparison']['total_invoices']['trend'] === 'up' ? 'badge-phoenix-success' :
                                   ($data['comparison']['total_invoices']['trend'] === 'down' ? 'badge-phoenix-danger' : 'badge-phoenix-secondary') }}">
                                @if($data['comparison']['total_invoices']['trend'] === 'up')
                                    <span class="fas fa-caret-up me-1"></span>
                                @elseif($data['comparison']['total_invoices']['trend'] === 'down')
                                    <span class="fas fa-caret-down me-1"></span>
                                @endif
                                {{ abs($data['comparison']['total_invoices']['percentage']) }}%
                            </small>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-4">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h4 class="mb-0 widget-value" id="total-revenue-{{ $period }}">
                            ${{ number_format($data['current']['total_revenue'] ?? 0, 2) }}
                        </h4>
                        <p class="text-body-secondary fs-9 mb-0">Total Revenue</p>
                        @if(isset($data['comparison']['total_revenue']))
                            <small class="badge badge-phoenix
                                {{ $data['comparison']['total_revenue']['trend'] === 'up' ? 'badge-phoenix-success' :
                                   ($data['comparison']['total_revenue']['trend'] === 'down' ? 'badge-phoenix-danger' : 'badge-phoenix-secondary') }}">
                                @if($data['comparison']['total_revenue']['trend'] === 'up')
                                    <span class="fas fa-caret-up me-1"></span>
                                @elseif($data['comparison']['total_revenue']['trend'] === 'down')
                                    <span class="fas fa-caret-down me-1"></span>
                                @endif
                                {{ abs($data['comparison']['total_revenue']['percentage']) }}%
                            </small>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-4">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h4 class="mb-0 widget-value" id="paid-invoices-{{ $period }}">
                            {{ $data['current']['paid_invoices'] ?? 0 }}
                        </h4>
                        <p class="text-body-secondary fs-9 mb-0">Paid Invoices</p>
                        @if(isset($data['comparison']['paid_invoices']))
                            <small class="badge badge-phoenix
                                {{ $data['comparison']['paid_invoices']['trend'] === 'up' ? 'badge-phoenix-success' :
                                   ($data['comparison']['paid_invoices']['trend'] === 'down' ? 'badge-phoenix-danger' : 'badge-phoenix-secondary') }}">
                                @if($data['comparison']['paid_invoices']['trend'] === 'up')
                                    <span class="fas fa-caret-up me-1"></span>
                                @elseif($data['comparison']['paid_invoices']['trend'] === 'down')
                                    <span class="fas fa-caret-down me-1"></span>
                                @endif
                                {{ abs($data['comparison']['paid_invoices']['percentage']) }}%
                            </small>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-3">

        <div class="row g-3">
            <div class="col-6">
                <div class="text-center">
                    <h6 class="mb-1">{{ $data['current']['pending_invoices'] ?? 0 }}</h6>
                    <p class="text-body-secondary fs-10 mb-0">Pending</p>
                </div>
            </div>
            <div class="col-6">
                <div class="text-center">
                    <h6 class="mb-1">${{ number_format($data['current']['average_order_value'] ?? 0, 2) }}</h6>
                    <p class="text-body-secondary fs-10 mb-0">Avg Order</p>
                </div>
            </div>
        </div>
    </div>
</div>