@extends('admin.layouts.master')

@section('title', 'Manage Employees')

@section('css')
    <link rel="stylesheet" href="{{ asset('/admin/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/admin/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        /* ============================================================
       EMPLOYEE LIST — NC Theme
    ============================================================ */
        .el-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--line)
        }

        .el-header-left h1 {
            font-size: 20px;
            font-weight: 800;
            color: var(--ink);
            margin: 0 0 4px;
            letter-spacing: -.4px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .el-header-left h1 i {
            color: var(--acc);
            font-size: 17px
        }

        .el-header-left p {
            font-size: 13px;
            color: var(--muted);
            margin: 0;
            font-weight: 500
        }

        .el-header-right {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .el-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all .18s;
            text-decoration: none;
            white-space: nowrap
        }

        .el-btn-primary {
            background: var(--acc);
            color: #fff;
            box-shadow: 0 2px 8px rgba(90, 103, 216, .35)
        }

        .el-btn-primary:hover {
            background: var(--acc-dark);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(90, 103, 216, .45)
        }

        .el-btn-secondary {
            background: var(--surface);
            color: var(--ink);
            border: 1.5px solid var(--line)
        }

        .el-btn-secondary:hover {
            background: var(--sb-hover-bg);
            border-color: var(--acc-mid);
            color: var(--acc)
        }

        /* stats */
        .el-stats {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 22px
        }

        @media(max-width:992px) {
            .el-stats {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media(max-width:600px) {
            .el-stats {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        .el-stat-item {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-left: 3px solid var(--acc);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: box-shadow .2s, background .3s
        }

        .el-stat-item:hover {
            box-shadow: 0 4px 18px rgba(90, 103, 216, .12)
        }

        .el-stat-item.s2 {
            border-left-color: #10b981
        }

        .el-stat-item.s3 {
            border-left-color: #f59e0b
        }

        .el-stat-item.s4 {
            border-left-color: #ef4444
        }

        .el-stat-item.s5 {
            border-left-color: #8b5cf6
        }

        .el-stat-icon {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: var(--acc-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: var(--acc);
            flex-shrink: 0
        }

        .el-stat-item.s2 .el-stat-icon {
            background: rgba(16, 185, 129, .12);
            color: #10b981
        }

        .el-stat-item.s3 .el-stat-icon {
            background: rgba(245, 158, 11, .12);
            color: #f59e0b
        }

        .el-stat-item.s4 .el-stat-icon {
            background: rgba(239, 68, 68, .12);
            color: #ef4444
        }

        .el-stat-item.s5 .el-stat-icon {
            background: rgba(139, 92, 246, .12);
            color: #8b5cf6
        }

        .el-stat-val {
            font-size: 22px;
            font-weight: 900;
            color: var(--ink);
            line-height: 1
        }

        .el-stat-lbl {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .8px;
            margin-top: 3px
        }

        /* card */
        .el-card {
            background: var(--panel);
            border: 1.5px solid var(--line);
            overflow: hidden;
            transition: background .3s, border-color .3s;
            position: relative
        }

        /* loader */
        .el-loader-overlay {
            position: absolute;
            inset: 0;
            background: var(--panel);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease
        }

        .el-loader-overlay.show {
            opacity: 1;
            pointer-events: auto
        }

        .el-loader-ring {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 3px solid var(--line);
            border-top-color: var(--acc);
            animation: el-spin .75s linear infinite
        }

        @keyframes el-spin {
            to {
                transform: rotate(360deg)
            }
        }

        .el-loader-dots {
            display: flex;
            gap: 6px
        }

        .el-loader-dots span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--acc);
            animation: el-dot .9s ease-in-out infinite;
            opacity: .3
        }

        .el-loader-dots span:nth-child(2) {
            animation-delay: .15s
        }

        .el-loader-dots span:nth-child(3) {
            animation-delay: .30s
        }

        @keyframes el-dot {

            0%,
            100% {
                opacity: .3;
                transform: translateY(0)
            }

            50% {
                opacity: 1;
                transform: translateY(-5px)
            }
        }

        .el-loader-text {
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            letter-spacing: .6px;
            text-transform: uppercase
        }

        /* controls */
        .el-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 20px;
            border-bottom: 1.5px solid var(--line);
            background: var(--surface);
            flex-wrap: wrap
        }

        .el-controls-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }

        .el-controls-right {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .el-select {
            height: 36px;
            padding: 0 28px 0 10px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--ink);
            font-size: 13px;
            font-weight: 600;
            outline: none;
            border-radius: 7px;
            cursor: pointer;
            transition: border-color .18s;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 9px center
        }

        .el-select:focus {
            border-color: var(--acc)
        }

        .el-search-wrap {
            position: relative;
            flex: 1;
            min-width: 220px;
            max-width: 320px
        }

        .el-search-wrap i {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
            font-size: 13px;
            pointer-events: none
        }

        .el-search {
            width: 100%;
            height: 36px;
            padding: 0 12px 0 34px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--ink);
            font-size: 13px;
            font-weight: 500;
            outline: none;
            border-radius: 7px;
            transition: border-color .18s
        }

        .el-search:focus {
            border-color: var(--acc)
        }

        .el-search::placeholder {
            color: var(--muted)
        }

        .el-filter-btn {
            height: 36px;
            padding: 0 14px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--muted);
            font-size: 13px;
            font-weight: 600;
            border-radius: 7px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all .18s;
            white-space: nowrap
        }

        .el-filter-btn:hover,
        .el-filter-btn.active {
            border-color: var(--acc);
            color: var(--acc);
            background: var(--acc-soft)
        }

        .el-filter-dot {
            width: 7px;
            height: 7px;
            background: var(--acc);
            border-radius: 50%;
            display: none
        }

        .el-filter-btn.has-filters .el-filter-dot {
            display: block
        }

        /* filter panel */
        .el-filter-panel {
            padding: 14px 20px;
            background: var(--surface);
            border-bottom: 1.5px solid var(--line);
            display: none
        }

        .el-filter-panel.show {
            display: block
        }

        .el-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            align-items: end
        }

        .el-filter-item label {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .8px;
            color: var(--muted);
            margin-bottom: 5px
        }

        .el-filter-item select,
        .el-filter-item input {
            width: 100%;
            height: 34px;
            padding: 0 10px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--ink);
            font-size: 12.5px;
            font-weight: 500;
            border-radius: 6px;
            outline: none;
            transition: border-color .18s
        }

        .el-filter-item select:focus,
        .el-filter-item input:focus {
            border-color: var(--acc)
        }

        .el-filter-reset {
            height: 34px;
            padding: 0 14px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all .18s;
            align-self: end
        }

        .el-filter-reset:hover {
            border-color: #ef4444;
            color: #ef4444;
            background: rgba(239, 68, 68, .06)
        }

        /* table */
        .el-table-wrap {
            overflow-x: auto
        }

        table.el-table {
            width: 100% !important;
            border-collapse: collapse;
            font-size: 13px
        }

        table.el-table thead th {
            background: var(--surface) !important;
            color: var(--muted) !important;
            font-size: 10.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            padding: 12px 14px !important;
            border-bottom: 2px solid var(--line) !important;
            border-top: none !important;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            transition: color .18s
        }

        table.el-table thead th:hover {
            color: var(--acc) !important
        }

        table.el-table thead th.sorting_asc,
        table.el-table thead th.sorting_desc {
            color: var(--acc) !important
        }

        table.el-table thead th.sorting::after {
            content: ' ⇅';
            opacity: .3;
            font-size: 10px
        }

        table.el-table thead th.sorting_asc::after {
            content: ' ↑';
            opacity: 1;
            color: var(--acc);
            font-size: 10px
        }

        table.el-table thead th.sorting_desc::after {
            content: ' ↓';
            opacity: 1;
            color: var(--acc);
            font-size: 10px
        }

        table.el-table tbody td {
            padding: 10px 14px !important;
            border-bottom: 1px solid var(--line) !important;
            color: var(--ink) !important;
            vertical-align: middle !important;
            background: var(--panel) !important;
            transition: background .15s
        }

        table.el-table tbody tr:last-child td {
            border-bottom: none !important
        }

        table.el-table tbody tr:hover td {
            background: var(--sb-hover-bg) !important
        }

        table.el-table tbody tr {
            animation: el-row-in .25s ease both
        }

        @keyframes el-row-in {
            from {
                opacity: 0;
                transform: translateY(4px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* status */
        .el-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 11px;
            border-radius: 20px;
            font-size: 11.5px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all .2s;
            white-space: nowrap
        }

        .el-status.active {
            background: rgba(16, 185, 129, .12);
            color: #10b981
        }

        .el-status.inactive {
            background: rgba(239, 68, 68, .12);
            color: #ef4444
        }

        .el-status:hover {
            filter: brightness(.88);
            transform: scale(1.04)
        }

        .el-status i {
            font-size: 7px
        }

        /* checkbox */
        .el-check {
            width: 16px;
            height: 16px;
            accent-color: var(--acc);
            cursor: pointer
        }

        /* action btn */
        .el-action-btn {
            width: 32px;
            height: 32px;
            border-radius: 7px;
            border: 1.5px solid var(--line);
            background: var(--panel);
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            transition: all .18s
        }

        .el-action-btn:hover {
            border-color: var(--acc-mid);
            background: var(--acc-soft);
            color: var(--acc)
        }

        .el-action-btn.open {
            border-color: var(--acc);
            background: var(--acc);
            color: #fff
        }

        /* action menu */
        .el-action-menu {
            position: fixed;
            min-width: 185px;
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 10px;
            box-shadow: 0 10px 36px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .1);
            z-index: 99999;
            padding: 5px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px) scale(.97);
            transform-origin: top right;
            transition: all .2s cubic-bezier(.4, 0, .2, 1);
            pointer-events: none
        }

        .el-action-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto
        }

        .el-menu-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 7px;
            color: var(--ink);
            font-size: 12.5px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            transition: background .14s
        }

        .el-menu-item:hover {
            background: var(--sb-hover-bg);
            color: var(--acc)
        }

        .el-menu-item.danger {
            color: #ef4444
        }

        .el-menu-item.danger:hover {
            background: rgba(239, 68, 68, .08);
            color: #ef4444
        }

        .el-menu-item i {
            width: 16px;
            text-align: center;
            font-size: 12px
        }

        .el-menu-sep {
            height: 1px;
            background: var(--line);
            margin: 3px 0
        }

        /* table footer */
        .el-table-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            border-top: 1.5px solid var(--line);
            background: var(--surface);
            flex-wrap: wrap;
            gap: 10px
        }

        .el-info {
            font-size: 12.5px;
            color: var(--muted);
            font-weight: 600
        }

        .el-info strong {
            color: var(--ink)
        }

        .el-pagination {
            display: flex;
            align-items: center;
            gap: 3px
        }

        .el-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border-radius: 7px;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            background: var(--panel);
            border: 1.5px solid var(--line);
            cursor: pointer;
            transition: all .18s;
            user-select: none
        }

        .el-page-btn:hover:not(.disabled):not(.active) {
            background: var(--sb-hover-bg);
            border-color: var(--acc-mid);
            color: var(--acc)
        }

        .el-page-btn.active {
            background: var(--acc);
            border-color: var(--acc);
            color: #fff;
            box-shadow: 0 2px 8px rgba(90, 103, 216, .35)
        }

        .el-page-btn.disabled {
            color: var(--muted);
            background: var(--surface);
            cursor: not-allowed;
            opacity: .5
        }

        /* bulk bar */
        .el-bulk-bar {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 50px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .2), 0 2px 10px rgba(0, 0, 0, .1);
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 9999;
            transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
            opacity: 0;
            pointer-events: none;
            white-space: nowrap
        }

        .el-bulk-bar.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto
        }

        .el-bulk-count {
            font-size: 13px;
            font-weight: 800;
            color: var(--ink);
            padding: 0 8px
        }

        .el-bulk-sep {
            width: 1px;
            height: 22px;
            background: var(--line)
        }

        .el-bulk-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 50px;
            font-size: 12.5px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all .18s
        }

        .el-bulk-btn:hover {
            filter: brightness(.88);
            transform: scale(1.04)
        }

        .el-bulk-del {
            background: rgba(239, 68, 68, .12);
            color: #ef4444
        }

        .el-bulk-close {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: var(--surface);
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            transition: all .18s
        }

        .el-bulk-close:hover {
            background: rgba(239, 68, 68, .1);
            color: #ef4444
        }

        /* details modal */
        .el-modal .modal-content {
            background: var(--panel) !important;
            border: 1.5px solid var(--line) !important;
            border-radius: 14px !important;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .2) !important
        }

        .el-modal .modal-header {
            background: var(--surface) !important;
            border-bottom: 1.5px solid var(--line) !important;
            padding: 14px 18px !important;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .el-modal .modal-title {
            font-size: 14px !important;
            font-weight: 800 !important;
            color: var(--ink) !important;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .el-modal .modal-title i {
            color: var(--acc)
        }

        .el-modal-close {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            border: none;
            background: var(--surface);
            color: var(--muted);
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .18s
        }

        .el-modal-close:hover {
            background: rgba(239, 68, 68, .1);
            color: #ef4444
        }

        .el-modal .modal-body {
            padding: 0 !important
        }

        .el-modal .modal-footer {
            border-top: 1.5px solid var(--line) !important;
            background: var(--surface) !important;
            padding: 10px 16px !important;
            gap: 8px
        }

        .el-detail-hero {
            text-align: center;
            padding: 24px 20px;
            background: var(--surface);
            border-bottom: 1.5px solid var(--line)
        }

        .el-detail-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--acc-mid);
            box-shadow: 0 4px 16px rgba(90, 103, 216, .2);
            margin-bottom: 10px
        }

        .el-detail-name {
            font-size: 16px;
            font-weight: 800;
            color: var(--ink);
            margin: 0 0 3px
        }

        .el-detail-empid {
            font-size: 12px;
            color: var(--acc);
            font-weight: 700;
            font-family: monospace
        }

        .el-detail-badges {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-top: 8px;
            flex-wrap: wrap
        }

        .el-detail-table {
            width: 100%;
            border-collapse: collapse
        }

        .el-detail-table tr {
            border-bottom: 1px solid var(--line)
        }

        .el-detail-table tr:last-child {
            border-bottom: none
        }

        .el-detail-table th {
            width: 36%;
            padding: 11px 18px;
            background: var(--surface);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--muted)
        }

        .el-detail-table td {
            padding: 11px 18px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            background: var(--panel)
        }

        .el-social-links {
            display: flex;
            gap: 8px;
            flex-wrap: wrap
        }

        .el-social-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            transition: all .15s;
            border: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink)
        }

        .el-social-link:hover {
            border-color: var(--acc-mid);
            background: var(--acc-soft);
            color: var(--acc)
        }

        .el-empty {
            text-align: center;
            padding: 48px 20px;
            color: var(--muted)
        }

        .el-empty i {
            font-size: 36px;
            margin-bottom: 12px;
            display: block;
            opacity: .4
        }

        .el-empty p {
            font-size: 14px;
            font-weight: 600;
            margin: 0
        }

        /* QR Modal */
        .qr-modal-content {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .2)
        }

        .qr-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 18px;
            background: var(--surface);
            border-bottom: 1.5px solid var(--line)
        }

        .qr-modal-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 8px
        }

        .qr-modal-title i {
            color: #8b5cf6
        }

        .qr-body {
            padding: 24px 20px;
            text-align: center
        }

        #qrCanvas {
            display: flex;
            justify-content: center;
            margin-bottom: 14px
        }

        #qrCanvas img,
        #qrCanvas canvas {
            border-radius: 8px;
            border: 3px solid var(--line)
        }

        .qr-name {
            font-size: 14px;
            font-weight: 800;
            color: var(--ink);
            margin-bottom: 3px
        }

        .qr-empid {
            font-size: 11px;
            color: var(--muted);
            font-family: monospace;
            margin-bottom: 16px
        }

        [data-theme="dim"] .el-filter-item input[type="date"],
        [data-theme="dark"] .el-filter-item input[type="date"] {
            color-scheme: dark
        }
    </style>
