@extends('layouts.employee')
@section('content')
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">Team Attendance</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                <li class="breadcrumb-item active">Team Attendance</li>
                </ol>
            </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <!--<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header py-2">
                <a class="icon-demo-content d-flex justify-content-between align-items-center"
                data-bs-toggle="collapse" href="#collapseExample2" aria-expanded="false"
                aria-controls="collapseExample2">
                <h4 class="card-title mb-0">Filter By</h4>
                <i class="bx bxl-pocket text-primary"> </i>
                </a>
            </div>
            <div class="collapse show" id="collapseExample2">
                <div class="card-body">
                    <div class="row"> 
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="phone1">From Date <span class="text-danger"> * </span> </label>
                            <input type="text" class="form-control" id="joining-date"
                                value="DD/MM/YYYY">
                        </div> 
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="phone1">To Date <span class="text-danger"> * </span> </label>
                            <input type="text" class="form-control" id="joining-date2"
                                value="DD/MM/YYYY">
                        </div> 
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="formrow-email-input">Status</label>
                            <select class="form-control select2">
                                <option value="">Select Status</option>
                                <option value="London">Present</option>
                                <option value="Manchester">Absent</option>
                                <option value="Liverpool">Late In</option>
                                <option value="Liverpool">Half Day</option>
                            </select>
                        </div> 
                        <div class="col-md-3 mb-3">
                            <label class="form-label" for="formrow-email-input">Employee Name</label>
                            <select class="form-control select2">
                                <option value="">Select Employee Name</option>
                                <option value="London">Alimoon Nisha</option>
                                <option value="Manchester">Abdullah Al Mahmud</option>
                                <option value="Liverpool">Kanchon Sarkar</option> 
                            </select>
                        </div>  
                        <div class="col-md-12 text-end">   
                            <button type="submit" class="btn btn-outline-primary w-sm me-2">Reset</button>
                            <button type="submit" class="btn btn-primary w-sm">Filter</button>  
                        </div>
                    </div>
                
                </div>
            </div>
        </div>
    </div>
    </div> -->
    <!-- end row -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Team Attendance List <span class="text-info"> </span></h4>
                </div>
                <div class="card-body pt-0 px-2">
                    <div class="table-responsive">
                        <table class="table table-nowrap align-middle">
                            <thead>
                                <tr>  
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Employee ID</th>
                                    <th>Employee type</th>
                                    <th>Status</th>
                                    <th>In Time</th> 
                                </tr>
                            </thead>
                            <tbody>
                                @if((isset($data)) && (count($data) > 0))
                                    @foreach($data as $value)
                                    <tr>                               
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $value['emp_name'] ?? '' }}</td>
                                        <td>{{ $value['emp_id'] ?? '' }}</td>
                                        <td>{{ $value['emp_type'] ?? '' }}</td>
                                        <td>
                                        <span class="badge {{ $value['status'] == 'Present' ? 'bg-success' : ($value['status'] == 'Late In' ? 'bg-warning' : ($value['status'] == 'Half Day' ? 'bg-primary' : ($value['status'] == 'Absent' ? 'bg-danger' : ($value['status'] == 'Applied' ? 'bg-purple' : 'bg-info'))))}}">{{ $value['status'] ?? '' }}</span>
                                        </td>
                                        <td>{{ $value['in_time'] ?? '00:00' }}</td>
                                    </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        <nav>
                            
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    <!-- end col -->
    </div>
</div>
@endsection