@php
use Illuminate\Support\Facades\Auth;
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Admin Dashboard - South Front Technologies')

@section('content')
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-0">System Administration Center</h4>
      <p class="text-muted mb-0">Overview of global metrics, occupancies, and billing ledgers.</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('admin.clients.create') }}" class="btn btn-primary">
        <i class="bi bi-person-plus me-1"></i> Register Client Owner
      </a>
      <a href="{{ route('admin.clients') }}" class="btn btn-outline-secondary">
        <i class="bi bi-people me-1"></i> Client Directory
      </a>
    </div>
  </div>

  <!-- Analytics Cards Row -->
  <div class="row mb-4">
    <!-- Total Properties -->
    <div class="col-sm-6 col-lg-3 mb-4">
      <div class="card card-border-shadow-primary h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <div class="avatar me-3">
              <span class="avatar-initial rounded bg-label-primary"><i class="bi bi-building fs-4"></i></span>
            </div>
            <h4 class="mb-0">{{ $totalProperties }}</h4>
          </div>
          <p class="mb-1 text-heading fw-medium">Total Properties</p>
          <p class="mb-0 text-muted small">Registered in system</p>
        </div>
      </div>
    </div>

    <!-- Total Units -->
    <div class="col-sm-6 col-lg-3 mb-4">
      <div class="card card-border-shadow-warning h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <div class="avatar me-3">
              <span class="avatar-initial rounded bg-label-warning"><i class="bi bi-house-door fs-4"></i></span>
            </div>
            <h4 class="mb-0">{{ $totalUnits }}</h4>
          </div>
          <p class="mb-1 text-heading fw-medium">Total Units</p>
          <p class="mb-0 text-muted small">
            Occupied: <strong>{{ $occupiedUnits }}</strong> 
            ({{ $totalUnits > 0 ? round(($occupiedUnits / $totalUnits) * 100) : 0 }}% occupancy)
          </p>
        </div>
      </div>
    </div>

    <!-- Pending KYC approvals -->
    <div class="col-sm-6 col-lg-3 mb-4">
      <div class="card card-border-shadow-danger h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <div class="avatar me-3">
              <span class="avatar-initial rounded bg-label-danger"><i class="bi bi-shield-exclamation fs-4"></i></span>
            </div>
            <h4 class="mb-0">{{ $pendingOwners }}</h4>
          </div>
          <p class="mb-1 text-heading fw-medium">Pending Owner KYC</p>
          <p class="mb-0 text-muted small">Applications awaiting review</p>
        </div>
      </div>
    </div>

    <!-- Outstanding Receivables -->
    <div class="col-sm-6 col-lg-3 mb-4">
      <div class="card card-border-shadow-success h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <div class="avatar me-3">
              <span class="avatar-initial rounded bg-label-success"><i class="bi bi-currency-exchange fs-4"></i></span>
            </div>
            <h4 class="mb-0 text-success">Ksh {{ number_format($outstanding, 0) }}</h4>
          </div>
          <p class="mb-1 text-heading fw-medium">Outstanding Balances</p>
          <p class="mb-0 text-muted small">Billed: Ksh {{ number_format($totalBilled, 0) }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Financial Overview Summary Card -->
    <div class="col-md-8 mb-4">
      <div class="card h-100">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="bi bi-bar-chart-line me-2 text-primary"></i>Revenue Collected vs. Billed Rent</h5>
          <small class="text-muted">Past 6 Months</small>
        </div>
        <div class="card-body pt-3">
          <div id="revenueChart"></div>
        </div>
      </div>
    </div>

    <!-- Quick Links & System Shortcuts -->
    <div class="col-md-4 mb-4">
      <div class="card h-100">
        <div class="card-header border-bottom">
          <h5 class="mb-0"><i class="bi bi-gear me-2 text-secondary"></i>Administrative Access Center</h5>
        </div>
        <div class="card-body pt-4">
          <div class="d-grid gap-3">
            <a href="/dashboard" class="btn btn-outline-danger d-flex align-items-center justify-content-center p-3">
              <i class="bi bi-shield-check me-2 fs-5"></i> Open KYC Document Verification Queue
            </a>
            <a href="{{ route('admin.clients') }}" class="btn btn-outline-primary d-flex align-items-center justify-content-center p-3">
              <i class="bi bi-person-vcard me-2 fs-5"></i> Access Property Client registry
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const months = @json($months);
    const chartBilled = @json($chartBilled);
    const chartPaid = @json($chartPaid);

    const options = {
      chart: {
        type: 'bar',
        height: 280,
        parentHeightOffset: 0,
        toolbar: { show: false }
      },
      series: [
        {
          name: 'Billed Rent (Ksh)',
          data: chartBilled
        },
        {
          name: 'Collected Rent (Ksh)',
          data: chartPaid
        }
      ],
      xaxis: {
        categories: months,
        axisBorder: { show: false },
        axisTicks: { show: false }
      },
      colors: ['#095ecd', '#28c76f'],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '40%',
          borderRadius: 4
        }
      },
      dataLabels: { enabled: false },
      legend: { show: true, position: 'top', horizontalAlign: 'left' },
      grid: {
        strokeDashArray: 4,
        padding: { right: 0, left: 0 }
      }
    };

    const chart = new ApexCharts(document.querySelector('#revenueChart'), options);
    chart.render();
  });
</script>
@endsection