@extends(getTemplate() . '.panel.layouts.panel_layout')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/daterangepicker/daterangepicker.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <style>
        .loading-overlay {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 500px;
            background-color: rgba(255, 255, 255, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .dataTables_filter {
            display: none !important;
        }

        .dt-search {
            display: none !important;

        }

        .table th {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        div.dt-container div.dt-layout-row {
            margin: 0 !important;

        }

        .dt-layout-row .dt-layout-table {
            margin: 0 !important;
        }
    </style>
@endpush

@section('content')
    <section class="mt-5">
        {{-- 3-Icon Overview Section --}}
        @include('web.default.panel.manage.partials._overview')
    </section>

    <section class="mt-5">
        {{-- Filter Modal --}}
        @include('web.default.panel.manage.partials._filters')

        {{-- Add Employee Modal --}}
        @include('web.default.panel.manage.partials._add-employee')

        {{-- Buttons for the filtering and adding employees --}}
        @include('web.default.panel.manage.partials._buttons')
    </section>

    <section class="">

        {{-- Users Table --}}
        @if (!empty($users) and !$users->isEmpty() or !empty($pendingUsers) and !$pendingUsers->isEmpty())
            <div class="loading-overlay" style="display: none;">
                <div class="spinner"></div>
            </div>
            <div id="usersTableContainer" class="card card-flush h-md-100 px-5 pt-0 pb-2">

                @include('web.default.panel.manage.partials._table', [
                    'users' => $users,
                    'pendingUsers' => $pendingUsers,
                ])
            </div>
        @else
            @include(getTemplate() . '.includes.no-result', [
                'file_name' => 'studentt.png',
                'title' => trans('panel.students_no_result'),
                'hint' => nl2br(trans('panel.students_no_result_hint')),
                'btn' => ['url' => '/panel/manage/students/new', 'text' => trans('panel.add_an_student')],
            ])
        @endif
    </section>

    <div class="my-4" id="pagination">
        {{ $users->appends(request()->input())->links('vendor.pagination.panel') }}
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/moment.min.js"></script>
    <script src="/assets/default/vendors/daterangepicker/daterangepicker.min.js"></script>
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2();
            var table = $('#usersTable').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "columnDefs": [{
                        "orderable": false,
                        "targets": 5
                    } // Disable sorting on the actions column
                ]
            });

            $('#filterForm').on('submit', function(e) {
                e.preventDefault();

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'GET',
                    data: $(this).serialize(),
                    success: function(response) {
                        table = $('#usersTable').DataTable();
                        table.destroy(); // Destroy the existing DataTable instance
                        $('#usersTableContainer').html(response
                            .html); // Update the table content
                        table = $('#usersTable').DataTable({ // Reinitialize DataTable
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false,
                            "responsive": true,
                            "columnDefs": [{
                                    "orderable": false,
                                    "targets": 4
                                } // Disable sorting on the actions column
                            ],
                            "bInfo": false
                        });
                        $('#filterModal').modal('hide'); // Hide the modal after submission
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                    }
                });
            });

            $('#clearFilter').on('click', function() {
                $('#filterForm')[0].reset();
                $('#filterForm').submit();
                $('#searchInput').val('');
            });
            $('#userSettingForm').on('submit', function(e) {
                e.preventDefault();
                console.log("test");
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function(response) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = response.redirect;
                            }
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON.message,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        } else {
                            // Handle other types of errors
                            Swal.fire({
                                title: 'Error!',
                                text: 'An unexpected error occurred. Please try again.',
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    }
                });
            });
        });

        // search input monitoring
        let debounceTimer;
        $('#searchInput').on('keyup', function() {
            // Show loading overlay
            table = $('#usersTable').DataTable();
            if (table) {
                $('#usersTable').empty(); // Clear the table content
            }
            $('.loading-overlay').show();
            $('#pagination').hide();
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(function() {
                const searchValue = $('#searchInput').val();

                $.ajax({
                    url: "{{ route('panel.manage.filterUsers', ['user_type' => $user_type]) }}",
                    method: 'GET',
                    data: {
                        searchBar: searchValue,

                    },
                    success: function(response) {

                        $('#usersTableContainer').html(response
                            .html); // Update the table content
                        table = $('#usersTable').DataTable({ // Reinitialize DataTable
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false,
                            "responsive": true,
                            "columnDefs": [{
                                    "orderable": false,
                                    "targets": 4
                                } // Disable sorting on the actions column
                            ]
                        });
                        // Hide loading overlay
                        $('.loading-overlay').hide()
                        $('#pagination').show();
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                    }
                });
            }, 350);
        });
        // Import functionality
        $('#processImport').on('click', function() {
            let csvFile = $('#csvFileInput')[0].files[0];
            let pasteList = $('#pasteListInput').val();
            let rows = [];

            if (csvFile) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    let csvData = e.target.result;
                    rows = extractEmails(csvData);
                    rows = removeDuplicates(rows);
                    displayImportTable(rows);
                    toggleBulkAddButton();

                };
                reader.readAsText(csvFile);
            } else if (pasteList) {
                rows = extractEmails(pasteList);
                rows = removeDuplicates(rows);
                displayImportTable(rows);
                toggleBulkAddButton();

            }
            document.getElementById('bulkAddUsers').classList.remove('disabled');
        });

        function extractEmails(text) {
            let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
            return text.match(emailPattern) || [];
        }

        function removeDuplicates(emails) {
            return [...new Set(emails)];
        }

        function displayImportTable(emails) {
            let tbody = $('#importTable tbody');
            tbody.empty();
            emails.forEach((email) => {
                let tr = `<tr>
                        <td><input type="email" class="form-control" value="${email.trim()}"></td>
                        <td><button class="btn btn-danger btn-sm remove-row">x</button></td>
                    </tr>`;
                tbody.append(tr);
            });
        }

        $(document).on('click', '.remove-row', function() {
            $(this).closest('tr').remove();
        });
        // Enable/disable bulk add button based on table content
        function toggleBulkAddButton() {
            const hasEmails = $('#importTable tbody tr').length > 0;
            $('#bulkAddUsers').toggleClass('disabled', !hasEmails);
        }

        // Handle bulk send invites
        //TODO: create endpoint for handling bulk import
        //so we can segregate the responses, since
        //multiple user imports can fail
        $('#bulkAddUsers').on('click', function() {
            const branch = $('#bulkBranch').val();
            const emails = [];

            $('#importTable tbody tr').each(function() {
                const email = $(this).find('input[type="email"]').val().trim();
                if (email) {
                    emails.push(email);
                }
            });

            if (emails.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'No Emails',
                    text: 'Please add at least one email address.',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Show loading state
            Swal.fire({
                title: 'Processing...',
                html: 'Sending invitations...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '/panel/manage/employees/bulk-invite',
                method: 'POST',
                data: {
                    emails: emails,
                    branch: branch,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    const results = response.results;

                    $('#importTable tbody').empty();
                    toggleBulkAddButton();
                    $('#addEmployeeModal').modal('hide');

                    let message = `
                Successfully sent: ${results.success}<br>
                Existing users notified: ${results.existing_user}<br>
                Duplicates skipped: ${results.duplicate}<br>
                Failed: ${results.failed}
            `;

                    if (results.failed_emails.length > 0) {
                        message += '<br><br>Failed emails:<br>';
                        results.failed_emails.forEach(fail => {
                            message += `${fail.email}: ${fail.reason}<br>`;
                        });
                    }

                    Swal.fire({
                        icon: 'info',
                        title: 'Invitation Results',
                        html: message,
                        confirmButtonColor: '#3085d6'
                    });
                },
                error: function(xhr) {
                    let errorMessage = 'An error occurred while processing the invitations.';

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorMessage,
                        confirmButtonColor: '#d33'
                    });
                }
            });
        });
    </script>
    {{-- <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script> --}}
@endpush