@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Dashboard</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Dashboard</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-4">
                <a href="{{ route('customer.list') }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="text-muted mb-2" style="font-size: 14px; font-weight: 500;">Total Users</p>
                                    <h2 class="fw-bold mb-0" style="font-size: 36px; color: #667eea;">{{ $data['user_count'] }}</h2>
                                </div>
                                <div class="icon-wrapper" style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="ph-users-three" style="font-size: 28px; color: white;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <a href="{{ route('advisor.list') }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="text-muted mb-2" style="font-size: 14px; font-weight: 500;">Total Advisors</p>
                                    <h2 class="fw-bold mb-0" style="font-size: 36px; color: #667eea;">{{ $data['advisor_count'] }}</h2>
                                </div>
                                <div class="icon-wrapper" style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="ph-users-three" style="font-size: 28px; color: white;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <a href="{{ route('live.session.report') }}" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="text-muted mb-2" style="font-size: 14px; font-weight: 500;">Ongoing Sessions</p>
                                    <h2 class="fw-bold mb-0" style="font-size: 36px; color: #667eea;">{{ $data['running_session'] }}</h2>
                                </div>
                                <div class="icon-wrapper" style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="ph-play-circle" style="font-size: 28px; color: white;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <a href="javascript:void(0)" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <p class="text-muted mb-2" style="font-size: 14px; font-weight: 500;">Cancelled Sessions</p>
                                    <h2 class="fw-bold mb-0" style="font-size: 36px; color: #667eea;">{{ $data['cancelled_session'] }}</h2>
                                </div>
                                <div class="icon-wrapper" style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="ph-x-circle" style="font-size: 28px; color: white;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-4" style="border-radius: 12px;">
            <div class="card-header bg-white border-bottom" style="border-radius: 12px 12px 0 0;">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold" style="font-size: 18px; color: #333;">
                        <i class="ph-list me-2" style="color: #667eea;"></i>Sessions
                    </h5>
                    <a href="{{ route('reports') }}" class="btn btn-primary btn-sm" style="border-radius: 8px;">
                        <i class="ph-eye me-1"></i>View All
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">ID</th>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">Advisor Name</th>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">Customer Name</th>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">Status</th>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">Session Type</th>
                                <th style="padding: 15px; font-weight: 600; color: #495057;">Amount($)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="6" class="text-center py-5" style="color: #999;">
                                    <i class="ph-folder-open" style="font-size: 48px; opacity: 0.3;"></i>
                                    <p class="mt-3 mb-0">No Record Found</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
        }

        .icon-wrapper {
            transition: transform 0.3s ease;
        }

        .card:hover .icon-wrapper {
            transform: scale(1.1);
        }
    </style>
@endsection