

<?php $__env->startSection('page_title', 'Department Management'); ?>

<?php $__env->startSection('content'); ?>
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">Company Departments
            </h2>
            <p class="text-secondary opacity-75 mb-0">Manage organizational structure and departmental assignments.</p>
        </div>
        <div class="col-auto">
            <a href="<?php echo e(route('admin.departments.create')); ?>"
                class="btn btn-primary px-4 py-2 fw-bold d-flex align-items-center gap-2 shadow-lg"
                style="border-radius: 0.625rem; font-size: 0.9375rem;">
                <span class="material-symbols-outlined" style="font-size: 1.25rem;">account_tree</span>
                Add Department
            </a>
        </div>
    </div>

    <!-- Table Card -->
    <div class="card border-0 shadow-sm overflow-hidden"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="deptTable">
                    <thead class="bg-light bg-opacity-50">
                        <tr>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 60px;">#</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Department Name</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Head of Dept</th>
                            <th class="px-4 py-3 text-center text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Active Members</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Created Since</th>
                            <th class="px-4 py-3 text-end text-uppercase text-secondary fw-bold pe-4"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 140px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dept): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="transition-all hover-row">
                                <td class="px-4 py-4 text-secondary fw-medium" style="font-size: 0.8125rem;">
                                    <?php echo e(str_pad($loop->iteration, 2, '0', STR_PAD_LEFT)); ?></td>
                                <td class="px-4 py-4">
                                    <span class="fw-bold text-dark" style="font-size: 0.9375rem;"><?php echo e($dept->name); ?></span>
                                </td>
                                <td class="px-4 py-4 text-secondary" style="font-size: 0.875rem;">
                                    <span class="opacity-50">Not Assigned</span>
                                </td>
                                <td class="px-4 py-4 text-center">
                                    <span class="px-3 py-1 rounded-pill fw-bold"
                                        style="font-size: 0.75rem; background-color: #eef2ff; color: #4f46e5; border: 1px solid #4f46e515;">
                                        <?php echo e($dept->users_count); ?> Members
                                    </span>
                                </td>
                                <td class="px-4 py-4 text-secondary fw-medium" style="font-size: 0.8125rem;">
                                    <?php echo e($dept->created_at->format('M d, Y')); ?>

                                </td>
                                <td class="px-4 py-4 text-end pe-4">
                                    <div class="d-flex justify-content-end gap-1">
                                        <a href="<?php echo e(route('admin.departments.edit', $dept->id)); ?>"
                                            class="btn btn-icon hover-emerald" title="Edit">
                                            <span class="material-symbols-outlined fs-5">edit</span>
                                        </a>
                                        <form action="<?php echo e(route('admin.departments.destroy', $dept->id)); ?>" method="POST"
                                            id="delDept-<?php echo e($dept->id); ?>">
                                            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                            <button type="button" onclick="confirmDelete('<?php echo e($dept->id); ?>')"
                                                class="btn btn-icon hover-red" title="Delete">
                                                <span class="material-symbols-outlined fs-5">delete</span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
            <!-- Pagination Placeholder -->
            <div class="px-4 py-4 bg-light bg-opacity-25 border-top d-flex align-items-center justify-content-between">
                <p class="text-secondary mb-0 fw-medium" style="font-size: 0.8125rem;">Showing <span
                        class="text-dark fw-bold">1-<?php echo e(count($departments)); ?></span> departments</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_left</span></button>
                    <button class="btn btn-primary btn-sm px-2.5 py-1 fw-bold" style="font-size: 0.75rem;">1</button>
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_right</span></button>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .tracking-tight {
            letter-spacing: -0.015rem;
        }

        .btn-icon {
            padding: 0.4rem;
            border-radius: 0.5rem;
            color: #94a3b8;
            background: transparent;
            border: 0;
            transition: all 0.2s;
        }

        .btn-icon:hover {
            color: #1a1f2e;
            background: #eaedf2;
        }

        .hover-emerald:hover {
            color: #059669;
            background: #ecfdf5;
        }

        .hover-red:hover {
            color: #dc2626;
            background: #fef2f2;
        }

        .hover-row:hover {
            background-color: rgba(248, 250, 252, 0.5) !important;
        }

        /* DataTable Overrides */
        #deptTable_wrapper .dataTables_filter,
        #deptTable_wrapper .dataTables_length,
        #deptTable_wrapper .dataTables_info,
        #deptTable_wrapper .dataTables_paginate {
            display: none !important;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        $(document).ready(function() {
            $('#deptTable').DataTable({
                paging: true,
                lengthChange: false,
                pageLength: 20,
                searching: false
            });
        });

        function confirmDelete(id) {
            Swal.fire({
                title: 'Delete Department?',
                text: "This may affect employees assigned to this department. Proceed?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Delete Department',
                borderRadius: '1rem'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(`delDept-${id}`).submit();
                }
            });
        }
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH G:\wamp64\www\projects\attendance\resources\views/admin/departments/index.blade.php ENDPATH**/ ?>