@extends('admin.layouts.main')

@section('styles')
  <style>
    /* Subtle hover effect on cards */
    .card:hover {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      transform: translateY(-4px);
      transition: all 0.3s ease-in-out;
    }

    /* Icon colors */
    .icon-primary {
      color: #0d6efd;
    }

    .icon-success {
      color: #198754;
    }

    .icon-warning {
      color: #ffc107;
    }

    .icon-danger {
      color: #dc3545;
    }

    .icon-info {
      color: #0dcaf0;
    }

    .small-text-muted {
      font-size: 0.85rem;
      color: #6c757d;
    }
  </style>
@endsection

@section('content')
  <div class="container-fluid py-1">
    <div class="row g-4">


      {{-- Orders Section --}}
      <div class="col-12">
        <h5 class="mb-3 mt-4">Order Stats</h5>
        <div class="row g-4">

          {{-- Total Orders --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-light" onclick="window.location.href='{{ route('admin.all.orders') }}'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-primary">
                    <i class="fas fa-shopping-cart me-1 text-primary"></i> Total Orders
                  </h6>
                  <p class="small text-secondary">Placed Orders</p>
                </div>
                <h4 class="fw-bold text-dark">{{ $total_orders }}</h4>
              </div>
            </div>
          </div>

          {{-- New Orders --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-primary text-white" onclick="window.location.href='{{ route('admin.all.orders') }}?under_process=0&is_paid=1&is_delivered=&payment_type='">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-clock me-1"></i> New Orders</h6>
                  <p class="small text-white-75">Recently Placed</p>
                </div>
                <h4 class="fw-bold text-white">{{ $new_orders }}</h4>
              </div>
            </div>
          </div>

          {{-- Completed Orders --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-success text-white" onclick="window.location.href='{{ route('admin.all.orders') }}?is_delivered=1'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-check-circle me-1"></i> Completed Orders</h6>
                  <p class="small text-white-75">Delivered</p>
                </div>
                <h4 class="fw-bold text-white">{{ $completed_orders }}</h4>
              </div>
            </div>
          </div>

          {{-- Cancelled Orders --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-danger text-white" onclick="window.location.href='{{ route('admin.all.orders') }}?under_process=4'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-times-circle me-1"></i> Cancelled Orders</h6>
                  <p class="small text-white-75">By User/Admin</p>
                </div>
                <h4 class="fw-bold text-white">{{ $cancelled_orders_refunded }}</h4>
              </div>
            </div>
          </div>

          {{-- Cancelled Orders --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-danger text-white" onclick="window.location.href='{{ route('admin.all.orders') }}?under_process=2,3'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-times-circle me-1"></i> Pending Refund</h6>
                  <p class="small text-white-75">Cancelled by User/Admin</p>
                </div>
                <h4 class="fw-bold text-white">{{ $cancelled_orders }}</h4>
              </div>
            </div>
          </div>

          {{-- Orders Not Paid --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-secondary text-white">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-credit-card me-1"></i> Not Paid</h6>
                  <p class="small text-white-75">Payment Pending</p>
                </div>
                <h4 class="fw-bold text-white">{{ $orders_not_paid }}</h4>
              </div>
            </div>
          </div>

          {{-- Orders In Process --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-warning text-dark" onclick="window.location.href='{{ route('admin.all.orders') }}?under_process=1&is_paid=1&is_delivered=0'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-dark"><i class="fas fa-cogs me-1"></i> In Process</h6>
                  <p class="small text-dark-50">Being Prepared</p>
                </div>
                <h4 class="fw-bold text-dark">{{ $orders_in_process }}</h4>
              </div>
            </div>
          </div>

          {{-- Orders Shipped but Not Delivered --}}
          <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 bg-info text-white" onclick="window.location.href='{{ route('admin.all.orders') }}?under_process=1&is_paid=1&is_delivered=0'">
              <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1 text-white"><i class="fas fa-shipping-fast me-1"></i> Shipped</h6>
                  <p class="small text-white-75">Not Delivered Yet</p>
                </div>
                <h4 class="fw-bold text-white">{{ $orders_shipped_not_delivered }}</h4>
              </div>
            </div>
          </div>

        </div>
      </div>


      {{-- Sales Overview --}}
      <div class="col-12">
        <h5 class="mb-4 mt-5 fw-bold text-secondary">Sales Overview</h5>
        <div class="row g-4">

          <div class="col-md-3">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body text-center">
                <i class="fas fa-calendar-day fa-3x text-primary mb-3"></i>
                <h6 class="text-muted mb-1">Daily Sales</h6>
                <h4 class="fw-bold text-primary">₹{{ $daily_sales_f }}</h4>
                <p class="small text-muted mb-0">Today's Total</p>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body text-center">
                <i class="fas fa-calendar fa-3x text-success mb-3"></i>
                <h6 class="text-muted mb-1">Monthly Sales</h6>
                <h4 class="fw-bold text-success">₹{{ $monthly_sales_f }}</h4>
                <p class="small text-muted mb-0">This Month</p>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body text-center">
                <i class="fas fa-calendar-alt fa-3x text-warning mb-3"></i>
                <h6 class="text-muted mb-1">Yearly Sales</h6>
                <h4 class="fw-bold text-warning">₹{{ $yearly_sales_f }}</h4>
                <p class="small text-muted mb-0">This Year</p>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body text-center">
                <i class="fas fa-rupee-sign fa-3x text-info mb-3"></i>
                <h6 class="text-muted mb-1">Total Sales</h6>
                <h4 class="fw-bold text-info">₹{{ $total_sales_f }}</h4>
                <p class="small text-muted mb-0">Wallet + Online</p>
              </div>
            </div>
          </div>

        </div>
      </div>


      {{-- Shiprocket Overview --}}
      <div class="col-12">
        <h5 class="mb-3 mt-5 fw-bold text-secondary">Shiprocket Overview</h5>
        <div class="row g-4">

          {{-- Wallet Balance --}}
          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0">
              <div class="card-body text-center">
                <i class="fas fa-wallet fa-2x icon-primary mb-3"></i>
                <h6 class="text-muted mb-1">Wallet Balance</h6>
                <h4 class="fw-bold text-success mb-0">₹{{ amountFormat($shiprocket_wallet) }}</h4>
              </div>
            </div>
          </div>

          {{-- Non-Cancelled Orders --}}
          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0">
              <div class="card-body text-center">
                <i class="fas fa-truck fa-2x icon-success mb-3"></i>
                <h6 class="text-muted mb-1">Orders</h6>
                <h4 class="fw-bold text-success mb-0">{{ $non_cancelled_shiprocket_orders }}</h4>
              </div>
            </div>
          </div>

          {{-- Cancelled Orders --}}
          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0">
              <div class="card-body text-center">
                <i class="fas fa-times-circle fa-2x text-danger mb-3"></i>
                <h6 class="text-muted mb-1">Cancelled Orders</h6>
                <h4 class="fw-bold text-danger mb-0">{{ $cancelled_shiprocket_orders }}</h4>
              </div>
            </div>
          </div>

        </div>
      </div>




      







      {{-- Other Stats --}}
      <div class="col-12">
        <h5 class="mb-4 mt-5 fw-bold text-secondary">System Stats</h5>
        <div class="row g-4">

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body">
                <h6 class="fw-semibold mb-3">
                  <i class="fas fa-box-open icon-primary me-2"></i>Branding + Shipping
                </h6>
                <div class="d-flex justify-content-between small-text-muted mb-2">
                  <span>Branding</span>
                  <span class="fw-semibold">₹{{ $branding_cost_f }}</span>
                </div>
                <div class="d-flex justify-content-between small-text-muted">
                  <span>Shipping</span>
                  <span class="fw-semibold">₹{{ $shipping_cost_f }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-users icon-info me-2"></i>Total Users
                  </h6>
                  <p class="small-text-muted mb-0">Registered Users</p>
                </div>
                <h4 class="fw-bold text-info mb-0">{{ $total_users }}</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-wallet icon-warning me-2"></i>Wallet Balance
                  </h6>
                  <p class="small-text-muted mb-0">User's Wallets</p>
                </div>
                <h4 class="fw-bold text-warning mb-0">₹{{ $wallet_balance_f }}</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-coins icon-secondary me-2"></i>Total Coins
                  </h6>
                  <p class="small-text-muted mb-0">Issued Coins</p>
                </div>
                <div class="text-end">
                  <h4 class="fw-bold mb-0 text-secondary">{{ $total_coins }}</h4>
                  <small class="small-text-muted">1 Coin = ₹{{ $coin_value }}</small>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-box icon-success me-2"></i>Products In Stock
                  </h6>
                  <p class="small-text-muted mb-0">Available to Sell</p>
                </div>
                <h4 class="fw-bold text-success mb-0">{{ $in_stock_products }}</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-globe icon-primary me-2"></i>Active Microsites
                  </h6>
                  <p class="small-text-muted mb-0">Custom Stores</p>
                </div>
                <h4 class="fw-bold text-dark mb-0">{{ $active_microsites }}</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card rounded-4 shadow-sm border-0 h-100">
              <div class="card-body d-flex justify-content-between align-items-center px-4">
                <div>
                  <h6 class="fw-semibold mb-1">
                    <i class="fas fa-shipping-fast icon-primary me-2"></i>In-Transit Shipments
                  </h6>
                  <p class="small-text-muted mb-0">Via Shiprocket</p>
                </div>
                <h4 class="fw-bold text-primary mb-0">{{ $in_transit_shipments }}</h4>
              </div>
            </div>
          </div>

        </div>
      </div>

      {{-- Payment Breakdown --}}
      <div class="col-md-6 mt-4">
        <div class="card shadow-sm border-0 rounded-3">
          <div class="card-body">
            <h6 class="card-title mb-3">
              <i class="fas fa-chart-bar me-1"></i> Payment Breakdown
            </h6>
            <div class="d-flex justify-content-between">
              <span class="text-muted"><i class="fas fa-wallet me-1"></i> Wallet Payments</span>
              <span class="fw-bold">₹{{ $wallet_orders }}</span>
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted"><i class="fas fa-credit-card me-1"></i> Online Payments</span>
              <span class="fw-bold">₹{{ $online_orders }}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
@endsection