{{-- resources/views/admin/dashboard.blade.php --}}

@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')

<div class="container-fluid py-4">

    {{-- ===== Top Cards ===== --}}
    <div class="row g-4 mb-4">

        {{-- Users --}}
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted">Users</h6>
                            <h3 class="fw-bold">1000</h3>
                            <small>Active Users: 500</small><br>
                            <small>Inactive Users: 500</small>
                        </div>
                        <div class="icon-box bg-info text-white">
                            <i class="ti ti-users"></i>
                        </div>
                    </div>
                    <a href="{{ route('user_management') }}" class="text-warning small fw-semibold">View</a>
                </div>
            </div>
        </div>

        {{-- Gold --}}
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted">Gold</h6>
                            <h3 class="fw-bold">200</h3>
                            <small>Active Sites: 1,20,000</small>
                        </div>
                        <div class="icon-box bg-warning text-white">
                            <i class="ti ti-crown"></i>
                        </div>
                    </div>
                    <a href="{{ route('gold_management') }}" class="text-warning small fw-semibold">View</a>
                </div>
            </div>
        </div>

        {{-- Silver --}}
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted">Silver</h6>
                            <h3 class="fw-bold">200</h3>
                        </div>
                        <div class="icon-box bg-secondary text-white">
                            <i class="ti ti-medal"></i>
                        </div>
                    </div>
                    <a href="{{ route('silver_management') }}" class="text-warning small fw-semibold">View</a>
                </div>
            </div>
        </div>

        {{-- Profit --}}
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted">Profit</h6>
                            <h3 class="fw-bold">₹ 200</h3>
                        </div>
                        <div class="icon-box bg-success text-white">
                            <i class="ti ti-trending-up"></i>
                        </div>
                    </div>
                    <a href="#" class="text-warning small fw-semibold">View</a>
                </div>
            </div>
        </div>

        {{-- Loss --}}
        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted">Loss</h6>
                            <h3 class="fw-bold">₹ 200</h3>
                        </div>
                        <div class="icon-box bg-danger text-white">
                            <i class="ti ti-trending-down"></i>
                        </div>
                    </div>
                    <a href="#" class="text-warning small fw-semibold">View</a>
                </div>
            </div>
        </div>

    </div>

    {{-- ===== Chart Section ===== --}}
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold">Report</h6>
                <select class="form-select w-auto">
                    <option>Profit</option>
                    <option>Loss</option>
                </select>
            </div>
            <canvas id="reportChart" height="120"></canvas>
        </div>
    </div>

</div>

@endsection

@push('styles')
    <!-- Themify Icons (already added in layout) -->
    <style>
        .icon-box {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 22px;
            line-height: 1;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const canvas = document.getElementById('reportChart');
            if (!canvas) return;

            const ctx = canvas.getContext('2d');

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                    datasets: [{
                        label: 'Profit',
                        data: [0, 45, 60, 30, 65, 20, 70],
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.2)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true } }
                }
            });
        });
    </script>
@endpush