@extends('layouts.sidebar')

@section('title', 'Employee')
@section('content')

    <div class="mx-auto">
        <div class="flex items-center justify-end gap-5">

            <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-60 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="showpayroll"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Payroll
                                </button>
                                <button id="showbenefits"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Benefits
                                </button>

                                <button id="showemployeedetails"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Profile
                                </button>
                                <button id="showattendance"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Attendance
                                </button>
                                <button id="history"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Employment History
                                </button>
                                <button id="leave"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                    Leave
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="">

            <div class=" md:p-8">
                <div class="w-full bg-white border border-gray-200 rounded-lg shadow-lg">
                    <!-- Header -->
                    <div class="p-4  bg-[#1d1d1d] rounded-t-lg">
                        <h2 class=" font-bold text-white">Employee Profile</h2>
                    </div>

                    <!-- Content -->
                    <div class="flex flex-col items-center justify-center gap-10 p-8 lg:flex-row md:items-start">
                        <!-- Profile Image -->
                        <div class="flex-shrink-0">
                            <img src="{{ asset($employee->profile) }}" name="profile" alt="Image Preview"
                                class="object-cover w-48 h-48 border border-gray-300 rounded-full shadow-md" />
                        </div>

                        <!-- Profile Details -->
                        <div class="w-full">
                            <!-- Employee Name -->
                            <div class="text-center md:text-left">
                                <p class="text-xl font-bold text-gray-800">{{ $employee->first_name }}
                                    {{ $employee->last_name }} {{ $employee->middle_name }}</p>
                            </div>

                            <!-- Profile Information -->
                            <div class="grid grid-cols-1 gap-6 mt-6 text-sm text-gray-700 md:grid-cols-2 lg:grid-cols-3">
                                <!-- Designation -->
                                <div>
                                    <p class="font-semibold">Designation:</p>
                                    <p class="font-bold text-gray-900">
                                        @foreach ($employee1 as $em)
                                            {{ $em->position }}
                                        @endforeach
                                    </p>
                                </div>

                                <!-- Present Address -->
                                <div>
                                    <p class="font-semibold">Present Address:</p>
                                    <p>{{ $employee->present_address }}</p>
                                </div>

                                <!-- Agency -->
                                @foreach ($employee1 as $em)
                                    <div>
                                        <p class="font-semibold">Agency:</p>
                                        <p class="font-bold text-gray-900">
                                            {{ $em->department->client->company->agency->name ?? 'No Agency' }}</p>
                                    </div>

                                    <!-- Company -->
                                    <div>
                                        <p class="font-semibold">Company:</p>
                                        <p class="font-bold text-gray-900">
                                            {{ $em->department->client->company->name ?? 'No Company' }}</p>
                                    </div>

                                    <!-- Client -->
                                    <div>
                                        <p class="font-semibold">Client:</p>
                                        <p class="font-bold text-gray-900">
                                            {{ $em->department->client->business_name ?? 'No Client' }}</p>
                                    </div>

                                    <!-- Department -->
                                    <div>
                                        <p class="font-semibold">Department:</p>
                                        <p class="font-bold text-gray-900">
                                            {{ $em->department->department_name ?? 'No Department' }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="hidden w-full p-4 lg:w-full" id="payrollshow">
                @if ($employee->status == '3')
                    <p class="text-2xl text-center">This employee is currently undergoing pre-employment processes</p>
                @else
                    <h2 class="mb-6 text-2xl font-bold">Payroll List</h2>
                    @include('Admin.Employee.info.payrollhistory')
                @endif
            </div>
            <div class="hidden w-full p-4 lg:w-full" id="leaveshow">
                @if ($employee->status == '3')
                    <p class="text-2xl text-center">This employee is currently undergoing pre-employment processes</p>
                @else
                    <div class="flex justify-between py-5">
                        <h2 class="mb-6 text-2xl font-bold">Leave</h2>
                        @if (in_array('Create Agency', $privileges))
                            <button type="button"
                                class="modal-button py-2.5 h-10 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"
                                data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal"
                                data-modal-toggle="subscribe-form-modal">
                                File Leave
                            </button>
                        @endif
                    </div>

                    @include('Admin.Employee.info.employeeleave')
                @endif
            </div>



            <div class="hidden w-full p-4 lg:w-full" id="benefitsshow">
                @if ($employee->status == '3')
                    <p class="text-2xl text-center">This employee is currently undergoing pre-employment processes</p>
                @else
                    <h2 class="mb-6 text-2xl font-bold">Benefit List</h2>
                    @include('Admin.Employee.info.benefits')
                @endif
            </div>



            <div id="attendanceshow" class="hidden w-full p-4 lg:w-full">
                @if ($employee->status == '3')
                    <p class="text-2xl text-center">This employee is currently undergoing pre-employment processes</p>
                @else
                    <h2 class="mb-6 text-2xl font-bold">Attendance List</h2>
                    @include('Admin.Employee.info.attendance')
                @endif
            </div>
            <div id="historyshow" class="hidden w-full p-4 lg:w-full">
                <h2 class="mb-6 text-2xl font-bold">Deployment History</h2>
                @include('Admin.Employee.info.history')
            </div>


            <div id="employeedetailsshow" class="w-full md:p-4 lg:w-full">

                @include('Admin.Employee.profilecredentials')
            </div>
        </div>
    </div>

    <script>
        showemployeedetails
        document.addEventListener('DOMContentLoaded', function() {
            const showemployeedetails = document.getElementById('showemployeedetails');
            const showpayroll = document.getElementById('showpayroll');
            const showattendance = document.getElementById('showattendance');
            const showhistory = document.getElementById('history');
            const showhbenefits = document.getElementById('showbenefits');
            const showleave = document.getElementById('leave');


            const payrollshow = document.getElementById('payrollshow');
            const attendanceshow = document.getElementById('attendanceshow');
            const employeedetailsshow = document.getElementById('employeedetailsshow');
            const historyshow = document.getElementById('historyshow');
            const benefitsshow = document.getElementById('benefitsshow');
            const leaveshow = document.getElementById('leaveshow');


            showpayroll.addEventListener('click', function() {
                payrollshow.classList.remove('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                historyshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
            });

            // Show Billing Section button click
            showattendance.addEventListener('click', function() {
                payrollshow.classList.add('hidden');
                attendanceshow.classList.remove('hidden');
                employeedetailsshow.classList.add('hidden');
                historyshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
            });
            showemployeedetails.addEventListener('click', function() {
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.remove('hidden');
                historyshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
            });

            showhistory.addEventListener('click', function() {
                historyshow.classList.remove('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
            });
            showleave.addEventListener('click', function() {
                leaveshow.classList.remove('hidden');
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
            });

            showhbenefits.addEventListener('click', function() {
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.remove('hidden');
                leaveshow.classList.add('hidden');
            });

            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        });
    </script>
    <script>
        function filterTable() {
            const input = document.getElementById('searchInput');
            const filter = input.value.toLowerCase();
            const table = document.getElementById('employeeTable');
            const trs = table.getElementsByTagName('tr');

            for (let i = 1; i < trs.length; i++) { // Start from 1 to skip the header
                const tds = trs[i].getElementsByTagName('td');
                let rowContainsMatch = false;

                // Check the field name and value for a match
                if (tds.length > 0) {
                    const fieldName = tds[0].textContent.toLowerCase(); // First column (Field name)
                    const fieldValue = tds[1].textContent.toLowerCase(); // Second column (Value)

                    // Match against both field name and value
                    if (fieldName.includes(filter) || fieldValue.includes(filter)) {
                        rowContainsMatch = true; // Found a match
                    }
                }

                // Show or hide the row based on the match
                trs[i].style.display = rowContainsMatch ? '' : 'none';
            }
        }
    </script>
@endsection