@extends('layouts.sidebar')

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

    <div class="mx-auto">
        <div class="relative flex flex-col items-end justify-end 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="showemployee"
                                class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                Employee
                            </button>
                            <button id="showdepartment"
                                class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                Department
                            </button>
                            <button id="showbilling"
                                class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                Billing
                            </button>
                            <button id="showsetting"
                                class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100">
                                Settings
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-6">
            <div class="w-full mb-3 bg-white border border-gray-200 rounded shadow-md h-[22rem]">
                <p class="h-10 p-2 text-md font-bold text-white bg-[#1d1d1d]">Client Profile</p>
                <div class="p-4 text-xs ">
                    <table class="w-full border border-collapse border-gray-200 table-auto">
                        <tbody>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-2 font-semibold">Agency:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->company->agency->name }}</td>
                            </tr>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-2 font-semibold">Company:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->company->name }}</td>
                            </tr>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-2 font-semibold">Business Name:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->business_name }}</td>
                            </tr>

                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-2 font-semibold">Address:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->address }}</td>
                            </tr>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-2 font-semibold">Email:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->user->email }}</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-semibold">Contact Number:</td>
                                <td class="px-4 py-2 text-red-600">{{ $client->contact_number }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="lg:col-span-5 ">
                <div class="w-full p-4 lg:w-full " id="employeeshow">
                    <h2 class="mb-6 font-bold text-md">Employee List</h2>
                    <div class="overflow-auto ">
                        <table id="employed-table" class="min-w-full bg-white border border-gray-200 rounded shadow-md ">
                            <thead>
                                <tr class="text-sm leading-normal  text-white  bg-[#1d1d1d]">
                                    <th class="px-6 py-1">ID</th>
                                    <th class="px-6 py-1">Name</th>
                                    <th class="px-6 py-1">Date Hired</th>
                                    <th class="px-6 py-1">Status</th>
                                    <th class="px-6 py-1">Position</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">
                                <!-- Data will be populated here by DataTables -->
                            </tbody>
                        </table>
                    </div>
                </div>

                @include('Admin.Client.department')
                @include('Admin.Client.billing')
                @include('Admin.Client.setting.index')

            </div>


        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const showemployee = document.getElementById('showemployee');
                const showbilling = document.getElementById('showbilling');
                const showdepartment = document.getElementById('showdepartment');
                const showsetting = document.getElementById('showsetting');


                const settingshow = document.getElementById('settingshow');
                const employeeshow = document.getElementById('employeeshow');
                const billingshow = document.getElementById('billingshow');
                const departmentshow = document.getElementById('departmentshow');

                showemployee.addEventListener('click', function() {
                    employeeshow.classList.remove('hidden');
                    departmentshow.classList.add('hidden');
                    settingshow.classList.add('hidden');
                    billingshow.classList.add('hidden');
                });

                // Show Billing Section button click
                showbilling.addEventListener('click', function() {
                    employeeshow.classList.add('hidden');
                    departmentshow.classList.add('hidden');
                    settingshow.classList.add('hidden');
                    billingshow.classList.remove('hidden');

                });
                showdepartment.addEventListener('click', function() {
                    employeeshow.classList.add('hidden');
                    billingshow.classList.add('hidden');
                    settingshow.classList.add('hidden');
                    departmentshow.classList.remove('hidden');

                });


                showsetting.addEventListener('click', function() {
                    employeeshow.classList.add('hidden');
                    billingshow.classList.add('hidden');
                    departmentshow.classList.add('hidden');
                    settingshow.classList.remove('hidden');
                });



                // Dropdown toggle
                document.getElementById('menu-button').addEventListener('click', function() {
                    const menu = document.getElementById('dropdown-menu');
                    menu.classList.toggle('hidden');
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                var clientId = {{ $client->id }};

                var employedTable = $('#employed-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('client.profile', ['id' => ':id']) }}".replace(':id',
                            clientId),
                        data: function(d) {

                            d.client_id = clientId;
                        }
                    },
                    columns: [{
                            data: 'employee.id',
                            name: 'employee.id'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'date_hired',
                            name: 'date_hired'
                        },

                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'position',
                            name: 'position'
                        },
                        {
                            data: 'employee.user.email',
                            name: 'employee.user.email'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [0, 'desc']
                    ]
                });
            });
        </script>
    @endsection