@extends('layouts.sidebar')

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

    <div class="mx-auto">
        <div class="flex justify-between px-2">

            <div class="flex items-center 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>
                                    <button id="loans"
                                        class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                        Loans
                                    </button>
                                    <button id="constant"
                                        class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                        Constant
                                    </button>
                                    <button id="rate"
                                        class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                        Rate
                                    </button>
                                    <button id="others"
                                        class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                        Others
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button onclick="openModal('employeeModal')" class="px-4 py-2 text-white  rounded-lg ">
                    <div class="flex-shrink-0 flex items-center gap-5">
                        <p class="font-bold text-sm text-gray-800">Name: {{ $employee->first_name }}
                            {{ $employee->last_name }}
                            {{ $employee->middle_name }}</p>
                        <img src="{{ asset($employee->profile) }}" name="profile" alt="Image Preview"
                            class="object-cover w-20 h-20 border border-gray-300 rounded-full shadow-md" />

                    </div>

                </button>
            </div>
        </div>

        <!-- Trigger Button -->


        <!-- Modal -->
        <div id="employeeModal"
            class="fixed flex items-center justify-center inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-50">
            <div class="flex items-center justify-center min-h-screen">
                <!-- Modal Content -->
                <div class="w-full max-w-4xl p-6 bg-white border border-gray-200 rounded-lg shadow-lg">
                    <!-- Header -->
                    <div class="p-2 text-sm bg-[#1d1d1d] rounded-t-lg flex justify-between items-center">
                        <h2 class="font-bold text-white">Employee Profile</h2>
                        <button onclick="closeModal('employeeModal')" class="text-white hover:text-gray-400">
                            ✖
                        </button>
                    </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-32 h-32 border border-gray-300 rounded-full shadow-md" />
                        </div>

                        <!-- Profile Details -->
                        <div class="w-full text-sm">
                            <!-- Employee Name -->
                            <div class="text-center md:text-left">
                                <p class="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-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>



        <div class="hidden w-full p-4 lg:w-full" id="payrollshow">
            @if ($employee->status == '3')
                <p class="text-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <h2 class="mb-6 text-sm 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-xl 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-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <h2 class="mb-6 text-xl 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-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <h2 class="mb-6 text-xl font-bold">Attendance List</h2>
                @include('Admin.Employee.info.attendance')
            @endif
        </div>


        <div id="loanshow" class="hidden w-full p-4 lg:w-full">
            @if ($employee->status == '3')
                <p class="text-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <div class="flex justify-between p-2">
                    <div>
                        <h2 class="mb-6 text-xl font-bold">Loans</h2>
                    </div>

                    <div class="flex items-end justify-end my-2 mr-2"> <button onclick="openModal('openModal')"
                            class="btn border-2 rounded-md hover:scale-105 border-[#1d1d1d] text-sm btn-primary px-3 py-2 transition-all duration-200">Add
                            New
                        </button>
                    </div>
                </div>
                @include('Admin.Employee.loans.loans')
            @endif
        </div>


        <div id="othershow" class="hidden w-full p-4 lg:w-full">
            @if ($employee->status == '3')
                <p class="text-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <div class="flex justify-between p-2">
                    <div>
                        <h2 class="mb-6 text-xl font-bold">Others</h2>
                    </div>

                    <div class="flex items-end justify-end my-2 mr-2"> <button onclick="openModal('openModal_others')"
                            class="btn border-2 rounded-md hover:scale-105 border-[#1d1d1d] text-sm btn-primary px-3 py-2 transition-all duration-200">Add
                            New
                        </button>
                    </div>
                </div>
                @include('Admin.Employee.loans.others')
            @endif
        </div>

        <div id="constantshow" class="hidden w-full p-4 lg:w-full">
            @if ($employee->status == '3')
                <p class="text-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <div class="flex justify-between p-2">
                    <div>
                        <h2 class="mb-6 text-xl font-bold">Constant</h2>
                    </div>

                    <div class="flex items-end justify-end my-2 mr-2"> <button onclick="openModal('openModal12')"
                            class="btn border-2 rounded-md hover:scale-105 border-[#1d1d1d] text-sm btn-primary px-3 py-2 transition-all duration-200">Add
                            New
                        </button>
                    </div>
                </div>
                @include('Admin.Employee.loans.constantloan')
            @endif
        </div>


        <div id="rateshow" class="hidden w-full p-4 lg:w-full">
            @if ($employee->status == '3')
                <p class="text-xl text-center">This employee is currently undergoing pre-employment processes</p>
            @else
                <div class="flex justify-between p-2">
                    <div>
                        <h2 class="mb-6 text-xl font-bold">Rate</h2>
                    </div>

                    <div class="flex items-end justify-end my-2 mr-2"> <button onclick="openModal('openModal_rate')"
                            class="btn border-2 rounded-md hover:scale-105 border-[#1d1d1d] text-sm btn-primary px-3 py-2 transition-all duration-200">
                            Add New Rate
                        </button>
                    </div>
                </div>

                @include('Admin.Employee.Rate.index')
            @endif
        </div>




        <div id="historyshow" class="hidden w-full p-4 lg:w-full">
            <h2 class="mb-6 text-xl 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 showloans = document.getElementById('loans');
            const showconstant = document.getElementById('constant');
            const showrate = document.getElementById('rate');
            const showother = document.getElementById('others');


            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');
            const loanshow = document.getElementById('loanshow');
            const constantshow = document.getElementById('constantshow');
            const rateshow = document.getElementById('rateshow');
            const othershow = document.getElementById('othershow');

            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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.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');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.classList.add('hidden');
            });
            showloans.addEventListener('click', function() {
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
                loanshow.classList.remove('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.classList.add('hidden');
            });
            showconstant.addEventListener('click', function() {
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
                loanshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                constantshow.classList.remove('hidden');
                othershow.classList.add('hidden');
            });
            showrate.addEventListener('click', function() {
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.remove('hidden');
                othershow.classList.add('hidden');
            });
            showother.addEventListener('click', function() {
                historyshow.classList.add('hidden');
                payrollshow.classList.add('hidden');
                attendanceshow.classList.add('hidden');
                employeedetailsshow.classList.add('hidden');
                benefitsshow.classList.add('hidden');
                leaveshow.classList.add('hidden');
                loanshow.classList.add('hidden');
                constantshow.classList.add('hidden');
                rateshow.classList.add('hidden');
                othershow.classList.remove('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