@php use Carbon\Carbon; @endphp
<x-default-layout>
    @section('page-title')
        - Employees
    @endsection

        <div>
            <div>
                <div class="container-fixed">
                    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
                        <div class="flex justify-between w-full">
                            <div class="">
                                <h1 class="text-xl font-semibold leading-none text-gray-900">
                                    Invited Employees ({{ $employees->count() }})
                                </h1>
                                <div class="flex items-center gap-2 text-sm font-medium text-gray-600">
                                    Overview of invited employees
                                </div>
                            </div>
                            <a href="{{route('admin.employees.index')}}" class="dropdown-toggle btn btn-sm btn-primary">
                                <i class="ki-filled ki-double-left-arrow">
                                </i>
                               Back
                            </a>
                        </div>
                    </div>
                </div>
                <div class="container-fixed">
                    <div class="grid gap-5 lg:gap-7.5">
                        <div class="card card-grid min-w-full">
                            <div class="card-header py-5 flex-wrap">
                                <h3 class="card-title">
                                    List of invited employees
                                </h3>
                                <div class="flex gap-6">
                                    <div class="relative">
                                        <i class="ki-filled ki-magnifier leading-none text-md text-gray-500 absolute top-1/2 left-0 -translate-y-1/2 ml-3"> </i>
                                        <input class="input input-sm pl-8" data-datatable-search="#members_table"
                                               placeholder="Search Employees" type="text"/>
                                    </div>
                                    <label class="switch switch-sm">
                                        <input class="order-2" name="check" type="checkbox" value="1"/>
                                        <span class="switch-label order-1">
                                        Expired Invites
                                    </span>
                                    </label>
                                </div>
                            </div>
                            <div class="card-body">
                                <div data-datatable="true" data-datatable-page-size="10">
                                    <div class="scrollable-x-auto">
                                        <table class="table table-border" data-datatable-table="true"
                                               id="members_table">
                                            <thead>
                                            <tr>
                                                <th class="w-[60px] text-center">
                                                    <input class="checkbox checkbox-sm" data-datatable-check="true"
                                                           type="checkbox"/>
                                                </th>
                                                <th class="">
                                                    <span class="sort asc">
                                                        <span class="sort-label">
                                                            Email
                                                        </span>
                                                        <span class="sort-icon"> </span>
                                                    </span>
                                                </th>
                                                <th class="">
                                                    Roles
                                                </th>
                                                <th class="">
                                                    <span class="sort">
                                                        <span class="sort-label">
                                                            Invited By
                                                        </span>
                                                        <span class="sort-icon"> </span>
                                                    </span>
                                                </th>
                                                <th class="">
                                                    <span class="sort">
                                                        <span class="sort-label">
                                                            Status
                                                        </span>
                                                        <span class="sort-icon"> </span>
                                                    </span>
                                                </th>
                                                <th class="">
                                                    <span class="sort">
                                                        <span class="sort-label">
                                                            Date Created
                                                        </span>
                                                        <span class="sort-icon"> </span>
                                                    </span>
                                                </th>
                                                <th class="w-[60px]"></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($employees as $employee)
                                                <tr>
                                                    <td class="text-center">
                                                        <input class="checkbox checkbox-sm"
                                                               data-datatable-row-check="true" type="checkbox"
                                                               value="1"/>
                                                    </td>
                                                    <td>
                                                        <div class="flex items-center gap-2.5">
                                                            <div class="flex flex-col gap-0.5">
                                                                <a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary">
                                                                    {{ucfirst($employee->email_address)}}
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="flex flex-wrap gap-2.5 mb-2">
                                                        <span class="badge badge-sm badge-light badge-outline">
                                                            {{ $employee->role->name }}
                                                        </span>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="flex items-center gap-2.5">
                                                            <div class="">
                                                                <img class="h-9 rounded-full"
                                                                     src="{{ asset("assets/media/avatars/blank.png") }}"/>
                                                            </div>
                                                            <div class="flex flex-col gap-0.5">
                                                                <a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary">
                                                                    Mareka Mapiloko
                                                                </a>
                                                                <span class="text-xs text-gray-600 font-medium">
                                                                Software Developer
                                                            </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if($employee->invite_accepted)
                                                            <span
                                                                class="badge badge-success badge-pill badge-outline gap-1.5">
                                                            <span class="badge badge-dot badge-success size-1.5"></span>
                                                                Accepted
                                                            </span>
                                                        @elseif( Carbon::now() < $employee->expires_at )
                                                            <span
                                                                class="badge badge-warning badge-pill badge-outline gap-1.5">
                                                            <span class="badge badge-dot badge-warning size-1.5"></span>
                                                                Pending
                                                            </span>
                                                        @elseif( Carbon::now() > $employee->expires_at )
                                                            <span
                                                                class="badge badge-danger badge-pill badge-outline gap-1.5">
                                                            <span class="badge badge-dot badge-danger size-1.5"></span>
                                                                Expired
                                                            </span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ date_format(date_create($employee->created_at), "d M Y, H:m") }}
                                                    </td>
                                                    <td class="w-[60px]">
                                                        <div class="menu" data-menu="true">
                                                            <div class="menu-item" data-menu-item-offset="0, 10px"
                                                                 data-menu-item-placement="bottom-end"
                                                                 data-menu-item-toggle="dropdown"
                                                                 data-menu-item-trigger="click|lg:click">
                                                                <button
                                                                    class="menu-toggle btn btn-sm btn-icon btn-light btn-clear">
                                                                    <i class="ki-filled ki-dots-vertical"> </i>
                                                                </button>
                                                                <div
                                                                    class="menu-dropdown menu-default w-full max-w-[175px]"
                                                                    data-menu-dismiss="true">
                                                                    <div class="menu-item">
                                                                        <a class="menu-link" href="#">
                                                                        <span class="menu-icon">
                                                                            <i class="ki-filled ki-search-list"> </i>
                                                                        </span>
                                                                            <span class="menu-title">
                                                                            View
                                                                        </span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="menu-item">
                                                                        <a class="menu-link" href="#">
                                                                        <span class="menu-icon">
                                                                            <i class="ki-filled ki-file-up"> </i>
                                                                        </span>
                                                                            <span class="menu-title">
                                                                            Export
                                                                        </span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="menu-separator"></div>
                                                                    <div class="menu-item">
                                                                        <a class="menu-link" href="#">
                                                                        <span class="menu-icon">
                                                                            <i class="ki-filled ki-pencil"> </i>
                                                                        </span>
                                                                            <span class="menu-title">
                                                                            Edit
                                                                        </span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="menu-item">
                                                                        <a class="menu-link" href="#">
                                                                        <span class="menu-icon">
                                                                            <i class="ki-filled ki-copy"> </i>
                                                                        </span>
                                                                            <span class="menu-title">
                                                                            Make a copy
                                                                        </span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="menu-separator"></div>
                                                                    <div class="menu-item">
                                                                        <a class="menu-link" href="#">
                                                                        <span class="menu-icon">
                                                                            <i class="ki-filled ki-trash"> </i>
                                                                        </span>
                                                                            <span class="menu-title">
                                                                            Remove
                                                                        </span>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div
                                        class="card-footer justify-center md:justify-between flex-col md:flex-row gap-5 text-gray-600 text-2sm font-medium">
                                        <div class="flex items-center gap-2 order-2 md:order-1">
                                            Show
                                            <select class="select select-sm w-16" data-datatable-size="true"
                                                    name="perpage"> </select>
                                            per page
                                        </div>
                                        <div class="flex items-center gap-4 order-1 md:order-2">
                                            <span data-datatable-info="true"> </span>
                                            <div class="pagination" data-datatable-pagination="true"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @section('page-modals')
        @endsection
        @section('page-scripts')
        @endsection
</x-default-layout>