@extends('admin.layouts.layouts')

@section('title', 'Daily Attendance Employee')

@section('content')

    <style>
        .select2-container {
            margin: 0 5px 7px 0 !important;
        }

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

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 4px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 15px !important;
            margin-top: -5px !important;
        }
    </style>

    <div class="page-header">
        <h3 class="page-title">
            Daily Attendance Employee
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Daily Attendance Employee</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
            </div>
            <div class="d-flex align-items-center">
                <select class="form-control form-control-sm d-inline-block mr-2 departmentSelect" style="width: auto;" id="">
                    <option value="">Select Department</option>
                    @foreach ($employeeDepartments as $key => $employeeDepartment)
                        <option value="{{ $key }}">{{ $employeeDepartment }}</option>
                    @endforeach
                </select>
                <input type="text" class="form-control attendanceDate" style="padding: 0.520rem 1.375rem !important; margin: 0 5px 6px 0; width: 60%;">
                <button class="btn btn-primary btn-sm mb-2" title="Search" id="refreshAttendance">
                    <i class="fa-solid fa-search"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <table class="table" id="attendance-summary-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Employee Name</th>
                        <th>Date</th>
                        <th>Day</th>
                        <th>Check-in Time</th>
                        <th>Check-out Time</th>
                        <th>Total Hours</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="employeeDailyAttendanceModal" tabindex="-1" role="dialog" aria-labelledby="employeeDailyAttendanceModalLabel" aria-hidden="true"
    data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="employeeDailyAttendanceModalLabel">Edit Employee Attendance</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="employeeDailyAttendanceForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="employeeDailyAttendanceId">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="check_in_time" class="form-label">Check In Time <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="check_in_time" id="check_in_time" class="form-control checkInTime"
                                placeholder="Select Check In Time" data-parsley-required data-parsley-datecustom
                                data-parsley-trigger='keyup' data-parsley-required-message="Please select check in time"
                                data-parsley-errors-container='#check_in_time_error'>
                            <div class="invalid-feedback" id="check_in_time_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="check_in_out" class="form-label">Check Out Time <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="check_in_out" id="check_in_out" class="form-control checkOutTime"
                                placeholder="Select Check Out Time" data-parsley-required data-parsley-datecustom
                                data-parsley-trigger='keyup' data-parsley-required-message="Please select check out time"
                                data-parsley-errors-container='#check_in_out_error'>
                            <div class="invalid-feedback" id="check_in_out_error"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        const employeeAttendanceAjaxList = "{{ route('daily-attendance-employee-list') }}";
        const employeeDailyAttendanceStore = "{{ route('daily-attendance-employee-edit') }}";
    </script>
    <script src="{{ asset('assets/js/admin/dailyAttendanceEmployee.js') }}?time={{ time() }}"></script>
@endsection