@php
    $employeeType = auth()->user()->employee_type;
    $url = '';
    switch ($employeeType) {
        case 'SalesAdmin':
            $url = url('employeelist');
            break;
        case 'front-end':
            $url = url('frontenddashboard');
            break;
        case 'OperationAdmin':
            $url = url('projects');
            break;
        case 'OperationEmployee':
            $url = url('designerprojects');
            break;
        case 'Top_Management':
            $url = url('projects');
            break;
        case 'Accounting':
            $url = url('Reciever');
            break;
        case 'SMMAdmin':
            $url = url('smmadmin');
            break;
        case 'Graphic':
            $url = url('graphicdesignerdashboard');
            break;
        case 'Content':
            $url = url('contentwriterdashboard');
            break;
        case 'Employee':
            $url = url('requestformsales');
            break;
        default:
            $url = '';
    }
@endphp


<nav
    class=" border-b border-gray-200 {{ in_array(auth()->user()->employee_type, [
        'Top_Management',
        'Accounting',
        'OperationAdmin',
        'OperationEmployee',
    ])
        ? ' bg-red-600'
        : (in_array(auth()->user()->employee_type, ['SalesAdmin', 'Employee'])
            ? 'bg-black'
            : 'bg-blue-500') }}">


    <div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="flex items-center justify-center flex-1 sm:items-stretch sm:justify-start">
                <div class="flex items-center flex-shrink-0">
                    @if (auth()->user()->employee_type === 'Top_Management' ||
                            auth()->user()->employee_type === 'OperationAdmin' ||
                            auth()->user()->employee_type === 'OperationEmployee' ||
                            auth()->user()->employee_type === 'SMMAdmin' ||
                            auth()->user()->employee_type === 'Accounting' ||
                            auth()->user()->employee_type === 'Content' ||
                            auth()->user()->employee_type === 'Graphic')
                        <img class="w-auto h-10"
                            src="{{ url('img/279851836_331045149126415_145479524744240153_n-removebg-preview.png') }}"
                            alt="Your Company">
                    @endif
                    @if (auth()->user()->employee_type === 'SalesAdmin' || auth()->user()->employee_type === 'Employee')
                        <img class="w-auto h-10"
                            src="{{ url('img/295271725_427793026030679_1654889754019020959_n-removebg-preview.png') }}"
                            alt="Your Company">
                    @endif

                </div>
                <div class="hidden sm:ml-6 sm:block">
                    <div class="flex space-x-4">
                        <!-- Current: "bg-black text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
                        <a href="{{ url('/') }}" class="px-3 py-2 text-sm font-medium text-white rounded-md "
                            aria-current="page">Calendar</a>
                        @if (auth()->user()->employee_type === 'Employee')
                            <a href="{{ url('/employeeprofile') }}"
                                class="px-3 py-2 text-sm font-medium text-white rounded-md "
                                aria-current="page">Profile</a>
                        @endif
                        <a onclick="showLogoutModal()" class="px-3 py-2 text-sm font-medium text-white rounded-md "
                            aria-current="page" style="cursor: pointer;">
                            Logout
                        </a>


                        @if (auth()->user()->employee_type === 'SalesAdmin' ||
                                auth()->user()->employee_type === 'OperationAdmin' ||
                                auth()->user()->employee_type === 'OperationEmployee' ||
                                auth()->user()->employee_type === 'Top_Management' ||
                                auth()->user()->employee_type === 'SMMAdmin' ||
                                auth()->user()->employee_type === 'Graphic' ||
                                auth()->user()->employee_type === 'Content' ||
                                auth()->user()->employee_type === 'Accounting' ||
                                auth()->user()->employee_type === 'Employee')
                            <a href="{{ $url }}" class="px-3 py-2 text-sm font-medium text-white rounded-md "
                                aria-current="page">
                                CMS
                            </a>
                        @endif

                    </div>
                </div>
            </div>
            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">

                <!-- Profile dropdown -->
                <div class="relative ml-3">
                    @if (auth()->user()->employee_type === 'OperationAdmin' ||
                            auth()->user()->employee_type === 'Top_Management' ||
                            auth()->user()->employee_type === 'SalesAdmin' ||
                            auth()->user()->employee_type === 'SMMAdmin')
                        <div class="flex items-center justify-between">
                            <p class="mx-2 text-white">{{ auth()->user()->employee_name }}</p>
                            <form id="updateTypeForm" method="POST"
                                action="{{ route('update_type', ['id' => auth()->user()->id]) }}">
                                @csrf
                                <div class="relative">
                                    <select name="employeeType" id="employeeType"
                                        class="block w-64 px-4 py-2 pr-8 leading-tight bg-white border border-gray-300 rounded shadow appearance-none hover:border-gray-500 focus:outline-none focus:shadow-outline">
                                        <option value="SalesAdmin"
                                            {{ auth()->user()->employee_type == 'SalesAdmin' ? 'selected' : '' }}>Sales
                                            Admin</option>
                                        <option value="SMMAdmin"
                                            {{ auth()->user()->employee_type == 'SMMAdmin' ? 'selected' : '' }}>SMM
                                            Admin</option>
                                        @if (!auth()->user()->roleschannel->pluck('permission')->contains('Top Management'))
                                            <option value="OperationAdmin"
                                                {{ auth()->user()->employee_type == 'OperationAdmin' ? 'selected' : '' }}>
                                                Operation Admin</option>
                                        @endif
                                        @if (auth()->user()->roleschannel->pluck('permission')->contains('Top Management'))
                                            <option value="Top_Management"
                                                {{ auth()->user()->employee_type == 'Top_Management' ? 'selected' : '' }}>
                                                Top Management</option>
                                        @endif
                                    </select>
                                    <div
                                        class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                        <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20">
                                            <path d="M10 12l-6-6-1 1 7 7 7-7-1-1z" />
                                        </svg>
                                    </div>
                                </div>
                            </form>

                        </div>
                </div>

                <script>
                    document.getElementById('employeeType').addEventListener('change', function() {
                        document.getElementById('updateTypeForm').submit(); // Submit the form when the select input changes
                    });
                </script>
            @else
                <div class="text-white">
                    {{ auth()->user()->employee_type }}: {{ auth()->user()->employee_name }}
                </div>
                @endif
            </div>
        </div>
    </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->

    </div>
