@canany(['hr_manager_hq', 'employees'])

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Employees')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Employees</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item active">Employees</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .no-arrow::after {
            display: none;
            /* Hide the arrow */
        }

        .deactiveitem:hover {
            background-color: #E4A11B;
        }

        body.dark-mode .deactiveitem:hover {
            background-color: #ad7b16;
            color: #ffffff;
        }

        .viewitem:hover {
            background-color: #14A44D;
            color: #ffffff;
        }

        body.dark-mode .viewitem:hover {
            background-color: #0d7035;
            color: #ffffff;
        }

        .activeitem:hover {
            background-color: #14A44D;
            color: #ffffff;
        }

        body.dark-mode .activeitem:hover {
            background-color: #0d7035;
            color: #ffffff;
        }

        .deleteitem:hover {
            background-color: #DC4C64;
            color: #ffffff;
        }

        body.dark-mode .deleteitem:hover {
            background-color: #a13446;
            color: #ffffff;
        }

        .dropdownMenuLinkcss:hover {
            background-color: #abacaf;
            border-radius: 50%;

        }

        body.dark-mode .dropdownMenuLinkcss:hover {
            background-color: #979797;
            border-radius: 50%;
        }
    </style>
    <div id="content" class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif

                    @livewire('employee-list')

                    {{-- saved drafts Employee Model  --}}
                    <!-- Modal -->
                    <div class="modal fade" id="TempEmployee" tabindex="-1" aria-labelledby="moal_Add" aria-hidden="true"
                        wire:ignore>
                        <div class="modal-dialog modal-dialog-centered modal-xl">
                            <div class="modal-content">
                                <div class="modal-header bg-light">
                                    <h5 class="modal-title" id="exampleModalLabel">View saved employee</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body p-2">

                                    <div class="table-responsive">
                                        <table id="TempUserList" class="table table-striped table-hover"
                                            style="width: 100%; table-layout: auto !important;">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Names</th>
                                                    <th>Email</th>
                                                    <th>Job Title</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($tempEmp as $Tempemployee)
                                                    @php
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $Tempemployee->id }} </td>

                                                        <td>{{ $Tempemployee->name }}</td>
                                                        <td>{{ $Tempemployee->email }}</td>
                                                        <td>
                                                            {{ $Tempemployee->jobtitle }}
                                                        </td>
                                                        <td>
                                                        <div class="btn-group">
                                                            <a href="{{ route('admin.employees.edit', $Tempemployee->id) }}"
                                                                class="btn btn-sm btn-outline-primary" data-toggle="tooltip"
                                                                data-placement="top" title="Edit"><i
                                                                    class="fa fa-pen"></i></a>
                                                            <a href="#" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                                                                data-target="#modal{{ $Tempemployee->id }}"
                                                                id="delete-link-{{ $Tempemployee->id }}" title="Delete"><i
                                                                    class="fa fa-trash"></i></a>
                                                            </div>
                                                            <script>
                                                                $('#delete-link-{{ $Tempemployee->id }}').on('mouseover', function() {
                                                                    $(this).tooltip('show');

                                                                });
                                                                $('#delete-link-{{ $Tempemployee->id }}').on('mouseleave', function() {
                                                                    $(this).tooltip('hide');
                                                                });
                                                            </script>
                                                        </td>
                                                    </tr>
                                                    @if (!empty($Tempemployee->id))
                                                        <!-- Modal -->
                                                        <div class="modal fade" id="modal{{ $Tempemployee->id }}"
                                                            tabindex="-1" aria-labelledby="modal_Delete" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered">
                                                                <div class="modal-content">
                                                                    <div class="modal-header bg-light">
                                                                        <h5 class="modal-title" id="deleteModalLabel">
                                                                            Moving: {{ $Tempemployee->name }} to the
                                                                            recycle bin</h5>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body">

                                                                        Are you sure you want to move
                                                                        <b>{{ $Tempemployee->name }} </b> to the recycle
                                                                        bin?

                                                                    </div>
                                                                    <div class="modal-footer bg-light">
                                                                        <button type="button" class="btn btn-secondary"
                                                                            data-dismiss="modal">
                                                                            <i class="fa fa-times"></i>
                                                                            No, Keep it</button>
                                                                        <form
                                                                            action="{{ route('admin.employees.destroy', $Tempemployee->id) }}"
                                                                            method="POST">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                class="btn btn-danger">
                                                                                <i class="fa fa-trash-alt"></i>
                                                                                Yes</button>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <!-- end modal -->
                                                @endforeach
                                            </tbody>
                                        </table>

                                        <script>
                                            $(document).ready(function() {
                                                var table = $('#TempUserList').DataTable({
                                                    order: [
                                                        [2, 'asc']
                                                    ],
                                                    stateSave: true,
                                                });
                                                $(function() {
                                                    $('[data-toggle="tooltip"]').tooltip()
                                                })
                                            });
                                        </script>

                                    </div>

                                </div>
                                <div class="modal-footer bg-light">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                    <i class="fa fa-times"></i>
                                    Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
            </div>
        </div>
    </div>

@stop

@section('footer')
    &nbsp;
@stop

@endcan