{{-- Today Leaves Summary --}}
<div class="row">
    <div class="col-lg-12">

        <div class="row">
            <!-- Dashboard Summery Card Start -->
            @foreach ($data['dashboardMenus']['today'] as $key => $item)
                <div class="col-sm-6 col-xs-6 col-md-4 col-lg-4 col-xl-4 col-xxl-3 pb-24">
                    <div class="card summery-card ot-card h-100">
                        <div class="card-heading d-flex align-items-center flex-wrap gap-10">
                            <div class="card-content">
                                <h4> {{ @$item['title'] }}</h4>
                                <h1> {{ @$item['number'] }}</h1>
                            </div>
                            <div class="card-icon {{ @$item['color_class'] }} dashboard-card-icon">
                                <i class="{{ $item['image'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>


        {{--  employee Summary --}}
        <div class="card ot-card mb-30">
            <div class="card-title mb-20">
                <h3 class="text-capitalize">{{_trans('attendance.Today Attendance Summary')}}</h3>
            </div>
            <div class="d-flex gap-5 flex-wrap">

                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-lightseagreen width-60 height-60 mr-2">
                        <i class="las la-users"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['todayAbsents'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Scheduled') }}</p>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-violet width-60 height-60 mr-2">
                        <i class="las la-user-clock"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['todayLate'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Late') }}</p>
                    </div>
                </div>


                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-brown width-60 height-60 mr-2">
                        <i class="las la-user-alt-slash"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['todayAbsents'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Absence') }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-lightseagreen width-60 height-60 mr-2">
                        <i class="las la-running"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['todayPresents'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Present') }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center mr-5 gap-3">
                    <div class="icon-box dashboard-card-icon circle-browns circle-primary width-60 height-60 mr-2">
                        <i class="las la-spinner"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['totalPendingLeaves'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Pending Leave') }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-brown width-60 height-60 mr-2">
                        <i class="lab la-accessible-icon"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['earlyLeave'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Early Leave') }} </p>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-violet width-60 height-60 mr-2">
                        <i class="lab la-accessible-icon"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['earlyLeave'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Leave') }} </p>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <div class="icon-box dashboard-card-icon circle-green width-60 height-60 mr-2">
                        <i class="lab la-accessible-icon"></i>
                    </div>
                    <div>
                        <h6 class="mb-1 fs-18">{{ $data['earlyLeave'] }}</h6>
                        <p class="text-secondary text-capitalize mb-1">{{ _trans('attendance.Today Late') }} </p>
                    </div>

                </div>


            </div>
        </div>
        {{-- / employee Summary --}}
    </div>
    {{-- <div class="col-lg-4">
        <x-activity-feed.activity-feed-component />
    </div> --}}
</div>
{{-- End Today Leaves Summary --}}

<div class="row">
    {{-- Today Absent Employee --}}
    <div class="col-md-12 pb-24 pl-12 pr-12">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline pl-0 pt-0 mb_10">
                <h3>{{ _trans('dashboard.Today Absent Employee') }}</h3>
            </div>
            <div class="table-content table-basic">
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered">
                        <thead class="thead">
                            <tr>
                                <th class="text-left">{{ _trans('common.ID') }}</th>
                                <th>{{ _trans('common.Image') }}</th>
                                <th>{{ _trans('common.Name') }}</th>
                                <th>{{ _trans('common.Employee ID') }}</th>
                                <th>{{ _trans('common.Role') }}</th>
                                <th>{{ _trans('common.Phone') }}</th>
                                <th>{{ _trans('common.Shift') }}</th>
                                <th>{{ _trans('common.Department') }}</th>
                                <th>{{ _trans('common.Designation') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody" id="today_absent_employee">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Today late Employee --}}
    <div class="col-md-6 pb-24 pl-12 pr-12">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline pl-0 pt-0 mb_10">
                <h3>{{ _trans('dashboard.Today Late Employee') }}</h3>
            </div>
            <div class="table-content table-basic">
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered">
                        <thead class="thead">
                            <tr>
                                <th>{{ _trans('common.Image') }}</th>
                                <th>{{ _trans('common.Name') }}</th>
                                <th>{{ _trans('common.Department') }}</th>
                                <th>{{ _trans('common.Schedule Start') }}</th>
                                <th>{{ _trans('common.Checkin') }}</th>
                                <th>{{ _trans('common.Late Reason') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody" id="today_late_employee">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Today early leave --}}
    <div class="col-md-6 pb-24 pl-12 pr-12">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline pl-0 pt-0 mb_10">
                <h3>{{ _trans('dashboard.Today Early leave') }}</h3>
            </div>
            <div class="table-content table-basic">
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered">
                        <thead class="thead">
                            <tr>
                                <th>{{ _trans('common.Image') }}</th>
                                <th>{{ _trans('common.Name') }}</th>
                                <th>{{ _trans('common.Schedule End') }}</th>
                                <th>{{ _trans('common.Checkin') }}</th>
                                <th>{{ _trans('common.Checkout') }}</th>
                                <th>{{ _trans('common.Stay') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody" id="today_early_leave_employee">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 pb-24 pl-12 pr-12">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline pl-0 pt-0 mb_10">
                <h3>{{ _trans('dashboard.Appointment Schedule') }}</h3>
            </div>
            <div class="table-content table-basic">
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered">
                        <thead class="thead">
                            <tr>
                                <th class="text-left">{{ _trans('common.Title') }}</th>
                                <th>{{ _trans('common.With') }}</th>
                                <th>{{ _trans('common.Location') }}</th>
                                <th>{{ _trans('common.Date Time') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody" id="appointment_schedule">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 pb-24 pl-12 pr-12">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline pl-0 pt-0 mb_10">
                <h3>{{ _trans('dashboard.Meeting schedule') }}</h3>
            </div>
            <div class="table-content table-basic">
                <div class="table-responsive  min-height-500">
                    <table class="table table-bordered">
                        <thead class="thead">
                            <tr>
                                <th class="text-left">{{ _trans('common.Title') }}</th>
                                <th>{{ _trans('common.With') }}</th>
                                <th>{{ _trans('common.Location') }}</th>
                                <th>{{ _trans('common.Date Time') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody" id="meeting_schedule">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>