@extends('../layout/' . $layout)

@section('subhead')
<title>Atarud MIS - Student Attendance</title>
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
<div class="flex items-center mt-8">
    <h2 class="intro-y text-lg font-medium mr-auto">Student Attendance</h2>
</div>

<div class="grid grid-cols-12 gap-6 mt-6">
    <!-- BEGIN: Data List -->
    <div class="intro-y col-span-12 overflow-auto lg:overflow-visible" >
        <div class="overflow-x-auto">
            <form method="get" action="{{ route('print.resultsheet') }}">
                @csrf
                <table class="table">
                    <thead class="table-light">
                        <tr>
                            <th>Select Program</th>
                            <th>Select Semester</th>
                            <th>Select Section</th>
                            <th>Select Course</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="Program" class="form-control" data-validate="required" id="program_id"
                                    data-message-required="value_required " onchange="get_class_semesters(this.value)">
                                    <option value="">Select Progarm</option>
                                    @foreach ($programs as $row)
                                        <option value="{{ $row->id }}">
                                            {{ $row->title }}
                                        </option>
                                    @endforeach;
                                </select>
                            </td>
                            <td>
                                <select name="semester_id" class="form-control" data-validate="required"
                                    id="semester_id" data-message-required=" value_required "
                                    onchange="getSection(this.value)">
                                    <option value="">Select Semester</option>
                                </select>
                            </td>
                            <td>
                                <select name="section_id" class="form-control" data-validate="required" id="section_id"
                                    data-message-required=" value_required " onchange="get_section_courses(this.value)">
                                    <option value="">Select Section</option>
                                </select>
                            </td>
                            <td>
                                <select name="course_id" class="form-control" id="section_selector_holder">
                                    <option value="">Select Class</option>
                                </select>
                            </td>
                            <td>
                                <input name="date"  type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" id="date">
                            </td>
                            <td>
                                <input type="button" onclick="return marks();" value="Show"
                                    class="btn btn-sm btn-primary" style="display: inline;">
                            </td>
                        </tr>
                    </tbody>

                </table>
            </form>

        </div>
        {{-- @if(!$event_holiday && $official_holiday) --}}
        <div style="margin-left: 20px; margin-top:20px;">
        <button type="button" class="btn btn-sm btn-twitter  mr-1 mb-2" title="Save" id="save_btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="save" data-lucide="save" class="lucide lucide-save block mx-auto">
            <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
        </button>
        <div class="dropdown inline-block" data-tw-placement="bottom-end">

        <button class="dropdown-toggle btn btn-sm btn-twitter  mr-1 mb-2" id="operate_btn" aria-expanded="false" data-tw-toggle="dropdown">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" icon-name="edit" data-lucide="edit" class="lucide lucide-edit block mx-auto">
            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
        </button>
        <div class="dropdown-menu w-40">
            <ul class="dropdown-content">
                <li><a href="javascript:void(0)" class="dropdown-item" role="menuitem" onclick="operate(5)">Tardy</a></li>
                <li><a href="javascript:void(0)" class="dropdown-item" role="menuitem" onclick="operate(1)">Present</a></li>
                <li><a href="javascript:void(0)" class="dropdown-item" role="menuitem" onclick="operate(0)">Absent</a></li>
                <li><a href="javascript:void(0)" class="dropdown-item" role="menuitem" onclick="operate(2)">Leave</a></li>
                <li><a href="javascript:void(0)" class="dropdown-item"role="menuitem" onclick="operate(4)">Holiday</a></li>
            </ul>
        </div>
    </div>
        </div>
        <div class="overflow-x-auto" style="border-radius:5px; border:1px solid #e5e7eb; background-color: white;">
                <div id="details">

                </div>
        </div>
        {{-- @endif --}}
        <!-- END: Data List -->
    </div>

