@extends('layouts.app')
@section('content')

<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="content-wrapper">

    <div class="page-header">
        <h3 class="page-title">Principal Dashboard</h3>
    </div>

    <!-- KPI CARDS -->
    <div class="row dashboardCard">

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h4>Jobs Posted</h4>
                        <h2>12</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h4>Applications</h4>
                        <h2>58</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <h4>Shortlisted</h4>
                        <h2>20</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <h4>Hired</h4>
                        <h2>6</h2>
                    </div>
                </div>
            </a>
        </div>

    </div>

    <!-- TABLES -->
    <div class="row">

        <!-- Jobs Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">My Jobs</div>
                <div class="card-body">
                    <table id="jobsTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Job Title</th>
                                <th>Location</th>
                                <th>Applications</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Math Teacher</td>
                                <td>Delhi</td>
                                <td>12</td>
                                <td><span class="badge bg-success">Active</span></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Science Teacher</td>
                                <td>Mumbai</td>
                                <td>8</td>
                                <td><span class="badge bg-warning">Pending</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Applications Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">Recent Applications</div>
                <div class="card-body">
                    <table id="applicationsTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Teacher Name</th>
                                <th>Job</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>101</td>
                                <td>Rahul Sharma</td>
                                <td>Math Teacher</td>
                                <td><span class="badge bg-info">Applied</span></td>
                                <td>2026-03-10</td>
                            </tr>
                            <tr>
                                <td>102</td>
                                <td>Priya Singh</td>
                                <td>Science Teacher</td>
                                <td><span class="badge bg-success">Shortlisted</span></td>
                                <td>2026-03-12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- CHARTS -->
    <div class="row mt-4">

        <!-- Jobs Chart -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4>Job Posting Trend</h4>
                    <canvas id="jobs-chart"></canvas>
                </div>
            </div>
        </div>

        <!-- Application Status -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center">
                    <h4>Application Status</h4>
                    <canvas id="applications-chart" width="250" height="250"></canvas>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- CHART SCRIPT -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    // Jobs Chart
    new Chart(document.getElementById('jobs-chart'), {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr'],
            datasets: [
                { label: 'Jobs Posted', data: [3, 5, 4, 6], backgroundColor: '#4B49AC' }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // Applications Chart
    new Chart(document.getElementById('applications-chart'), {
        type: 'doughnut',
        data: {
            labels: ['Applied', 'Shortlisted', 'Rejected', 'Hired'],
            datasets: [{
                data: [30, 15, 8, 5],
                backgroundColor: ['#36A2EB','#4BC0C0','#FF6384','#28a745']
            }]
        },
        options: {
            cutout: '65%',
            responsive: true
        }
    });

});
</script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {
    $('#jobsTable').DataTable({ pageLength: 5 });
    $('#applicationsTable').DataTable({ pageLength: 5 });
});
</script>

@endsection