@extends('layouts.main')

@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
  /* Metric card base */
  .metric-card { transition: transform .18s ease, box-shadow .18s ease; border:0; border-radius:10px; }
  .metric-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(18,38,63,0.05); }
  .metric-title{ font-size:13px; color:#6c757d; margin-bottom:6px; }
  .metric-value{ font-weight:600; font-size:20px; }

  /* Light background palette */
  .bg-blue-lt   { background:#f0f6ff; }
  .bg-green-lt  { background:#f3faf5; }
  .bg-yellow-lt { background:#fff9e6; }
  .bg-purple-lt { background:#f6f3ff; }
  .bg-orange-lt { background:#fff5ec; }
  .bg-red-lt    { background:#fff5f5; }
  .bg-secondary-lt { background:#f8f9fa; }

  /* Accent text colors */
  .text-blue   { color:#206bc4; }
  .text-green  { color:#198754; }
  .text-yellow { color:#f59f00; }
  .text-purple { color:#6f42c1; }
  .text-orange { color:#ff6b00; }
  .text-red    { color:#dc3545; }
</style>

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">Dashboard</h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ route('visual.summary') }}" class="btn btn-outline-primary d-none d-sm-inline-block">Visual Summary</a>
        
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">

    <!-- Snapshot -->
    <div class="card mb-4">
      <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
        <div>
          <h5 class="card-title mb-0">WHS Snapshot: Quick Glance</h5>
        </div>
        <div class="small-muted">Updated: {{ now()->format('d M, Y') }}</div>
      </div>

      <div class="card-body">
        <div class="row g-3">

          {{-- total --}}
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card metric-card bg-blue-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Total Applications</div>
                <div class="metric-value"><span class="text-blue">{{ $total_master ?? 0 }}</span></div>
              </div>
            </div>
          </div>

          {{-- approved --}}
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card metric-card bg-green-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Approved</div>
                <div class="metric-value"><span class="text-green">{{ $approved_count ?? 0 }}</span></div>
              </div>
            </div>
          </div>

          {{-- pending --}}
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card metric-card bg-yellow-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Pending</div>
                <div class="metric-value"><span class="text-yellow">{{ $pending_count ?? 0 }}</span></div>
              </div>
            </div>
          </div>

          {{-- rejected --}}
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card metric-card bg-purple-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Rejected</div>
                <div class="metric-value"><span class="text-purple">{{ $rejected_count ?? 0 }}</span></div>
              </div>
            </div>
          </div>

          {{-- needs correction --}}
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card metric-card bg-orange-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Needs Correction</div>
                <div class="metric-value"><span class="text-orange">{{ $needs_correction_count ?? 0 }}</span></div>
              </div>
            </div>
          </div>

          {{-- features --}}
          @php
            $featureColors = ['blue','green','yellow','purple','orange','red'];
            $compact = [
              ['k'=>'pre_work_levels_count','t'=>'Pre Work Levels'],
              ['k'=>'post_levels_count','t'=>'Post Levels'],
              ['k'=>'quantity_calculations_count','t'=>'Quantity Calculations'],
              ['k'=>'measurement_books_count','t'=>'Measurement Books'],
              ['k'=>'billapprovals_count','t'=>'Bill Approvals'],
              ['k'=>'asset_handovers_count','t'=>'Asset Handovers']
            ];
          @endphp

          @if(isset($features) && is_array($features))
            @foreach($features as $i => $f)
              @php $color = $featureColors[$i % count($featureColors)]; @endphp
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card metric-card bg-{{ $color }}-lt h-100">
                  <div class="card-body text-center">
                    <div class="metric-title">{{ $f['title'] }}</div>
                    <div class="metric-value"><span class="text-{{ $color }}">{{ $f['count'] ?? 0 }}</span></div>
                  </div>
                </div>
              </div>
            @endforeach
          @else
            @foreach($compact as $i => $c)
              @php
                $color = $featureColors[$i % count($featureColors)];
                $countVar = ${$c['k']} ?? 0;
              @endphp
              <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card metric-card bg-{{ $color }}-lt h-100">
                  <div class="card-body text-center">
                    <div class="metric-title">{{ $c['t'] }}</div>
                    <div class="metric-value"><span class="text-{{ $color }}">{{ $countVar }}</span></div>
                  </div>
                </div>
              </div>
            @endforeach
          @endif

        </div>
      </div>
    </div>

    <!-- Unique Geography Counts -->
    <div class="card mt-4 shadow-sm">
      <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Unique Geography Counts</h5>
        <small class="text-white-50">Summary of unique IDs</small>
      </div>

      <div class="card-body">
        <div class="row g-3">

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-blue-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Units</div>
                <div class="metric-value"><span class="text-blue">{{ $unique_unit_count }}/{{ $total_unit }}</span></div>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-green-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">States</div>
                <div class="metric-value"><span class="text-green">{{ $unique_state_count }}/{{ $total_state }}</span></div>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-yellow-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Districts</div>
                <div class="metric-value"><span class="text-yellow">{{ $unique_district_count }}/{{ $total_district }}</span></div>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-purple-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Blocks</div>
                <div class="metric-value"><span class="text-purple">{{ $unique_block_count }}/{{ $total_block }}</span></div>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-orange-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Panchayats</div>
                <div class="metric-value"><span class="text-orange">{{ $unique_panchayat_count }}</span></div>
              </div>
            </div>
          </div>

          <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card bg-red-lt h-100">
              <div class="card-body text-center">
                <div class="metric-title">Villages</div>
                <div class="metric-value"><span class="text-red">{{ $unique_village_count }}</span></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Insights + Recent Activity -->
    

  {{-- Row 1: Land & Feasibility --}}
  <div class="row row-deck row-cards mt-3">
    <div class="col-sm-6 col-lg-4">
      <div class="card bg-blue-lt">
        <div class="card-body">
          <div class="d-flex  align-items-center">
            <div class="me-3">
              <span class="text-muted">Total land area</span>
              <div class="h3 mb-0">{{ number_format($summary->total_land_area, 2) }}</div>
            </div>
            <div class="ms-auto text-muted small">units as stored</div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-body bg-green-lt">
          <div class="d-flex align-items-center">
            <div>
              <span class="text-muted">Avg technical feasibility</span>
              <div class="h3 mb-0">{{ number_format($summary->avg_technical_feasibility_score, 2) }}</div>
              <div class="text-muted small">average across records</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-lg-4">
      <div class="card">
        <div class="card-body bg-red-lt">
          <div class="d-flex align-items-center">
            <div>
              <span class="text-muted">WUG total land</span>
              <div class="h3 mb-0">{{ number_format($summary->total_wug_land, 2) }}</div>
              <div class="text-muted small">sum of water user groups land</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Row 2: Demographics (Male / Female) --}}
  <div class="row row-deck row-cards mt-3">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Demographics — Male</h3>
          <div class="card-actions">
            <span class="text-muted small">Total: {{ number_format($summary->total_male) }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="row gx-3 gy-2">
            <div class="col-4">
              <div class="text-muted">0 - 5 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_male_0_5) }}</div>
            </div>
            <div class="col-4">
              <div class="text-muted">5 - 15 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_male_5_15) }}</div>
            </div>
            <div class="col-4">
              <div class="text-muted">15 - 16 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_male_15_16) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Demographics — Female</h3>
          <div class="card-actions">
            <span class="text-muted small">Total: {{ number_format($summary->total_female) }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="row gx-3 gy-2">
            <div class="col-4">
              <div class="text-muted">0 - 5 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_female_0_5) }}</div>
            </div>
            <div class="col-4">
              <div class="text-muted">5 - 15 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_female_5_15) }}</div>
            </div>
            <div class="col-4">
              <div class="text-muted">15 - 16 yrs</div>
              <div class="h4 mb-0">{{ number_format($summary->total_age_female_15_16) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Row 3: Landholding & WUG --}}
  <div class="row row-deck row-cards mt-3">
    <div class="col-lg-6">
      <div class="card bg-green-lt">
        <div class="card-header">
          <h3 class="card-title">Landholding Categories</h3>
          <div class="card-actions">
            <span class="text-muted small">Households: {{ number_format($summary->total_records) }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="row gx-3 gy-2">
            <div class="col-6">
              <div class="text-muted">Landless</div>
              <div class="h4 mb-1">{{ number_format($summary->total_landless) }}</div>

              <div class="text-muted">Marginal</div>
              <div class="h4 mb-1">{{ number_format($summary->total_marginal) }}</div>

              <div class="text-muted">Small</div>
              <div class="h4 mb-0">{{ number_format($summary->total_small) }}</div>
            </div>

            <div class="col-6">
              <div class="text-muted">Medium</div>
              <div class="h4 mb-1">{{ number_format($summary->total_medium) }}</div>

              <div class="text-muted">Big farmer</div>
              <div class="h4 mb-1">{{ number_format($summary->total_bigfarmer) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- WUG & membership --}}
    <div class="col-lg-6">
      <div class="card bg-blue-lt">
        <div class="card-header">
          <h3 class="card-title">WUG & Membership</h3>
        </div>
        <div class="card-body">
          <div class="row gx-3 gy-2">
            <div class="col-6">
              <div class="text-muted">Total WUG members</div>
              <div class="h4 mb-0">{{ number_format($summary->total_wug_member) }}</div>
            </div>
            <div class="col-6">
              <div class="text-muted">Agri baseline entered</div>
              <div class="h4 mb-0">{{ number_format($summary->wug_member_agri_baseline_entered) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Row 4: Income & Livelihood --}}
  <div class="row row-deck  row-cards mt-3">
    <div class="col-md-6 col-lg-4">
      <div class="card bg-blue-lt">
        <div class="card-body">
          <div class="text-muted">Cropping income</div>
          <div class="h3 mb-0">₹{{ number_format($summary->total_cropping_income, 2) }}</div>
          <div class="text-muted small mt-1">Sum of croppings net income</div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-lg-4">
      <div class="card bg-red-lt">
        <div class="card-body">
          <div class="text-muted">Livestock income</div>
          <div class="h3 mb-0">₹{{ number_format($summary->total_livestock_income, 2) }}</div>
          <div class="text-muted small mt-1">Sum of livestock net income</div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card bg-yellow-lt">
        <div class="card-body">
          <div class="d-flex mb-2 justify-content-between">
            <div>
              <div class="text-muted">Enterprises (count)</div>
              <div class="h4 mb-0">{{ number_format($summary->total_enterprise) }}</div>
            </div>
            <div class="text-end">
              <div class="text-muted">Wages (count)</div>
              <div class="h4 mb-0">{{ number_format($summary->total_daily_wage_families) }}</div>
            </div>
          </div>

          <div class="mt-2">
            <div class="text-muted">Micro-enterprise income</div>
            <div class="h5 mb-0">₹{{ number_format($summary->total_micro_enterprise_income, 2) }}</div>

            <div class="text-muted mt-2">Daily-wage income</div>
            <div class="h5 mb-0">₹{{ number_format($summary->total_daily_wage_income, 2) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Final row: Total family income --}}
  <div class="row mt-3 bg-blue-lt">
    <div class="col-12">
      <div class="card">
        <div class="card-body d-flex align-items-center justify-content-between">
          <div>
            <div class="text-muted">Total family income (sum)</div>
            <div class="h2 mb-0">₹{{ number_format($summary->total_family_income, 2) }}</div>
            <div class="text-muted small">Sum of reported family incomes across records</div>
          </div>

          <div class="text-end">
            <a href="/export-masters" class="btn btn-primary">View master list</a>
            <div class="text-muted small mt-1">Export / filters available on master list</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>


  </div>
</div>




<script>
  // animate numbers
  $(function(){
    $('[data-animate-number]').each(function(){
      var $el = $(this);
      var to = parseInt($el.data('to') || $el.text(), 10) || 0;
      $({count:0}).animate({count: to}, {
        duration: 900,
        easing: 'swing',
        step: function(now){ $el.text(Math.floor(now)); },
        complete: function(){ $el.text(to); }
      });
    });
  });
</script>

@endsection