@extends('layout.admin')

@section('content')
@php
  // থিম প্যারামিটার কালার প্যালেট (ইউজার প্যানেলের সাথে সামঞ্জস্যপূর্ণ)
  $primary = '#01091E';   // গাঢ় নীল
  $secondary = '#00081B'; // নীলচে কালো
  $accent = '#00BFFF';    // হাইলাইট নীল
  $light = '#E0F7FF';     // হালকা ব্যাকগ্রাউন্ড
  $dark = '#00081C';      // ডার্ক ব্যাকগ্রাউন্ড
@endphp

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  .admin-dashboard-container { font-family: 'Hind Siliguri', sans-serif; padding: 10px; }
  
  /* Main Balance & Loss Tracker Cards */
  .main-stat-card { border-radius: 24px; border: none; color: #fff; transition: 0.3s; box-shadow: 0 10px 25px rgba(0,0,0,0.15); position: relative; overflow: hidden; }
  .bg-distributed { background: linear-gradient(135deg, {{ $primary }}, {{ $secondary }}); border: 1px solid rgba(0, 191, 255, 0.2); }
  .bg-pending-liability { background: linear-gradient(135deg, #0f172a, {{ $dark }}); border: 1px solid rgba(234, 179, 8, 0.3); }
  
  /* Status Row Grid Cards */
  .status-clickable-card { text-decoration: none !important; display: block; transition: 0.3s; }
  .status-clickable-card:hover { transform: translateY(-3px); }
  .status-box { background: #fff; border-radius: 20px; padding: 24px 20px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.05); border: 1px solid #d3eaf9; }
  
  .status-title { font-size: 15px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
  .status-counter { font-size: 28px; font-weight: 800; color: {{ $dark }}; margin: 0; }
  
  /* Icon Wrapper */
  .stat-icon-wrapper { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 12px; }
  
  /* Dynamic Border Colors based on Status */
  .border-checked { border-top: 4px solid {{ $accent }}; }
  .border-completed { border-top: 4px solid #16a34a; }
  .border-rejected { border-top: 4px solid #dc2626; }
  
  .text-accent-color { color: {{ $accent }}; }
</style>

<div class="container-fluid admin-dashboard-container my-2">
    <!-- ড্যাশবোর্ড হেডার -->
    <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3 mb-4">
        <div>
            <h3 class="fw-bold m-0" style="color: {{ $primary }};">জিমেইল সেলস লাইভ ড্যাশবোর্ড</h3>
            <p class="text-muted small m-0">আজকের জিমেইল বেচা-কেনার হিসাব এবং লস প্রুফ ট্র্যাকিং</p>
        </div>
        <a href="{{ route('admin.gmail.setting') }}" class="btn text-white px-4 py-2 fw-bold rounded-pill shadow-sm" style="background: linear-gradient(135deg, {{ $primary }}, {{ $secondary }}); border: 1px solid {{ $accent }};">
            <i class="fas fa-sliders me-2"></i> সেটিংস পরিবর্তন করুন
        </a>
    </div>

    <!-- লস রোধ ও প্রধান ২টা ফাইন্যান্সিয়াল ট্র্যাকিং কার্ড -->
    <div class="row g-4 mb-4">
        <!-- আজকের মোট বিতরণকৃত টাকা -->
        <div class="col-md-6">
            <div class="card main-stat-card bg-distributed h-100 p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <span class="d-block text-white-50 small fw-bold text-uppercase">Today Approved & Distributed Money</span>
                        <h2 class="fw-bold mt-1 mb-2" style="font-size: 36px; color: #fff;">{{ number_format($todayCompletedMoney, 2) }} ৳</h2>
                        <span class="badge px-3 py-2 rounded-pill fw-bold" style="background: rgba(22, 163, 74, 0.2); color: #4ade80;">
                            <i class="fas fa-check-circle me-1"></i> আজকের সফল জিমেইল: {{ $todayCompletedCount }} টি
                        </span>
                    </div>
                    <div class="p-3 rounded-4" style="background: rgba(0, 191, 255, 0.1); color: {{ $accent }};">
                        <i class="fas fa-money-bill-wave fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- মোট পেন্ডিং জিমেইলের সম্ভাব্য লায়াবিলিটি (Risk/Loss Tracker) -->
        <div class="col-md-6">
            <a href="{{ route('admin.gmail.sales.list', 'pending') }}" class="status-clickable-card h-100">
                <div class="card main-stat-card bg-pending-liability h-100 p-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <span class="d-block text-white-50 small fw-bold text-uppercase">Total Pending Expected Payout (ইউজারদের পাওনা)</span>
                            <h2 class="fw-bold mt-1 mb-2" style="font-size: 36px; color: #facc15;">{{ number_format($totalPendingMoney, 2) }} ৳</h2>
                            <span class="badge px-3 py-2 rounded-pill fw-bold" style="background: rgba(234, 179, 8, 0.15); color: #facc15;">
                                <i class="fas fa-clock me-1"></i> পেন্ডিং জিমেইল ডাটা: {{ $totalPendingCount }} টি ➔
                            </span>
                        </div>
                        <div class="p-3 rounded-4" style="background: rgba(234, 179, 8, 0.1); color: #facc15;">
                            <i class="fas fa-wallet fa-2x"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- সেকশন টাইটেল -->
    <h5 class="fw-bold mb-3 mt-5" style="color: {{ $primary }};">
        <i class="fas fa-filter me-2 text-accent-color"></i> স্ট্যাটাস অনুযায়ী ফিল্টারিং (ট্যাপ করলেই লিস্টে নিয়ে যাবে)
    </h5>
    
    <!-- ৩টি স্ট্যাটাস ভিত্তিক বড় কাউন্টার ফিল্টার কার্ড -->
    <div class="row g-4">
        <!-- ১. চেকড (Checked) কার্ড -->
        <div class="col-xl-4 col-md-6">
            <a href="{{ route('admin.gmail.sales.list', 'checked') }}" class="status-clickable-card">
                <div class="status-box border-checked">
                    <div class="stat-icon-wrapper" style="background: #e0f7ff; color: {{ $accent }};">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div class="status-title">Checked অবস্থায় আছে</div>
                    <h3 class="status-counter">{{ $checkedCount }} <span style="font-size: 16px; font-weight: 500; color: #777;">টি</span></h3>
                    <small class="text-muted d-block mt-2">লিস্ট ওপেন করতে ক্লিক করুন ➔</small>
                </div>
            </a>
        </div>

        <!-- ২. সফল (Completed) কার্ড -->
        <div class="col-xl-4 col-md-6">
            <a href="{{ route('admin.gmail.sales.list', 'completed') }}" class="status-clickable-card">
                <div class="status-box border-completed">
                    <div class="stat-icon-wrapper" style="background: #e6fdf0; color: #16a34a;">
                        <i class="fas fa-square-check"></i>
                    </div>
                    <div class="status-title">সর্বমোট সফল (Completed)</div>
                    <h3 class="status-counter" style="color: #16a34a;">{{ $completedCount }} <span style="font-size: 16px; font-weight: 500; color: #777;">টি</span></h3>
                    <small class="text-muted d-block mt-2">লিস্ট ওপেন করতে ক্লিক করুন ➔</small>
                </div>
            </a>
        </div>

        <!-- ৩. বাতিলকৃত (Rejected) কার্ড -->
        <div class="col-xl-4 col-md-12">
            <a href="{{ route('admin.gmail.sales.list', 'rejected') }}" class="status-clickable-card">
                <div class="status-box border-rejected">
                    <div class="stat-icon-wrapper" style="background: #fef2f2; color: #dc2626;">
                        <i class="fas fa-circle-xmark"></i>
                    </div>
                    <div class="status-title">বাতিলকৃত (Rejected)</div>
                    <h3 class="status-counter" style="color: #dc2626;">{{ $rejectedCount }} <span style="font-size: 16px; font-weight: 500; color: #777;">টি</span></h3>
                    <small class="text-muted d-block mt-2">লিস্ট ওপেন করতে ক্লিক করুন ➔</small>
                </div>
            </a>
        </div>
    </div>
</div>
@endsection