@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Attendance</title>

@include('datepicker')

@section('main-content')
        <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Teacher deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif
        </div>
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->

        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Attendance </span></h4>

            @if (isset($attendance))
                <div class="card p-3">
                    <div class="alert alert-success w-50">
                        {{ Auth::user()->first_name . ' ' . Auth::user()->last_name . ' your attendance has been marked successfully for today.' }}
                    </div>

                    <div class="row">
                        @if ($attendance->image)
                            <div>
                                <h5 class="text-info">Attendance Image</h5>
                                <img src="{{ $attendance->image }}" alt="attendance_img" class="img-thumbnail"
                                    width="300" height="300" />
                            </div>
                        @else
                            <div class="text-info ms-2">Not uploaded any picture while marking an attendance.</div>
                        @endif
                    </div>
                </div>
            @endif

            <div class="row {{ isset($attendance) ? 'd-none' : '' }}">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <h5 class="card-header">Add Details</h5>
                        <!-- Account -->
                        <form enctype="multipart/form-data" class="form-horizontal form-material mx-2">
                            @csrf
                            <div class="card-body">
                                <div class="d-flex align-items-start align-items-sm-center gap-4">

                                    <div class="button-wrapper">

                                        <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                            <span class="d-none d-sm-block">Upload your photo</span>
                                            <i class="bx bx-upload d-block d-sm-none"></i>
                                            <input type="file" id="upload" name="image"
                                                class="account-file-input uploaded_img" hidden
                                                accept="image/png, image/jpeg" />
                                        </label>
                                        <button type="button" class="btn btn-outline-secondary account-image-reset mb-4"
                                            id="user_img_reset">
                                            Reset
                                        </button>
                                    </div>
                                </div>
                                <div id="image"></div>
                            </div>
                            <div class="card-body">
                                <div class="mt-2">
                                    <div class="form-group">
                                        <label class="form-label" for="registered_email">Your Registered Email</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-gender" class="input-group-text"><i
                                                    class="bx bx-paste"></i></span>
                                            <input class="form-input form-control bg-white" placeholder="example@mail.com"
                                                id="registered_email" autocomplete="off" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-0" />
                            <div class="card-body">
                                <div class="mt-2">
                                    <button type="button" class="btn btn-primary me-2" onclick="submitAttendance()"
                                        id="save_changes">Mark Today's Attendance</button>
                                </div>
                            </div>
                        </form>
                        <!-- /Account -->
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->


        <div class="content-backdrop fade"></div>
        <!-- The Modal -->
        {{-- <div id="myModal" class="modal" style="padding-top: 50px;">

    <!-- Modal content -->
        <div class="modal-content" style="width: 40%;">
        <div>
            <span class="close text-end">&times;</span>
        </div>
        <h4 class="text-center">Leave Details</h4>
        <input type="hidden" id="leave_id"/>
        <div class="text-center">
            <img src="{{URL::asset('assets/images/users/avatar.jpg')}}" id="student_pic" height="200" width="200"/>
        </div>
        <div id="stu_name" class="text-center">Student Name: Jaskaran Singh</div>
        <div id="leave_applied_on" class="text-center">Leave Applied On: 16-05-2024</div>
        <div id="leave_starts_on" class="text-center">Leave Start Date: 16-05-2024</div>
        <div id="leave_ends_on" class="text-center">Leave End Date: 16-March-2024 at 09:11 AM</div>
    
        <div id="leave_action" class="text-center">Action: Pending</div>
        <div id="leave_action_taken_on" class="text-center">Action Taken on: 16-05-2024</div>
        <br/>
        <div class="text-center">Applier's Remarks/Reasons:</div>
        <p id="leave_desc">Some text in the Modal..</p>
        <a href="javaScript:void(0);" class="d-none" id="leave_attachment" target="_blank">View Attachment</a>
        <div class="text-center">
            <a class="btn btn-success text-white mx-2 add_status_to_request" data-status='1' id="approve_btn" href="javascript:void(0);">Approve</a>
            <a class="btn btn-danger  text-white mx-2 add_status_to_request" data-status='2' id="reject_btn" href="javascript:void(0);">Reject</a>
        </div>
        <br/>
        <div class="text-center d-none" id="disp_leave_msg">Processing your request</div>
        </div>
    
    </div> --}}
    </div>
    <!-- Content wrapper -->
    <script>
        // jQuery(function($) {
        //     let maxi = new Date(),mini=new Date();
        //     maxi.setFullYear(maxi.getFullYear() - 18);
        //     mini.setFullYear(mini.getFullYear() - 70);
        //     $("#date_of_birth").datepicker({
        //     dateFormat: "dd-mm-yy", defaultDate: maxi, 
        //     minDate:mini, maxDate: maxi,
        //     changeMonth: true, changeYear: true, yearRange: "c-52:c",
        //     });
        // });

        function openingModal() {
            var modal = document.getElementById("myModal");

            // Get the button that opens the modal
            // var btn = document.getElementById("myBtn_"+id);

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // let student_pic = document.getElementById("student_pic");
            // student_pic.setAttribute('src',user_pic);

            // let leave_desc=document.getElementById("leave_desc");
            // leave_desc.innerText=desc;

            // let stu_name=document.getElementById("stu_name");
            // stu_name.innerText="Student Name: "+name;

            // let leave_applied_on=document.getElementById("leave_applied_on");
            // leave_applied_on.innerText="Leave Applied On: "+leave_applied_date;

            // let leave_starts_on=document.getElementById("leave_starts_on");
            // leave_starts_on.innerText="Leave Start Date: "+leave_start;

            // let leave_ends_on=document.getElementById("leave_ends_on");
            // leave_ends_on.innerText="Leave End Date: "+leave_end;

            // action="";
            // if(status==0)action+="Pending";
            // else if(status==1)action+="Approved";
            // else if(status==2)action+="Rejected";
            // let leave_action=document.getElementById("leave_action");
            // leave_action.innerText="Action: "+action;

            // const approve_btn = document.getElementById("approve_btn");
            // const reject_btn = document.getElementById("reject_btn");
            // if(status==1){
            //     approve_btn.classList.add('d-none');
            // }else if(status==2){
            //     reject_btn.classList.add('d-none');
            // }else{
            //     approve_btn.classList.remove('d-none');
            //     reject_btn.classList.remove('d-none');
            // }


            // let leave_action_taken_on = document.getElementById('leave_action_taken_on');
            // if(status==1 || status==2){
            //     leave_action_taken_on.innerText="Action Taken On: "+action_taken;
            // }else{
            //     leave_action_taken_on.innerText="";
            // }

            // let leave_attachment = document.getElementById('leave_attachment');

            // if(attachment){
            //     leave_attachment.setAttribute('href',attachment);
            //     leave_attachment.classList.remove('d-none');
            // }else{
            //     leave_attachment.setAttribute('href','');
            //     leave_attachment.classList.add('d-none');
            // }

            // When the user clicks the button, open the modal 
            // btn.onclick = function() {
            modal.style.display = "block";
            // }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
                // approve_btn.classList.remove('d-none');
                // reject_btn.classList.remove('d-none');
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        function allowNumberOnly(evt) {
            var theEvent = evt || window.event;
            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
                // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if (!regex.test(key) && evt.keyCode != 8) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault) theEvent.preventDefault();
            }
        }
        let reset_img = false;
        $("#user_img_reset").on("click", (e) => {
            e.stopPropagation();
            if ("{{ Auth::user()->profile_photo_path }}" != null) {
                $("#uploadedAvatar").addClass('d-none');
                $("#showAvatar").removeClass('d-none');
                $("#notSetImg").removeClass('d-block').addClass('d-none');
                reset_img = true;
            }
        });

        function submitAttendance() {
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('#save_changes').prop("disabled", true);

            const image = $("#upload").prop('files')[0];
            let formData = new FormData();
            formData.append("image", image ? image : "");
            formData.append("registered_email", $('#registered_email').val());
            $.ajax({
                url: '/submitAttendance',
                type: 'POST',
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(resp) {
                    const status = resp["status"];
                    if (status === 400) {
                        const errors = resp["errors"];
                        const message = resp["message"];
                        if (errors) {
                            $.each(errors, function(field_name, error) {
                                // Check if the error message for the field already exists
                                if (!$(`#${field_name}`).closest('div').next().hasClass(
                                        'text-danger')) {
                                    $(`#${field_name}`).addClass('is-invalid');
                                    $(`#save_changes`).after('<div class="text-strong text-danger">' +
                                        error +
                                        '</div>');
                                }
                            });
                        } else if (message) {
                            $(`#save_changes`).after('<div class="text-strong text-danger">' + message +
                                '</div>');
                        }

                    } else {
                        alert('Attendance Marked Successfully');
                        window.location.reload();
                    }

                    $('#save_changes').prop("disabled", false);

                },
                error: function(resp) {

                }
            });
        }

        // function savechanges() {
        //     $('.text-danger').remove();
        //     $('#save_changes').prop("disabled",true);
        //     // Show loader while the request is being processed
        //     $('#loader').show();
        //     let formData = new FormData();
        //     const uploaded_img = $('.uploaded_img').prop('files')[0];
        //     const user_id = $('#user_id').val();
        //     // const email = $('#email').val();
        //     const fname = ($('#fname').val()).trim();
        //     const lname = ($('#lname').val()).trim();
        //     // const phone = $('#phone').val();
        //     const gender = $('#gender').val();
        //     // const education = $('#education').val();
        //     const dob = ($("#date_of_birth").val()).trim();
        //     const education_type = $("#education_type").val();
        //     const course_name = ($("#course_name").val()).trim();
        //     const course_specialization = ($("#course_specialization").val()).trim();
        //     const experience_years = ($("#experience_years").val()).trim();
        //     const experience_months = ($("#experience_months").val()).trim();

        //     formData.append('fname', fname);
        //     formData.append('lname', lname);
        //     // formData.append('email', email)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
        //     formData.append('gender', gender);
        //     formData.append('date_of_birth', dob);
        //     formData.append('education_type', education_type);
        //     formData.append('course_name', course_name);
        //     formData.append('course_specialization', course_specialization);
        //     // formData.append('experience_years', experience_years);
        //     // formData.append('experience_months', experience_months);
        //     if (uploaded_img) {
        //         formData.append('user_img', uploaded_img);
        //     }
        //     if(reset_img){
        //         formData.append('reset_img', "yes");
        //     }else{
        //         formData.append('reset_img', "no");
        //     }

        //     $.ajax({
        //         type: "post",
        //         url: "/update-teacher-profile",
        //         contentType: 'multipart/form-data',
        //         cache: false,
        //         contentType: false,
        //         processData: false,
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         data: formData,
        //         success: function(data) {
        //             if(data["status"]=="success") window.location.reload();
        //             else {
        //                 $.each(data.errors, function(field_name, error) {
        //                     if (!$('#' + field_name + '').closest('div').next().hasClass('text-danger')) {
        //                         $('#' + field_name + '').closest('div').after('<span class="text-strong text-danger">' + error + '</span>');
        //                     }
        //                 });
        //                 if(data.errors["user_img"]){
        //                     $("#save_changes").closest('div').before('<span class="text-strong text-danger">' + data.errors["user_img"] + '</span>');
        //                 }
        //                 if(data.errors){
        //                     $("#save_changes").closest('div').before('<span class="text-strong text-danger"> Some required fields are missing. </span>');
        //                 }
        //             }
        //             $('#save_changes').prop("disabled",false);
        //         },
        //         error: function() {
        //             $('#loader').hide();
        //             $('#save_changes').prop("disabled",false);
        //         },
        //         complete: function() {
        //             $('#loader').hide();
        //             $('#save_changes').prop("disabled",false);
        //         }
        //     });
        // }
    </script>
@endsection