@extends('layouts.vertical')

@section('css')
    <link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ Helper::assets('assets/libs/multiselect/bootstrap.multiselect.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .calendar-load:before {
            content: 'Loading, please allow 2-3 minutes, we are processing your data' !important;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="row page-title align-items-center">
        <div class="col-sm-12">
            <h4 class="m-0 font-weight-medium">Attendance Analytics</h4>
        </div>
    </div>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row align-items-center mb-1">
            <div class="col-lg">
                <h5 class="card-title">Check-ins Overview:</h5>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="position-relative">
                    <span class="flatpickr-arrow"></span>
                    <input type="text" class="form-control flatpickr date-selection" id="date" name="date" value="{{ date('d/m/Y') }}" data-date-end-date="0d">
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <select class="form-control wide school-multiselect" name="daily_school" id="daily_school" multiple data-placeholder="Select locations">
                    @foreach ($schools as $school)
                        <option value="{{ $school->school->_id }}">{{ $school->school->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto mb-lg-3 ml-lg-auto">
                <button type="button" class="btn btn-success btn-refresh-daily">Refresh</button>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col-lg">
                <p>Daily Total: The table below displays Total number of checked in children for the specified date for each selected Locations.</p>
            </div>
            <div class="col-lg-auto">
                <span class="total-field">Total: <strong id="daily-total">0</strong></span>
            </div>
        </div>

        <table class="table table-bordered" id="check-in-table">
            <thead>
                <tr>
                    <th>Location Name</th>
                    <th>Total Checked-in Children</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <div class="border-bottom my-4"></div>

        <div class="row">
            <div class="col-lg mb-3"></div>
            <div class="col-lg-3 mb-3">
                <div class="position-relative">
                    <span class="flatpickr-arrow"></span>
                    <input type="text" class="form-control flatpickr month-selection" id="monthly" name="monthly" value="{{ date('F Y') }}" data-date-end-date="0d">
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <select class="form-control wide school-multiselect" name="monthly_school" id="monthly_school" multiple data-placeholder="Select locations">
                    @foreach ($schools as $school)
                        <option value="{{ $school->school->_id }}">{{ $school->school->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto mb-3 ml-lg-auto">
                <button type="button" class="btn btn-success btn-refresh-monthly">Refresh</button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-lg">
                <p>Monthly Total: The graph below displays Total number of checked in children of the specified month of all selected locations.</p>
            </div>
            <div class="col-lg-auto">
                <span class="total-field">Total: <strong id="monthly-total">0</strong></span>
            </div>
            <div class="col-12">
                <div class="chart-card">
                    <div id="monthly-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row align-items-center mb-1">
            <div class="col-lg mb-3">
                <h5 class="card-title">Absences Overview:</h5>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="position-relative">
                    <span class="flatpickr-arrow"></span>
                    <input type="text" class="form-control flatpickr month-selection" id="absent_month" name="absent_month" value="{{ date('F Y') }}" data-date-end-date="0d">
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <select class="form-control wide school-multiselect" name="absent_school" id="absent_school" multiple data-placeholder="Select locations">
                    @foreach ($schools as $school)
                        <option value="{{ $school->school->_id }}">{{ $school->school->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row mb-1">
                    <div class="col-lg">
                        <p>The table below shows details of absent staff and children for each date and location.</p>
                    </div>
                </div>

                <table class="table table-bordered mb-3" id="absent-date-wise-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Location Name</th>
                            <th>Total Absent Staff</th>
                            <th>Total Absent Children</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="border-bottom my-4"></div>
        <div class="row mt-3">
            <div class="col-md-8">
                <div class="row mb-1">
                    <div class="col-lg">
                        <p>The table below displays total absences by location.</p>
                    </div>
                    <div class="col-lg-auto">
                        <span class="total-field">Staff: <strong id="absent-staff-total">0</strong></span>
                        <span class="total-field">Children: <strong id="absent-children-total">0</strong></span>
                    </div>
                </div>

                <table class="table table-bordered" id="absent-location-wise-table">
                    <thead>
                        <tr>
                            <th>Location Name</th>
                            <th>Total Staff Absences</th>
                            <th>Total Children Absences</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="col-md-4 text-center">
                <p>The chart below shows the number of children marked as sick and absent.</p>
                <div class="absence-data-available">
                    <div id="absence-pie-chart" class="apex-charts mb-0 mt-4" dir="ltr"></div>
                    <div class="apexcharts-legend apexcharts-legend-custom text-center justify-content-center">
                        <div class="apexcharts-legend-series" rel="2">
                            <span class="apexcharts-legend-marker" rel="2" style="background: rgb(245, 177, 177);color: rgb(245, 177, 177);"></span>
                            <span class="apexcharts-legend-text" rel="2">Absent</span>
                        </div>
                        <div class="apexcharts-legend-series" rel="4">
                            <span class="apexcharts-legend-marker" rel="4" style="background: rgb(255, 234, 182);color: rgb(255, 234, 182);"></span>
                            <span class="apexcharts-legend-text" rel="4">Sick</span>
                        </div>
                    </div>
                </div>
                <div class="absence-data-not-available my-md-5 my-3">No data found</div>
            </div>
        </div>

        <div class="border-bottom my-4"></div>

        <div class="row mt-3">
            <div class="col-md-6">
                <p>The table below lists the 5 most common reasons for staff absences by location.</p>
                <table class="table table-bordered" id="absent-common-reason-table">
                    <thead>
                        <tr>
                            <th>5 Most Common Reasons of Staff Absences</th>
                        </tr>
                    </thead>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <p>The table below lists common reasons across all locations.</p>
                <table class="table table-bordered" id="absent-top-reason-table">
                    <thead>
                        <tr>
                            <th>Common Reasons Across All Locations</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Enrollments:</h5>
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <div class="position-relative">
                            <span class="flatpickr-arrow"></span>
                            <input type="text" class="form-control flatpickr month-selection" id="enrollment_month" name="enrollment_month" value="{{ date('F Y') }}" data-date-end-date="0d">
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <select class="form-control wide school-multiselect" name="enrollment_school" id="enrollment_school" multiple data-placeholder="Select locations">
                            @foreach ($schools as $school)
                                <option value="{{ $school->school->_id }}">{{ $school->school->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mb-1">
                    <div class="col-lg">
                        <p>The table below displays the number of new enrollments by location.</p>
                    </div>
                    <div class="col-lg-auto">
                        <span class="total-field">Total: <strong id="enrolled-total">0</strong></span>
                    </div>
                </div>
                <table class="table table-bordered mb-3" id="enrolled-table">
                    <thead>
                        <tr>
                            <th>Location Name</th>
                            <th>New Enrolments</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Dropouts:</h5>
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <div class="position-relative">
                            <span class="flatpickr-arrow"></span>
                            <input type="text" class="form-control flatpickr month-selection" id="archived_month" name="archived_month" value="{{ date('F Y') }}" data-date-end-date="0d">
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <select class="form-control wide school-multiselect" name="archived_school" id="archived_school" multiple data-placeholder="Select locations">
                            @foreach ($schools as $school)
                                <option value="{{ $school->school->_id }}">{{ $school->school->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mb-1">
                    <div class="col-lg">
                        <p>The table below displays the number of archived enrollments by location.</p>
                    </div>
                    <div class="col-lg-auto">
                        <span class="total-field">Total: <strong id="archived-total">0</strong></span>
                    </div>
                </div>

                <table class="table table-bordered" id="archived-table">
                    <thead>
                        <tr>
                            <th>Location Name</th>
                            <th>Archived</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
    <script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/multiselect/bootstrap.multiselect.min.js') }}" type="text/javascript"></script>
    <script defer src="{{ Helper::assets('assets/libs/apexcharts/apexcharts.min.js') }}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
        var schools = @json($schools),
            getCheckInUrl = "{{ route('attendance-analytics.check-ins') }}",
            getAbsentChildrenUrl = "{{ route('attendance-analytics.absent-children') }}",
            getEnrollmentDropoutUrl = "{{ route('attendance-analytics.enrollments-dropouts') }}";
    </script>
    <script defer src="{{ Helper::assets('assets/js/pages/attendance-analytics.js') }}?{{ time() }}" type="text/javascript"></script>
@endsection