@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('css/custom-student-style.css') }}">

<style>
    .html5buttons {
        direction: ltr;
        position: absolute;
        top: -45px;
        left: 10px;
    }

    .html5buttons .btn-secondary {
        color: #ffffff;
        background-color: #295694;
    }

    .html5buttons .buttons-print {
        background-color: rgb(167, 32, 53);
        color: white;
    }

    .dataTables_filter {
        margin: 20px 0px 20px;
    }

    #min,
    #max {
        max-width: 150px;
        min-width: unset;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem;
        min-height: calc(1.5em + 0.5rem + 2px);
        padding: 0.25rem 0.5rem;
    }

    .dt-datetime-year,
    .dt-datetime-month {
        min-width: unset !important;
        width: 50px !important;
        max-height: 22px !important;
    }

    .dropdown-menu .dropdown-item {
        text-align: right !important;
    }

    tfoot {
        background-color: #36304a !important;
    }

    tfoot p {
        color: white !important;
        font-size: 12px !important;
        font-weight: 100 !important;
    }

    input[type='text'],
    input[type='date'],
    input[type='number'],
    select,
    input[type='text']:focus,
    input[type='date']:focus,
    input[type='number']:focus,
    input[type='text']:focus-visible,
    input[type='date']:focus-visible {
        width: unset;
    }

    #printRevenuesModal img {
        width: 1122.5px;
        height: 135px;
    }

    #printRevenuesModal .student-name {
        width: 40%;
        text-align: right;
        padding-right: 20px;
    }

    tbody tr {
        color: black;
    }

    .custom-table {
        border-top: 1px solid black;
        border-right: 2px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
    }

    .custom-table .col-1,
    .custom-table .col-2,
    .custom-table .col-4,
    .custom-table .col-6,
    .custom-table .attendance-title {
        border: 1px solid black;
        border-collapse: collapse;
    }

    .custom-table .no {
        border-right: black 2px solid;
    }

    .custom-table .attendance-cell .col-1-10 {
        position: relative;
        min-height: 1px;
        border: 1px solid black;
        border-collapse: collapse;
    }

    .custom-table .attendance-cell .col-1-10 {
        width: 10%;
        float: left;
    }

    .custom-table .attendance-cell .col-10-10 {
        position: relative;
        min-height: 1px;
        border: 1px solid black;
        border-collapse: collapse;
    }

    .custom-table .attendance-cell .col-10-10 {
        width: 100%;
        float: left;
    }

    tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.2);
        color: #1A56DB;
    }

    .excluded:focus,
    .orderBy:focus {
        box-shadow: unset !important;
    }

    .sorting_disabled::before,
    .sorting_disabled::after {
        display: none !important;
    }
</style>

<link rel="stylesheet" href="{{ asset('plugins/datatable/css/dateTime.min.css') }}">
@endsection

