@extends('layouts.master')

@section('title', __('hrm.user_attendance'))
@section('content_title', __('hrm.user_attendance'))
@section('content_summary', __('hrm.user_attendance_summary'))

@if (auth()->user()->can('hrm.user_attendances.view'))
    @section('content_taskbar')
        <li class="nav-item">
            <a href="{{ route('hrm.user_attendances.sync_data_to_via_db') }}" class="nav-link modal-triger"
                data-bs-toggle="modal" data-bs-target="#basicModal">
                <i class="nav-link-icon pe-7s-plus"></i>
                <span>{{ __('core.synchronize') }}</span>
            </a>
        </li>
    @endsection
@endif

@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-1" class="nav-link active">
                        <span>{{ __('core.student') }}</span>
                    </a>
                </li>


                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-2" class="nav-link">
                        <span>{{ __('core.teacher') }}</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-3" class="nav-link">
                        <span>{{ __('core.employee') }}</span>
                    </a>
                </li>

            </ul>





            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg10-1" role="tabpanel">
                    @include('hrm::hrm.user_attendances.partials.student')
                </div>

                <div class="tab-pane" id="tab-eg10-2" role="tabpanel">
                    @include('hrm::hrm.user_attendances.partials.teacher')
                </div>

                <div class="tab-pane" id="tab-eg10-3" role="tabpanel">
                    @include('hrm::hrm.user_attendances.partials.employee')
                </div>


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


{{-- @include('partials.js.sweet_alert') --}}
@include('partials.js.crud')
{{-- @include('partials.js.datatable')
@include('partials.js.datatable_features') --}}
@push('script')
    <script>
        $(document).ready(function() {

            $(document).on("submit", "#modal_form", function(e) {
                e.preventDefault(); // make sure default form submit is prevented

                ModalFormSubmit("#modal_form")
                    .then(() => {
                        // home_table.ajax.reload();
                        // trash_table.ajax.reload();
                    });
            });


            setupActionButtons({
                actions: {
                    '.toggle_button': {
                        method: 'PUT',
                        confirmTitle: "{{ __('core.sure') }}",
                        confirmText: "{{ __('core.confirm_update_status') }}",
                    },

                },
                onSuccess: () => {
                    home_table.ajax.reload();
                    trash_table.ajax.reload();
                },
                onError: (err) => {
                    if (!err.cancelled) {
                        console.error("Request failed", err);
                        toastr.error("Something went wrong.");
                    }
                }
            });



            // Initialize DataTable
            $('#home').DataTable({
                responsive: true
            });

            // Open add form



            $(document).on('click', '#add', function(e) {
                e.preventDefault();

                // Get the user ID from a data attribute (or any other source)
                let userId = $(this).data('userid'); // Assuming you have a data-userid attribute

                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    data: {
                        userId: userId
                    }, // Pass the userId in the request
                    success: function(response) {
                        $("#addModal .modal-body").html(response);
                        addSubmit(); // Reinitialize addSubmit for new content
                    },
                    error: function(response) {
                        $("#addModal .modal-body").html(
                            'Something Wrong, Please Try Again Later.');
                    }
                });
            });
            // Function to set the current time in the 'intime' input field
            function setCurrentTime() {
                const now = new Date();
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const currentTime = `${hours}:${minutes}`;
                $('#intime').val(currentTime);
                console.log('Time set to:', currentTime); // Debug log
            }

            // Attach the time-setting function to the modal shown event
            $('#addModal').on('shown.bs.modal', function() {
                console.log('Modal shown event fired');
                setTimeout(function() {
                    setCurrentTime();
                }, 100); // Adjust delay if necessary
            });





            // Submit add form
            function addSubmit() {
                $('#addSubmit').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {

                            $('#addModal').modal('hide');
                            toastr.success(response.msg);

                            loadData();
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                });
            }


            // // Open edit form
            // $(document).on('click', '.edit', function(e) {

            //     e.preventDefault();
            //     $.ajax({
            //         method: 'GET',
            //         url: $(this).attr('href'),
            //         success: function(response) {

            //             $("#editModal .modal-body").html(response);
            //             editSubmit(); // Reinitialize editSubmit for new content
            //         },
            //         error: function(response) {
            //             $("#editModal .modal-body").html(

            //                 'Something Wrong, Please Try Again Later.');
            //         }
            //     });
            // });

            // // Submit edit form
            // function editSubmit() {
            //     $('#editSubmit').on('submit', function(e) {
            //         e.preventDefault();
            //         $.ajax({
            //             method:'POST',
            //             url: $(this).attr('action'),
            //             data: $(this).serialize(),
            //             success: function(response) {
            //                 if (response.success) {

            //                     $('#editModal').modal('hide');
            //                     loadData();
            //                 } else {

            //                 }
            //             },
            //             error: function(response) {
            //                 console.log(response);
            //             }
            //         });
            //     });
            // }


            // // update
            // var updateUrl = '';
            // $(document).on('click', '.update', function(e) {
            //     e.preventDefault();
            //     updateUrl = $(this).attr('href');
            //     $('#confirm-update').data('update-url', updateUrl); // Store update URL
            // });

            // Confirm update modal
            // $(document).on('click', '#confirm-update', function() {
            //     updateUrl = $(this).data('update-url'); // Retrieve update URL
            //     $.ajax({
            //         method: 'PUT',
            //         url: updateUrl,
            //         success: function(response) {
            //             $('#updateModal').modal('hide');
            //             loadData();
            //         },
            //         error: function(response) {
            //             console.log(response);
            //         }
            //     });
            // });

            // Destroy
            var destroyUrl = '';
            $(document).on('click', '.destroy', function(e) {
                e.preventDefault();
                destroyUrl = $(this).attr('href');
                $('#confirm-destroy').data('destroy-url', destroyUrl); // Store destroy URL
            });

            // Confirm destroy modal
            $(document).on('click', '#confirm-destroy', function() {
                destroyUrl = $(this).data('destroy-url'); // Retrieve destroy URL
                $.ajax({
                    method: 'DELETE',
                    url: destroyUrl,
                    success: function(response) {
                        $('#destroyModal').modal('hide');

                        loadData();
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });

            });


            // Load data
            function loadData() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('user_attendances.index') }}",
                    success: function(response) {
                        // Destroy the existing DataTable instance
                        if ($.fn.DataTable.isDataTable('#home')) {
                            $('#home').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#student')) {
                            $('#student').DataTable().destroy();
                        }

                        if ($.fn.DataTable.isDataTable('#teacher')) {
                            $('#teacher').DataTable().destroy();
                        }

                        if ($.fn.DataTable.isDataTable('#employee')) {
                            $('#employee').DataTable().destroy();
                        }



                        // Replace the table body with the new data
                        // $('#home-data').html(response.homeData);
                        $('#student_data').html(response.studentData);
                        $('#teacher_data').html(response.teacherData);
                        $('#employee_data').html(response.employeeData);


                        // Reinitialize the DataTable
                        $('#home').DataTable({
                            processing: true, // Show processing indicator
                            serverSide: true,
                            responsive: true
                        });

                        $('#student').DataTable({
                            processing: true, // Show processing indicator
                            serverSide: true,
                        });


                        $('#teacher').DataTable({
                            responsive: true
                        });

                        $('#employee').DataTable({
                            responsive: true
                        });


                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }


            // Initial load
            loadData();




        });
    </script>
@endpush