@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

 @section('css')   {{-- for Persian DatePicker--}}
    <link rel="stylesheet" href="{{asset('assets/persian/css/persianDatepicker-default.css')}}" />
    <link rel="stylesheet" href="{{asset('assets/persian/css/persianDatepicker-dark.css')}}" />
    <link rel="stylesheet" href="{{asset('assets/persian/css/persianDatepicker-latoja.css')}}" />
    <link rel="stylesheet" href="{{asset('assets/persian/css/persianDatepicker-melon.css')}}" />
    <link rel="stylesheet" href="{{asset('assets/persian/css/persianDatepicker-lightorang.css')}}" />
    <link rel="stylesheet" href="{{asset('assets/persian/calendar/calendar-blue.css')}}">
    <link rel="stylesheet" href="{{asset('assets/persian/calendar/calendar-blue.css')}}" >
@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- Info boxes -->
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <x-card-header page-title="{{ __('attendance.add_new_attendance') }}" scenario="1" /> 
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body" id="panigationResultID"  style="margin-bottom: 14em;">
                            
                            @csrf
                            <form method="POST"  action="{{ route('store_attendance')}}"  id="storeNewAttendance">
                                <div class="col-lg-12 mt-3">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label for="attendance_date" class="form-label">{{ __('attendance.attendance_date') }} <span class="required">*</span></label>
                                                    <div class="cal-icon mb-2">
                                                        <input type="text" class="form-control attendance_date" name="r_attendance_date" id="attendance_date" placeholder="{{ __('attendance.select_day') }}" autocomplete="off" value=""/>
                                                    </div>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="mt-2 alert alert-danger hiddens" id="alert"></div>
                                                </div>
                                            </div>

                                            <div class="result" id="result"></div>
                                        </div>
                                    </div>
                                </div>

                            </form><!-- End Multi Columns Form -->

                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>

                
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- for Persian DatePicker --}}
    <script src="{{asset('assets/persian/js/persianDatepicker.js')}}"></script>
    <script src="{{asset('assets/persian/jalali.js')}}"></script>
    <script src="{{asset('assets/persian/calendar.js')}}"></script>
    <script src="{{asset('assets/persian/calendar-setup.js')}}"></script>

    <script>
        $(document).ready(function(){

            $("#attendance_date").persianDatepicker({
                initialValue: false,
                format: 'YYYY-MM-DD', // changed from '/' to '-'
                autoClose: true,
                onSelect: function () {
                    $('#attendance_date').trigger("change");
                }
            });

            $(document).on("change", ".attendance_date", function (e) {
                let date = $('#attendance_date').val();

                if (date && date.trim() !== '') {
                    $('#attendance_date').css("border", "");
                    $('.text-danger').hide();

                    $.ajax({
                        url: "{{ route('getSingleDayEmployeeTeacherInsert') }}",
                        method: "GET",
                        data: { date: date },
                        success: function (response) {
                            if (response.html !== '' && response.status === 'success') {
                                $('#alert').hide();
                                $('#result').html(response.html);
                            } else {
                                $('#result').html('');
                                $('#alert').html(response.message);
                                $('#alert').show();
                            }
                        },
                        error: function (xhr, status, error) {
                            console.error('Form submission failed', error);
                        }
                    });
                } else {
                    $('#attendance_date').css("border", "1px solid #F00");
                    $('.span').html(required);
                    $('.text-danger').show();
                }
            });

             // Delete Event
            $(document).on("click", ".deleteButton", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var date = $(this).attr('data-date');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/' + newRoute;
                
                // Show the confirmation modal
                $("#confirmModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { date: date },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#confirmModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                        window.location.href = '{{ route("get_employee_attendances") }}';
                                }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#confirmModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

            $(document).on("click", ".viewHoliday", function(){
                var date = $(this).attr('data-date');

                $.ajax({
                    url: "{{ route('viewHoliday') }}",
                    method: "GET",
                    data: {
                        date: date
                    },
                    success: function(response) {
                        // Handle the success response
                        if(response != ''){
                            console.log(response);
                            $('#viewName').val(response.hname);
                            $('#viewDate').val(response.hdate);
                            $('#viewHolidayType').val(response.htype);
                            
                            if(response.attachment != ''){
                                $('.viewAttachment').attr('href', '/storage/upload/documents/holiday/'+response.attachment);
                                $('.viewAttachment').text(response.attachment);
                                $('.viewAttachmentDiv').show();
                            } else {
                                $('.viewAttachment').attr('href', '');
                                $('.viewAttachment').text('');
                                $('.viewAttachmentDiv').hide();
                            }
                            $('#viewHolidayDescription').text(response.hdescription);
                        } else {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                        console.error(error);
                    }
                });
            });

            $(document).on("change", ".attendanceStatus", function(e){
                var employee_id = $(this).attr('data-employee-id');
                var status_id = $(this).attr('id');
                var jalaliCurrentMonth = "{{ $jalaliCurrentMonth }}";
                if ($(this).is(':checked')) {
                    $('#'+status_id).val('present-'+employee_id);
                    $('.attendanceStatusLabel'+employee_id).text('present');
                    $(this).attr('checked', 'checked');
                    if(jalaliCurrentMonth >=1 && jalaliCurrentMonth <=6){
                        $('#checkIn'+employee_id).val('08:00:05');
                        $('#checkOut'+employee_id).val('16:00:05');
                    } else {
                        $('#checkIn'+employee_id).val('08:30:05');
                        $('#checkOut'+employee_id).val('15:30:05');
                    }
                } else {
                    $('#'+status_id).val('absent');
                    $('.attendanceStatusLabel'+employee_id).text('absent');
                    $(this).removeAttr('checked');
                    $('#checkIn'+employee_id).val('');
                    $('#checkOut'+employee_id).val('');
                }
            })

            $(document).on("submit", "#storeNewAttendance", function(e){
                e.preventDefault();

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        if(result.status == 'success'){
                            toastr.success(result.message);
                            setTimeout(function() {
                                window.location.href = '{{ route('get_employee_attendances') }}';
                            }, 2000); // 30 seconds in milliseconds (1000 milliseconds = 1 second)
                            // Handle success result
                            
                        } else {
                            toastr.error(result.message);
                        }
                    },
                    error:function(result){
                        console.log(result, 'error');
                        var errors = result.responseJSON;
                    }
                });
                
            });

            $(document).on("click", ".attendanceButton", function(e){// insert attendance for teacher
                e.preventDefault();

                var teacherId = $(this).attr('data-teacher-id');
                var attendanceType = $('#attendance_type option:selected').val();
                var attendanceDate = $('#attendance_date').val();

                // Step 1: Select checkboxes by class name
                const checkboxes = document.querySelectorAll('.hours'+teacherId);

                // Step 2-4: Iterate over checkboxes, retrieve name attribute, and store in an array
                const presentHour = [];
                const absentHour = [];

                checkboxes.forEach(checkbox => {
                    
                    const name = checkbox.getAttribute('name');
                    
                    if (checkbox.checked) {
                        presentHour.push(name);
                    } else {
                        absentHour.push(name);
                    }
                });

                $.ajax({
                    url: "{{ route('store_attendance') }}",
                    method: "POST",
                    data: {
                        presentHour: presentHour,
                        absentHour : absentHour,
                        attendanceType: attendanceType,
                        attendanceDate: attendanceDate,
                        teacherId : teacherId
                    },
                    cache: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        if(result.status == 'success'){
                            toastr.success(result.message);
                            $('.attendance_date, .attendance_type').trigger('change');
                        } else {
                            toastr.error(result.message);
                        }
                    },
                    error:function(result){
                        console.log(result, 'error');
                        var errors = result.responseJSON;
                    }
                });
            });
        });
        

    </script>
@endsection