@extends('layouts.admin')

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <h5 class="mb-3">This Month at a Glance <span class="fs-14 fw-normal text-muted">(Click to view reports)</span></h5>
        </div>
        <div class="col-md-3 col-6 mb-3 mb-md-0">
            <a href="{{ route('admin.reports.emi') }}" class="card bg-success-subtle border-0 text-decoration-none h-100 hover-shadow transition-all">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="fs-20 fw-bold text-success mb-1">₹{{ number_format($stats['emi_collected_this_month'] ?? 0, 2) }}</h4>
                        <p class="text-success-emphasis fw-semibold mb-0">EMI Collected</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-6 mb-3 mb-md-0">
            <a href="{{ route('admin.reports.commissions') }}" class="card bg-info-subtle border-0 text-decoration-none h-100 hover-shadow transition-all">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="fs-20 fw-bold text-info mb-1">₹{{ number_format($stats['commission_distributed_this_month'] ?? 0, 2) }}</h4>
                        <p class="text-info-emphasis fw-semibold mb-0">Commission Paid</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-6">
            <a href="{{ route('admin.withdrawals.index', ['status' => 'pending']) }}" class="card bg-warning-subtle border-0 text-decoration-none h-100 hover-shadow transition-all">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="fs-20 fw-bold text-warning mb-1">{{ $stats['pending_withdrawals'] ?? 0 }}</h4>
                        <p class="text-warning-emphasis fw-semibold mb-0">Pending Withdrawals</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-6">
            <a href="{{ route('admin.reports.project-sales') }}" class="card bg-primary-subtle border-0 text-decoration-none h-100 hover-shadow transition-all">
                <div class="card-body d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="fs-20 fw-bold text-primary mb-1">{{ $stats['new_bookings_this_month'] ?? 0 }}</h4>
                        <p class="text-primary-emphasis fw-semibold mb-0">New Bookings</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Property Statistics -->
        <div class="col-md-6 col-xl-3">
            <div class="card bg-primary-subtle border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold text-primary mb-1">{{ $stats['total_projects'] }}</h4>
                            <p class="text-primary-emphasis fw-semibold mb-0">Active Projects</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-primary text-white rounded fs-24">
                                <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-info-subtle border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold text-info mb-1">{{ $stats['total_plots'] }}</h4>
                            <p class="text-info-emphasis fw-semibold mb-0">Total Plots</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-info text-white rounded fs-24">
                                <iconify-icon icon="solar:map-point-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-warning-subtle border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold text-warning mb-1">{{ $stats['booked_plots'] }}</h4>
                            <p class="text-warning-emphasis fw-semibold mb-0">Booked Plots</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-warning text-white rounded fs-24">
                                <iconify-icon icon="solar:layers-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-success-subtle border-0">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold text-success mb-1">{{ $stats['available_plots'] }}</h4>
                            <p class="text-success-emphasis fw-semibold mb-0">Available Plots</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-success text-white rounded fs-24">
                                <iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card border-0" style="background:linear-gradient(135deg,#ede9fe,#ddd6fe);">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold mb-1" style="color:#6d28d9;">{{ $stats['total_customers'] }}</h4>
                            <p class="fw-semibold mb-0" style="color:#7c3aed;">Active Customers</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title text-white rounded fs-24" style="background:#7c3aed;">
                                <iconify-icon icon="solar:users-group-two-rounded-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-success border-0 text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold mb-1 text-white">{{ number_format($stats['distributed_bv'], 2) }}</h4>
                            <p class="fw-semibold mb-0 opacity-75">Distributed BV</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded fs-24">
                                <iconify-icon icon="solar:wallet-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-info border-0 text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold mb-1 text-white">{{ number_format($stats['distributed_pv'], 2) }}</h4>
                            <p class="fw-semibold mb-0 opacity-75">Distributed PV</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded fs-24">
                                <iconify-icon icon="solar:safe-2-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-danger border-0 text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold mb-1 text-white">{{ $stats['pending_withdrawals'] }}</h4>
                            <p class="fw-semibold mb-0 opacity-75">Pending Withdrawals</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded fs-24">
                                <iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-warning border-0 text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="fs-22 fw-bold mb-1 text-white">{{ $stats['pending_bookings'] }}</h4>
                            <p class="fw-semibold mb-0 opacity-75">Pending Bookings</p>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded fs-24">
                                <iconify-icon icon="solar:bill-list-bold-duotone"></iconify-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                <div class="card-body text-white">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-white-50 fw-semibold mb-1">BV Paid Out (This Month)</p>
                            <h3 class="mb-0 text-white">{{ number_format($stats['total_bv_paid_out'], 2) }}</h3>
                        </div>
                        <div class="avatar-md bg-white bg-opacity-25 rounded d-flex align-items-center justify-content-center">
                            <iconify-icon icon="solar:cash-out-bold-duotone" class="fs-32"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
                <div class="card-body text-white">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-white-50 fw-semibold mb-1">PV Paid Out (This Month)</p>
                            <h3 class="mb-0 text-white">{{ number_format($stats['total_pv_paid_out'], 2) }}</h3>
                        </div>
                        <div class="avatar-md bg-white bg-opacity-25 rounded d-flex align-items-center justify-content-center">
                            <iconify-icon icon="solar:wad-of-money-bold-duotone" class="fs-32"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <a href="{{ route('admin.tickets.index', ['status' => 'open']) }}" class="card border-0 shadow-sm text-decoration-none h-100 hover-shadow transition-all" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                <div class="card-body text-white">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <p class="text-white-50 fw-semibold mb-1">Open Support Tickets</p>
                            <h3 class="mb-0 text-white">{{ $stats['open_tickets'] ?? 0 }}</h3>
                        </div>
                        <div class="avatar-md bg-white bg-opacity-25 rounded d-flex align-items-center justify-content-center">
                            <iconify-icon icon="solar:chat-round-dots-bold-duotone" class="fs-32 text-white"></iconify-icon>
                        </div>
                    </div>
                </div>
            </a>
        </div>

    </div>


    <!-- Plots Breakdown -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="header-title">Plots Status Summary</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <p class="text-muted mb-1 text-truncate">Available</p>
                            <h4 class="fs-20 fw-bold mb-0 text-success">{{ $stats['available_plots'] }}</h4>
                        </div>
                        <div class="col-4 border-start">
                            <p class="text-muted mb-1 text-truncate">Booked</p>
                            <h4 class="fs-20 fw-bold mb-0 text-warning">{{ $stats['booked_plots'] }}</h4>
                        </div>
                        <div class="col-4 border-start">
                            <p class="text-muted mb-1 text-truncate">Sold</p>
                            <h4 class="fs-20 fw-bold mb-0 text-danger">{{ $stats['sold_plots'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
            <div class="card w-100">
                <div class="card-body">
                    <h5 class="card-title">Property Management</h5>
                    <p class="card-text">Quickly manage projects and plots from the sidebar.</p>
                    <a href="{{ route('admin.projects.index') }}" class="btn btn-primary btn-sm">Manage Projects</a>
                </div>
            </div>
        </div>
    </div>
@endsection