@php
    $headerOption = [
        'title' => 'Welcome to Dashboard',
        'noCardView' => true,
    ];
    function getStatusIcon($status)
    {
        $icons = [
            'Pending' => 'bx-time',
            'Sent to Merchant' => 'bx-envelope',
            'Pending Submission' => 'bx-time',
            'Submitted' => 'bx-upload',
            'Approved' => 'bx-check',
            'Declined' => 'bx-x',
            'Closed' => 'bx-lock',
            'Hold' => 'bx-pause',
        ];

        return $icons[$status] ?? 'bx-file';
    }
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="row">
        <div class="col-12 mb-4">
            {{-- <h4>Application Status</h4> --}}
        </div>

        @foreach ($statusCounts as $status)
            <!-- {{ $status['name'] }} -->
            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                <a href="{{ route('merchants.index', ['location_status' => $status['id']]) }}" class="text-decoration-none">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <div>
                                    <p class="text-muted mb-2">{{ $status['name'] }}</p>
                                    <h5 class="mb-0">{{ $status['count'] }}</h5>
                                </div>
                                <div class="avatar-sm ml-3">
                                    <div
                                        class="avatar-title bg-light rounded-circle text-{{ $status['badge'] }} font-size-20">
                                        <i class="bx {{ getStatusIcon($status['name']) }}"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
@endsection