@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.students") }}</h4>
                    <div>
                        <button type="button" id="uploadExcelFileModalButton" class="btn btn-outline-primary mt-0" data-bs-toggle="modal" data-bs-target="#uploadExcelFileModal">
                            {{ trans("general.upload_students_file") }}
                        </button>
                        <a href="{{ route('admin.students.create') }}" class="btn btn-outline-primary waves-effect mt-0">{{ trans("general.add_student") }}</a>
                    </div>
                </div>
                <div class="mt-2 mx-auto" style="max-width: 300px; min-width: 200px;">
                    <form id="division-select-form" method="get">
                        <select onchange="getStudentsData()" name="division_id" class="form-select" id="basicSelect">
                            <option value="">{{trans('general.all-divisions')}}</option>
                            @foreach($divisions as $division)
                            <option value="{{ $division->id }}">

                                {{ $division->stage }} |
                                {{ $division->level }} |
                                {{ $division->title }} |

                            </option>
                            @endforeach
                        </select>
                    </form>
                </div>
                <hr>


                @if(session()->has('validation_msg'))
                @if(is_array(session('validation_msg')))
                @foreach (session('validation_msg')->all() as $msg)
                <div class="alert alert-danger alert-dismissible fade show" style="padding: 0.71rem 1rem;" role="alert">
                    <?php echo $msg; ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endforeach
                @else
                <div class="alert alert-danger alert-dismissible fade show" style="padding: 0.71rem 1rem;" role="alert">
                    <?php echo session('validation_msg'); ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif
                {{session()->forget('validation_msg')}}
                @endif

                <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="addNoteModalButton" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addNoteModal">
    </button>
    <!-- Modal -->
    <div class="modal fade" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                @can('manageAny', App\Models\StudentNote::class)
                <form onsubmit="addNote(this); return false;">
                    @csrf
                    <input type="hidden" id="noteStudentId" name="student_id">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNoteModalTitle">{{trans('general.new_note')}}</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" for="text">{{ trans('general.text') }}</label>
                                <textarea required name="text" id="setting-value" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label">{{trans('general.type')}}</label>
                                <select required name="type" class="form-select">
                                    <option value="">--</option>
                                    @foreach($noteTypes as $type)
                                    <option value="{{ $type->id }}">{{ trans('general.'.$type->code) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-bs-dismiss="modal">{{trans('general.save')}}</button>
                    </div>
                </form>
                @else
                <div class="modal-body px-sm-5 pb-5" id="">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">{{trans('general.You do not have permission to manage StudentNotes.')}}</h1>
                    </div>
                </div>
                @endcan
            </div>
        </div>
    </div>
</div>
<!-- Vertical modal end-->


<!-- Vertical modal -->
<div class="vertical-modal-ex">
    <!-- Modal -->
    <div class="modal fade" id="uploadExcelFileModal" tabindex="-1" aria-labelledby="uploadExcelFileModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('admin.students.excel.create') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="uploadExcelFileModalTitle">{{trans('general.upload_students_file')}}</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">
                                <input type="file" class="form-control" name="studentsExcel" id="studentsExcel">
                            </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>
    function showAddNoteModal(student_id) {
        $('#noteStudentId').val(student_id);
        $('#addNoteModalButton').click();
    }

    function addNote(element) {


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

        var jqxhr = $.ajax({
                url: "{{route('admin.notes.create')}}",
                method: "POST",
                timeout: 0,
                data: formData
            })
            .done(function(response) {
                console.log(response);
                $('#dismissModalButton').click();
                toastr.success(response.msg);
            })
            .fail(function(response) {
                console.log(response);
                toastr.error(response.responseJSON.msg, '{{ trans("general.error") }}');
            });

    }

    function getStudentsData() {
        $('#students-table').DataTable().ajax.reload();
    }

    function uploadExcelFile(element) {

        var form = new FormData();

        form.append("studentsExcel", $("#studentsExcel")[0].files[0]);

        var jqxhr = $.ajax({
                url: "{{ route('admin.students.excel.create') }}",
                method: "POST",
                timeout: 0,
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: form
            })
            .done(function(response) {
                console.log(response);
                toastr.success("{{trans('general.record_added_successfully')}}");
                $('#examprograms-table').DataTable().ajax.reload();
                $('#dismissModalButton').click();
            })
            .fail(function(response) {
                console.log(response);
                toastr.error(response.responseJSON.msg, '{{ trans("general.error") }}');
            });

    }
</script>

@endpush

@push('header')

<!-- 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