@extends('layouts.app')

@section('content')

    <div class="container">
        <div class="row">
            <h3>Staff View</h3>
        </div>

        <div class="row">
            <div class="col s12"></div>
            <table class="striped responsive-table">
                <thead class="card-panel teal lighten-2 py-10">
                    <tr>
                        <td>#</td>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Department</th>
                        <th>Email</th>
                        <th>Designation</th>                   
                        <th>Status</th>                   
                        <th>Action</th>               
                    </tr>
                </thead>
                <tbody>
                @foreach ($staffs as $staff)
                <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{ $staff->first_name }}</td>                    
                    <td>{{ $staff->last_name }}</td>                    
                    <td>{{ $staff->department }}</td>                    
                    <td>{{ $staff->email }}</td>                    
                    <td>{{ $staff->designation }}</td>                  
                    <td>{{ $staff->activated }}</td>                 
                    <td>
                        <div class="switch">
                                <label>
                                Off
                                <input data-id="{{$staff->id}}" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $staff->activated ? 'checked' : '' }}>
                                <span class="lever"></span>
                                On
                                </label>
                          </div>
                    </td>              
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

    </div>
    

@endsection