@extends('portal.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;
  }
</style>
@endsection

@section('content')
<div id="content-page" class="content-page">
  <div class="container-fluid">
    <div class="row">

  <!-- ===== TOTALS SECTION ===== -->

  <!-- Total Employers -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{route('employers')}}">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
            <div class="iq-card-body">
                <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-success">
                <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
                </div>
                <p class="text-secondary mt-4">Total Employers</p>
                <h4><b class="animated-number" id="total_employers">0</b></h4>
                <small>Today: <b id="employers_today">0</b> | Month: <b id="employers_month">0</b></small>
            </div>
        </div>
    </a>
  </div>
  <!-- Total Companies -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{route('employers')}}">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
            <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-success">
            <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
            </div>
            <p class="text-secondary mt-4">Total Companies</p>
            <h4><b class="animated-number" id="total_companies">0</b></h4>
            <small>Today: <b id="companies_today">0</b> | Month: <b id="companies_month">0</b></small>
        </div>
        </div>
    </a>
  </div>

  <!-- Total Jobs -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('jobs') }}">
      <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
          <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-warning">
          <img src="{{ asset('storage/dash_photos/caro.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
          </div>
          <p class="text-secondary mt-4">Jobs</p>
          <h4><b class="animated-number" id="total_jobs">0</b></h4>
          <small>Today: <b id="jobs_today">0</b> | Month: <b id="jobs_month">0</b></small>
        </div>
      </div>
    </a>
  </div>
  <!-- Total Candidates -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('candidates') }}">
      <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
          <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-warning">
          <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
          </div>
          <p class="text-secondary mt-4">Total Candidates</p>
          <h4><b class="animated-number" id="total_candidates">0</b></h4>
          <small>Today: <b id="candidates_today">0</b> | Month: <b id="candidates_month">0</b></small>
        </div>
      </div>
    </a>
  </div>
  <!-- Total Partners -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('partners') }}">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
            <div class="iq-card-body">
                <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-primary">
          <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
                </div>
                <p class="text-secondary mt-4">Total Partners</p>
                <h4><b class="animated-number" id="total_partners">0</b></h4>
                <small>Today: <b id="partners_today">0</b> | Month: <b id="partners_month">0</b></small>
            </div>
            </div>
        </div>
    </a>

  <!-- Total Agents -->
  <div class="col-sm-6 col-md-4 mb-3">
    <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
      <div class="iq-card-body">
        <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-success">
          <img src="{{ asset('storage/dash_photos/njeri.jpeg') }}" alt="" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
        </div>
        <p class="text-secondary mt-4">Total Agents</p>
        <h4><b class="animated-number" id="total_agents">0</b></h4>
        <small>Today: <b id="agents_today">0</b> | Month: <b id="agents_month">0</b></small>
      </div>
    </div>
  </div>
  <!-- Approved Candidates -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('approvedcandidates') }}">
      <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
          <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-warning">
          <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
          </div>
          <p class="text-secondary mt-4">Approved Candidates</p>
          <h4><b class="animated-number" id="total_approved_candidates">0</b></h4>
          <small>Today: <b id="approved_candidates_today">0</b> | Month: <b id="approved_candidates_month">0</b></small>
        </div>
      </div>
    </a>
  </div>

  <!-- Total Job Applications -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('jobapplications') }}">
      <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
          <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-warning">
          <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
          </div>
          <p class="text-secondary mt-4">Job Applications</p>
          <h4><b class="animated-number" id="total_job_applications">0</b></h4>
          <small>Today: <b id="job_applications_today">0</b> | Month: <b id="job_applications_month">0</b></small>
        </div>
      </div>
    </a>
  </div>