@endsection
@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY/MM/DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    var attState = 0;
$(document).ready(function(){
    $('#sms_btn').attr('disabled', true);
    $('#save_btn').attr('disabled', true);
    $('#operate_btn').attr('disabled', true);

});
/* --------------------------------------------------------
| Perform Operation on Selected Rows
---------------------------------------------------------*/
function operate(type=0){
    var state, state_type;
    attState = type;
    if(type == 1){
        state = 'Present'; state_type = 'success';
        $('.std').each(function(){
        if($(this).find('.select_item').prop('checked')){
            $(this).find('input[name="arrival"]').prop('disabled', false);
            $(this).find('input[name="departure"]').prop('disabled', false);
        }
        });
    } else if(type == 2){
        state = 'Leave'; state_type = 'warning';
        $('.std').each(function(){
        if($(this).find('.select_item').prop('checked')){
            $(this).find('input[name="arrival"]').prop('disabled', true);
            $(this).find('input[name="departure"]').prop('disabled', true);
        }
        });
    }else if(type == 4){
        state = 'Holiday'; state_type = 'primary';
        $('.std').each(function(){
        if($(this).find('.select_item').prop('checked')){
            $(this).find('input[name="arrival"]').prop('disabled', true);
            $(this).find('input[name="departure"]').prop('disabled', true);
        }
        });
    }
    else if(type == 5){
        state = 'Tardy'; state_type = 'default';
        $('.std').each(function(){
        if($(this).find('.select_item').prop('checked')){
            $(this).find('input[name="arrival"]').prop('disabled', false);
            $(this).find('input[name="departure"]').prop('disabled', false);
        }
        });
    } else  {
        state = 'Absent'; state_type = 'danger';
        $('.std').each(function(){
        if($(this).find('.select_item').prop('checked')){
            $(this).find('input[name="arrival"]').prop('disabled', true);
            $(this).find('input[name="departure"]').prop('disabled', true);
        }
        }); }


    $('.std').each(function(){
    if($(this).find('.select_item').prop('checked'))
    $(this).find('.state').html('<span class="text-xs px-1 bg-'+ state_type +' text-yellow mr-1">'+ state +'</span>');
    });

    $('#save_btn').attr('disabled', false);
}
 /* --------------------------------------------------------
| Count a Selected Rows
---------------------------------------------------------*/
function count_selected(){
    var count = 0;
    $('.select_item').each(function(){
        var check = $(this).prop('checked');

        if(check == true)
        ++count;
    });

    if(count > 0)
    $('#operate_btn').attr('disabled', false);

    else{
        $('#operate_btn').attr('disabled', true);
        $('#save_btn').attr('disabled', true);
    }
    return count;
}
    /* --------------------------------------------------------
| Select a Single Row
---------------------------------------------------------*/
function select_row(){
    is_all_selected();
}
/* --------------------------------------------------------
| Check if all rows are selected
---------------------------------------------------------*/
function is_all_selected(){
    var all_rows = 0;
    $('.select_item').each(function(){
        ++all_rows;
    });

    var selected_rows = count_selected();

    if(all_rows == selected_rows)
    $('#select_all').prop('checked', true);

    else
    $('#select_all').prop('checked', false);

}
/* --------------------------------------------------------
| Select All Rows
---------------------------------------------------------*/
function select_all(ex){
    var state = $(ex).prop('checked');
    $('.select_item').each(function(){
        $(this).prop('checked', state);
    });
    is_all_selected();
}

function marks() {
    var program = document.getElementById('program_id').value;
    var semester = document.getElementById('semester_id').value;
    var section = document.getElementById('section_id').value;
    var course = document.getElementById('section_selector_holder').value;
    var date = document.getElementById('date').value;
    $.ajax({
        method: 'get',
        url: "{{ route('manage.student.attendance') }}",
        data: {
            program_id: program,
            semester_id: semester,
            section_id: section,
            course_id: course,
            date: date,
        },
        success: function(response) {
            console.log(response);
            jQuery('#details').html(response);
        }
    });
}

function get_class_semesters(program_id) {
    $.ajax({
        method: 'GET',
        url: "{{ url('/get/program/semester/') }}",
        data: {
            p_id: program_id,
        },
        success: function(response) {
            jQuery('#semester_id').html(response);
        }
    });
}

function get_section_courses(section_id) {
    $.ajax({
        method: 'GET',
        url: "{{ url('/get/section/course/') }}",
        data: {
            s_id: section_id,
        },

        success: function(response) {
            jQuery('#section_selector_holder').html(response);
        }
    });
}
function getSection(semester_id) {
    $.ajax({
        method: 'GET',
        url: "{{ url('/get/semester/section/') }}",
        data: {
            s_id: semester_id,
        },
        success: function(response) {
            jQuery('#section_id').html(response);
        }
    });
}

     // new way of taking attendance
       $(document).ready(function() {
            $('#save_btn').click(function() {
                $('.form-check-input').prop('checked', $(this).prop('checked'));
            });
            $('#save_btn').click(function(e) {
                e.preventDefault();
                var all_ids = [];
                $('input:checkbox[name=ids]:checked').each(function(){
                    all_ids.push($(this).val());
                });
                var arrival = $('input[name="arrival"]').val();
                var departure = $('input[name="departure"]').val();
                var date = $('input[name="date"]').val();
                var program_id  = $('input[name="program_id"]').val();
                var semester_id  = $('input[name="semester_id"]').val();
                var section_id  = $('input[name="section_id"]').val();
                var course_id  = $('input[name="course_id"]').val();
                var status     = $(this).find('.state').text();

                $.get("{{ url('/save/student/attendance/') }}",
                {
                program_id:program_id,
                date: date,
                section_id:section_id,
                semester_id:semester_id,
                course_id:course_id,
                arrival:arrival,
                departure:departure,
                status:attState,
                ids: all_ids,
                },
                function(data){
                    console.log(data);
                    var msg = "";
                    if(data == 'Updated Succesfully' || data == "Created Succesfully"){
                        msg = "Attendance Saved Successfully!";
                        Swal.fire(msg);
                    }else{
                        msg = "Problem Adding Attendance";
                        Swal.fire(msg);
                    }
                }
        );

            });
        });
</script>
@endsection