@extends('admin.index')
@section('content')

<!-- Responsive Datatable -->
<section id="responsive-datatable">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="card-title">{{ trans("general.sum_grade",  ['name' => $student->first_name .' '. $student->last_name]) }}</h4>
                  
                </div>

                <div class="card-datatable">
                    {{ $dataTable->table([
                    "class" => "dt-responsive table",
                    "style" => ""
                        ])
                    }}
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ Responsive Datatable -->




<!-- Vertical modal -->
<div class="vertical-modal-ex">
    <button style="display: none;" type="button" id="addAbsenceModalButton" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAbsenceModal">
    </button>
    <!-- Modal -->
    <div class="modal fade" id="addAbsenceModal" tabindex="-1" aria-labelledby="addAbsenceModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="absenceForm" onsubmit="addAbsence(this); return false;">
                    @csrf
                    <input type="hidden" id="absenceStudentId" value="{{$student->id}}" name="student_id">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addAbsenceModalTitle">{{trans('general.new_absence')}}</h5>
                        <button type="button" id="dismissModalButton" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label">{{trans('general.status')}}</label>
                                <select required name="status" class="form-select">
                                    <option value="">--</option>
                                    <option value="delay">{{trans("general.delay")}}</option>
                                    <option value="absence">{{trans("general.absence")}}</option>
                                    <option value="excusedDelay">{{trans("general.excusedDelay")}}</option>
                                    <option value="excusedAbsent">{{trans("general.excusedAbsent")}}</option>
                                    <option value="present">{{trans("general.present")}}</option>

                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="date">{{ trans('general.date') }}</label>
                                <input type="text" name="date" id="date" class="form-control flatpickr-basic" placeholder="YYYY-MM-DD" />
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="details">{{ trans('general.text') }}</label>
                                <textarea required name="details" id="setting-value" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-bs-dismiss="modal">{{trans('general.save')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Vertical modal end-->

@push('scripts')
<script>
    var division = -1;
</script>
{!! $dataTable->scripts() !!}
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="{{ url('design') }}/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>

<script src="{{ url('design') }}/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>


<script>
    // function showAddAbsenceModal(student_id) {
    //     $('#absenceStudentId').val(student_id);
    //     $('#addAbsenceModalButton').click();
    // }
    // (function(window, document, $) {
    //     'use strict';
    //     $('.flatpickr-basic').flatpickr();
    // })(window, document, jQuery);


    // function addAbsence(element) {


    //     formData = $(element).serializeArray().reduce(function(obj, item) {
    //         obj[item.name] = item.value;
    //         return obj;
    //     }, {});

    //     var jqxhr = $.ajax({
    //             url: "{{route('admin.students.absence.create', $student->id)}}",
    //             method: "POST",
    //             timeout: 0,
    //             data: formData
    //         })
    //         .done(function(response) {
    //             console.log(response);
    //             $('#dismissModalButton').click();
    //             $('#attendees-table').DataTable().ajax.reload();
    //             toastr.success(response.msg);
    //             resetAbsenceForm();
    //         })
    //         .fail(function(response) {
    //             console.log(response);
    //             toastr.error(response.responseJSON.msg, '{{ trans("general.error") }}');
    //         });

    // }


    // function resetAbsenceForm() {
    //     $('#absenceForm').trigger("reset");
    // }
</script>

@endpush

@push('header')
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">

<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/vendors-rtl.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
<!-- END: Vendor CSS-->

<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/colors.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/components.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/bordered-layout.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/themes/semi-dark-layout.css">

<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/app-assets/css-rtl/custom-rtl.css">
<link rel="stylesheet" type="text/css" href="{{ url('design') }}/assets/css/style-rtl.css">
<!-- END: Custom CSS-->
@endpush
@endsection