{{-- resources/views/agent/dashboard.blade.php --}}
@extends('layouts.contentLayoutMaster')

@section('title', 'Agent Dashboard')

@section('content')
    <div class="container py-4"
        style="margin-left: var(--dashboard-container-margin, 30px); margin-right: var(--dashboard-container-margin, 30px);">
        <div class="card shadow rounded mb-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Welcome to your dashboard, {{ Auth::user()->name }}</h4>
                <small class="text-white-50">From here, you can manage:</small>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert" id="success-alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <script>
                        setTimeout(() => {
                            const alert = document.getElementById('success-alert');
                            if (alert) {
                                alert.classList.remove('show');
                                alert.classList.add('fade');
                                alert.style.display = 'none';
                            }
                        }, 5000);
                    </script>
                @endif

                <ul class="list-unstyled ps-2">
                    <li class="mb-2">✅ Clients</li>
                    <li class="mb-2">✅ Assigned and Purchased Leads</li>
                    <li class="mb-2">✅ Appointments & Scheduling</li>
                    <li class="mb-2">✅ Files & Document Uploads</li>
                </ul>
            </div>
        </div>

        {{-- Clickable Stat Cards --}}
        <div class="row g-4">
            {{-- Total Clients --}}
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('agent.clients') }}" class="text-decoration-none" data-bs-toggle="tooltip"
                    data-bs-placement="top" title="View all your clients">
                    <div class="card border-0 shadow-sm h-100 hover-shadow transition pointer">
                        <div class="card-header bg-primary text-white d-flex align-items-center gap-2">
                            <i data-feather="users"></i>
                            <h6 class="mb-0">Total Clients</h6>
                        </div>
                        <div class="card-body text-center">
                            <h3 class="fw-bolder text-primary">--</h3>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Assigned Leads --}}
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('agent.leads.index') }}" class="text-decoration-none" data-bs-toggle="tooltip"
                    data-bs-placement="top" title="Check assigned or purchased leads">
                    <div class="card border-0 shadow-sm h-100 hover-shadow transition pointer">
                        <div class="card-header bg-success text-white d-flex align-items-center gap-2">
                            <i data-feather="list"></i>
                            <h6 class="mb-0">Assigned Leads</h6>
                        </div>
                        <div class="card-body text-center">
                            <h3 class="fw-bolder text-success">--</h3>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Upcoming Appointments --}}
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('agent.appointments') }}" class="text-decoration-none" data-bs-toggle="tooltip"
                    data-bs-placement="top" title="See your upcoming appointments">
                    <div class="card border-0 shadow-sm h-100 hover-shadow transition pointer">
                        <div class="card-header bg-warning text-dark d-flex align-items-center gap-2">
                            <i data-feather="calendar"></i>
                            <h6 class="mb-0">Upcoming Appointments</h6>
                        </div>
                        <div class="card-body text-center">
                            <h3 class="fw-bolder text-warning">--</h3>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Uploaded Files --}}
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('agent.files') }}" class="text-decoration-none" data-bs-toggle="tooltip"
                    data-bs-placement="top" title="Access uploaded documents and files">
                    <div class="card border-0 shadow-sm h-100 hover-shadow transition pointer">
                        <div class="card-header bg-info text-white d-flex align-items-center gap-2">
                            <i data-feather="file-text"></i>
                            <h6 class="mb-0">Uploaded Files</h6>
                        </div>
                        <div class="card-body text-center">
                            <h3 class="fw-bolder text-info">--</h3>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- Chart Placeholder --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0">Lead Performance Chart</h5>
                    </div>
                    <div class="card-body">
                        <div
                            style="height: 300px; background-color: #f0f2f5; display: flex; align-items: center; justify-content: center;">
                            <span class="text-muted">[ Chart Placeholder ]</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Feather Icons & Tooltips --}}
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                feather.replace();
                const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
            });
        </script>
    @endpush

    {{-- Custom CSS --}}
    <style>
        :root {
            --dashboard-container-margin: 30px;
        }

        .hover-shadow:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        .transition {
            transition: all 0.3s ease-in-out;
        }

        .pointer {
            cursor: pointer;
        }
    </style>
@endsection