@section('content')
<div class="container-fluid main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card" id="content">
                <div class="card-header flex justify-between p-3 text-2xl text-blue-700">
                    {{ __('home.classes-attendance-sheet') }}

                    <button class="btn btn-secondary" id="printRevenuesBtn">
                        طباعة
                    </button>
                </div>

                <div class="card-body">
                    <div class="custom-filter row">
                        <form action="{{ route('attendances.filter-classes-attendance-sheet') }}" method="post"
                            id="filterForm">
                            @csrf
                            @include('layouts.filter')

                            <div class="row flex justify-center space-x-2 mt-4">
                                <div class="col-4 flex justify-center px-1">
                                    <button type="submit" style="background-color: #36304a;"
                                        class="mr-3 px-4 py-2 rounded-2 text-white btn" id="studentFilter"
                                        name="filter">
                                        {{__('student.apply-filter') }}
                                    </button>
                                    <a href="{{ route('attendances.classes-attendance-sheet') }}"
                                        style="background-color: #36304a;"
                                        class="bg-danger btn mr-3 px-4 py-2 rounded-2 text-white" id="studentFilter">
                                        {{__('student.reset') }}
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="row flex justify-center pt-8">
                        <div class="grid grid-cols-1 gap-4 col-8">
                            <div>
                                <table class="text-right text-sm w-full">
                                    <tr>
                                        <td class="border-2 border-gray-300 col-6 font-bold p-2 px-3 text-right">
                                            <div class="flex justify-around row">
                                                <div class="col-6">الكلية</div>
                                                <div class="col-6">
                                                    {{ isset($college) ? $college->name : '' }}
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border-2 border-gray-300 col-6 font-bold p-2 px-3 text-right">
                                            <div class="flex justify-around row">
                                                <div class="col-6">الدفعة</div>
                                                <div class="col-6">
                                                    {{ isset($batch) ? $batch->value : '' }}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="border-2 border-gray-300 col-6 font-bold p-2 px-3 text-right">
                                            <div class="flex justify-around row">
                                                <div class="col-6">القسم</div>
                                                <div class="col-6">
                                                    {{ isset($section) ? $section->name : '' }}
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border-2 border-gray-300 col-6 font-bold p-2 px-3 text-right">
                                            <div class="flex justify-around row">
                                                <div class="col-6">البرنامج</div>
                                                <div class="col-6">
                                                    {{ isset($program) ? $program->name : '' }}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div id="studentsListTable" class="mt-4">
                                <table class="table" id="studentsTable" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th class="border-2 col-1 font-bold p-2 text-center text-white">#</th>
                                            <th class="border-2 col-1 font-bold text-center text-white">
                                                رقم الطالب
                                                {{-- <input type="checkbox" value="byId"
                                                    class="orderBy w-4 h-4 text-blue-600 bg-gray-300 rounded float-left">
                                                --}}
                                            </th>
                                            <th class="border-2 col-2 font-bold p-2 text-center text-white">
                                                اسم الطالب
                                                {{-- <input type="checkbox" value="byName"
                                                    class="orderBy w-4 h-4 text-blue-600 bg-gray-300 rounded float-left">
                                                --}}
                                            </th>
                                            <th class="border-2 col-2 font-bold p-2 text-center text-white"
                                                colspan="10">الحضور</th>
                                            <th class="border-2 col-1 font-bold p-1 text-center text-white">استبعاد</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if ( isset($students) )
                                                                                @foreach ($students as $student)
                                        <tr>
                                            <td class="border-2 border-gray-300 text-center">
                                                {{ $no }}
                                            </td>
                                            <td class="border-2 border-gray-300 text-center">
                                                {{ $student->student_id }}
                                            </td>
                                            <td class="border-2 border-gray-300 text-right pr-5 w-2/6">
                                                {{ $student->student_name }}
                                            </td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 col-1 text-center px-3"
                                                style="width: 10px;">&nbsp;</td>
                                            <td class="border-2 border-gray-300 text-center">
                                                <input type="checkbox"
                                                    class="excluded w-4 h-4 text-blue-600 bg-gray-300 rounded"
                                                    value="{{ $student->student_id }}" {{ $student->excluded == 1 ?
                                                'checked' : '' }}>
                                            </td>
                                        </tr>
                                                                                @endforeach
                                        @endif
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="border-2 col-1 font-bold p-2 text-center text-white">#</th>
                                            <th class="border-2 col-1 font-bold text-center text-white">
                                                رقم الطالب
                                                {{-- <input type="checkbox" value="byId"
                                                    class="orderBy w-4 h-4 text-blue-600 bg-gray-300 rounded"> --}}
                                            </th>
                                            <th class="border-2 col-2 font-bold p-2 text-center text-white">
                                                اسم الطالب
                                                {{-- <input type="checkbox" value="byName"
                                                    class="orderBy w-4 h-4 text-blue-600 bg-gray-300 rounded"> --}}
                                            </th>
                                            <th class="border-2 col-2 font-bold p-2 text-center text-white"
                                                colspan="10">الحضور</th>
                                            <th class="border-2 col-1 font-bold p-1 text-center text-white">استبعاد</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- modal --}}
    <div hidden>
        <div class="flex justify-center" id="printRevenuesModal">
            <div class="grid grid-cols-1 gap-4">
                <img src="{{ asset('img/') . env('SYSTEM_BANAR') }}" alt="">

                <h1 class="font-bold text-2xl text-center">قوائم حضور الطلاب</h1>

                <div class="custom-table">
                    <div class="row" dir="rtl">
                        <div class="col-6 flex justify-between">
                            <span class="text-right mr-4 font-bold">الكلية : </span>
                            <span class="text-right mr-4">
                                {{ isset($college) ? $college->name : '' }}
                            </span>
                        </div>
                        <div class="col-6 flex justify-between">
                            <span class="text-right mr-4 font-bold">الدفعة : </span>
                            <span class="text-right mr-4">
                                {{ isset($batch) ? $batch->value : '' }}
                            </span>
                        </div>
                    </div>
                    <div class="row" dir="rtl">
                        <div class="col-6 flex justify-between">
                            <span class="text-right mr-4 font-bold">القسم : </span>
                            <span class="text-right mr-4">
                                {{ isset($section) ? $section->name : '' }}
                            </span>
                        </div>
                        <div class="col-6 flex justify-between">
                            <span class="text-right mr-4 font-bold">البرنامج : </span>
                            <span class="text-right mr-4">
                                {{ isset($program) ? $program->name : '' }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="custom-table">
                    <div class="row" dir="rtl">
                        <div class="col-1 text-center">#</div>
                        <div class="col-2 text-center">رقم الطالب</div>
                        <div class="col-4 text-center">اسم الطالب</div>
                        <div class="col-5 text-center attendance-cell">
                            <div class="col-10-10">الحضور</div>
                        </div>
                    </div>
                    @if ( isset($students) )
                                        @foreach ($students as $student)
                    <div class="row allPrintedStudents" dir="rtl" data-id="{{ $student->student_id }}">
                        <div class="col-1 text-center no">{{ $no }}</div>
                        <div class="col-2 text-center">{{ $student->student_id }}</div>
                        <div class="col-4 text-rigth">{{ $student->student_name }}</div>
                        <div class="col-5 text-center attendance-cell">
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                            <div class="col-1-10">&nbsp;</div>
                        </div>
                    </div>
                                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endsection

    @section('scripts')
    <script src="{{ asset('plugins/datatable/js/sum().js') }}"></script>
    <script src="{{ asset('plugins/datatable/js/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/datatable/js/dateTime.min.js') }}"></script>
    <script src="{{ asset('js/divjs.js') }}"></script>

    <script>
        $(document).ready(function () {
        let _sortById = "";
        let _sortByName = "";
        let _excludedStudents = new Array();

        dataTable = $("#studentsTable").DataTable({
            "responsive": false,
            "lengthChange": false,
            "autoWidth": false,
            "searching": true,
            "paging": false,
            "ordering": true,
            "info": false,
            "deferRender": true,
            // "buttons": ["copyHtml5", "csv", "excel", "pdf", "print", "colvis"],

            "oLanguage": {
                "sSearch": "بحث ",
                "sEmptyTable": "لا توجد بيانات متوفرة في الجدول",
            },
            "aoColumnDefs": [
                { "sClass": "studentId", "aTargets": [1] },
                { "sClass": "studentName", "aTargets": [2] }
            ],
        });

        $('#college, #section, #program, #batch, #bank, #admission, #constraint').each( function (){
            $(this).change(function (e) { 
                e.preventDefault();
                
                $('#studentFilter').click();
            });
        });

        $('#printRevenuesBtn').click(function(){
            let _students = $('.allPrintedStudents');
            let _no = 1;

            $('.excluded:checkbox:checked').each(function () {
                _excludedStudents.push((this.checked ? $(this).val() : ""));
            });

            _students.each(function () {
                if($.inArray($(this).data("id"), _excludedStudents) > -1) {
                    $($(this)).attr("hidden", true);
                } else {
                    $(this).find(".no").html(_no);
                    _no++;
                }
            });

            $('#printRevenuesModal').printElement();
        });

        $('.studentId').click(function (e) { 
            e.preventDefault();

            _sortById = $(this).attr('aria-sort') == 'ascending' ? 'asc' : 'desc';
            _sortByName = null;

            $.ajax({
                type: "POST",
                url: "{{ route('sort.table.by') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    table_name: 'students',
                    sort_by_name: _sortByName,
                    sort_by_id: _sortById,
                },
                success: function (response) {
                    location.reload();
                },
                error: function (response) {
                    // console.log(response);
                }
            });

            // console.log(" sortByName: " + _sortById + " sortByName: " + _sortByName);
        });

        $('.studentName').click(function (e) { 
            e.preventDefault();
            
            _sortById = null;
            _sortByName = $(this).attr('aria-sort') == 'ascending' ? 'asc' : 'desc';

            $.ajax({
                type: "POST",
                url: "{{ route('sort.table.by') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    table_name: 'students',
                    sort_by_name: _sortByName,
                    sort_by_id: _sortById,
                },
                success: function (response) {
                    location.reload();
                },
                error: function (response) {
                    // console.log(response);
                }
            }).then( function() {
                
            });
        });

        $('.excluded').change(function (e) { 
            e.preventDefault();
            let id = $(this).val();

            $.ajax({
                type: "POST",
                url: "{{ route('exclude.student') }}",
                data: {
                    studentId: id,
                    _token: "{{ csrf_token() }}",
                },
                success: function (response) {
                },
                error: function (response) {
                    // console.log(response); 
                }
            });
        });

    });
    </script>
    @endsection