@extends('admin.layouts.app')
@section('title', get_setting('site_name').' Attendance Create')
@section('content')
    <style>
        .select2-selection__rendered {
            line-height: 31px !important;
        }

        .select2-container .select2-selection--single {
            height: 35px !important;
        }

        .select2-selection__arrow {
            height: 34px !important;
        }
    </style>
    <div class="row mt-3 mb-3">
        <div class="col-md-12 col-lg-12 col-xl-10 mx-auto">
            <form action="{{ route('attendance.store') }}" method="POST">
                <div class="card">
                    <div class="card-header gutters-10">
                        <h5>{{ __('Daily Attendance') }}</h5>
                    </div>
                    <div class="card-body">
                        <table class="table aiz-table">
                            <thead>
                            <tr>
                                <th>{{ __('Employee') }}</th>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Sign in') }}</th>
                                <th>{{ __('Sign out') }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @csrf
                            <tr>
                                <td style="min-width: 280px;">
                                    <select name="staff_id" id="attendance_staff_id" class="form-control select2" required>
                                        <option value="">{{ __('Select employee') }}</option>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}" @selected((int) old('staff_id') === (int) $staff->id)>
                                                {{ $staff->selectOptionLabel() }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input class="form-control" type="date" name="date" value="{{ old('date', date('Y-m-d')) }}">
                                </td>
                                <td>
                                    <input class="form-control timepickers" type="time" name="signin" value="{{ old('signin') }}">
                                </td>
                                <td>
                                    <input class="form-control timepickers" type="time" name="signout" value="{{ old('signout') }}">
                                </td>
                                <td>
                                    <input class="btn btn-primary" type="submit" value="{{ __('Submit') }}">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function () {
            $('#attendance_staff_id').select2({
                width: '100%',
                placeholder: @json(__('Select employee')),
                allowClear: true
            });
        });
    </script>
@endsection