@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    User Management List
    @parent
@stop

@section('header_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}">
    <style>
        /* Modern Tab Styling */
        .nav-tabs {
            border-bottom: none;
            background: #f4f6f9;
            padding: 10px 10px 0;
            border-radius: 8px 8px 0 0;
        }
        .nav-tabs > li > a {
            border: none !important;
            color: #666 !important;
            font-weight: 600;
            padding: 12px 25px;
            transition: 0.3s;
        }
        .nav-tabs > li.active > a {
            background-color: #fff !important;
            color: #337ab7 !important;
            box-shadow: 0 -3px 0 #337ab7 inset;
        }

        .tab-content {
            background: #fff;
            padding: 20px;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 8px 8px;
        }

        /* Action Header */
        .action-header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Search Box Customization */
        .dataTables_filter {
            margin-bottom: 15px;
        }
        .dataTables_filter input {
            border-radius: 20px;
            padding: 5px 15px;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>
@stop

@section('content')
    <section class="content-header">
        <h1><b>User Management</b></h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="livicon" data-name="home" data-size="16"></i> Dashboard</a></li>
            <li class="active">Employee & Students</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#employee_tab" aria-controls="employee_tab" role="tab" data-toggle="tab">
                            <i class="fa fa-briefcase"></i> Employees
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#student_tab" aria-controls="student_tab" role="tab" data-toggle="tab">
                            <i class="fa fa-graduation-cap"></i> Students
                        </a>
                    </li>
                </ul>

                <div class="tab-content">

                    <div role="tabpanel" class="tab-pane active" id="employee_tab">
                        <div class="action-header">
                            <h3 class="text-primary">Employee Directory</h3>
                            <div>
                                <a href="{{ route(session::get('role_name').'.employes.create') }}" class="btn btn-danger btn-sm">
                                    <i class="fa fa-plus"></i> Register
                                </a>
                                <a href="import" class="btn btn-default btn-sm">
                                    <i class="fa fa-upload"></i> Upload CSV
                                </a>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover table-bordered" id="employeeTable">
                                <thead>
                                <tr>
                                    <th>Email / ID</th>
                                    <th>Full Name</th>
                                    <th>Father Name</th>
                                    <th>Block</th>
                                    <th>Role</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach (DB::table('employees')->get() as $emp)
                                    <tr>
                                        <td>{{ $emp->user_id }}</td>
                                        <td>{{ $emp->name }}</td>
                                        <td>{{ $emp->father_name }}</td>
                                        <td>{{ $emp->block }}</td>
                                        <td>
                                            @php
                                                $role = DB::table('roles')->where('id', $emp->role_id)->first();
                                                echo $role ? $role->name : 'N/A';
                                            @endphp
                                        </td>
                                        <td>
                                            <a href="{{ URL::to(session::get('role_name').'/employes.confirm-delete',$emp->user_id) }}"
                                               class="btn btn-xs btn-danger"
                                               onClick="return confirm('Delete this record?');">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="student_tab">
                        <div class="action-header">
                            <h3 class="text-success">Student Directory</h3>
                            <a href="importstudent" class="btn btn-default btn-sm">
                                <i class="fa fa-upload"></i> Upload Students
                            </a>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover table-bordered" id="studentTable">
                                <thead>
                                <tr>
                                    <th>Student ID</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Middle Name</th>
                                    <th>Batch</th>
                                    <th>College</th>
                                    <th>Department</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach (DB::table('students')->get() as $student)
                                    <tr>
                                        <td>{{ $student->id }}</td>
                                        <td>{{ $student->firstname }}</td>
                                        <td>{{ $student->lastname }}</td>
                                        <td>{{ $student->middlename }}</td>
                                        <td><span class="label label-info">{{ $student->batch }}</span></td>
                                        <td>{{ $student->college }}</td>
                                        <td>{{ $student->department }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@stop

@section('footer_scripts')
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable for Employee
            $('#employeeTable').DataTable({
                "responsive": true,
                "language": {
                    "search": "Search Employee: ",
                    "searchPlaceholder": "Type name, email or block..."
                }
            });

            // Initialize DataTable for Student
            $('#studentTable').DataTable({
                "responsive": true,
                "language": {
                    "search": "Search Student: ",
                    "searchPlaceholder": "Type ID, name or batch..."
                }
            });

            // Handle Tab Switching (Ensures table columns align correctly when tabs are clicked)
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
            });
        });
    </script>
@stop