@extends('layouts.app', [
'class' => '',
'elementActive' => ''
])

@section('title', 'Dashboard')

@section('css')
<style>
  .animated-number {
    min-width: 60px;
    display: inline-block;
  }
  .card h5 a {
    color: #333;
    text-decoration: none;
  }
  .card h5 a:hover {
    text-decoration: underline;
  }
  b {
    font-size: 18px !important;
  }
</style>
@endsection

@section('content')
<div class="container-fluid my-4">
    <div class="text-center">
        <h3>PERFORMANCE EVALUATOR</h3>
    </div>
<div class="row g-3">

    {{-- 1️⃣ Total Employers --}}
    <div class="col-sm-6 col-md-4">
        <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-success">
            <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="Employers"
                class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-success border-3"
                style="width:75px; height:75px; object-fit:cover;">
            <div class="card-body mt-5">
                <h5 class="text-secondary mb-2 fw-semibold">Total Employers</h5>
                <h3 class="fw-bold mb-3" id="total_employers">0</h3>
                <div class="d-flex justify-content-around small">
                <div><span>Today</span><br><b id="employers_today">0</b></div>
                <div><span>Month</span><br><b id="employers_month">0</b></div>
                </div>
            </div>
        </div>
    </div>

  {{-- 2️⃣ Total Companies --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-info">
      <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="Companies"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-info border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Total Companies</h5>
        <h3 class="fw-bold mb-3" id="total_companies">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="companies_today">0</b></div>
          <div><span>Month</span><br><b id="companies_month">0</b></div>
        </div>
      </div>
    </div>
  </div>

  {{-- 3️⃣ Jobs --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-warning">
      <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="Jobs"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-warning border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Job Posts</h5>
        <h3 class="fw-bold mb-3" id="total_jobs">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="jobs_today">0</b></div>
          <div><span>Month</span><br><b id="jobs_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 3️⃣ Job Posts--}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-warning">
      <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="Jobs"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-warning border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Jobs</h5>
        <h3 class="fw-bold mb-3" id="total_job_posts">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="job_posts_today">0</b></div>
          <div><span>Month</span><br><b id="job_posts_month">0</b></div>
        </div>
      </div>
    </div>
  </div>

  {{-- 4️⃣ Candidates --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-warning">
      <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="Candidates"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-warning border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Total Candidates</h5>
        <h3 class="fw-bold mb-3" id="total_candidates">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="candidates_today">0</b></div>
          <div><span>Month</span><br><b id="candidates_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 12️⃣ Total Calls --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-info">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Calls"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-info border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Total Calls</h5>
        <h3 class="fw-bold mb-3" id="total_calls">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="calls_today">0</b></div>
          <div><span>Month</span><br><b id="calls_this_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 12️⃣ Called Candidates --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-info">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Calls"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-info border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Called Candidates</h5>
        <h3 class="fw-bold mb-3" id="total_called_candidates">0</h3>
        <h3 class="fw-bold mb-3" id="total_called_candidates_percentage">0%</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="called_candidates_today">0</b></div>
          <div><span>Month</span><br><b id="called_candidates_this_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 7️⃣ Approved Candidates --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-warning">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Approved Candidates"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-warning border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Approved Candidates</h5>
        <h3 class="fw-bold mb-3" id="total_approved_candidates">0</h3>
        <h3 class="fw-bold mb-3" id="total_approved_candidates_percentage">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="approved_candidates_today">0</b></div>
          <div><span>Month</span><br><b id="approved_candidates_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 11️⃣ Matched Candidates --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-danger">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Matched"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-danger border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Matched Candidates</h5>
        <h3 class="fw-bold mb-3" id="total_matched_candidates">0</h3>
        <h3 class="fw-bold mb-3" id="total_matched_candidates_percentage">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="matched_candidates_today">0</b></div>
          <div><span>Month</span><br><b id="matched_candidates_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 9️⃣ Interview Performance --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-danger">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Interviews"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-danger border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Interview Performance</h5>
        <h3 class="fw-bold mb-3" id="total_interviews">0</h3>
        <h3 class="fw-bold mb-3" id="total_interviews_percentage">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Pending</span><br><b id="pending_interviews">0</b></br><b id="pending_interviews_percentage">0.0%</b></div>
          <div><span>Passed</span><br><b id="passed_interviews">0</b></br><b id="passed_interviews_percentage">0.0%</b></div>
          <div><span>Failed</span><br><b id="failed_interviews">0</b></br><b id="failed_interviews_percentage">0.0%</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 🔟 Travelled --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-warning">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Travelled"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-warning border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Travelled</h5>
        <h3 class="fw-bold mb-3" id="total_travelled">0</h3>
        <h3 class="fw-bold mb-3" id="total_travelled_percentage">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="travelled_today">0</b></div>
          <div><span>Month</span><br><b id="travelled_month">0</b></div>
        </div>
      </div>
    </div>
  </div>
  {{-- 5️⃣ Partners --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-primary">
      <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="Partners"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-primary border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Total Partners</h5>
        <h3 class="fw-bold mb-3" id="total_partners">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="partners_today">0</b></div>
          <div><span>Month</span><br><b id="partners_month">0</b></div>
        </div>
      </div>
    </div>
  </div>

  {{-- 6️⃣ Agents --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-success">
      <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="Agents"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-success border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Total Agents</h5>
        <h3 class="fw-bold mb-3" id="total_agents">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="agents_today">0</b></div>
          <div><span>Month</span><br><b id="agents_month">0</b></div>
        </div>
      </div>
    </div>
  </div>

  {{-- 8️⃣ Job Applications --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-info">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Job Applications"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-info border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Job Applications</h5>
        <h3 class="fw-bold mb-3" id="total_job_applications">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="job_applications_today">0</b></div>
          <div><span>Month</span><br><b id="job_applications_month">0</b></div>
        </div>
      </div>
    </div>
  </div>

  {{-- Candidates In Processing --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-danger">
      <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Processing"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-danger border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">In Processing</h5>
        <h3 class="fw-bold mb-3" id="total_candidates_in_processing">0</h3>
        <div class="d-flex justify-content-around small">
          {{-- <div><span>Pending</span><br><b id="pending_interviews">0</b></div>
          <div><span>Passed</span><br><b id="passed_interviews">0</b></div>
          <div><span>Failed</span><br><b id="failed_interviews">0</b></div> --}}
        </div>
      </div>
    </div>
  </div>

  {{-- 13️⃣ Social Media Suppliers --}}
  <div class="col-sm-6 col-md-4">
    <div class="card border-0 shadow-sm h-100 position-relative text-center bg-light-danger">
      <img src="{{ asset('storage/dash_photos/purity.jpeg') }}" alt="Social Media Suppliers"
           class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle border border-danger border-3"
           style="width:75px; height:75px; object-fit:cover;">
      <div class="card-body mt-5">
        <h5 class="text-secondary mb-2 fw-semibold">Social Media Suppliers</h5>
        <h3 class="fw-bold mb-3" id="total_social_media_suppliers">0</h3>
        <div class="d-flex justify-content-around small">
          <div><span>Today</span><br><b id="today_social_media_supplier_candidates">0</b></div>
          <div><span>Total</span><br><b id="total_social_media_supplier_candidates">0</b></div>
        </div>
      </div>
    </div>
  </div>
</div>
{{-- 🎨 Custom Dashboard Styles --}}
<style>
    .bg-light-success { background: linear-gradient(135deg, #e9f9f0, #d0f2df); }
    .bg-light-info    { background: linear-gradient(135deg, #e8f4fa, #d1ebf7); }
    .bg-light-warning { background: linear-gradient(135deg, #fff8e5, #ffeebd); }
    .bg-light-primary { background: linear-gradient(135deg, #eaf0ff, #d4e0ff); }
    .bg-light-danger  { background: linear-gradient(135deg, #ffe8e8, #ffd5d5); }

    .card {
    border-radius: 15px;
    transition: transform .2s, box-shadow .2s;
    }
    .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }
</style>
  <!-- ===== RECENT CALLS & SMS ===== -->
  <div class="row mt-5 g-3">
    <div class="col-md-6">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent border-bottom-0">
          <h5 class="mb-0">Recent Calls</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Candidate</th>
                  <th>Caller</th>
                  <th>Phone</th>
                  <th>Summary</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody id="recent_calls">
                <tr><td colspan="6" class="text-center"><div class="spinner-border text-primary"></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent border-bottom-0">
          <h5 class="mb-0">Recent SMS</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Candidate</th>
                  <th>Phone</th>
                  <th>Message</th>
                  <th>Status</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody id="recent_sms">
                <tr><td colspan="6" class="text-center"><div class="spinner-border text-primary"></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ===== TOP PARTNERS ===== -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent border-bottom-0">
          <h5 class="mb-0"><a href="{{ route('sitesperformancesummary') }}" class="text-decoration-none">Top Performing Sites</a></h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Partner Name</th>
                  <th>Category</th>
                  <th class="text-end">Total Contacts</th>
                </tr>
              </thead>
              <tbody id="top_partners">
                <tr><td colspan="4" class="text-center"><div class="spinner-border text-primary"></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ===== TOP AGENTS ===== -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent border-bottom-0">
          <h5 class="mb-0"><a href="{{ route('agentsperformancesummary') }}" class="text-decoration-none">Top Performing Agents</a></h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Agent Name</th>
                  <th class="text-end">Contacts</th>
                  <th class="text-end">Called</th>
                  <th class="text-end">Smsed</th>
                  <th class="text-end">%</th>
                </tr>
              </thead>
              <tbody id="top_agents">
                <tr><td colspan="6" class="text-center"><div class="spinner-border text-primary"></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection


@section('js')
<script>
    function animateNumber(el, start, end, duration = 800) {
        let startTime = null;
        function step(timestamp) {
            if (!startTime) startTime = timestamp;
            const progress = Math.min((timestamp - startTime) / duration, 1);
            el.textContent = Math.floor(progress * (end - start) + start).toLocaleString();
            if (progress < 1) requestAnimationFrame(step);
        }
        requestAnimationFrame(step);
    }

    function populateTable(selector, data, columns) {
        if (!data || !data.length) {
            $(selector).html(`<tr><td colspan="${columns.length + 1}" class="text-center text-muted">No records found</td></tr>`);
            return;
        }
        let rows = '';
        data.forEach((row, i) => {
            rows += `<tr><td>${i + 1}</td>` +
            columns.map(c => {
                let val = row[c] ?? '-';
                if (c === 'summary' || c === 'message') val = truncateText(val, { words: 3 });
                const numeric = !isNaN(parseFloat(val)) && isFinite(val);
                return `<td class="${numeric ? 'text-right' : ''}">${val}</td>`;
            }).join('') +
            `</tr>`;
        });
        $(selector).html(rows);
    }

    $(document).ready(function() {
        $.ajax({
            url: "{{ route('publicdashboarddata') }}",
            type: "GET",
            dataType: "json",
            success: function(res) {
            // === Totals ===
            animateNumber(document.getElementById('total_partners'), 0, res.partners.total);
            animateNumber(document.getElementById('total_agents'), 0, res.agents.total);
            animateNumber(document.getElementById('total_candidates'), 0, res.candidates.total);

            $('#partners_today').text(res.partners.today);
            $('#partners_month').text(res.partners.month);
            $('#agents_today').text(res.agents.today);
            $('#agents_month').text(res.agents.month);
            $('#candidates_today').text(res.candidates.today);
            $('#candidates_month').text(res.candidates.month);
            animateNumber(document.getElementById('total_employers'), 0, res.employers.total);
            $('#employers_today').text(res.employers.today);
            $('#employers_month').text(res.employers.month);
            animateNumber(document.getElementById('total_companies'), 0, res.companies.total);
            $('#companies_today').text(res.companies.today);
            $('#companies_month').text(res.companies.month);

            // Candidates In processing
            animateNumber(document.getElementById('total_candidates_in_processing'), 0, res.candidateProcessing.total);

            $('#jobs_today').text(res.jobs.today);
            $('#jobs_month').text(res.jobs.month);
            animateNumber(document.getElementById('total_jobs'), 0, res.jobs.total);
            $('#job_posts_today').text(res.jobPosts.today);
            $('#job_posts_month').text(res.jobPosts.month);
            animateNumber(document.getElementById('total_job_posts'), 0, res.jobPosts.total);
            $('#matched_candidates_today').text(res.matchedCandidates.today);
            $('#matched_candidates_month').text(res.matchedCandidates.month);
            $('#total_matched_candidates_percentage').text((res.matchedCandidates.total/res.approved_candidates.total * 100) .toFixed(1) + '%');
            animateNumber(document.getElementById('total_social_media_suppliers'), 0, res.socialMediaCandidates.suppliers);
            $('#today_social_media_supplier_candidates').text(res.socialMediaCandidates.today);
            $('#total_social_media_supplier_candidates').text(res.socialMediaCandidates.total);
            animateNumber(document.getElementById('total_matched_candidates'), 0, res.matchedCandidates.total);
            $('#job_applications_today').text(res.applications.today);
            $('#job_applications_month').text(res.applications.month);
            animateNumber(document.getElementById('total_job_applications'), 0, res.applications.total);
            $('#travelled_today').text(res.travelled.today);
            $('#travelled_month').text(res.travelled.month);
            $('#total_travelled_percentage').text(
            res.interviewperformance.passed
                ? ((res.travelled.total / res.interviewperformance.passed) * 100).toFixed(1) + '%'
                : '0.0%'
            );
            animateNumber(document.getElementById('total_travelled'), 0, res.travelled.total);
            $('#approved_candidates_today').text(res.approved_candidates.today);
            $('#approved_candidates_month').text(res.approved_candidates.month);
            animateNumber(document.getElementById('total_approved_candidates'), 0, res.approved_candidates.total);
            animateNumber(document.getElementById('total_interviews'), 0, res.interviewperformance.total);
            $('#total_interviews_percentage').text((res.interviewperformance.total/res.matchedCandidates.total * 100) .toFixed(1) + '%');
            $('#pending_interviews').text(res.interviewperformance.pending);
            $('#failed_interviews').text(res.interviewperformance.failed);
            $('#passed_interviews').text(res.interviewperformance.passed);
            $('#pending_interviews_percentage').text(' ('+(res.interviewperformance.pending/res.interviewperformance.total * 100) .toFixed(1) + '%)');
            $('#failed_interviews_percentage').text(' ('+(res.interviewperformance.failed/res.interviewperformance.total * 100) .toFixed(1) + '%)');
            $('#passed_interviews_percentage').text(' ('+(res.interviewperformance.passed/res.interviewperformance.total * 100) .toFixed(1) + '%)');
            $('#total_approved_candidates_percentage').text((res.approved_candidates.total/res.candidates.total * 100) .toFixed(1) + '%');

            $('#called_candidates_today').text(res.called_candidates.today);
            $('#called_candidates_this_month').text(res.called_candidates.month);
            $('#total_called_candidates_percentage').text((res.called_candidates.total/res.candidates.total * 100) .toFixed(1) + '%');
            $('#total_called_candidates').text(res.called_candidates.total + '/' + res.candidates.total);

            $('#sms_today').text(res.sms.today);
            $('#sms_month').text(res.sms.month);
            animateNumber(document.getElementById('total_sms'), 0, res.sms.total);

            animateNumber(document.getElementById('calls_today'), 0, res.calls.today);
            animateNumber(document.getElementById('total_calls'), 0, res.calls.total);
            animateNumber(document.getElementById('calls_this_month'), 0, res.calls.month);
            animateNumber(document.getElementById('sms_today_card'), 0, res.sms.today);
            animateNumber(document.getElementById('sms_this_month'), 0, res.sms.month);

            // === Tables ===
            populateTable('#recent_calls', res.recent_calls, ['candidate','caller','phone','summary','date']);
            populateTable('#recent_sms', res.recent_sms, ['candidate','phone','message','status','date']);
            populateTable('#top_partners', res.top_partners, ['partner_name','category','total_contacts']);
            populateTable('#top_agents', res.top_agents, ['agent_name','total_contacts','total_called','total_smsed','performance_percentage']);
            },
            error: function() {
            console.error('Dashboard data failed to load.');
            }
        });
    });
</script>
@endsection