@extends('app-new')

@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
<!-- END: Vendor CSS-->

<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-ecommerce.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/charts/chart-apex.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/extensions/ext-component-toastr.css">



<!-- END: Page CSS-->
@endpush
@section('content')
<section id="dashboard-ecommerce">

    <!-- Filters -->
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">{{Auth::user()->organization ? Auth::user()->organization->name : 'not found'}}</h2>
                    <!-- <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Home</a>
                            </li> 
                            <li class="breadcrumb-item"><a href="#">Admin</a>
                            </li>
                            <li class="breadcrumb-item active">Admin Organization
                            </li> 
                        </ol>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
            <div class="mb-1 breadcrumb-right">
                <div class="dropdown">
                    <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                        type="button"><i data-feather='filter'></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas-end-example">
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                <label class="form-label mt-2" for="employee_type">Employee Type</label>
                <select class="form-control mb-2 select2" name="employee_type[]" id="employee_type" multiple>
                    <option value="employee">Employee</option>
                    <option value="workman">Workman</option>
                    
                </select>
                <label class="form-label mt-2" for="location_id">Location</label>
                <select class="form-control mb-2 select2" name="location_id[]" id="location_id" onchange="getsubLocations(this,'sublocations')" multiple>
                    @foreach($locations as $location)
                        <option value="{{$location->id}}">
                            {{$location->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="sublocation_id">Sub Location</label>
                <select class="form-control mb-2 select2" name="sublocation_id[]" id="sublocation_id" multiple>
                    @foreach($subLocations as $subLocation)
                        <option value="{{$subLocation->id}}">
                            {{$subLocation->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="department_id">Department</label>
                <select class="form-control mb-2 select2" name="department_id[]" id="department_id" multiple>
                    @foreach($departments as $department)
                        <option value="{{$department->id}}">
                            {{$department->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="sub_department_id"> Sub Department</label>
                <select class="form-control mb-2 select2" name="sub_department_id[]" id="sub_department_id" multiple>
                    @foreach($subDepartments as $subDepartment)
                        <option value="{{$subDepartment->id}}">
                            {{$subDepartment->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="designation_id">Designation</label>
                <select class="form-control mb-2 select2" name="designation_id[]" id="designation_id" multiple>
                    @foreach($designations as $designation)
                        <option value="{{$designation->id}}">
                            {{$designation->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="shift_id">Shift</label>
                <select class="form-control mb-2 select2" name="shift_id[]" id="shift_id"multiple>
                    @foreach($shifts as $shift)
                        <option value="{{$shift->id}}">
                            {{$shift->name}}
                        </option>
                    @endforeach
                </select>
                <label class="form-label mt-2" for="area_id">Area</label>
                <select class="form-control mb-2 select2" name="area_id[]" id="area_id" multiple>
                    @foreach($areas as $area)
                        <option value="{{$area->id}}">
                            {{$area->name}}
                        </option>
                    @endforeach
                </select>
                <button type="button" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center" onclick="applyFilters()" data-bs-dismiss="offcanvas" aria-label="Close"><i
                        data-feather='search' class="me-2"></i> Search</button>
            </div>
        </div>
    </div>
    <!-- // Filters // -->

    <div class="row match-height">
        <!-- Medal Card -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card">
                <div class="card-header flex-column align-items-start">
                    <h4 class="card-title mb-75">{{trans("admin/dashboard.attendance_information")}}</h4>
                    <!-- <span class="card-subtitle text-muted">Info Details </span> -->
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$fromDate}}" id="attendanceInfo"
                            class="form-control flatpickr-basic border-0 shadow-none bg-transparent pr-0"
                            placeholder="YYYY-MM-DD" onchange="attendanceInfo.call(this)" />
                    </div>
                </div>
                <div class="card-body">
                    <div id="donut-chart"></div>
                </div>
            </div>
        </div>
        <!-- table -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-start">
                        <h4 class="card-title">{{trans("admin/dashboard.team_members")}}</h4>
                        <h6 class="ms-2 table-header-text" id="team-member-count">0</h6>
                    </div>
                </div>
                <div class="table-responsive table-scrolling">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{{trans("admin/dashboard.name")}}</th>
                                <th>{{trans("admin/dashboard.in_time")}}</th>
                                <th>{{trans("admin/dashboard.out_time")}}</th>
                                <th>{{trans("admin/dashboard.working_hour")}}</th>
                            </tr>
                        </thead>
                        <tbody id="teamMemberList">
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- table -->
    </div>
    <div class="row match-height">
        <div class="col-lg-4 col-12">
            <div class="card">
                <div
                    class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                    <h4 class="badge badge-light-primary "> {{date('d F Y')}}</h4>
                </div>
                <div class="card-body">
                    <center> <img src="/app-assets/images/svg/megaphone.png" class="m-2" style="width:40px ; " alt="">
                    </center>
                    <center>
                        <div class="badge badge-light-danger " style="padding:10px ; font-size:20px">
                            {{trans("admin/dashboard.announcement")}}
                        </div>
                        <p class="card-text p-2">
                            @if($announcements)
                        <h4>{{$announcements->title}}</h4>
                        {{$announcements->description}}
                        @else
                        <h4>{{trans("admin/dashboard.no_announcments")}}</h4>
                        @endif
                        </p>
                    </center>
                </div>
            </div>
        </div>
        <!-- Revenue Report Card -->
        <div class="col-lg-8 col-12">
            <div class="card card-revenue-budget line-chart">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                        <div class="header-left">
                            <h4 class="card-title">{{trans("admin/dashboard.duty_information")}}</h4>
                        </div>
                        <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                            <i data-feather="calendar"></i>
                            <input type="text" value="{{$fromDate}}" id="dutyInfo"
                                class="form-control flatpickr-basic border-0 shadow-none bg-transparent pr-0 pe-0" style="width:96px;"
                                placeholder="YYYY-MM-DD" onchange="dutyInfo.call(this)"  />
                        </div>
                    </div>
                    <div class="card-body" id="barchart-canvas" style="height:280px;">
                        <canvas class="bar-chart-ex chartjs" id="barchartex" data-height="250"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Revenue Report Card -->
    </div>

    <div class="row match-height">
        <!-- Company Table Card -->

        <div class="col-lg-8 col-12">
            <div class="card card-user-timeline">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <i data-feather="list" class="user-timeline-title-icon"></i>
                        <h4 class="card-title">{{trans("admin/dashboard.user_timeline")}}</h4>
                    </div>
                    <!-- <i data-feather="more-vertical" class="font-medium-3 cursor-pointer"></i> -->
                    
                </div>

                <div class="card-body">
                        <ul class="timeline ml-50">
                                                        @foreach($auditLogs as $auditLog)
                            <li class="timeline-item">
                                <span class="timeline-point {{$dots[($loop->iteration-1) % 4]}} timeline-point-indicator"></span>
                                <div class="timeline-event">
                                    <div
                                        class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                        <h6>{{$auditLog->comment}}</h6>
                                        <span class="timeline-event-time mr-1">{{$auditLog->created_at->diffForHumans()}}</span>
                                    </div>
                                    <p>{{$auditLog->action}}</p>
                                    <!-- <div class="media align-items-center">
                                        <img class="mr-1" src="/app-assets/images/icons/json.png" alt="data.json" height="23" />
                                        <h6 class="media-body mb-0">data.json</h6>
                                    </div> -->
                                </div>
                            </li>
                            @endforeach
                            <!-- <li class="timeline-item">
                                <span
                                    class="timeline-point timeline-point-warning timeline-point-indicator"></span>
                                <div class="timeline-event">
                                    <div
                                        class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                        <h6>Action done by XYZ at ABC module </h6>
                                        <span class="timeline-event-time mr-1">45 min ago</span>
                                    </div>
                                    <p> discussed in meeting with abc @10:15am on behalf of this one </p>
                                    <div class="media align-items-center d-flex">
                                        <div class="avatar mr-50">
                                            <img src="/app-assets/images/portrait/small/avatar-s-9.jpg"
                                                alt="Avatar" width="38" height="38" />
                                        </div>
                                        <div class="media-body ms-1">
                                            <h6 class="mb-0">John Doe (Client)</h6>
                                            <p class="mb-0">CEO of Infibeam</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item">
                                <span
                                    class="timeline-point timeline-point-info timeline-point-indicator"></span>
                                <div class="timeline-event">
                                    <div
                                        class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                        <h6>New Employees are hired on Monday</h6>
                                        <span class="timeline-event-time mr-1">2 day ago</span>
                                    </div>
                                    <p>Add files to new design folder</p>
                                    <div class="avatar-group">
                                        <div data-toggle="tooltip" data-popup="tooltip-custom"
                                            data-placement="bottom" data-original-title="Billy Hopkins"
                                            class="avatar pull-up">
                                            <img src="/app-assets/images/portrait/small/avatar-s-9.jpg"
                                                alt="Avatar" width="33" height="33" />
                                        </div>
                                        <div data-toggle="tooltip" data-popup="tooltip-custom"
                                            data-placement="bottom" data-original-title="Amy Carson"
                                            class="avatar pull-up">
                                            <img src="/app-assets/images/portrait/small/avatar-s-6.jpg"
                                                alt="Avatar" width="33" height="33" />
                                        </div>
                                        <div data-toggle="tooltip" data-popup="tooltip-custom"
                                            data-placement="bottom" data-original-title="Brandon Miles"
                                            class="avatar pull-up">
                                            <img src="/app-assets/images/portrait/small/avatar-s-8.jpg"
                                                alt="Avatar" width="33" height="33" />
                                        </div>
                                        <div data-toggle="tooltip" data-popup="tooltip-custom"
                                            data-placement="bottom" data-original-title="Daisy Weber"
                                            class="avatar pull-up">
                                            <img src="/app-assets/images/portrait/small/avatar-s-20.jpg"
                                                alt="Avatar" width="33" height="33" />
                                        </div>
                                        <div data-toggle="tooltip" data-popup="tooltip-custom"
                                            data-placement="bottom" data-original-title="Jenny Looper"
                                            class="avatar pull-up">
                                            <img src="/app-assets/images/portrait/small/avatar-s-20.jpg"
                                                alt="Avatar" width="33" height="33" />
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item">
                                <span
                                    class="timeline-point timeline-point-danger timeline-point-indicator"></span>
                                <div class="timeline-event">
                                    <div
                                        class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                        <h6>Create a new project for client</h6>
                                        <span class="timeline-event-time mr-1">5 day ago</span>
                                    </div>
                                    <p class="mb-0">Add files to new design folder</p>
                                </div>
                            </li> -->
                        </ul>
                    </div>


            </div>
        </div>
        <!--/ Company Table Card -->

        <!-- Birthday Of the Month-->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card card-developer-meetup">
                <div class="meetup-img-wrapper rounded-top text-center">
                    <img src="/app-assets/images/illustration/birthday.svg" alt="Meeting Pic" height="170" />
                </div>
                <div class="card-body ">
                    <div class="meetup-header d-flex align-items-center">
                        <div class="meetup-day">
                            <div class="brthleft-icons"><img src="/app-assets/images/illustration/brhicon.png"
                                    alt="Meeting Pic" /></div>
                        </div>
                        <div class="my-auto">
                            <h4 class="card-title mb-25">{{trans("admin/dashboard.birthday")}}</h4>
                            <p class="card-text mb-0">{{date('F')}} {{date('Y')}}</p>
                        </div>
                    </div>
                    @if(count($birthdays) > 0)
                    @foreach($birthdays as $birthday)
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <div class="media d-flex align-items-center">
                            <div class="avatar mr-75">
                                <img src="@if($birthday->image) {{$birthday->image}} @else /assets/img/default-profile-3.png @endif"
                                    class="rounded" width="42" height="42" alt="Avatar" />
                            </div>
                            <div class="media-body my-auto ms-1">
                                <h6 class="mb-0">{{$birthday->name}}</h6>
                                <small>{{date('d-F', strtotime($birthday->dob))}}-{{date('Y')}}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <h4 class="text-secondary">{{trans("admin/dashboard.no_birthdays_found")}}</h4>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <!--/ Birthday of the month -->

        <!-- People On leave-->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card card-browser-states">
                <div class="card-header">
                    <div>
                        <h4 class="card-title">{{trans("admin/dashboard.people_on_leave")}}</h4>
                        <p class="card-text font-small-2">Counter {{date('F Y')}}</p>
                    </div>
                </div>
                <div class="card-body" id="peopleOnLeave">
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <h4 class="text-secondary">{{trans("admin/dashboard.no_data_found")}}</h4>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Browser States Card -->

        <!-- Goal Overview Card -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between pb-0">
                    <h4 class="card-title">{{trans("admin/dashboard.present_percentage")}}</h4>
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$fromDate}}"
                            class="form-control flatpickr-basic border-0 shadow-none bg-transparent pr-0 pe-0" style="width:96px;" id="presentPercentage"
                            placeholder="YYYY-MM-DD" onchange="presentPercentage.call(this)" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col-sm-12 col-12 d-flex justify-content-center">
                            <div id="support-trackers-chart"></div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-1">
                        <div class="text-center">
                            <p class="card-text mb-50">{{trans("admin/dashboard.present")}}</p>
                            <span class="font-large-1 font-weight-bold" id="presentValue">0</span>
                        </div>

                        <div class="text-center">
                            <p class="card-text mb-50">{{trans("admin/dashboard.absent")}}</p>
                            <span class="font-large-1 font-weight-bold" id="absentValue">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Goal Overview Card -->

        <!-- Work Anniversary -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card card-developer-meetup">
                <div class="meetup-img-wrapper rounded-top text-center">
                    <img src="/app-assets/images/illustration/anniversary.svg" alt="Meeting Pic" height="170" />
                </div>
                <div class="card-body ">
                    <div class="meetup-header d-flex align-items-center">
                        <div class="meetup-day">
                            <div class="brthleft-icons"><img src="/app-assets/images/illustration/annivericon.png"
                                    alt="Meeting Pic" /></div>
                        </div>
                        <div class="my-auto">
                            <h4 class="card-title mb-25">{{trans("admin/dashboard.work_anniversary")}}</h4>
                            <p class="card-text mb-0">{{date('F')}} {{date('Y')}}</p>
                        </div>
                    </div>
                    @if(count($workAnniversaries) > 0)
                    @foreach($workAnniversaries as $workAnniversary)
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <div class="media d-flex align-items-center">
                            <div class="avatar mr-75">
                                <img src="@if($workAnniversary->image) {{$workAnniversary->image}} @else /assets/img/default-profile-3.png @endif"
                                    class="rounded" width="42" height="42" alt="Avatar" />
                            </div>
                            <div class="media-body my-auto ms-1">
                                <h6 class="mb-0">{{$workAnniversary->name}}</h6>
                                <small>{{date('d-F', strtotime($workAnniversary->date_of_joining))}}-{{date('Y')}}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <h4 class="text-secondary">{{trans("admin/dashboard.no_work_anniversary")}}</h4>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <!--/ Work Anniversary -->

        <!-- Browser States Card -->
        <div class="col-lg-8 col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-baseline flex-sm-row flex-column">
                    <h4 class="card-title">{{trans("admin/dashboard.attendance_information")}}</h4>
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$dateRangeWeekly}}" id="attendanceInfoStatus"
                            class="form-control flatpickr-range border-0 shadow-none bg-transparent pr-0"
                            placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="attendanceInfoStatus.call(this)" />
                    </div>
                </div>
                <div class="card-body">
                    <canvas class="line-area-chart-ex chartjs" data-height="300"></canvas>
                </div>
            </div>
        </div>
        <!--/ Browser States Card -->

        <!-- Goal Overview Card -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{trans("admin/dashboard.total_average_working_hour")}}</h4>
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$dateRange}}" id="totalWorkingHour"
                                class="form-control flatpickr-range border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="totalWorkingHour.call(this)" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="flex-column align-items-start pb-0">
                        <div class="avatar bg-light-success p-50 m-0">
                            <div class="avatar-content">
                                <i data-feather="credit-card" class="font-medium-5"></i>
                            </div>
                        </div>
                        <h2 class="fw-bolder mt-1" id="average_working_hr"></h2>
                        <p class="card-text">{{trans("admin/dashboard.average_working_hour")}}</p>
                    </div>
                </div>
                <div id="line-area-chart-2"></div>
            </div>
        </div>
        <!--/ Goal Overview Card -->

    </div>

    <div class="row match-height">
        <div class="col-lg-4 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">{{trans("admin/dashboard.employees_present_on_week_off")}}</h4>
                    <!-- <i data-feather="help-circle" class="font-medium-3 text-muted cursor-pointer"></i> -->
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$dateRange}}" id="presentOnWeekOff"
                            class="form-control flatpickr-range border-0 shadow-none bg-transparent pr-0"
                            placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="presentOnWeekOff.call(this)" />
                    </div>
                </div>
                <div class="card-body" id="presentOnWeekOffDiv">
                    <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                        <h4 class="text-secondary">{{trans("admin/dashboard.no_employees_present_on_week_off")}}</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Revenue Report Card -->
        <div class="col-lg-8 col-12">
            <div class=" card card-browser-states">
                <div
                    class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                    <div class="header-left">
                        <h4 class="card-title">{{trans("admin/dashboard.incomplete_day_status")}}</h4>
                    </div>
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{\Carbon\Carbon::parse($fromDate)->subDays(1)->format('Y-m-d')}}" id="inCompleteDayStatus"
                            class="form-control flatpickr-basic border-0 shadow-none bg-transparent pe-0"
                            style="width: 96px" placeholder="YYYY-MM-DD" onchange="inCompleteDayStatus.call(this)" />
                    </div>
                </div>
                <div class="match-height card-body">
                    <div class="row" id="inCompleteDayStatusDiv">
                        <div class="employee-task d-flex justify-content-between align-items-center pb-2 col-lg-12">
                            <h4 class="text-secondary">{{trans("admin/dashboard.no_incomplete_day_status")}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Revenue Report Card -->
    </div>

    <div class="row match-height">
        <!-- Company Table Card -->

        <div class="col-lg-8 col-12">
            <div class="card">
                <div
                    class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                    <div class="header-left">
                        <p class="card-subtitle text-muted mb-25">{{trans("admin/dashboard.pending_request")}}</p>
                        <!-- <h4 class="card-title">$74,123</h4> -->
                    </div>
                </div>
                <div class="card-body" id="horizontal-barchart-canvas">
                    <canvas class="horizontal-bar-chart-ex chartjs" data-height="400"></canvas>
                </div>
            </div>
        </div>
        <!--/ Company Table Card -->

        <!-- Upcoming Holidays-->
        <div class="col-lg-4 col-md-6 col-12">
            <div class=" card card-browser-states">
                <div class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                    <div class="header-left">
                        <h4 class="card-title">{{trans("admin/dashboard.upcoming_holidays")}}</h4>
                    </div>
                    <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <select class="form-control form-select" name="holiday_team_id" id="holiday_team_id" onchange="upcomingHolidays()">
                            <option value="">All</option>
                            @foreach($teamMembers as $teamMember)
                                <option value="{{$teamMember->id}}">{{$teamMember->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row match-height card-body mt-2">
                        <!-- <div class="col-md-12 text-center">
                            <div class="d-flex justify-content-center actioncolorholiday">
                            <a href="#" class="me-1"><i data-feather="chevron-left"></i></a> <span>July 2022</span> <a href="#" class="ms-1"><i data-feather="chevron-right"></i></a>
                            </div>
                        </div> -->
                        <div class="col-md-12" id="upcomingHolidaysDiv">
                            <div class="employee-task d-flex justify-content-between align-items-center pb-2">
                                <h4 class="text-secondary">{{trans("admin/dashboard.no_upcoming_holidays")}}</h4>
                            </div>
                        </div>
                     
                </div>
            </div>
        </div>
        <!--/ Upcoming Holidays -->


    </div>

</section>

<style>
    input.flatpickr-range{
        width:210px !important;
    }
</style>
@endsection

@push('footer-script')
<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/charts/apexcharts.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<!-- END: Page Vendor JS-->



<!-- END: chart js-->
<script src="/app-assets/js/scripts/charts/chart-apex.js"></script>
<script src="/app-assets/vendors/js/charts/chart.min.js"></script>
<script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
<script src="/app-assets/js/scripts/pages/dashboard-analytics.js"></script>
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script>
<script src="/app-assets/js/scripts/cards/card-statistics.js"></script>
<!-- END: Page JS-->
<script src="/assets/js/moment.min.js"></script>

<script>

    var filters ={};
    $(document).ready(function(){
        applyFilters();
    });

    function callAjax(){
        teamMemberList();
        attendanceInfo();
        totalWorkingHour();
        dutyInfo();
        presentPercentage();
        attendanceInfoStatus();
        presentOnWeekOff();
        inCompleteDayStatus();
        pendingRequest();
        peopleOnLeave();
        upcomingHolidays();
    }

    // On load Toast
    $(window).on('load', function() {
        var isRtl = $('html').attr('data-textdirection') === 'rtl';
        // setTimeout(function() {
        //     toastr['success'](
        //         'You have successfully logged in to {{  Auth::user()->organization->name  }}. Now you can start to explore!',
        //         '👋 Welcome {{ ucwords(Auth::user()->name) }}!', {
        //             closeButton: true,
        //             tapToDismiss: false,
        //             rtl: isRtl
        //         }
        //     );
        // }, 2000);
    });

    function teamMemberList() {
        var date = "{{$fromDate}}";
        $.ajax({
            url: "/home/team-members",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                data = '';

                if (dataResult.length > 0) {
                    $.each(dataResult, function(index, value) {
                        data +='<tr><td><div class="d-flex"><div class="avatar-group"><div data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up my-0" title="'+value['name'] +'"><img src="';
                        imgUrl = '/assets/img/default-profile-3.png';
                        if (value['image']) {
                            imgUrl = value['image'];
                        }
                        data += imgUrl+'" alt="" height="26" width="26"/></div></div><span class="fw-bold ms-1">'+value['name'] + '</span><div></td><td>';
                        data += (value['today_attendance'] ? value['today_attendance']['in_time'] ? value['today_attendance']['in_time'] : '--' : '--')  + '</td><td>';
                        data += (value['today_attendance'] ? value['today_attendance']['out_time'] ? value['today_attendance']['out_time'] : '--' : '--')  + '</td><td>';
                        data += (value['today_attendance'] ? value['today_attendance']['working_time'] : '--')  + '</td><td></tr>';
                    });
                }
                else{
                    data = '<tr><td colspan=4 class="text-center"> No data Found </td></tr>'
                }

                $('#teamMemberList').html(data);
                $('#team-member-count').html(dataResult.length);
            }
        });
    }

    function attendanceInfo() {
        var date = $('#attendanceInfo').val();
        $.ajax({
            url: "/home/attendance-info",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                donutChart(dataResult);
            }
        });
    }

    function totalWorkingHour(){
        var date = $('#totalWorkingHour').val();
        $.ajax({
            url: "/home/total-working-hour",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult){
                if(dataResult){
                    $('#average_working_hr').html(dataResult['totalAvgWorkingHour']);
                }
            }
        });
    }

    function dutyInfo() {
        var date = $('#dutyInfo').val();
        $.ajax({
            url: "/home/duty-info",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                $('#barchart-canvas').html(
                    '<canvas class="bar-chart-ex chartjs" id="barchartex" data-height="250"></canvas>');
                barChartExample(dataResult);
            }
        });
    }

    function attendanceInfoStatus() {
        var date = $('#attendanceInfoStatus').val();
        $.ajax({
            url: "/home/attendance-info-status",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                lineAreaChartEx(dataResult);
            }
        });
    }

    function presentOnWeekOff() {
        var date = $('#presentOnWeekOff').val();
        $.ajax({
            url: "/home/present-on-week-off",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                data = '';

                if (dataResult.length > 0) {
                    $.each(dataResult, function(index, value) {
                        data +=
                            '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><div class="media d-flex align-items-center"><div class="avatar mr-75"><img src="' +
                            value['image'] +
                            '" class="rounded" width="42" height="42" alt="Avatar" /></div>';
                        data += '<div class="media-body my-auto ms-1"><h6 class="mb-0">' + value[
                                'employee'] + '</h6><small>' + value['date'] +
                            '</small></div></div></div>';
                    });
                } else {
                    data +=
                        '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><h4 class="text-secondary">No Employees Present on Week Off found.</h4></div>';
                }

                $('#presentOnWeekOffDiv').html(data);
            }
        });
    }

    function peopleOnLeave() {
        $.ajax({
            url: "/home/people-on-leave",
            type: "GET",
            data: {
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                data = '';

                if (dataResult.length > 0) {
                    $.each(dataResult, function(index, value) {
                        data +=
                            '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><div class="media d-flex align-items-center"><div class="avatar mr-75"><img src="';
                        imgUrl = '/assets/img/default-profile-3.png';
                        if (value['employee']['image']) {
                            imgUrl = value['employee']['image'];
                        }
                        data += imgUrl;
                        data += '" class="rounded" width="42" height="42" alt="Avatar" /></div>';
                        data += '<div class="media-body my-auto ms-1"><h6 class="mb-0">' + value['employee']['name'] + '</h6><small>' + moment(value['leave_date']).format('Do-MMM-YYYY') +
                            '</small></div></div></div>';
                    });
                } else {
                    data +=
                        '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><h4 class="text-secondary">No Employees On Leave found.</h4></div>';
                }

                $('#peopleOnLeave').html(data);
            }
        });
    }

    function inCompleteDayStatus() {
        var date = $('#inCompleteDayStatus').val();
        $.ajax({
            url: "/home/in-complete-day-status",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                data = '';
                if (dataResult.length > 0) {
                    $.each(dataResult, function(index, value) {
                        data +=
                            '<div class="browser-states col-lg-6 mt-0 mb-2"><div class="media d-flex"><div data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="' +
                            value['name'] + '" class="avatar pull-up me-2 ms-1"><img src="';
                        imgUrl = '/assets/img/default-profile-3.png';
                        if (value['image']) {
                            imgUrl = value['image'];
                        }
                        data += imgUrl;
                        data += '" alt="Avatar" width="33" height="33" /></div><h6 class="align-self-center mb-0">';
                        data += value['name'];
                        data += '</h6></div><div class="d-flex align-items-center"><div class="font-weight-bold text-body-heading mr-1">';
                        if(value['attendances']){
                        data += value['attendances'][0]['working_time'].substr(0,5);
                        }
                        data += ' Hr</div></div></div>';
                    });
                } else {
                    data +=
                        '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><h4 class="text-secondary">No Incomplete Day Status found.</h4></div>';
                }
                $('#inCompleteDayStatusDiv').html(data);
            }
        });
    }

    function presentPercentage() {
        var date = $('#presentPercentage').val();
        $.ajax({
            url: "/home/present-percentage",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                $('#presentValue').html(dataResult['present']);
                $('#absentValue').html(dataResult['absent']);
                supportTrackerChartEx(dataResult['presentPercentage']);
            }
        });
    }


    function pendingRequest() {
        var date = "{{$fromDate}};"
        $.ajax({
            url: "/home/pending-request",
            type: "GET",
            data: {
                'date': date,
                'filters': JSON.stringify(filters),
            },
            success: function(dataResult) {
                $('#horizontal-barchart-canvas').html(
                    '<canvas class="horizontal-bar-chart-ex chartjs" data-height="400"></canvas>');
                horizontalBarChartExample(dataResult);
            }
        });
    }

    function upcomingHolidays(){
        var date = "{{$fromDate}}";
        var empId = $('#holiday_team_id').val();;

        $.ajax({
            url: "/home/upcoming-holidays",
            type: "GET",
            data: {
                'date': date,
                'emp_id': empId,
            },
            success: function(dataResult){
                data = '';
                if(dataResult.length>0){
                    $.each(dataResult, function(index, value){
                        data += '<div class="holidaybg holidaybg'+index+'"><div class="row align-items-center"><div class="col-8"><span>';
                        data += value['name'];
                        data += '</span></div><div class="col-4 text-end"><h5>';
                        data += value['date'];
                        data += '</h5><p>';
                        data += value['day'];
                        data += '</p></div></div></div>';
                    });
                }
                else{
                    data+= '<div class="employee-task d-flex justify-content-between align-items-center pb-2"><h4 class="text-secondary">No Upcoming Holidays found.</h4></div>';
                }
                $('#upcomingHolidaysDiv').html(data);
            }
        });
    }

    function getsubLocations(th) {
        var locationId = $('#location_id').val();

        var subLocationId = "";

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: "/member/ajax/sublocations",
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    $.each(data, function(i, item) {
                        selectbox += '<option value="' + i + '">' + item + '</option>';
                    });
                }
                $('#sublocation_id').html(selectbox);
            }
        });  
    }

    function applyFilters(){
        var employeeType = $('#employee_type').val();
        var locations = $('#location_id').val();
        var subLocations = $('#sublocation_id').val();
        var departments = $('#department_id').val();
        var subDepartments = $('#sub_department_id').val();
        var designations = $('#designation_id').val();
        var shifts = $('#shift_id').val();
        var areas = $('#area_id').val();
        
        filters = {
            'employee_type': employeeType,
            'location_id': locations,
            'sublocation_id': subLocations,
            'department_id': departments,
            'sub_department_id': subDepartments,
            'designation_id': designations,
            'shift_id': shifts,
            'area_id': areas,
        }
        callAjax();
    }
</script>
@endpush