@extends('layouts.sidebar')

@section('title', 'Employee')
@section('content')
    @if (in_array('Manage Employee', $privileges))
        @include('Admin.Employee.modal')
        <div class="mx-auto ">
            <div class="flex justify-between">
                <div class="flex justify-between">
                    <h2 class="mb-6 text-2xl font-bold">Employee List</h2>
                </div>
                <div>
                    <div class="relative flex flex-col items-end justify-end mb-2 mr-10 text-center">
                        <div>
                            <button type="button"
                                class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-[#1d1d1d] border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                                id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                                Menu
                                <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                    fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                            <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                                role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                                id="dropdown-menu">
                                <div class="py-1" role="none">
                                    <div class="flex flex-col items-center justify-center ">

                                        <button id="show-terminated-employees"
                                            class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                            Terminated / Block Listed
                                        </button>

                                        <button id="show-pre-employment"
                                            class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                            Pre-Employment
                                        </button>
                                        <button id="show-employee-details"
                                            class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                            Employed
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (in_array('Create Employee', $privileges))
                        <div class="py-5 text-right mr-4">
                            <a href="{{ route('employees.create') }}"
                                class=" py-2.5 px-5 text-xs bg-[#1d1d1d] text-white rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">Add
                                Employee</a>

                        </div>
                    @endif
                </div>
            </div>
            @if (session('success'))
                <div class="p-4 mb-4 text-white bg-green-500">
                    {{ session('success') }}
                </div>
            @endif
            @include('Admin.Employee.preemployed')

            @include('Admin.Employee.terminated')
            <div class="w-full overflow-x-auto " id="employee-details-section">

                <table id="employed-table" class="min-w-full bg-white border border-gray-200 rounded shadow-md ">
                    <thead>
                        <tr class="text-sm leading-normal h-12 text-white uppercase bg-[#1d1d1d]">
                            <th class="px-6 py-1">ID</th>
                            <th class="px-6 py-1">Agency</th>
                            <th class="px-6 py-1">company</th>
                            <th class="px-6 py-1">Client</th>
                            <th class="px-6 py-1">profile</th>
                            <th class="px-6 py-1">Name</th>
                            <th class="px-6 py-1">Date of Birth</th>
                            <th class="px-6 py-1">Status</th>
                            <th class="px-6 py-1">Bank Status</th>
                            <th class="px-6 py-1">Email</th>
                            <th class="px-6 py-1">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm font-light text-center text-gray-600">
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const showEmployeeDetailsButton = document.getElementById('show-employee-details');
                const showTerminatedEmployeesButton = document.getElementById('show-terminated-employees');
                const showPreEmploymentButton = document.getElementById('show-pre-employment');
                const employeeDetailsSection = document.getElementById('employee-details-section');
                const terminatedEmployeesSection = document.getElementById('terminated-employees-section');
                const preEmploymentSection = document.getElementById('pre-employment-section');
                showTerminatedEmployeesButton.addEventListener('click', function() {
                    terminatedEmployeesSection.classList.remove('hidden');
                    employeeDetailsSection.classList.add('hidden');
                    preEmploymentSection.classList.add('hidden');
                });
                showPreEmploymentButton.addEventListener('click', function() {
                    preEmploymentSection.classList.remove('hidden');
                    employeeDetailsSection.classList.add('hidden');
                    terminatedEmployeesSection.classList.add('hidden');
                });
                showEmployeeDetailsButton.addEventListener('click', function() {
                    employeeDetailsSection.classList.remove('hidden');
                    terminatedEmployeesSection.classList.add('hidden');
                    preEmploymentSection.classList.add('hidden');
                });
                document.getElementById('menu-button').addEventListener('click', function() {
                    const menu = document.getElementById('dropdown-menu');
                    menu.classList.toggle('hidden');
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Initialize DataTable for Pre-Employment Employees
                var preEmploymentTable = $('#pre-employment-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('employees.index') }}",
                        data: function(d) {
                            d.status = '3';
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'profile',
                            name: 'profile'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'date_of_birth',
                            name: 'date_of_birth'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'user.email',
                            name: 'user.email'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });

                // Initialize DataTable for Employed Employees
                var employedTable = $('#employed-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('employees.index') }}",
                        data: function(d) {
                            d.status = '1'; // Filter by Employed status
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'agency',
                            name: 'agency'
                        },
                        {
                            data: 'company',
                            name: 'company'
                        },
                        {
                            data: 'client',
                            name: 'client'
                        },
                        {
                            data: 'profile',
                            name: 'profile'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'date_of_birth',
                            name: 'date_of_birth'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'bank_status',
                            name: 'bank_status'
                        },
                        {
                            data: 'user.email',
                            name: 'user.email'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });

                // Initialize DataTable for Terminated Employees
                var terminatedTable = $('#terminated-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('employees.index') }}",
                        data: function(d) {
                            d.status = '2'; // Filter by Terminated status
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'profile',
                            name: 'profile'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'date_of_birth',
                            name: 'date_of_birth'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'user.email',
                            name: 'user.email'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });

                // Delete Employee
                $(document).on('click', '.delete-employee', function(e) {
                    e.preventDefault(); // Prevent the default action

                    var employeeId = $(this).data('id'); // Get employee ID
                    var url = "{{ route('employees.destroy', '') }}" + '/' +
                        employeeId; // Construct the delete URL

                    // Show the confirmation modal
                    $('#confirmationModal').removeClass('hidden');

                    // Handle the confirm button click
                    $('#confirmDelete').off('click').on('click', function() {
                        $.ajax({
                            url: url, // Use the constructed URL
                            type: 'POST',
                            data: {
                                _method: 'DELETE',
                                _token: '{{ csrf_token() }}' // Include CSRF token
                            },
                            success: function(response) {
                                // Show the success modal
                                $('#successModal').removeClass('hidden');

                                // Optionally, display a specific success message
                                $('#successModal p').text('Employee deleted successfully!');

                                // Reload the DataTables
                                preEmploymentTable.ajax.reload(null, false);
                                employedTable.ajax.reload(null, false);
                                terminatedTable.ajax.reload(null, false);

                                // Automatically close the success modal after 3 seconds
                                setTimeout(function() {
                                    $('#successModal').addClass('hidden');
                                }, 2000); // 3000 ms = 3 seconds

                                // Hide confirmation modal
                                $('#confirmationModal').addClass('hidden');
                            },
                            error: function(xhr) {
                                // Handle the error
                                alert('There was an error processing the deletion.');
                                console.log(xhr.responseJSON.errors);
                            }
                        });
                    });

                    // Handle the cancel button click
                    $('#cancelDelete').off('click').on('click', function() {
                        // Hide the confirmation modal
                        $('#confirmationModal').addClass('hidden');
                    });
                });
            });
        </script>
        <div id="successModal" class="fixed inset-0 flex items-start justify-center hidden bg-gray-600 bg-opacity-50">
            <div class="w-1/3 p-6 mt-20 bg-white rounded-lg shadow-lg">
                <h2 class="mb-4 text-lg font-bold">Success</h2>
                <p>Employee deleted successfully!</p> <!-- This can be updated dynamically in the JS -->
                <div class="flex justify-end mt-4">
                    <button id="closeModal" class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-700"
                        onclick="closeSuccessModal()">OK</button>
                </div>
            </div>
        </div>
        <div id="confirmationModal" class="fixed inset-0 flex items-start justify-center hidden bg-gray-600 bg-opacity-50">
            <div class="w-1/3 p-6 mt-20 bg-white rounded-lg shadow-lg">
                <h2 class="mb-4 text-lg font-bold">Confirmation</h2>
                <p>Are you sure you want to delete this employee? This action cannot be undone.</p>
                <div class="flex justify-end mt-4">
                    <button id="confirmDelete"
                        class="px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-700">Delete</button>
                    <button id="cancelDelete"
                        class="px-4 py-2 ml-2 text-black bg-gray-300 rounded-lg hover:bg-gray-400">Cancel</button>
                </div>
            </div>
        </div>
    @else
        <div class="my-2 flex h-full w-full justify-center items-center">
            <div>
                <i class="text-3xl bx bx-lock mr-2"></i> <!-- Large lock icon indicating no access -->
                <span class="text-gray-500">You don't have privilege to access this page</span>
            </div>

        </div>
    @endif
@endsection