<!-- Interview performance (merged, detailed) -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('jobinterviews') }}">
    <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
      <div class="iq-card-body">
        <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-danger">
          <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
        </div>
        <p class="text-secondary mt-4">Interview Performance</p>
        <h4><b class="animated-number" id="total_interviews">0</b></h4>
        <div class="row">
            <div class="col-auto text-left">
                <span>Pending</span> <br>
                <small id="pending_interviews">0</small>
            </div>
            <div class="col-auto text-center">
                <span>Passed</span> <br>
                <small id="passed_interviews">0</small>
            </div>
            <div class="col-auto text-right">
                <span>Failed</span> <br>
                <small id="failed_interviews">0</small>
            </div>
        </div>
      </div>
    </div>
    </a>
  </div>
  <!-- Total Travelled -->
  <div class="col-sm-6 col-md-4 mb-3">
    {{-- <a href="{{ route('candidates') }}"> --}}
      <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
          <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-warning">
          <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
          </div>
          <p class="text-secondary mt-4">Travelled</p>
          <h4><b class="animated-number" id="total_travelled">0</b></h4>
          <small>Today: <b id="travelled_today">0</b> | Month: <b id="travelled_month">0</b></small>
        </div>
      </div>
    {{-- </a> --}}
  </div>

  <!-- MATCHED JOBS (merged) -->
  <div class="col-sm-6 col-md-4 mb-3">
     <a href="{{ route('matchedjobapplications') }}">
   <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
      <div class="iq-card-body">
        <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-danger">
          <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
        </div>
        <p class="text-secondary mt-4">Matched Candidates</p>
        <h4><b class="animated-number" id="total_matched_candidates">0</b></h4>
        <small>Today: <b id="matched_candidates_today">0</b> | Month: <b id="matched_candidates_month">0</b></small>
      </div>
    </div>
     </a>
  </div>

  <!-- Calls (merged) -->
  <div class="col-sm-6 col-md-4 mb-3">
    <a href="{{ route('agentcalls') }}">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
            <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-info">
            <img src="{{ asset('storage/dash_photos/juliet.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
            </div>
            <p class="text-secondary mt-4">Total Calls</p>
            <h4><b class="animated-number" id="total_calls">0</b></h4>
            <small>Today: <b id="calls_today">0</b> | Month: <b id="calls_this_month">0</b></small>
        </div>
        </div>
    </a>
  </div>

    {{-- <!-- Interview Stats (merged, detailed) -->
    <div class="col-sm-6 col-md-4 mb-3">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
        <div class="iq-card-body">
            <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-danger">
            <i class="ri-chat-1-line"></i>
            </div>
            <p class="text-secondary mt-4">Interviews</p>
            <h4><b class="animated-number" id="total_interviews">0</b></h4>
            <small>Today: <b id="interviews_today">0</b> | Month: <b id="interviews_month">0</b></small>
        </div>
        </div>
    </div> --}}
    <!-- Interview performance (merged, detailed) -->
  <div class="col-sm-6 col-md-4 mb-3">
        <div class="iq-card iq-card-block iq-card-stretch iq-card-height position-relative">
            <div class="iq-card-body">
                <a href="{{route('socialmediasuppliers')}}">
                    <div class="iq-box-absolute iq-icon-box rounded-circle iq-bg-danger">
                    <img src="{{ asset('storage/dash_photos/purity.jpeg') }}" alt="Total Candidates" style="width:70px; height:70px; object-fit:cover; border-radius:50%;">
                    </div>
                    <p class="text-secondary mt-4">Social Media Suppliers</p>
                    <h4><b class="animated-number" id="total_social_media_suppliers">0</b></h4>
                </a>
                    <a href="{{route('socialmediaperformance')}}">
                        <div class="row">
                        <div class="col-auto text-left">
                            <span>Candidates Today</span> <br>
                            <small id="today_social_media_supplier_candidates">0</small>
                        </div>

                        <div class="col-auto text-right">
                            <span>Total Candidates</span> <br>
                            <small id="total_social_media_supplier_candidates">0</small>
                        </div>
                </div>
                    </a>
            </div>
        </div>
  </div>

    </div>
</div>



    <!-- ===== RECENT CALLS & SMS ===== -->
    <div class="row mt-4">
      <div class="col-md-6">
        <div class="card shadow-sm p-3 bg-white rounded">
          <div class="card-header bg-transparent border-bottom-0">
            <h5>Recent Calls</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <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 p-3 bg-white rounded">
          <div class="card-header bg-transparent border-bottom-0">
            <h5>Recent SMS</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <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-md-12">
        <div class="card shadow-sm p-3 bg-white rounded">
          <div class="card-header bg-transparent border-bottom-0">
            <h5><a href="{{ route('sitesperformancesummary') }}">Top Performing Sites</a></h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Partner Name</th>
                    <th>Category</th>
                    <th class="text-right">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-md-12">
        <div class="card shadow-sm p-3 bg-white rounded">
          <div class="card-header bg-transparent border-bottom-0">
            <h5><a href="{{ route('agentsperformancesummary') }}">Top Performing Agents</a></h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Agent Name</th>
                    <th class="text-right">Contacts</th>
                    <th class="text-right">Called</th>
                    <th class="text-right">Smsed</th>
                    <th class="text-right">%</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>
</div>
@endsection

@section('script')
<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('dashboarddata') }}",
        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);

             $('#jobs_today').text(res.jobs.today);
            $('#jobs_month').text(res.jobs.month);
            animateNumber(document.getElementById('total_jobs'), 0, res.jobs.total);
            $('#matched_candidates_today').text(res.matchedCandidates.today);
            $('#matched_candidates_month').text(res.matchedCandidates.month);
            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);
            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);
            $('#pending_interviews').text(res.interviewperformance.pending);
            $('#failed_interviews').text(res.interviewperformance.failed);
            $('#passed_interviews').text(res.interviewperformance.passed);


        $('#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