@extends('layouts.master')

@section('title', __('hrm.user_attendance_report'))
@section('content_title', __('hrm.user_attendance_report'))


@section('main_content')

<ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">

    <li class="nav-item">
        <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-eg10-0" aria-selected="true">
            <span>{{__('core.student')}}</span>
        </a>
    </li>
    <li class="nav-item">
        <a role="tab" class="nav-link " id="tab-0" data-bs-toggle="tab" href="#tab-eg10-1" aria-selected="true">
            <span>{{__('core.teacher')}}</span>
        </a>
    </li>
    <li class="nav-item">
        <a role="tab" class="nav-link " id="tab-0" data-bs-toggle="tab" href="#tab-eg10-2" aria-selected="true">
            <span>{{__('core.employee')}}</span>
        </a>
    </li>

</ul>
<div class="tab-content main-card">
    <div class="tab-pane tabs-animation fade active show parent" id="tab-eg10-0" role="tabpanel">
        <div class="card mb-3">
            <div class="card-body">

                <x-academicFilter class="row input_change_trigger">
                    <x-slot:show_business>
                        <x-slot:show_business_parent class="col-12 col-md-3 mb-3"></x-slot:show_business_parent>
                        <x-slot:show_business_child required></x-slot:show_business_child>
                    </x-slot:show_business>
                    <x-slot:show_academic_year>
                        <x-slot:show_academic_year_parent class="col-12 col-md-3 mb-3"></x-slot:show_academic_year_parent>
                    </x-slot:show_academic_year>
                    <x-slot:show_academic_class>
                        <x-slot:show_academic_class_parent class="col-12 col-md-3 mb-3"></x-slot:show_academic_class_parent>
                    </x-slot:show_academic_class>
                    <x-slot:show_academic_section>
                        <x-slot:show_academic_section_parent class="col-12 col-md-3 mb-3"></x-slot:show_academic_section_parent>
                    </x-slot:show_academic_section>
                    <x-slot:show_academic_group>
                        <x-slot:show_academic_group_parent class="col-12 col-md-3 mb-3"></x-slot:show_academic_group_parent>
                    </x-slot:show_academic_group>
                    <x-slot:show_academic_student>
                        <x-slot:show_academic_student_parent class="col-12 col-md-3 mb-3"></x-slot:show_academic_student_parent>
                        <x-slot:show_academic_student_child required class="user_id"></x-slot:show_academic_student_child>
                    </x-slot:show_academic_student>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Month & Year</label>
                        <input type="text" class="form-control reportrange date_range" id="date_range" name="date_range" required />
                    </div>
                </x-academicFilter>
            </div>


        </div>
        <div class="card report_table">
            <div class="card-body">
                <div class="card-title mb-3">{{__('hrm.student_attendance_report')}}</div>
                <div id="homeData">
                    @include('hrm::hrm.user_attendance_report.partials.report_table')
                    {{-- <div class="" style="">
                        <div class="loader-wrapper d-flex justify-content-center align-items-center m-auto">
                            <div class="loader">
                                <div class="ball-scale">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>

            </div>
        </div>
    </div>
    <div class="tab-pane tabs-animation fade  show parent" id="tab-eg10-1" role="tabpanel">
        <div class="card mb-3">
            <div class="card-body">
                <div class="row input_change_trigger">
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Business</label>
                        <select name="business_id" id="business_id" class="form-select teacher_businesss_select filter_teacher" required>
                            <option value="">Select Business</option>
                            @foreach ($business_list as $business)
                            <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Deparment</label>
                        <select name="department_id" id="department_id" class="form-select filter_teacher" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Designation</label>
                        <select name="designation_id" id="designation_id" class="form-select filter_teacher" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Teacher</label>
                        <select name="user_id" id="user_id" class="form-select user_id" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Month & Year</label>
                        <input type="text" class="form-control reportrange date_range" id="date_range" name="date_range" required />
                    </div>
                </div>
            </div>


        </div>
        <div class="card report_table">
            <div class="card-body">
                <div class="card-title mb-3">{{__('hrm.teacher_attendance_report')}}</div>
                <div id="homeData">
                    @include('hrm::hrm.user_attendance_report.partials.report_table')
                    {{-- <div class="" style="">
                        <div class="loader-wrapper d-flex justify-content-center align-items-center m-auto">
                            <div class="loader">
                                <div class="ball-scale">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>

            </div>
        </div>
    </div>
    <div class="tab-pane tabs-animation fade  show parent" id="tab-eg10-2" role="tabpanel">
        <div class="card mb-3">
            <div class="card-body">
                <div class="row input_change_trigger">
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Business</label>
                        <select name="business_id" id="business_id" class="form-select teacher_businesss_select filter_employee" required>
                            <option value="">Select Business</option>
                            @foreach ($business_list as $business)
                            <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Deparment</label>
                        <select name="department_id" id="department_id" class="form-select filter_employee" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Designation</label>
                        <select name="designation_id" id="designation_id" class="form-select filter_employee" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Employee</label>
                        <select name="user_id" id="user_id" class="form-select user_id" required>
                            <option value="">{{__('core.please_select')}}</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-3 mb-3">
                        <label for="" class="form-label">Select Month & Year</label>
                        <input type="text" class="form-control reportrange date_range" id="date_range" name="date_range" required />
                    </div>
                </div>
            </div>


        </div>
        <div class="card report_table">
            <div class="card-body">
                <div class="card-title mb-3">{{__('hrm.employee_attendance_report')}}</div>
                <div id="homeData">
                    @include('hrm::hrm.user_attendance_report.partials.report_table')
                    {{-- <div class="" style="">
                        <div class="loader-wrapper d-flex justify-content-center align-items-center m-auto">
                            <div class="loader">
                                <div class="ball-scale">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<!-- Buttons extension -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script>
    $(document).ready(function() {
        // $('.monthYearRange').daterangepicker({
        //     autoApply: true, // Automatically apply selection
        //     showDropdowns: true, // Show year/month dropdown
        //     minViewMode: "months", // Show only months and years
        //     locale: {
        //         format: "YYYY-MM" // Format to show only Year-Month
        //     }
        // });
        $("table.report_table").DataTable({
            dom: 'Bfrtip'
            , buttons: [{
                extend: 'excelHtml5'
                , title: "AttendanceReport", // filename
                text: 'Export to Excel'
            }]
        });


        $(".input_change_trigger input, select").on("change", function() {
            let parent = $(this).closest('.parent');
            let user_id = parent.find('#user_id').val();
            let date_range = parent.find(".date_range").val();
            let username = parent.find('#user_id option:selected').text();
            if (user_id && user_id !== '') {
                loadData(user_id, date_range, function(data) {
                    if ($.fn.DataTable.isDataTable(parent.find('table.report_table'))) {
                        $('table.report_table').DataTable().destroy();
                    }

                    parent.find('.report_data').html('');
                    if (data) {
                        parent.find('.report_data').html(data);
                    }
                    $('table.report_table').DataTable({
                        dom: 'Bfrtip'
                        , buttons: [{
                            extend: 'excelHtml5'
                            , title: username, // filename
                            text: 'Export to Excel'
                        }]
                    });

                });
            } else {
                parent.find('.report_data').html('');
            }
        });

        $(".teacher_businesss_select").on("change", function() {
            let businessId = $(this).val();
            let parent = $(this).closest('.parent');
            if (businessId) {
                loadDepartment(businessId, parent);
                loadDesignation(businessId, parent);
            } else {
                parent.find('#department_id').html("<option value=''>{{__('core.please_select')}}</option>");
                parent.find('#designation_id').html("<option value=''>{{__('core.please_select')}}</option>");
            }
        });

        $(".filter_teacher").on("change", function() {
            let parent = $(this).closest('.parent');
            let businessId = parent.find('#business_id').val();
            let departmentId = parent.find('#department_id').val();
            let designationId = parent.find('#designation_id').val();
            let type_id = 1;

            if (businessId) {
                $.ajax({
                    method: 'post'
                    , url: "{{ route('employees.employeelist') }}"
                    , data: {
                        business_id: businessId
                        , department_id: departmentId
                        , designation_id: designationId
                        , type_id: type_id
                    }
                    , success: function(response) {

                        parent.find('#user_id').html("");
                        parent.find('#user_id').append("<option value=''>{{__('core.please_select')}}</option>");
                        $.each(response, function(key, value) {
                            parent.find('#user_id').append("<option value='" + value.user.id + "'>" + value.user.username + "</option>");
                        });
                    }
                    , error: function(error) {}
                });
            } else {
                parent.find('#user_id').html("<option value=''>{{__('core.please_select')}}</option>");
            }
        });

        $(".filter_employee").on("change", function() {
            let parent = $(this).closest('.parent');
            let businessId = parent.find('#business_id').val();
            let departmentId = parent.find('#department_id').val();
            let designationId = parent.find('#designation_id').val();
            let type_id = 2;

            if (businessId) {
                $.ajax({
                    method: 'post'
                    , url: "{{ route('employees.employeelist') }}"
                    , data: {
                        business_id: businessId
                        , department_id: departmentId
                        , designation_id: designationId
                        , type_id: type_id
                    }
                    , success: function(response) {

                        parent.find('#user_id').html("");
                        parent.find('#user_id').append("<option value=''>{{__('core.please_select')}}</option>");
                        $.each(response, function(key, value) {
                            parent.find('#user_id').append("<option value='" + value.user.id + "'>" + value.user.username + "</option>");
                        });
                    }
                    , error: function(error) {}
                });
            } else {
                parent.find('#user_id').html("<option value=''>{{__('core.please_select')}}</option>");
            }
        });

        function loadDepartment(businessId, parent) {
            $.ajax({
                method: 'GET'
                , url: "{{ route('employee_departments.load_employee_departments') }}"
                , data: {
                    business_id: businessId
                }
                , success: function(response) {
                    $(parent).find('#department_id').html(response.data);
                }
                , error: function(error) {}
            });
        }

        function loadDesignation(businessId, parent) {
            $.ajax({
                method: 'GET'
                , url: "{{ route('employee_designations.load_employee_designations') }}"
                , data: {
                    business_id: businessId
                }
                , success: function(response) {
                    $(parent).find('#designation_id').html(response.data);
                }
                , error: function(error) {}
            });
        }

        function loadData(user_id, date_range, calback = null) {
            $.ajax({
                method: "POST"
                , url: "{{ route('hrm.report.user_attendance_report.index') }}"
                , data: {
                    user_id: user_id
                    , date_range: date_range
                , }
                , success: function(response) {
                    if (calback) {
                        calback(response.report);
                    }
                }
            , })
        }

    })

</script>
@endpush