@extends('layouts.staff')

@section('content')
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Clock In / Clock Out</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="{{url('/')}}/staff/dashboard">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Clock In / Clock Out</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div>
                                <form method="GET">
                                    <div class="mb-3" style="display: flex;">
                                        <div class="" style="align-items: flex-start; justify-content: flex-end; display: flex; flex: 1 1 0%;">
                                            <div style="display: flex; align-items: center;">
                                                <label class="mb-0 ml-2"> From</label> <input type="date" name="from" class="form-control ml-2" value="{{ request()->get('from') ?? '' }}">
                                                <label class="mb-0 ml-2"> To</label> <input type="date" name="to" class="form-control ml-2" value="{{ request()->get('to') ?? '' }}">
                                                <button class="btn btn-primary ml-2">Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div id="DataTables_Table_0_wrapper">
                                    <table class="data-table" id="DataTables_Table_0"> <!-- data-table data-table-feature -->
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th scope="col">Check-in</th>
                                                <th scope="col">Check-out</th>
                                                <th scope="col">Hours</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if( $staff->clock )
                                                @foreach( $staff->clock as $date => $clock )

                                                    <tr>
                                                        <td>
                                                            {{ $clock['date'] ?? '' }}
                                                        </td> 
                                                        <td>
                                                            {{  $clock['check_in'] ?? '' }}
                                                        </td>
                                                        <td>
                                                            {{  $clock['check_out'] ?? '' }}
                                                        </td>
                                                        <td>
                                                            {{  $clock['hours'] ?? '' }}
                                                        </td>

                                                        <td></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr colspans="5">
                                                    <td colspans="5">
                                                        <p>No records found!</p>
                                                    </td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection