@extends('backend.representative.layouts.representative-app')

@section('title', 'Dashboard')

@push('style')
<style>
    .dash-stat {
        border: 1px solid #e8edf6;
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
        background: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .dash-stat:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(20, 28, 55, 0.08);
    }
    .dash-stat .stat-label {
        color: #5b6b83;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
    }
    .dash-stat .stat-value {
        font-size: 1.8rem;
        font-weight: 700;
        margin-top: 0.4rem;
        color: #0b1220;
    }
    .stat-tone-primary { background: linear-gradient(135deg, #eef4ff, #fff 60%); }
    .stat-tone-lime { background: linear-gradient(135deg, #d7f2d3, #f5fff4 60%); }
    .stat-tone-gold { background: linear-gradient(135deg, #ffe8b5, #fffdf6 60%); }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="main-content-title tx-24 mg-b-1">Dashboard</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-lg-4">
        <div class="dash-stat stat-tone-primary">
            <div class="stat-label">Total Stores</div>
            <div class="stat-value">{{ $totalStores }}</div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="dash-stat stat-tone-lime">
            <div class="stat-label">Active Stores</div>
            <div class="stat-value">{{ $activeStores }}</div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="dash-stat stat-tone-gold">
            <div class="stat-label">Store Managers</div>
            <div class="stat-value">{{ $totalManagers }}</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Recent Stores</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recentStores as $store)
                                <tr>
                                    <td>{{ $store->id }}</td>
                                    <td>{{ $store->name }}</td>
                                    <td>{{ $store->store_email ?? '—' }}</td>
                                    <td>
                                        @php
                                            $colors = ['draft' => 'secondary', 'available' => 'success', 'on-hold' => 'danger'];
                                        @endphp
                                        <span class="badge bg-{{ $colors[$store->status] ?? 'secondary' }}">
                                            {{ ucfirst(str_replace('_', ' ', $store->status)) }}
                                        </span>
                                    </td>
                                    <td>{{ $store->created_at->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">No stores yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection