@extends('layouts.base')
@section('content')
    <style type="text/css">
        .small-box {
            border-radius: .25rem;
            box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
            display: block;
            margin-bottom: 20px;
            position: relative;
        }

        .bg-info,
        .bg-info>a {
            color: #fff !important;
        }

        .bg-info {
            background-color: #17a2b8 !important;
        }

        .small-box>.inner {
            padding: 10px;
        }

        .small-box h3 {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 0 0 10px;
            padding: 0;
            white-space: nowrap;
        }

        .small-box p {
            font-size: 1rem;
        }

        .small-box .icon {
            color: rgba(0, 0, 0, .15);
            z-index: 0;
        }

        .small-box>.small-box-footer {
            background-color: rgba(0, 0, 0, .1);
            color: rgba(255, 255, 255, .8);
            display: block;
            padding: 3px 0;
            position: relative;
            text-align: center;
            text-decoration: none;
            z-index: 10;
        }

        .small-box .icon>i.icon {
            font-size: 70px;
            top: 20px;
        }

        .small-box .icon>i {
            font-size: 90px;
            position: absolute;
            right: 15px;
            top: 15px;
            transition: -webkit-transform .3s linear;
            transition: transform .3s linear;
            transition: transform .3s linear, -webkit-transform .3s linear;
        }




        .circle-tile {
            margin-bottom: 15px;
            text-align: center;
        }

        .circle-tile-heading {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 100%;
            color: #FFFFFF;
            height: 80px;
            margin: 0 auto -40px;
            position: relative;
            transition: all 0.3s ease-in-out 0s;
            width: 80px;
        }

        .circle-tile-heading .fa {
            line-height: 80px;
        }

        .circle-tile-content {
            padding-top: 50px;
        }

        .circle-tile-number {
            font-size: 26px;
            font-weight: 700;
            line-height: 1;
            padding: 5px 0 15px;
        }

        .circle-tile-description {
            text-transform: uppercase;
        }

        .circle-tile-footer {
            background-color: rgba(0, 0, 0, 0.1);
            color: rgba(255, 255, 255, 0.5);
            display: block;
            padding: 5px;
            transition: all 0.3s ease-in-out 0s;
        }

        .circle-tile-footer:hover {
            background-color: rgba(0, 0, 0, 0.2);
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
        }

        .circle-tile-heading.dark-blue:hover {
            background-color: #2E4154;
        }

        .circle-tile-heading.green:hover {
            background-color: #138F77;
        }

        .circle-tile-heading.orange:hover {
            background-color: #DA8C10;
        }

        .circle-tile-heading.blue:hover {
            background-color: #2473A6;
        }

        .circle-tile-heading.red:hover {
            background-color: #CF4435;
        }

        .circle-tile-heading.purple:hover {
            background-color: #7F3D9B;
        }

        .tile-img {
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
        }

        .dark-blue {
            background-color: #34495E;
        }

        .green {
            background-color: #16A085;
        }

        .blue {
            background-color: #2980B9;
        }

        .orange {
            background-color: #F39C12;
        }

        .red {
            background-color: #E74C3C;
        }

        .purple {
            background-color: #8E44AD;
        }

        .dark-gray {
            background-color: #7F8C8D;
        }

        .gray {
            background-color: #95A5A6;
        }

        .light-gray {
            background-color: #BDC3C7;
        }

        .yellow {
            background-color: #F1C40F;
        }

        .text-dark-blue {
            color: #34495E;
        }

        .text-green {
            color: #16A085;
        }

        .text-blue {
            color: #2980B9;
        }

        .text-orange {
            color: #F39C12;
        }

        .text-red {
            color: #E74C3C;
        }

        .text-purple {
            color: #8E44AD;
        }

        .text-faded {
            color: rgba(255, 255, 255, 0.7);
        }
    </style>
    <div class="panel-header bg-primary-gradient">
        <div class="page-inner">
            <div>
                <p class="text-white ">Today</p>
                <hr class="bg-white">
                <h1 class="text-white">{{ $today->format('jS \O\f F, Y') }}</h2>
                    <h5 class="text-white uppercase">{{ $today->dayName }}</h5>

                    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">

                        <div>
                            <p class="text-white">Login Time {{ $login_time->format('h.i A') }}</p>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="page-inner">
        <div class="row">
            <div class="col-md-12">
                @can('dashboard_company_news')
                    @if (count($newsEvents) > 0)
                        <div class="alert alert-primary">
                            <button type="button" aria-hidden="true" class="close" data-dismiss="alert">
                                <i class="nc-icon nc-simple-remove"></i>
                            </button>

                            <span><b> {{ $newsEvents[0]->title }} </b></span>
                            <br>
                            <span class="text-justify"> {{ $newsEvents[0]->description }}</span>
                        </div>
                    @endif
                    @endif
                    @canany(['dashboard_approval_count', 'dashboard_notification_count','dashboard_pending_leave_count'])
                        <div class="card">
                            <div class="card-body">

                                <div class="row">
                                    @can('dashboard_approval_count')
                                    <div class="col-sm-12 col-md-3">
                                        <!-- small box -->
                                        <div class="small-box card-info">
                                            <div class="inner">
                                                <h3>{{ $approvals }}</h3>

                                                <p>Approvals</p>
                                            </div>
                                            <div class="icon"><i class="fas fa-calendar icon"></i>

                                            </div>
                                            <a href="{{ route('approval') }}" class="small-box-footer">View Approvals <i
                                                    class="fas fa-arrow-circle-right"></i></a>
                                        </div>
                                    </div>
                                    @endif


                                    @can('dashboard_notification_count')
                                        <div class="col-sm-12 col-md-3">
                                            <div class="small-box card-primary">
                                                <div class="inner">
                                                    <h3>{{ Auth::user()->unreadNotifications()->count() }}</h3>

                                                    <p>Notifications</p>
                                                </div>
                                                <div class="icon"><i class="fas fa-calendar icon"></i>

                                                </div>
                                                <a href="{{ route('notifications') }}" class="small-box-footer">View Notifications <i
                                                        class="fas fa-arrow-circle-right"></i></a>
                                            </div>
                                        </div>
                                    @endif
                                    


                                    
                                    @can('dashboard_pending_leave_count')
                                        <div class="col-sm-12 col-md-3">
                                            <div class="small-box card-warning" style="color:#333">
                                                <div class="inner">
                                                    <h3>{{ $pendingLeaves }}</h3>

                                                    <p>Pending Leaves Request</p>
                                                </div>
                                                <div class="icon"><i class="fas fa-calendar icon"></i>

                                                </div>
                                                <a href="#" class="small-box-footer"  style="color:#333">View Pending Leaves <i
                                                        class="fas fa-arrow-circle-right"></i></a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                    </div>
                                </div>
                            @endcan
                            @canany(['dashboard_attendance_summary', 'dashboard_superior_detail', 'dashboard_subordinate_details',
                                'dashboard_own_leave_summary', 'dashboard_holiday_list'])
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            @can('dashboard_attendance_summary')
                                                <div class="col-sm-12 col-md-3">
                                                    <div style="overflow: scroll">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th style="width: 40%; vertical-align: middle; background:#f1f1f1; font-weight:normal"
                                                                        colspan="2">Attendance Detail <b>{{ $activeEmployees }}</b></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>


                                                                <tr>
                                                                    <td style="width: 40%; vertical-align: middle;">Present</td>
                                                                    <td id="annualLeaveAllocation" style="text-align: center">
                                                                        <b>{{ $presentEmployees }}</b>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="width: 40%; vertical-align: middle;">Leave Requested</td>
                                                                    <td id="casualLeaveAllocation" style="text-align: center">
                                                                        <b>{{ $leavedEmployees }}</b>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="width: 40%; vertical-align: middle;">Absents</td>
                                                                    <td id="sickLeaveAllocation" style="text-align: center">
                                                                        <b>{{ $activeEmployees - ($presentEmployees + $leavedEmployees) }}</b>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <button class="form-control btn btn-info btn-lg" type="button" id="btnViewAttendance">
                                                        <i class="icon-menu"></i> &nbsp;
                                                        View Attendance
                                                    </button>
                                                </div>
                                            @endcan

                                            @canany(['dashboard_superior_detail', 'dashboard_subordinate_details'])

                                                <div class="col-sm-12 col-md-4">
                                                    @can('dashboard_superior_detail')
                                                        @if (isset($superiorDetail) && isset($superiorDetail[0]))
                                                            <h6 class="mt-3 text-muted text-primary uppercase">My Superior</h6>
                                                            <hr>
                                                            <div class="d-flex">

                                                                <div class="avatar avatar-xl">
                                                                    <span class="avatar-title rounded-circle border border-white bg-info"
                                                                        style="padding: 0;"> </span>
                                                                </div>
                                                                <div class="flex-1 ml-3 pt-2">

                                                                    <h6 class="text-uppercase fw-bold mb-1">{{ $superiorDetail[0]->calling_name }}
                                                                        <span class="text-info pl-3"></span>
                                                                    </h6>
                                                                    <span class="text-muted text-primary">{{ $superiorDetail[0]->title }}
                                                                        {{ $superiorDetail[0]->first_name }}
                                                                        {{ $superiorDetail[0]->last_name }}</span><br>
                                                                    <span class="text-muted">Contact - <span
                                                                            class="text-primary text-bold">{{ $superiorDetail[0]->contact_no }}
                                                                        </span> </span><br>

                                                                </div>
                                                            </div>

                                                            <hr>
                                                        @endif
                                                    @endcan

                                                    @can('dashboard_subordinate_details')
                                                        <button class="form-control btn btn-info btn-lg" type="button" id="btnViewSubordinates">
                                                            <i class="icon-menu"></i> &nbsp;
                                                            View Subordinates
                                                        </button>
                                                    @endcan
                                                </div>

                                            @endcan

                                            @canany(['dashboard_own_leave_summary', 'dashboard_holiday_list'])
                                                <div class="col-sm-12 col-md-5">
                                                    @if (count($leaveAllocations) > 0)
                                                        @can('dashboard_own_leave_summary')
                                                            <div style="overflow: scroll">
                                                                <table class="table table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th style="width: 40%; vertical-align: middle; background:#f1f1f1; font-weight:normal"
                                                                                colspan="4">Leave Summary - {{ date('Y') }}</th>
                                                                        </tr>
                                                                        <tr>
                                                                            <th style="width: 40%; vertical-align: middle;">Leave Type</th>
                                                                            <th>Allocated Leaves</th>
                                                                            <th>Taken Leaves</th>
                                                                            <th>Balance Leaves</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>

                                                                        @foreach ($leaveAllocations as $leaveAllocation)
                                                                            <tr>
                                                                                @if ($leaveAllocation->leave_type == 1)
                                                                                    <td style="width: 40%; vertical-align: middle;">Annual Leave
                                                                                    </td>
                                                                                @elseif($leaveAllocation->leave_type == 2)
                                                                                    <td style="width: 40%; vertical-align: middle;">Casual Leave
                                                                                    </td>
                                                                                @elseif($leaveAllocation->leave_type == 3)
                                                                                    <td style="width: 40%; vertical-align: middle;">Sick Leave</td>
                                                                                @elseif($leaveAllocation->leave_type == 4)
                                                                                    <td style="width: 40%; vertical-align: middle;">Lieu Leave</td>
                                                                                @endif
                                                                                <td id="annualLeaveAllocation" style="text-align: center">
                                                                                    {{ $leaveAllocation->number_of_days }}</td>
                                                                                <td id="annualLeaveTaken" style="text-align: center">
                                                                                    {{ $leaveAllocation->taken_days }}</td>
                                                                                <td id="annualLeaveBalance" style="text-align: center">
                                                                                    {{ $leaveAllocation->balance_days }}</td>
                                                                            </tr>
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        @endcan
                                                    @endif

                                                    @can('dashboard_holiday_list')
                                                        <button class="form-control btn btn-info btn-lg" type="button" id="btnViewHolidays">
                                                            <i class="icon-menu"></i> &nbsp;
                                                            Holiday List
                                                        </button>
                                                    @endcan
                                                </div>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            @endcan

                            @canany(['dashboard_total_employee_count', 'dashboard_new_joiners_count',
                                'dashboard_resigned_employee_count', 'dashboard_employee_category_wise_count',
                                'dashboard_employee_location_wise_count', 'dashboard_employee_designation_wise_count',
                                'dashboard_employee_department_wise_count'])

                                <div class="card">
                                    <div class="card-body">
                                        @canany(['dashboard_total_employee_count', 'dashboard_new_joiners_count',
                                            'dashboard_resigned_employee_count'])
                                            <div class="row">

                                                @can('dashboard_total_employee_count')
                                                    <div class="col-sm-12 col-md-4">
                                                        <!-- small box -->
                                                        <div class="small-box card-info">
                                                            <div class="inner">
                                                                <h3>{{ $totalEmployees }}</h3>

                                                                <p>Total Employees</p>
                                                            </div>
                                                            <div class="icon"><i class="fas fa-calendar icon"></i>

                                                            </div>
                                                            <a href="#" class="small-box-footer">View Employees <i
                                                                    class="fas fa-arrow-circle-right"></i></a>
                                                        </div>
                                                    </div>
                                                @endcan

                                                @can('dashboard_new_joiners_count')
                                                    <div class="col-sm-12 col-md-4">
                                                        <!-- small box -->
                                                        <div class="small-box card-primary">
                                                            <div class="inner">
                                                                <h3>{{ $newEmployees }}</h3>

                                                                <p>New Joiners</p>
                                                            </div>
                                                            <div class="icon"><i class="fas fa-calendar icon"></i>

                                                            </div>
                                                            <a href="#" class="small-box-footer">View New Joiners <i
                                                                    class="fas fa-arrow-circle-right"></i></a>
                                                        </div>
                                                    </div>
                                                @endcan

                                                @can('dashboard_resigned_employee_count')
                                                    <div class="col-sm-12 col-md-4">
                                                        <!-- small box -->
                                                        <div class="small-box card-primary">
                                                            <div class="inner">
                                                                <h3>{{ $resignedEmployees }}</h3>

                                                                <p>Resigned Employees</p>
                                                            </div>
                                                            <div class="icon"><i class="fas fa-calendar icon"></i>

                                                            </div>
                                                            <a href="#" class="small-box-footer">View Resigned <i
                                                                    class="fas fa-arrow-circle-right"></i></a>
                                                        </div>
                                                    </div>
                                                @endcan

                                                
                                            </div>
                                        @endcan


                                        @canany(['dashboard_employee_location_wise_count', 'dashboard_employee_designation_wise_count',
                                            'dashboard_employee_department_wise_count', 'dashboard_employee_category_wise_count'])
                                            <div class="row">
                                                @can('dashboard_employee_category_wise_count')
                                                    <div class="col-sm-12 col-md-3">
                                                        <div style="overflow: scroll">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width: 40%; vertical-align: middle;  font-weight:normal">
                                                                            Category</th>
                                                                        <th style="width: 40%; vertical-align: middle;  font-weight:normal">Count
                                                                        </th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                    @foreach ($employeeCategoryWise as $category)
                                                                        <tr>
                                                                            <td style="width: 40%; vertical-align: middle;">
                                                                                {{ $category->description }}</td>
                                                                            <td style="text-align: center">{{ $category->total }}</td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>
                                                @endcan
                                                @can('dashboard_employee_designation_wise_count')
                                                    <div class="col-sm-12 col-md-4">
                                                        <div style="overflow: scroll">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width: 40%; vertical-align: middle;  font-weight:normal">
                                                                            Designation</th>
                                                                        <th style="vertical-align: middle;  font-weight:normal">Count
                                                                        </th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody>


                                                                    @foreach ($employeeDesignationWise as $designation)
                                                                        <tr>
                                                                            <td style="width: 40%; vertical-align: middle;">
                                                                                {{ $designation->description }}</td>
                                                                            <td style="text-align: center">{{ $designation->total }}</td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>
                                                @endcan
                                                @can('dashboard_employee_designation_wise_count')
                                                    <div class="col-sm-12 col-md-5">
                                                        <div style="overflow: scroll">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width: 40%; vertical-align: middle;  font-weight:normal">
                                                                            Department</th>
                                                                        <th style="vertical-align: middle;  font-weight:normal">Count
                                                                        </th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody>


                                                                    @foreach ($employeeDepartmentWise as $department)
                                                                        <tr>
                                                                            <td style="width: 40%; vertical-align: middle;">
                                                                                {{ $department->description }}</td>
                                                                            <td style="text-align: center">{{ $department->total }}</td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>
                                                @endcan
                                                @can('dashboard_employee_location_wise_count')
                                                    
                                                    <div class="col-sm-12 col-md-12">
                                                        <div style="overflow: scroll">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        @for ($i = 1; $i <= 4; $i++)
                                                                            <th style="width: 20%; vertical-align: middle; font-weight:normal">Location</th>
                                                                            <th style="width: 20%; vertical-align: middle; font-weight:normal">Count</th>
                                                                        @endfor
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($employeeLocationWise->chunk(4) as $chunk)
                                                                        <tr>
                                                                            @foreach ($chunk as $location)
                                                                                <td style="width: 20%; vertical-align: middle;">{{ $location->location_name }}</td>
                                                                                <td style="text-align: center">{{ $location->total }}</td>
                                                                            @endforeach
                                                                            @if ($chunk->count() < 4)
                                                                                @for ($i = 0; $i < (4 - $chunk->count()); $i++)
                                                                                    <td style="width: 20%; vertical-align: middle;"></td>
                                                                                    <td style="text-align: center"></td>
                                                                                @endfor
                                                                            @endif
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                @endcan
                                            </div>
                                        @endcan
                                    </div>
                                </div>

                            @endcan

                            @canany(['dashboard_employee_birthday_list', 'dashboard_employee_birthday_list_weekly',
                                'dashboard_employee_birthday_list_monthly'])
                                <div class="card">
                                    <div class="card-header">
                                        <div class="card-head-row">
                                            <div class="card-title">Birthday Lists</div>
                                            <div class="card-tools">
                                                <ul class="nav nav-pills nav-primary nav-pills-no-bd" id="pills-tab-without-border"
                                                    role="tablist">
                                                    @can('dashboard_employee_birthday_list')
                                                        <li class="nav-item submenu">
                                                            <a class="nav-link  active show" id="pills-home-tab-nobd" data-toggle="pill"
                                                                href="#pills-today" role="tab" aria-controls="pills-home-nobd"
                                                                aria-selected="false">Today</a>
                                                        </li>
                                                    @endcan
                                                    @can('dashboard_employee_birthday_list_weekly')
                                                        <li class="nav-item submenu">
                                                            <a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill"
                                                                href="#pills-profile-nobd" role="tab" aria-controls="pills-profile-nobd"
                                                                aria-selected="false">Week</a>
                                                        </li>
                                                    @endcan
                                                    @can('dashboard_employee_birthday_list_monthly')
                                                        <li class="nav-item submenu">
                                                            <a class="nav-link" id="pills-contact-tab-nobd" data-toggle="pill"
                                                                href="#pills-contact-nobd" role="tab" aria-controls="pills-contact-nobd"
                                                                aria-selected="true">Month</a>
                                                        </li>
                                                    @endcan
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">

                                        <div class="tab-content mt-2 mb-3" id="pills-without-border-tabContent">
                                            @can('dashboard_employee_birthday_list')
                                                <div class="tab-pane fade  active show" id="pills-today" role="tabpanel"
                                                    aria-labelledby="pills-home-tab-nobd">
                                                    <p>Today's birthday list</p>
                                                    @foreach ($employeeBirthdayList['today'] as $cb)
                                                        <div class="d-flex">
                                                            <div class="avatar avatar-xl">
                                                                <span class="avatar-title rounded-circle border border-white bg-info"
                                                                    style="padding: 0;">
                                                                    @if (!empty($cb->photo))
                                                                        <img src="{{ asset('images/profiles') . '/' . $cb->photo }}"
                                                                            style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                                                    @endif
                                                                </span>
                                                            </div>
                                                            <div class="flex-1 ml-3 pt-2">
                                                                <h6 class="text-uppercase fw-bold mb-1">{{ $cb->first_name }} <span
                                                                        class="text-info pl-3"> {{ $cb->dob }}</span></h6>
                                                                <span class="text-muted text-primary">{{ ucwords(strtolower($cb->title)) }}
                                                                    {{ ucwords(strtolower($cb->first_name)) }}
                                                                    {{ ucwords(strtolower($cb->last_name)) }}.</span><br>
                                                                <span class="text-muted">Contact - <span
                                                                        class="text-primary text-bold">{{ $cb->contact_no }}
                                                                        {{ $cb->contact_no2 }}</span> </span><br>
                                                                {{-- <span class="text-muted">Address - {{ucwords(strtolower($cb->customerAddress[0]->address_line1))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line2))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line3))}}</span> --}}
                                                            </div>
                                                            <div class="float-right pt-1">
                                                                <small
                                                                    class="text-muted">{{ \Carbon\Carbon::parse($cb->dob)->diffForHumans() }}</small>


                                                            </div>
                                                        </div>
                                                        <div class="separator-dashed"></div>
                                                    @endforeach
                                                </div>
                                            @endcan

                                            @can('dashboard_employee_birthday_list_weekly')
                                                <div class="tab-pane fade" id="pills-profile-nobd" role="tabpanel"
                                                    aria-labelledby="pills-profile-tab-nobd">
                                                    <p>This week’s birthday list</p>
                                                    @foreach ($employeeBirthdayList['this_week'] as $cb)
                                                        <div class="d-flex">
                                                            <div class="avatar avatar-xl">
                                                                <span class="avatar-title rounded-circle border border-white bg-info"
                                                                    style="padding: 0;">
                                                                    @if (!empty($cb->photo))
                                                                        <img src="{{ asset('images/profiles') . '/' . $cb->photo }}"
                                                                            style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                                                    @endif
                                                                </span>
                                                            </div>
                                                            <div class="flex-1 ml-3 pt-2">
                                                                <h6 class="text-uppercase fw-bold mb-1">{{ $cb->first_name }} <span
                                                                        class="text-info pl-3"> {{ $cb->dob }}</span></h6>
                                                                <span class="text-muted text-primary">{{ ucwords(strtolower($cb->title)) }}
                                                                    {{ ucwords(strtolower($cb->first_name)) }}
                                                                    {{ ucwords(strtolower($cb->last_name)) }}.</span><br>
                                                                <span class="text-muted">Contact - <span
                                                                        class="text-primary text-bold">{{ $cb->contact_no }}
                                                                        {{ $cb->contact_no2 }}</span> </span><br>
                                                                {{-- <span class="text-muted">Address - {{ucwords(strtolower($cb->customerAddress[0]->address_line1))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line2))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line3))}}</span> --}}
                                                            </div>
                                                            <div class="float-right pt-1">
                                                                <small
                                                                    class="text-muted">{{ \Carbon\Carbon::parse($cb->dob)->diffForHumans() }}</small>


                                                            </div>
                                                        </div>
                                                        <div class="separator-dashed"></div>
                                                    @endforeach

                                                </div>
                                            @endcan

                                            @can('dashboard_employee_birthday_list_monthly')
                                                <div class="tab-pane fade" id="pills-contact-nobd" role="tabpanel"
                                                    aria-labelledby="pills-contact-tab-nobd">
                                                    <p>This month's birthday list</p>
                                                    @foreach ($employeeBirthdayList['this_month'] as $cb)
                                                        <div class="d-flex">
                                                            <div class="avatar avatar-xl">
                                                                <span class="avatar-title rounded-circle border border-white bg-info"
                                                                    style="padding: 0;">
                                                                    @if (!empty($cb->photo))
                                                                        <img src="{{ asset('images/profiles') . '/' . $cb->photo }}"
                                                                            style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                                                    @endif
                                                                </span>
                                                            </div>
                                                            <div class="flex-1 ml-3 pt-2">
                                                                <h6 class="text-uppercase fw-bold mb-1">{{ $cb->first_name }} <span
                                                                        class="text-info pl-3"> {{ $cb->dob }}</span></h6>
                                                                <span class="text-muted text-primary">{{ ucwords(strtolower($cb->title)) }}
                                                                    {{ ucwords(strtolower($cb->first_name)) }}
                                                                    {{ ucwords(strtolower($cb->last_name)) }}.</span><br>
                                                                <span class="text-muted">Contact - <span
                                                                        class="text-primary text-bold">{{ $cb->contact_no }}
                                                                        {{ $cb->contact_no2 }}</span> </span><br>
                                                                {{-- <span class="text-muted">Address - {{ucwords(strtolower($cb->customerAddress[0]->address_line1))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line2))}} {{ucwords(strtolower($cb->customerAddress[0]->address_line3))}}</span> --}}
                                                            </div>
                                                            <div class="float-right pt-1">
                                                                <small
                                                                    class="text-muted">{{ \Carbon\Carbon::parse($cb->dob)->diffForHumans() }}</small>


                                                            </div>
                                                        </div>
                                                        <div class="separator-dashed"></div>
                                                    @endforeach
                                                </div>
                                            @endcan
                                        </div>

                                    </div>
                                </div>
                            @endcan
                        </div>
                    </div>

                    @canany(['dashboard_recent_salary_process_list'])
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Salary Payments (Processed Salary Recent List)</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="tblData" class="display table table-striped table-hover">
                                                <thead>
                                                    <tr>
                                                        <th style="width:10px;">Month</th>
                                                        <th>Basic Salary</th>
                                                        <th>Allowances</th>
                                                        <th>Over Time Payments</th>
                                                        <th>Gross Salary</th>
                                                        <th>Deductions</th>
                                                        <th>Tax</th>
                                                        <th>No Pay</th>
                                                        <th>Net Salary</th>
                                                        <th>EPF (Employee)</th>
                                                        <th>EPF (Company)</th>
                                                        <th>ETF</th>
                                                    </tr>
                                                </thead>
                                                <tbody>


                                                </tbody>
                                                <tfoot>
        
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endcan
                </div>


                <div class="modal fade" id="viewAttendanceModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="exampleModalLongTitle">
                                    {{ trans('labels.attendance_detail') }}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body  bg-light">
                                <div class="table-responsive">
                                    <table id="tblAttendanceDetail" class="display table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ trans('labels.employee_no') }}</th>
                                                <th>{{ trans('labels.employee_name') }}</th>
                                                <th>{{ trans('labels.contact_no') }}</th>
                                                <th>{{ trans('labels.status') }}</th>
                                            </tr>
                                        </thead>
                                        
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                               
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal fade" id="viewSubordinatesModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="exampleModalLongTitle">
                                    {{ trans('labels.subordinate_list') }}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body  bg-light">
                                <div class="table-responsive">
                                    <table id="tblSubordinateeDetail" class="display table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ trans('labels.employee_no') }}</th>
                                                <th>{{ trans('labels.employee_name') }}</th>
                                                <th>{{ trans('labels.contact_no') }}</th>
                                                <th>{{ trans('labels.location') }}</th>
                                                <th>{{ trans('labels.department') }}</th>
                                                <th>{{ trans('labels.designation') }}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                               
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="viewHolidayModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="exampleModalLongTitle">
                                    {{ trans('labels.holiday_list') }}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body  bg-light">
                                <div class="table-responsive">
                                    <table id="tblHolidayDetail" class="display table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ trans('labels.date') }}</th>
                                                <th>{{ trans('labels.description') }}</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                               
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    
                            </div>
                        </div>
                    </div>
                </div>
            @endsection


            @section('custom_scripts')
                <script type="text/javascript" src="{{asset('js/xhr.js')}}"> </script>
                <script type="text/javascript" src="{{ asset('js/datatables.min.js') }}"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#tblData').DataTable({
                            paging: false,
                            lengthChange: false,
                            searching: false,
                            ordering: false,
                            info: false,
                            autoWidth: false,
                            responsive: false,

                            columnDefs: [{
                                    width: "5%",
                                    targets: 0
                                },
                                {
                                    orderable: false,
                                    searchable: false,
                                    targets: []
                                },
                                {
                                    className: "text-md-right",
                                    targets: []
                                },
                                {
                                    bVisible: false,
                                    aTargets: []
                                }
                            ]

                        });
                        

                        $('#tblAttendanceDetail').DataTable({
                            paging: true,
                            lengthChange: false,
                            searching: true,
                            ordering: false,
                            info: false,
                            autoWidth: false,
                            responsive: false,
                            columns: [
                                { data: "id" },
                                { data: "employee_no" },
                                { data: "employee_name" },
                                { data: "contact_no" },
                                { data: "status" },
                                
                            ],
                            columnDefs: [
                                { width: "5%", targets: 0 },
                                // { orderable: false, searchable: false, targets: 2 },
                                { className: "text-md-left", targets: [2] },
                                { className: "text-md-center", targets: [1] },
                                { bVisible: false, aTargets: [] }
                            ]
                    
                        });
                        $('#tblSubordinateeDetail').DataTable({
                            paging: true,
                            lengthChange: false,
                            searching: true,
                            ordering: false,
                            info: false,
                            autoWidth: false,
                            responsive: false,
                            columns: [
                                { data: "id" },
                                { data: "employee_no" },
                                { data: "employee_name" },
                                { data: "contact_no" },
                                { data: "location" },
                                { data: "department" },
                                { data: "designation" },
                               
                                
                            ],
                            columnDefs: [
                                { width: "5%", targets: 0 },
                                // { orderable: false, searchable: false, targets: 2 },
                                // { className: "text-md-left", targets: [2,] },
                                { className: "text-md-center", targets: [1] },
                                { bVisible: false, aTargets: [] }
                            ]
                    
                        });

                        $('#tblHolidayDetail').DataTable({
                            paging: true,
                            lengthChange: false,
                            searching: true,
                            ordering: false,
                            info: false,
                            autoWidth: false,
                            responsive: false,
                            columns: [
                                { data: "id" },
                                { data: "date" },
                                { data: "description" },                                
                            ],
                            columnDefs: [
                                { width: "5%", targets: 0 },
                                
                                { className: "text-md-center", targets: [1] },
                                { bVisible: false, aTargets: [] }
                            ]
                    
                        });

                        $("#btnViewAttendance").on("click",function(){
                            $('#viewAttendanceModal').modal({
                                backdrop: 'static',
                                keyboard: false
                            });
                            loadAttendanceDetail();
                        });
                        $("#btnViewSubordinates").on("click",function(){
                            $('#viewSubordinatesModal').modal({
                                backdrop: 'static',
                                keyboard: false
                            });
                            loadSubordinateList();
                        });
                        $("#btnViewHolidays").on("click",function(){
                            $('#viewHolidayModal').modal({
                                backdrop: 'static',
                                keyboard: false
                            });
                            loadHolidayList();
                        });

                        function loadAttendanceDetail(){
                            $("#tblAttendanceDetail").dataTable().fnClearTable();
                            xhRequest("../attendance/get-today-attendance-detail", "json",{})
                            .then(result => {
                                var data = [];
                                
                                if (result.employees.length>0) {
                                    
                                    for(x=0;result.employees.length>x;x++){
                                        data.push({
                                            id: x + 1,
                                            employee_no: result.employees[x].employee_no,
                                            employee_name: result.employees[x].first_name +' '+result.employees[x].last_name,
                                            contact_no: result.employees[x].contact_no,
                                            status: result.employees[x].status,
                                           
                                        });
                                    }
                                    for(x=0;result.leavedEmployees.length>x;x++){
                                        data.push({
                                            id: x + result.employees.length + 1,
                                            employee_no: result.leavedEmployees[x].employee_no,
                                            employee_name: result.leavedEmployees[x].first_name +' '+result.leavedEmployees[x].last_name,
                                            contact_no: result.leavedEmployees[x].contact_no,
                                            status: 'Leave',
                                           
                                        });
                                    }


                                    if(data.length>0){
                                        $('#tblAttendanceDetail').dataTable().fnAddData(data);
                                    }
                                }
                            })
                            .catch(exception => {

                            });
                        }
                        function loadSubordinateList(){
                            $("#tblSubordinateeDetail").dataTable().fnClearTable();
                            xhRequest("../employee/get-subordinate-list", "json",{})
                            .then(result => {
                                var data = [];

                                if (result.length>0) {
                                    for(x=0;result.length>x;x++){
                                        data.push({
                                            id: x + 1,
                                            employee_no: result[x].employee_no,
                                            employee_name: result[x].first_name +' '+result[x].last_name,
                                            contact_no: result[x].contact_no,
                                            location: result[x].location,
                                            department: result[x].department,
                                            designation: result[x].designation,
                                        });
                                    }
                                    if(data.length>0){
                                        $('#tblSubordinateeDetail').dataTable().fnAddData(data);
                                    }
                                }
                            })
                            .catch(exception => {
                            });
                        }
                        function loadHolidayList(){
                            $("#tblHolidayDetail").dataTable().fnClearTable();
                            xhRequest("../leave/get-current-year-holiday-list", "json",{})
                            .then(result => {
                                var data = [];

                                if (result.length>0) {
                                    for(x=0;result.length>x;x++){
                                        data.push({
                                            id: x + 1,
                                            date: result[x].holiday_date,
                                            description: result[x].remark,
                                        });
                                    }
                                    if(data.length>0){
                                        $('#tblHolidayDetail').dataTable().fnAddData(data);
                                    }
                                }
                            })
                            .catch(exception => {
                            });
                        }
                    });
                </script>
            @endsection