@endsection


@section('content')

    {{-- Page Header --}}
    <div class="el-header">
        <div class="el-header-left">
            <h1><i class="fas fa-users"></i> Employee Management</h1>
            <p>Manage, filter and view all employees</p>
        </div>
        <div class="el-header-right">
            <a href="{{ route('employees.create') }}" class="el-btn el-btn-primary">
                <i class="fas fa-plus" style="font-size:11px"></i> Add Employee
            </a>
        </div>
    </div>

    {{-- Stats --}}
    <div class="el-stats">
        <div class="el-stat-item">
            <div class="el-stat-icon"><i class="fas fa-users"></i></div>
            <div>
                <div class="el-stat-val" id="statTotal">—</div>
                <div class="el-stat-lbl">Total</div>
            </div>
        </div>
        <div class="el-stat-item s2">
            <div class="el-stat-icon"><i class="fas fa-user-check"></i></div>
            <div>
                <div class="el-stat-val" id="statActive">—</div>
                <div class="el-stat-lbl">Active</div>
            </div>
        </div>
        <div class="el-stat-item s4">
            <div class="el-stat-icon"><i class="fas fa-user-times"></i></div>
            <div>
                <div class="el-stat-val" id="statInactive">—</div>
                <div class="el-stat-lbl">Inactive</div>
            </div>
        </div>
        <div class="el-stat-item s5">
            <div class="el-stat-icon"><i class="fas fa-pen-nib"></i></div>
            <div>
                <div class="el-stat-val" id="statJournalist">—</div>
                <div class="el-stat-lbl">Journalists</div>
            </div>
        </div>
        <div class="el-stat-item s3">
            <div class="el-stat-icon"><i class="fas fa-building"></i></div>
            <div>
                <div class="el-stat-val" id="statDepts">—</div>
                <div class="el-stat-lbl">Departments</div>
            </div>
        </div>
    </div>

    {{-- Main Card --}}
    <div class="el-card">

        <div class="el-loader-overlay show" id="elLoader">
            <div class="el-loader-ring"></div>
            <div class="el-loader-dots"><span></span><span></span><span></span></div>
            <div class="el-loader-text">Loading...</div>
        </div>

        {{-- Controls --}}
        <div class="el-controls">
            <div class="el-controls-left">
                <div style="display:flex;align-items:center;gap:7px">
                    <span style="font-size:12.5px;font-weight:600;color:var(--muted)">Show</span>
                    <select id="perPage" class="el-select">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="-1">All</option>
                    </select>
                    <span style="font-size:12.5px;font-weight:600;color:var(--muted)">entries</span>
                </div>
                <div class="el-search-wrap">
                    <i class="fas fa-search"></i>
                    <input type="text" id="elSearch" class="el-search" placeholder="Search name, ID, phone...">
                </div>
            </div>
            <div class="el-controls-right">
                <button class="el-filter-btn" id="elFilterToggle">
                    <i class="fas fa-sliders-h"></i> Filters
                    <span class="el-filter-dot"></span>
                </button>
                <button class="el-btn el-btn-secondary" id="elRefreshBtn" title="Refresh">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
        </div>

        {{-- Filter Panel --}}
        <div class="el-filter-panel" id="elFilterPanel">
            <div class="el-filter-grid">
                <div class="el-filter-item">
                    <label>Department</label>
                    <select id="filter_dept">
                        <option value="">All Departments</option>
                        @foreach (\App\Models\Department::orderBy('position')->get() as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="el-filter-item">
                    <label>Designation</label>
                    <select id="filter_designation">
                        <option value="">All Designations</option>
                        @foreach (\App\Models\Designation::orderBy('name')->get() as $desig)
                            <option value="{{ $desig->id }}">{{ $desig->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="el-filter-item">
                    <label>Status</label>
                    <select id="filter_status">
                        <option value="">All Statuses</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="el-filter-item">
                    <label>Journalist</label>
                    <select id="filter_journalist">
                        <option value="">All</option>
                        <option value="1">Journalist Only</option>
                        <option value="0">Non-Journalist</option>
                    </select>
                </div>
                <div class="el-filter-item">
                    <label>Join From</label>
                    <input type="date" id="filter_from">
                </div>
                <div class="el-filter-item">
                    <label>Join To</label>
                    <input type="date" id="filter_to">
                </div>
                <button class="el-filter-reset" id="elFilterReset">
                    <i class="fas fa-times"></i> Reset
                </button>
            </div>
        </div>

        {{-- Table --}}
        <div class="el-table-wrap">
            <table class="el-table" id="employeeTable">
                <thead>
                    <tr>
                        <th style="width:36px"><input type="checkbox" id="elSelectAll" class="el-check"></th>
                        <th style="width:54px">Photo</th>
                        <th>Name / ID</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Contact</th>
                        <th style="width:130px">Joining / Salary</th>
                        <th style="width:52px">CV</th>
                        <th style="width:110px">Status</th>
                        <th style="width:46px;text-align:center">Act</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="el-table-footer">
            <div class="el-info" id="elInfoText">Loading...</div>
            <div class="el-pagination" id="elPagination"></div>
        </div>

    </div>

    {{-- Bulk Bar --}}
    <div class="el-bulk-bar" id="elBulkBar">
        <span class="el-bulk-count"><span id="elBulkCount">0</span> selected</span>
        <div class="el-bulk-sep"></div>
        <button class="el-bulk-btn el-bulk-del" id="elBulkDelete"><i class="fas fa-trash"></i> Delete</button>
        <div class="el-bulk-sep"></div>
        <button class="el-bulk-close" id="elBulkClose"><i class="fas fa-times"></i></button>
    </div>

    {{-- Action Menu --}}
    <div class="el-action-menu" id="elActionMenu">
        <button class="el-menu-item" id="amView">
            <i class="fas fa-id-card" style="color:#10b981"></i> View Profile
        </button>
        <a class="el-menu-item" id="amEdit" href="#">
            <i class="fas fa-edit" style="color:#f59e0b"></i> Edit
        </a>
        <button class="el-menu-item" id="amQr">
            <i class="fas fa-qrcode" style="color:#8b5cf6"></i> Download QR
        </button>
        <div class="el-menu-sep"></div>
        <button class="el-menu-item danger" id="amDelete">
            <i class="fas fa-trash"></i> Delete
        </button>
    </div>

    {{-- Details Modal --}}
    <div class="modal fade el-modal" id="detailsModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title"><i class="fas fa-id-card"></i> Employee Profile</div>
                    <button class="el-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                </div>
                <div class="modal-body" id="elDetailContent">
                    <div style="display:flex;align-items:center;justify-content:center;padding:48px;gap:12px">
                        <div
                            style="width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:el-spin .7s linear infinite">
                        </div>
                        <span style="font-size:13px;color:var(--muted);font-weight:600">Loading...</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <a id="modalEditBtn" href="#" class="el-btn el-btn-primary"
                        style="padding:8px 16px;font-size:12.5px">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <button class="el-btn el-btn-secondary" data-dismiss="modal"
                        style="padding:8px 16px;font-size:12.5px">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- QR Code Modal --}}
    <div class="modal fade" id="qrModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:320px">
            <div class="modal-content qr-modal-content">
                <div class="qr-modal-header">
                    <span class="qr-modal-title"><i class="fas fa-qrcode"></i> Employee QR Code</span>
                    <button class="el-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                </div>
                <div class="qr-body">
                    <div id="qrCanvas"></div>
                    <div class="qr-name" id="qrName"></div>
                    <div class="qr-empid" id="qrEmpId"></div>
                    <button id="qrDownloadBtn" class="el-btn el-btn-primary" style="width:100%;justify-content:center">
                        <i class="fas fa-download"></i> Download PNG
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('script')
    <script src="{{ asset('/admin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/admin/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script>
        $(function() {

            /* ════════ URLs ════════ */
            var BASE_URL = '{{ url('admin/employees') }}';
            var CSRF = '{{ csrf_token() }}';
            var PROFILE_URL = '{{ route('employee.profile', ':id') }}';

            /* ════════ DataTable ════════ */
            var table = $('#employeeTable').DataTable({
                processing: false,
                serverSide: true,
                responsive: true,
                lengthChange: false,
                searching: false,
                autoWidth: false,
                pageLength: 10,
                ajax: {
                    url: '{{ route('employees.index') }}',
                    type: 'GET',
                    data: function(d) {
                        d.search_name = $('#elSearch').val();
                        d.dept = $('#filter_dept').val();
                        d.designation = $('#filter_designation').val();
                        d.status = $('#filter_status').val();
                        d.is_journalist = $('#filter_journalist').val();
                        d.from_date = $('#filter_from').val();
                        d.to_date = $('#filter_to').val();
                        d.perPage = $('#perPage').val();
                    },
                    dataSrc: function(json) {
                        if (json.stats) {
                            $('#statTotal').text(json.stats.total ?? '—');
                            $('#statActive').text(json.stats.active ?? '—');
                            $('#statInactive').text(json.stats.inactive ?? '—');
                            $('#statJournalist').text(json.stats.journalist ?? '—');
                            $('#statDepts').text(json.stats.depts ?? '—');
                        }
                        return json.data;
                    }
                },
                columns: [{
                        data: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'dept',
                        orderable: false
                    },
                    {
                        data: 'designation',
                        orderable: false
                    },
                    {
                        data: 'contact',
                        orderable: false
                    },
                    {
                        data: 'joining_date',
                        orderable: true
                    },
                    {
                        data: 'cv',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [2, 'asc']
                ],
                dom: 't',
                language: {
                    emptyTable: '<div class="el-empty"><i class="fas fa-inbox"></i><p>No employees found</p></div>',
                    zeroRecords: '<div class="el-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
                }
            });

            /* ════════ Loader ════════ */
            $('#employeeTable').on('preXhr.dt', function() {
                $('#elLoader').addClass('show');
            });
            $('#employeeTable').on('xhr.dt', function(e, settings, json) {
                $('#elLoader').removeClass('show');
                if (!json) return;
                var start = parseInt(settings._iDisplayStart) || 0;
                var pageLen = parseInt(settings._iDisplayLength) || 10;
                var total = parseInt(json.recordsFiltered) || 0;
                var from = total === 0 ? 0 : start + 1;
                var to = Math.min(start + pageLen, total);
                var pages = pageLen > 0 ? Math.ceil(total / pageLen) : 1;
                var curPage = pageLen > 0 ? Math.floor(start / pageLen) : 0;

                $('#elInfoText').html('Showing <strong>' + from + '–' + to + '</strong> of <strong>' +
                    total + '</strong> entries');

                var $pg = $('#elPagination').empty();
                if (pages <= 1) return;

                $('<button class="el-page-btn' + (curPage === 0 ? ' disabled' : '') + '">')
                    .html('<i class="fas fa-angle-left"></i>')
                    .on('click', function() {
                        if (curPage > 0) table.page('previous').draw('page');
                    })
                    .appendTo($pg);

                $.each(buildRange(curPage, pages), function(i, p) {
                    if (p === '...') {
                        $('<span style="padding:0 4px;color:var(--muted);line-height:34px;">…</span>')
                            .appendTo($pg);
                    } else {
                        $('<button class="el-page-btn' + (p === curPage ? ' active' : '') + '">')
                            .text(p + 1).on('click', function() {
                                table.page(p).draw('page');
                            })
                            .appendTo($pg);
                    }
                });

                $('<button class="el-page-btn' + (curPage >= pages - 1 ? ' disabled' : '') + '">')
                    .html('<i class="fas fa-angle-right"></i>')
                    .on('click', function() {
                        if (curPage < pages - 1) table.page('next').draw('page');
                    })
                    .appendTo($pg);
            });

            function buildRange(cur, total) {
                if (total <= 7) {
                    var r = [];
                    for (var i = 0; i < total; i++) r.push(i);
                    return r;
                }
                if (cur <= 3) return [0, 1, 2, 3, 4, '...', total - 1];
                if (cur >= total - 4) return [0, '...', total - 5, total - 4, total - 3, total - 2, total - 1];
                return [0, '...', cur - 1, cur, cur + 1, '...', total - 1];
            }

            /* ════════ Filters ════════ */
            var ft;
            $('#elSearch').on('input', function() {
                clearTimeout(ft);
                ft = setTimeout(function() {
                    table.ajax.reload();
                }, 350);
            });
            $('#filter_dept,#filter_designation,#filter_status,#filter_journalist,#filter_from,#filter_to').on(
                'change',
                function() {
                    table.ajax.reload();
                    updateDot();
                });
            $('#perPage').on('change', function() {
                var v = parseInt($(this).val());
                table.page.len(v === -1 ? 1e4 : v).draw();
            });
            $('#elFilterToggle').on('click', function() {
                $(this).toggleClass('active');
                $('#elFilterPanel').toggleClass('show');
            });
            $('#elFilterReset').on('click', function() {
                $('#filter_dept,#filter_designation,#filter_status,#filter_journalist,#filter_from,#filter_to')
                    .val('');
                $('#elSearch').val('');
                $('#perPage').val('10');
                updateDot();
                table.ajax.reload();
            });
            $('#elRefreshBtn').on('click', function() {
                $(this).find('i').addClass('fa-spin');
                table.ajax.reload(function() {
                    $('#elRefreshBtn i').removeClass('fa-spin');
                });
            });

            function updateDot() {
                var has = !!($('#filter_dept').val() || $('#filter_designation').val() ||
                    $('#filter_status').val() || $('#filter_journalist').val() ||
                    $('#filter_from').val() || $('#filter_to').val());
                $('#elFilterToggle').toggleClass('has-filters', has);
            }

            /* ════════ Action Menu ════════ */
            var $menu = $('#elActionMenu'),
                menuOpen = false,
                currentRow = null;

            $(document).on('click', '.el-action-btn', function(e) {
                e.stopPropagation();
                var $btn = $(this),
                    $row = $btn.closest('tr');
                if (menuOpen && currentRow && currentRow.is($row)) {
                    closeMenu();
                    return;
                }

                var id = $btn.data('id');
                var name = $btn.data('name') || '';
                var empid = $btn.data('empid') || '';

                $('#amEdit').attr('href', $btn.data('edit') || '#');
                $('#amView,#amDelete,#amQr').data('id', id);
                $('#amQr').data('name', name).data('empid', empid);

                $menu.appendTo('body');
                var rect = this.getBoundingClientRect();
                var top = rect.bottom + window.scrollY + 4;
                var left = rect.right + window.scrollX - 185;
                if (left < 8) left = 8;
                $menu.css({
                    top: top + 'px',
                    left: left + 'px'
                }).addClass('show');
                $btn.addClass('open');
                currentRow = $row;
                menuOpen = true;
            });

            function closeMenu() {
                $menu.removeClass('show');
                $('.el-action-btn.open').removeClass('open');
                menuOpen = false;
                currentRow = null;
            }
            $(document).on('click', function(e) {
                if (!$(e.target).closest('#elActionMenu').length) closeMenu();
            });
            $(document).on('scroll resize', closeMenu);

            /* ════════ View Profile ════════ */
            $('#amView').on('click', function() {
                var id = $(this).data('id');
                closeMenu();
                $('#elDetailContent').html(
                    '<div style="display:flex;align-items:center;justify-content:center;padding:48px;gap:12px">' +
                    '<div style="width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:el-spin .7s linear infinite"></div>' +
                    '<span style="font-size:13px;color:var(--muted);font-weight:600">Loading...</span></div>'
                );
                $('#detailsModal').modal('show');
                $('#modalEditBtn').attr('href', BASE_URL + '/' + id + '/edit');

                $.get(BASE_URL + '/' + id, function(d) {
                    var jBadge = d.is_journalist ?
                        '<span style="display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:5px;background:rgba(245,158,11,.12);color:#f59e0b;font-size:11px;font-weight:700;border:1px solid rgba(245,158,11,.2)"><i class="fas fa-pen-nib" style="font-size:9px"></i> Journalist</span>' :
                        '';
                    var sBadge = d.status === 1 ?
                        '<span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:rgba(16,185,129,.12);color:#10b981;font-size:12px;font-weight:700"><i class="fas fa-check-circle" style="font-size:10px"></i> Active</span>' :
                        '<span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:rgba(239,68,68,.12);color:#ef4444;font-size:12px;font-weight:700"><i class="fas fa-times-circle" style="font-size:10px"></i> Inactive</span>';

                    var socials = '';
                    if (d.facebook || d.twitter || d.linkedIn || d.instagram) {
                        socials = '<div class="el-social-links">';
                        if (d.facebook) socials += '<a href="' + d.facebook +
                            '"  target="_blank" class="el-social-link"><i class="fab fa-facebook"  style="color:#1877f2"></i> Facebook</a>';
                        if (d.twitter) socials += '<a href="' + d.twitter +
                            '"   target="_blank" class="el-social-link"><i class="fab fa-twitter"   style="color:#1da1f2"></i> Twitter</a>';
                        if (d.linkedIn) socials += '<a href="' + d.linkedIn +
                            '"  target="_blank" class="el-social-link"><i class="fab fa-linkedin"  style="color:#0a66c2"></i> LinkedIn</a>';
                        if (d.instagram) socials += '<a href="' + d.instagram +
                            '" target="_blank" class="el-social-link"><i class="fab fa-instagram" style="color:#e4405f"></i> Instagram</a>';
                        socials += '</div>';
                    }

                    var cvRow = d.cv ?
                        '<tr><th>CV</th><td><a href="{{ asset('') }}/' + d.cv +
                        '" target="_blank" style="display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;background:rgba(239,68,68,.1);color:#ef4444;font-size:12px;font-weight:700;text-decoration:none;border:1px solid rgba(239,68,68,.2)"><i class="fas fa-file-pdf"></i> Download CV</a></td></tr>' :
                        '';

                    $('#elDetailContent').html(
                        '<div class="el-detail-hero">' +
                        '<img src="' + d.image_path + '" class="el-detail-avatar">' +
                        '<div class="el-detail-name">' + d.name + '</div>' +
                        '<div class="el-detail-empid">' + (d.employee_id || '') + '</div>' +
                        '<div class="el-detail-badges">' + sBadge + jBadge + '</div>' +
                        '</div>' +
                        '<table class="el-detail-table">' +
                        '<tr><th>Department</th><td>' + (d.department ? d.department.name :
                        '—') + '</td></tr>' +
                        '<tr><th>Designation</th><td>' + (d.designation ? d.designation.name :
                            '—') + '</td></tr>' +
                        '<tr><th>Phone</th><td>' + (d.phone || '—') + '</td></tr>' +
                        '<tr><th>Email</th><td>' + (d.email || '—') + '</td></tr>' +
                        '<tr><th>Basic Salary</th><td>' + (d.basic_salary ? '৳ ' + Number(d
                            .basic_salary).toLocaleString() : '—') + '</td></tr>' +
                        '<tr><th>Joining Date</th><td>' + (d.joining_date || '—') +
                        '</td></tr>' +
                        '<tr><th>Expire Date</th><td>' + (d.expire_date || '—') + '</td></tr>' +
                        '<tr><th>Address</th><td>' + (d.address || '—') + '</td></tr>' +
                        (d.note ? '<tr><th>Note</th><td>' + d.note + '</td></tr>' : '') +
                        cvRow +
                        (socials ? '<tr><th>Social</th><td>' + socials + '</td></tr>' : '') +
                        '</table>'
                    );
                }).fail(function() {
                    $('#elDetailContent').html(
                        '<div class="el-empty"><i class="fas fa-exclamation-triangle" style="color:#ef4444"></i><p>Failed to load data</p></div>'
                        );
                });
            });

            /* ════════ Status Toggle ════════
               POST /admin/employees/{id}/status
               routes/web.php:
               Route::post('employees/{id}/status', [EmployeeController::class,'changeStatus'])->name('employees.status');
            ════════ */
            $(document).on('click', '.el-status', function() {
                var $btn = $(this),
                    id = $btn.data('id');
                if (!id) return;
                $btn.prop('disabled', true).css('opacity', .55);

                $.ajax({
                    url: BASE_URL + '/' + id + '/status',
                    type: 'POST',
                    data: {
                        _token: CSRF
                    },
                    success: function(res) {
                        $btn.prop('disabled', false).css('opacity', 1);
                        if (res.success) {
                            // ✅ integer 1 = active, 0 = inactive
                            if (res.status == 1) {
                                $btn.removeClass('inactive').addClass('active')
                                    .html(
                                        '<i class="fas fa-circle" style="font-size:7px"></i> Active'
                                        );
                            } else {
                                $btn.removeClass('active').addClass('inactive')
                                    .html(
                                        '<i class="fas fa-circle" style="font-size:7px"></i> Inactive'
                                        );
                            }
                            if (typeof toastr !== 'undefined')
                                toastr.success('Status changed to ' + (res.status == 1 ?
                                    'Active' : 'Inactive'));
                        }
                    },
                    error: function() {
                        $btn.prop('disabled', false).css('opacity', 1);
                        if (typeof toastr !== 'undefined') toastr.error(
                            'Failed to update status');
                    }
                });
            });

            /* ════════ QR Code ════════ */
            var qrInstance = null,
                qrCurrentId = null;

            $('#amQr').on('click', function() {
                var id = $(this).data('id');
                var name = $(this).data('name') || '';
                var empid = $(this).data('empid') || '';
                closeMenu();

                qrCurrentId = id;
                var profileUrl = PROFILE_URL.replace(':id', id);

                // reset
                $('#qrCanvas').empty();
                $('#qrName').text(name);
                $('#qrEmpId').text(empid ? '#' + empid : '');

                // generate
                qrInstance = new QRCode(document.getElementById('qrCanvas'), {
                    text: profileUrl,
                    width: 200,
                    height: 200,
                    colorDark: '#1e293b',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H,
                });

                $('#qrModal').modal('show');
            });

            $('#qrDownloadBtn').on('click', function() {
                // qrcodejs renders a canvas (modern) or img (IE fallback)
                var canvas = $('#qrCanvas canvas')[0];
                var img = $('#qrCanvas img')[0];
                if (!canvas && !img) return;

                var link = document.createElement('a');
                link.download = 'employee-qr-' + (qrCurrentId || 'code') + '.png';

                if (canvas) {
                    link.href = canvas.toDataURL('image/png');
                } else {
                    // img fallback: draw on temp canvas then export
                    var tmp = document.createElement('canvas');
                    tmp.width = img.naturalWidth;
                    tmp.height = img.naturalHeight;
                    tmp.getContext('2d').drawImage(img, 0, 0);
                    link.href = tmp.toDataURL('image/png');
                }
                link.click();
            });

            $('#qrModal').on('hidden.bs.modal', function() {
                $('#qrCanvas').empty();
                qrInstance = null;
            });

            /* ════════ Single Delete ════════ */
            $('#amDelete').on('click', function() {
                closeMenu();
                var id = $(this).data('id');
                if (!confirm('Delete this employee?')) return;
                $.ajax({
                    url: '{{ route('employees.index') }}',
                    type: 'GET',
                    data: {
                        delete_id: id
                    },
                    success: function(r) {
                        table.ajax.reload(null, false);
                        if (typeof toastr !== 'undefined') toastr.success(r.success);
                    },
                    error: function() {
                        if (typeof toastr !== 'undefined') toastr.error(
                        'Something went wrong!');
                    }
                });
            });

            /* ════════ Bulk Delete ════════ */
            $('#elSelectAll').on('change', function() {
                $('#employeeTable tbody .el-check').prop('checked', this.checked);
                toggleBulk();
            });
            $(document).on('change', '.el-check', function() {
                if (!this.checked) $('#elSelectAll').prop('checked', false);
                toggleBulk();
            });

            function getSelected() {
                return $('.el-check:checked').map(function() {
                    return $(this).val();
                }).get();
            }

            function toggleBulk() {
                var n = getSelected().length;
                $('#elBulkCount').text(n);
                n > 0 ? $('#elBulkBar').addClass('show') : $('#elBulkBar').removeClass('show');
            }
            $('#elBulkClose').on('click', function() {
                $('.el-check, #elSelectAll').prop('checked', false);
                toggleBulk();
            });
            $('#elBulkDelete').on('click', function() {
                var ids = getSelected();
                if (!ids.length || !confirm('Delete ' + ids.length + ' employee(s)?')) return;
                $.ajax({
                    url: '{{ route('employees.index') }}',
                    type: 'GET',
                    data: {
                        selected_ids: ids
                    },
                    success: function(r) {
                        table.ajax.reload(null, false);
                        if (typeof toastr !== 'undefined') toastr.success(r.success);
                        $('#elSelectAll').prop('checked', false);
                        toggleBulk();
                    },
                    error: function() {
                        if (typeof toastr !== 'undefined') toastr.error(
                        'Something went wrong!');
                    }
                });
            });

        });
    </script>
@endsection