{{-- resources/views/company_list.blade.php --}}

@extends('dashboard.layouts.main')

@section('content')
<div class="container mt-5">
    <div class="card shadow-sm">
        <!-- Card Header -->
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Employee List</h4>
        </div>

        <!-- Card Body -->
        <div class="card-body">
            <!-- Success Message (Session) -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Error Message (Session) -->
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Success Message (AJAX) -->
            <div id="ajax-success-msg" class="alert alert-success d-none alert-dismissible fade show" role="alert">
                <span id="ajax-success-text"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <!-- Error Message (AJAX) -->
            <div id="ajax-error-msg" class="alert alert-danger d-none alert-dismissible fade show" role="alert">
                <span id="ajax-error-text"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <!-- Status Dropdown and Submit Button -->
            <div class="row mb-3">
                <!-- Status Dropdown -->
                <div class="col-md-4">
                    <label for="statusFilter" class="form-label">Filter by Status</label>
                    <select id="statusFilter" class="form-select">
                        <option value="all">All</option>
                        <option value="pending">Pending</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>

                <!-- Submit Button -->
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" id="submitSelected" class="btn btn-success btn-sm d-none">
                        <i class="bi bi-check-circle"></i> Submit Selected
                        <span id="loadingSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>

            <!-- Table Form -->
            <form id="companyForm">
                @csrf <!-- CSRF Token for AJAX -->
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>
                                    <!-- Select All Checkbox -->
                                    <input type="checkbox" id="selectAll">
                                </th>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="employee-table-body">
                            @forelse ($userAllRegisData as $udata)
                                <tr>
                                    <td>
                                        <!-- Individual Checkbox -->
                                        <input type="checkbox" name="selected_users[]" value="{{ $udata->id }}" class="user-checkbox">
                                    </td>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        {{ $udata->first_name }} {{ $udata->middle_name }} {{ $udata->last_name }}
                                    </td>
                                    <td>{{ $udata->email }}</td>
                                    <td>
                                        <!-- Role based display -->
                                        @if ($udata->role_id == 3)
                                            <span>Employee</span>
                                        @elseif($udata->role_id == 4)
                                            <span>Owner</span>
                                        @endif
                                    </td>
                                    <td>
                                        <!-- Status Display -->
                                        @if ($udata->permission_status == 0)
                                            <span class="badge bg-warning">Pending</span>
                                        @elseif ($udata->is_active == 1)
                                            <span class="badge bg-success">Active</span>
                                        @elseif ($udata->is_active == 0)
                                            <span class="badge bg-danger">Inactive</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No Data found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery (Ensure it's included before this script) -->
<script src="{{asset('assets/vendors/js/jquery.min.js')}}"></script>
<!-- Bootstrap JS Bundle with Popper (Ensure it's included for Bootstrap components like alerts) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- JavaScript for Select All, AJAX Filtering, and AJAX Submission -->
<script>
    $(document).ready(function() {
        // Handle Select All Checkbox
        $('#selectAll').on('change', function() {
            $('.user-checkbox').prop('checked', $(this).prop('checked'));
            toggleSubmitButton();
        });

        // If any individual checkbox is unchecked, uncheck the Select All checkbox
        $(document).on('change', '.user-checkbox', function() {
            if (!$(this).prop('checked')) {
                $('#selectAll').prop('checked', false);
            } else {
                // If all checkboxes are checked, check the Select All checkbox
                if ($('.user-checkbox:checked').length === $('.user-checkbox').length) {
                    $('#selectAll').prop('checked', true);
                }
            }
            toggleSubmitButton();
        });

        // Function to enable or disable the submit button based on selection and status
        function toggleSubmitButton() {
            let status = $('#statusFilter').val();
            if (status === 'pending') {
                $('#submitSelected').removeClass('d-none');
            } else {
                $('#submitSelected').addClass('d-none');
            }
        }

        // Handle status dropdown change
        $('#statusFilter').on('change', function() {
            let selectedStatus = $(this).val();

            // Show a loading indicator
            $('#employee-table-body').html('<tr><td colspan="6" class="text-center">Loading...</td></tr>');

            // Make AJAX request to filter employees
            $.ajax({
                url: "{{ route('employees.filter') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: selectedStatus
                },
                success: function(response) {
                    if (response.status === 'success') {
                        // Clear any existing messages
                        $('#ajax-success-msg').addClass('d-none');
                        $('#ajax-error-msg').addClass('d-none');

                        // Check if data is not empty
                        if (response.data.length > 0) {
                            let rows = '';
                            $.each(response.data, function(index, employee) {

                                let statusContent = '';
        if (selectedStatus === 'inactive') {
            statusContent = '<span class="badge bg-danger">Inactive</span>';
        } 
         else {
            if (employee.is_active ===1) {
            statusContent = '<span class="badge bg-success">Active</span>';
        } else if (employee.permission_status === 0) {
            statusContent = '<span class="badge bg-warning">Pending</span>';
        }
        }

                                rows += `
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="selected_users[]" value="${employee.id}" class="user-checkbox">
                                        </td>
                                        <td>${index + 1}</td>
                                        <td>${employee.first_name} ${employee.middle_name} ${employee.last_name}</td>
                                        <td>${employee.email}</td>
                                         <td>
                                            ${employee.role_id == 3 ? '<span>Employee</span>' :
                                              employee.role_id == 4 ? '<span>Owner</span>' : ''}
                                        </td>
                                        <td>
                                           
                                            ${statusContent}
                                        </td>
                                    </tr>
                                `;
                            });
                            $('#employee-table-body').html(rows);
                        } else {
                            // If no data found for the selected status
                            $('#employee-table-body').html('<tr><td colspan="6" class="text-center">No Data found.</td></tr>');
                        }

                        // Reset the Select All checkbox
                        $('#selectAll').prop('checked', false);

                        // Hide the Submit Selected button
                        toggleSubmitButton();
                    } else {
                        // Display error message
                        $('#ajax-error-text').text('Failed to filter employees.');
                        $('#ajax-error-msg').removeClass('d-none');
                        $('#employee-table-body').html('<tr><td colspan="6" class="text-center">No Data found.</td></tr>');
                    }
                },
                error: function(xhr) {
                    // Handle validation errors or other server errors
                    let errorMessage = 'An unexpected error occurred.';
                    if (xhr.status === 422) {
                        // Laravel validation error
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            errorMessage += ' ' + value;
                        });
                    }
                    $('#ajax-error-text').text(errorMessage.trim());
                    $('#ajax-error-msg').removeClass('d-none');

                    // Show 'No Data found.' message
                    $('#employee-table-body').html('<tr><td colspan="6" class="text-center">No Data found.</td></tr>');
                }
            });
        });

        // Initial toggle on page load
        toggleSubmitButton();

        // Handle Submit Selected Button Click
        $('#submitSelected').on('click', function() {
            // Get selected user IDs
            let selectedUsers = [];
            $('.user-checkbox:checked').each(function() {
                selectedUsers.push($(this).val());
            });

            if (selectedUsers.length === 0) {
                alert('Please select at least one row.');
                return;
            }

            // Confirm action (optional)
            if (!confirm('Are you sure you want to process the selected data?')) {
                return;
            }

            // Show loading spinner and disable the button
            $('#submitSelected').prop('disabled', true);
            $('#loadingSpinner').removeClass('d-none');
            $('#ajax-success-msg').addClass('d-none');
            $('#ajax-error-msg').addClass('d-none');
            $('#ajax-success-text').text('');
            $('#ajax-error-text').text('');

            // Send AJAX request to process selected users
            $.ajax({
                url: "{{ route('process.selected') }}", // Ensure this route exists
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    selected_users: selectedUsers
                },
                success: function(response) {
                    if (response.status === 'success') {
                        // Display success message
                        $('#ajax-success-text').text(response.message);
                        $('#ajax-success-msg').removeClass('d-none');
                        $('#loadingSpinner').addClass('d-none');
                        location.reload();
                        // Update the status in the table dynamically

                        // Uncheck all checkboxes after successful submission
                        $('#selectAll').prop('checked', false);
                        $('.user-checkbox').prop('checked', false);
                       
                    } else {
                        // Display error message
                        $('#ajax-error-text').text(response.message);
                        $('#ajax-error-msg').removeClass('d-none');
                    }
                },
                error: function(xhr) {
                    // Handle validation errors or other server errors
                    let errorMessage = 'An unexpected error occurred.';
                    if (xhr.status === 422) {
                        // Laravel validation error
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            errorMessage += ' ' + value;
                        });
                    }
                    $('#ajax-error-text').text(errorMessage.trim());
                    $('#ajax-error-msg').removeClass('d-none');
                },
                complete: function() {
                    // Hide loading spinner and enable the button
                    $('#submitSelected').prop('disabled', false);
                    $('#loadingSpinner').addClass('d-none');
                }
            });
        });
    });
</script>
@endsection