<div>
    @php
    $user = Auth::user();
    $departments = \App\Models\Faculty::pluck('department')->unique()->toArray();
    @endphp
    <div class="pd-20 card-box mb-30">
        <div class="row mb-20">
            <div class="col-md-4">
                <label for="search"><b class="text-secondary">Search</b>:</label>
                <input wire:model.live="search" type="text" id="search" class="form-control" placeholder="Search faculty...">
            </div>
            <div class="col-md-6">
                <label for="department"><b class="text-secondary">Department</b>:</label>
                <select wire:model.live="department" id="department" name="department" class="custom-select form-control"
                    @if($user->type === 'admin') disabled @endif
                    >
                    @if($user->type === 'superAdmin')
                    <option value="">-- Select Department --</option>
                    @foreach($departments as $dept)
                    <option
                        value="{{ $dept }}">
                        {{ $dept }}
                    </option>
                    @endforeach
                    @endif
                    @if($user->type === 'admin')
                    <option
                        value="{{$user->department}}">
                        {{ $user->department }}
                    </option>
                    @endif
                </select>

                @if($user->type === 'admin')
                <!-- Hidden input to actually submit the value since the select is disabled -->
                <input type="hidden" name="department" value="{{ $user->department }}">
                @endif
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped table-auto table-sm">
                <thead class="bg-secondary text-white">
                    <tr>
                        <th scope="col">#ID</th>
                        <th scope="col">Image</th>
                        <th scope="col">Name</th>
                        <th scope="col">Position</th>
                        <th scope="col">Department</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($faculties as $faculty)
                    <tr>
                        <td scope="row">{{ $faculty->id }}</td>
                        <td>
                            
                            @if($faculty->profile_picture)
                            <img src="{{ asset('/images/faculty/' . $faculty->profile_picture) }}" width="100" alt="{{ $faculty->faculty_name }}">
                            @else
                            <span>No Image</span>
                            @endif
                        </td>
                        <td>{{ $faculty->faculty_name }}</td>
                        <td>{{ $faculty->faculty_position }}</td>
                        <td>{{ $faculty->department }}</td>
                        <td class="table-actions">
                            <a href="{{ route('admin.edit_faculty', ['id'=>$faculty->id]) }}" data-color="#265ed7" style="color:rgb(38, 94, 215)">
                                <i class="icon-copy dw dw-edit2"></i>
                            </a>
                            <a href="javascript:;" wire:click="deleteFaculty({{ $faculty->id }})" data-color="#e95959" style="color:rgb(233, 89, 89)">
                                <i class="icon-copy dw dw-delete-3"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center">No faculty found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    <div class="block mt-1">
        {{ $faculties->links('livewire::simple-bootstrap') }}
    </div>
    </div>
</div>