</nav>



<div id="logoutModal" tabindex="-1"
    class="fixed z-50 items-center justify-center hidden w-full h-full px-4 overflow-y-auto  md:inset-0 bg-opacity-60">
    <div class="relative max-w-md mx-auto bg-white rounded-md shadow-xl  top-40" style="font-family: 'Poppins';">

        <div class="relative bg-white rounded-lg shadow-2xl">
            <div class="p-4 text-center md:p-5">
                <svg class="w-12 h-12 mx-auto mb-4 text-gray-400 dark:text-gray-200" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
                <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to logout?
                </h3>
                <a href="{{ route('logout') }}"
                    class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center me-2">
                    Yes, I'm sure
                </a>
                <button type="button" data-modal-hide="logoutModal"
                    class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No,
                    cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    function showLogoutModal() {
        const modal = document.getElementById("logoutModal");
        modal.classList.remove("hidden");
    }


    document.addEventListener("DOMContentLoaded", function() {
        const cancelButton = document.querySelector("[data-modal-hide='logoutModal']");
        const modal = document.getElementById("logoutModal");

        cancelButton.addEventListener("click", function() {
            modal.classList.add("hidden");
        });

        // Additional logic to close the modal if the overlay is clicked
        modal.addEventListener("click", function(event) {
            if (event.target === modal) {
                modal.classList.add("hidden");
            }
        });
    });
</script>

<script>
    window.onload = function() {
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }
    }
</script>