@extends('layouts.app')
@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@2/daterangepicker.css" />
<style>
    .select2-container-multi .select2-choices .select2-search-field input {
        padding: 0px 10px;
        margin: 0;
    }
</style>
<style>
    .list-group {
        margin-bottom: 0px !important;
    }

    .my-export-btn {}

    .panelOuter {
        display: flex;
        align-items: center;
        justify-content: end;
        margin-bottom: 20px;
    }

    #search-box label,
    #search-box input {
        width: 100% !important;
    }

    #reportrange {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    #project-search-box label,
    #project-search-box input {
        width: 100% !important;
    }
    #projectreportrange { 
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
</style>
@endpush
@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">

        <div class="col-md-6 pull-right text-right hidden-xs hidden-sm">
            <form id="createProject" class="ajax-form" method="POST">
                @csrf
                {{-- {!! Form::hidden('dashboard_type', 'admin-dashboard') !!} --}}
                <div class="btn-group dropdown keep-open pull-right m-l-10">
                    <button aria-expanded="true" data-toggle="dropdown"
                        class="btn bg-white b-all dropdown-toggle waves-effect waves-light" type="button"><i
                            class="icon-settings"></i>
                    </button>
                    <ul role="menu" class="dropdown-menu  dropdown-menu-right dashboard-settings">
                        <li class="b-b">
                            <h4>@lang('modules.dashboard.dashboardWidgets')</h4>
                        </li>

                        @foreach ($widgets as $widget)
                        @php
                        $wname = \Illuminate\Support\Str::camel($widget->widget_name);
                        @endphp
                        <li>
                            <div class="checkbox themeCheckbox ">
                                <input id="{{ $widget->widget_name }}" name="{{ $widget->widget_name }}" value="true"
                                    @if ($widget->status) checked @endif type="checkbox">
                                <label for="{{ $widget->widget_name }}" class="box_check">@lang('modules.dashboard.' .
                                    $wname)</label>
                            </div>
                        </li>
                        @endforeach

                        <li>
                            <button type="button" id="save-form"
                                class="btn btn-success btn-sm btn-block">@lang('app.save')</button>
                        </li>

                    </ul>
                </div>
            </form>

            @if ($global->dashboard_clock == true)
            <span id="clock" class="dashboard-clock text-muted m-r-30"></span>
            @endif

            <select class="selectpicker language-switcher" data-width="fit">
                <option value="en" @if ($global->locale == 'en') selected @endif
                    data-content='<span class="flag-icon flag-icon-gb" title="English"></span>'>En</option>
                @foreach ($languageSettings as $language)
                <option value="{{ $language->language_code }}" @if ($global->locale == $language->language_code)
                    selected @endif
                    data-content='<span class="flag-icon flag-icon-{{ $language->language_code }}"
                        title="{{ ucfirst($language->language_name) }}"></span>'>
                    {{ $language->language_code }}</option>
                @endforeach
            </select>
        </div>

        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">@lang($pageTitle)</li>
        </ol>


    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('css/full-calendar/main.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/bower_components/morrisjs/morris.css') }}">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.css') }}">
<!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.theme.default.css') }}">

<!--Owl carousel CSS -->

<link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/multiselect/css/multi-select.css') }}">

<style>
    .col-in {
        padding: 0 20px !important;

    }

    .fc-event {
        font-size: 10px !important;
    }

    .dashboard-settings {
        padding-bottom: 8px !important;
    }

    .billableDropDown_outer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .billableDropDown_outer select#hours_type {
        max-width: 230px;
    }

    .panelHeading_new {
        font-size: 22px;
        font-weight: 500;
        color: #241b5b;
    }

    @media (min-width: 769px) {
        #wrapper .panel-wrapper {
            height: 530px;
            overflow-y: auto;
        }
    }
</style>
@endpush

@section('content')
<div class="dash_panel">
    <div class="row">
        @if ($global->system_update == 1)
        @php($updateVersionInfo = \Froiden\Envato\Functions\EnvatoUpdate::updateVersionInfo())
        @if (isset($updateVersionInfo['lastVersion']))
        <!-- <div class="col-md-12">
                        <div class="white-box">
                            <div class="alert alert-info col-md-12">

                                <div class="col-md-10"><i class="ti-gift"></i> @lang('modules.update.newUpdate') <label
                                            class="label label-success">{{ $updateVersionInfo['lastVersion'] }}</label></div>
                                <div class="col-md-2"><a href="{{ route('update-settings.index') }}"
                                                        class="btn btn-success btn-small">@lang('modules.update.updateNow') <i
                                                class="fa fa-arrow-right"></i></a></div>
                            </div>
                        </div>
                    </div>-->
        @endif
        @endif

        @if (!is_null($global->last_cron_run))
        @if (\Carbon\Carbon::now()->diffInHours($global->last_cron_run) > 48)
        <!-- <div class="clearfix"></div>
                    <div class="col-md-12">

                        <div class="alert alert-danger alert-dismissable">
                            @lang('messages.cronIsNotRunning')
                        </div>

                    </div>-->
        @endif
        @else
        <!--<div class="clearfix"></div>
                <div class="col-md-12">

                    <div class="alert alert-danger alert-dismissable" id="{{ $global->last_cron_run }}">
                        @lang('messages.cronIsNotRunning')
                    </div>

                </div>-->
        @endif

        @if (!$progress['progress_completed'] && App::environment('codecanyon'))
        <!--@include('admin.dashboard.get_started')-->
        @endif
    </div>

    <div class="content-header-left m-t-10 m-b-15">
        <div class="row breadcrumbs-top">
            <div class="col-xs-12 m-b-0">
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a>
                        </li>
                        <li class="breadcrumb-item">Dashboard</li>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="customCard m-b-15">
        <div class="row dashboard-stats front-dashboard custom-card">

            @if (hasAccessOf('clients')['is_read'] && in_array('total_clients', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('clients.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-orange-gradient"><i class="icon-user"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalClients')</span><br>
                                <span class="counter">{{ $counts->totalClients }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('employees')['is_read'] && in_array('total_employees', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('employees.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-success-gradient"><i class="icon-people"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalEmployees')</span><br>
                                <span class="counter">{{ $counts->totalEmployees }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('projects')['is_read'] && in_array('total_projects', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('projects.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-danger-gradient"><i class="icon-layers"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalProjects')</span><br>
                                <span class="counter">{{ $counts->totalProjects }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('invoices')['is_read'] && in_array('total_unpaid_invoices', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-invoices.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-warning-gradient"><i class="ti-receipt"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalUnpaidInvoices')</span><br>
                                <span class="counter">{{ isset($counts->totalUnpaidInvoices) ? $counts->totalUnpaidInvoices : 0 }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('time_logs')['is_read'] && in_array('total_hours_logged', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-time-logs.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-info-gradient"><i class="icon-clock"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalHoursLogged')</span><br>
                                <span class="counter">{{ $counts->totalHoursLogged }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('tickets')['is_read'] && in_array('total_unresolved_tickets', $activeWidgets))
            <div class="col-md-3 col-sm-6 dashboard-stats">
                <a href="{{ route('tickets.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-inverse-gradient"><i class="ti-ticket"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.tickets.totalUnresolvedTickets')</span><br>
                                <span class="counter">{{ floor($counts->totalUnResolvedTickets) }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            @if (hasAccessOf('attendance')['is_read'] && in_array('total_today_attendance', $activeWidgets))
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('attendances.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-pink-gradient"><i class="fa fa-percent"
                                            style="display: inherit;"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalTodayAttendance')</span><br>
                                <span class="counter">
                                    @if ($counts->totalEmployees > 0)
                                    {{ round(($counts->totalTodayAttendance / $counts->totalEmployees) * 100, 2) }}
                                    @else
                                    0
                                    @endif
                                </span>%
                                <span class="text-muted">({{ $counts->totalTodayAttendance . '/' .
                                    $counts->totalEmployees }})</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endif

            {{-- @if (in_array('tasks', $modules) && in_array('total_pending_tasks', $activeWidgets)) --}}
            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-purple-gradient"><i class="ti-list-ol"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalToDoTask')</span><br>
                                <span class="counter">{{ $counts->totalToDoTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {{-- @endif --}}

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-blue-gradient"><i class="ti-alert"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalInprogressTask')</span><br>
                                <span class="counter">{{ $counts->totalInProgressTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-red-gradient"><i class="ti-alert"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalHoldTask')</span><br>
                                <span class="counter">{{ $counts->totalHoldTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-green-gradient"><i class="ti-alert"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalPendingTasks')</span><br>
                                <span class="counter">{{ $counts->totalPendingTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-yellow-gradient"><i class="ti-alert"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('modules.dashboard.totalCompletedTasks')</span><br>
                                <span class="counter">{{ $counts->totalCompletedTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-red-gradient"><i class="fa fa-file-text-o"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('app.billableTask')</span><br>
                                <span class="counter">{{ $counts->totalBillableTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-success-gradient"><i class="fa fa-file-text-o"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('app.nonBillableTask')</span><br>
                                <span class="counter">{{ $counts->totalNonbillableTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            {{-- <div class="col-md-3 col-sm-6">
                <a href="{{ route('all-tasks.index') }}">
                    <div class="white-box">
                        <div class="row">
                            <div class="col-xs-3">
                                <div>
                                    <span class="bg-yellow-gradient"><i class="fa fa-cogs"></i></span>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <span class="widget-title"> @lang('app.maintenanceTask')</span><br>
                                <span class="counter">{{ $counts->totalMaintenanceTasks }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div> --}}
        </div>
    </div>

    <div style="padding-bottom: 10px;">
        {{-- <div class="row">
            <div class="col-md-12">
                <div class="customCard employeeData">
                    <h4 class="page-title m-b-15 font-semi-bold"><i class="{{ $pageIcon }}"></i> {{
                        __('app.menu.employees') }} </h4>
                    <form action="" id="filter-form">
                        <div class="row align-items-end p-b-15 justify-content-end" id="ticket-filters">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center gap-2">

                                    <div class="col-md-12">
                                        <div class="example">
                                            <h5 class="box-title m-t-0 m-b-5">@lang('app.selectDateRange')</h5>

                                            <div class="input-daterange input-group" id="date-range">
                                                <input type="text" class="form-control" id="start-date"
                                                    placeholder="@lang('app.startDate')" value="" />
                                                <span
                                                    class="input-group-addon bg-info b-0 spanTo">@lang('app.to')</span>
                                                <input type="text" class="form-control" id="end-date"
                                                    placeholder="@lang('app.endDate')" value="" />
                                            </div>
                                        </div>
                                    </div>
                                    <label class="control-label m-b-0">@lang('app.department')</label>
                                    <div class="form-group w-75 m-b-0">
                                        <select class="form-control select2" name="department" id="department"
                                            data-style="form-control">
                                            <option value="all">@lang('modules.client.all')</option>
                                            @forelse($departments as $department)
                                            <option value="{{$department->id}}">{{ ucfirst($department->team_name) }}
                                            </option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>


                                    <button type="button" id="apply-filters"
                                        class="themeBtn saveButton">@lang('app.apply')</button>
                                    <button type="button" id="reset-filters"
                                        class="saveButton themeBtnOutline">@lang('app.reset')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive exportP">
                        {!! $dataTable->table(['class' => 'table table-bordered table-hover toggle-circle default
                        footable-loaded footable']) !!}
                    </div>
                </div>
            </div>
        </div> --}}
    </div>


    {{-- @if (hasAccessOf('payments')['is_read'] && in_array('recent_earnings', $activeWidgets))
    <div class="row custom-card">
        <div class="col-md-12">
            <div class="row">
                <div class="col-xs-12">
                    <div class="customCard m-b-15">
                        <h3 class="m-b-0 m-t-0 panel-heading">@lang('modules.dashboard.recentEarnings')</h3>

                        @if (!empty(json_decode($chartData)))
                        <div id="morris-area-chart" style="height: 190px;"></div>
                        <h6 style="line-height: 2em;"><span class=" label label-danger">@lang('app.note'):</span>
                            @lang('messages.earningChartNote')
                            <a href="{{ route('settings.index') }}"><i class="fa fa-arrow-right"></i></a>
                        </h6>
                        @else
                        <div class="text-center">
                            <div class="empty-space" style="height: 200px;">
                                <div class="empty-space-inner">
                                    <div class="icon" style="font-size:30px">
                                        <i class="fa fa-money"></i>
                                    </div>
                                    <div class="title m-b-15">@lang('messages.noEarningRecordFound')
                                    </div>
                                    <div class="subtitle">
                                        <a href="{{ route('payments.index') }}"
                                            class="btn btn-info btn-outline btn-sm">
                                            <i class="fa fa-plus"></i>
                                            @lang('app.manage')
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif --}}

    <div class="row custom-card">
        @if (hasAccessOf('manage_leaves')['is_write'])
        <div class="col-md-6">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.settingsLeaves')</div>
                <div class="panel-wrapper collapse in" style="overflow: auto">
                    <div class="panel-body">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if (hasAccessOf('tickets')['is_read'] && in_array('new_tickets', $activeWidgets))
        <div class="col-md-6">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.newTickets')</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <ul class="list-task list-group" data-role="tasklist">
                            @forelse($newTickets as $key=>$newTicket)
                            <li class="list-group-item" data-role="task">
                                {{ $key + 1 }}. <a href="{{ route('tickets.edit', $newTicket->id) }}"
                                    class="font-semi-bold"> {{ ucfirst($newTicket->subject) }}</a>
                                <i class="font-12">{{ ucwords($newTicket->created_at->diffForHumans()) }}</i>
                            </li>
                            @empty
                            <li class="list-group-item" data-role="task">
                                <div class="text-center">
                                    <div class="empty-space" style="height: 200px;">
                                        <div class="empty-space-inner">
                                            <div class="icon" style="font-size:20px"><i class="ti-ticket"></i>
                                            </div>
                                            <div class="title m-b-15">@lang('messages.noTicketFound')
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    @if($user->hasRole('admin') || $user->hasRole('project_manager'))
        <div class="customCard m-b-15">
            <div class="row dashboard-stats front-dashboard custom-card">
                <div class="col-md-12">
                    <div class="billableDropDown_outer">
                        <h2 class="panelHeading_new">Task (Billable/Non-Billable Hours)</h2>
                        <select id="hours_type" class="form-control">
                            <option value="1" selected>Billable Hours</option>
                            <option value="2">Non-Billable Hours</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="{{ route('all-tasks.index') }}">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div>
                                        <span class="bg-purple-gradient"><i class="ti-list-ol"></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <span class="widget-title"> @lang('modules.dashboard.totalToDoTask')</span><br>
                                    <span class="counter" id="totalToDoHours"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6">
                    <a href="{{ route('all-tasks.index') }}">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div>
                                        <span class="bg-blue-gradient"><i class="ti-alert"></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <span class="widget-title"> @lang('modules.dashboard.totalInprogressTask')</span><br>
                                    <span class="counter" id="totalInprogressHours"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6">
                    <a href="{{ route('all-tasks.index') }}">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div>
                                        <span class="bg-red-gradient"><i class="ti-alert"></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <span class="widget-title"> @lang('modules.dashboard.totalHoldTask')</span><br>
                                    <span class="counter" id="totalHoldHours"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6">
                    <a href="{{ route('all-tasks.index') }}">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div>
                                        <span class="bg-green-gradient"><i class="ti-alert"></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <span class="widget-title"> @lang('modules.dashboard.totalIncompleteTasks')</span><br>
                                    <span class="counter" id="totalIncompleteHours"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6">
                    <a href="{{ route('all-tasks.index') }}">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div>
                                        <span class="bg-yellow-gradient"><i class="ti-alert"></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <span class="widget-title"> @lang('modules.dashboard.totalCompletedTasks')</span><br>
                                    <span class="counter" id="totalCompletedHours"></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- Billable/Non-Billabele Task List -->
        <div class="col-md-12">
            <div class="customCard m-b-15">
                <div class="panel-heading">Resources (Billable/Non-Billable)</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <div class="row mb-3 align-items-end " style="margin-bottom: 15px !important">
                            <div class="col-md-3">
                                <!-- Placeholder for search box -->
                                <div id="search-box"></div>
                            </div>
                            <div class="col-md-3">
                                <select id="task_status" class="form-control">
                                    <option value="1">Incomplete</option>
                                    <option value="2">Completed</option>
                                    <option value="3">Hold</option>
                                    <option value="4">In Progress</option>
                                    <option value="5" selected>To Do</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <div id="reportrange"
                                    style="background:#fff; cursor:pointer; padding:8px 12px; border:1px solid #ccc; display:inline-block; min-width: 250px;">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                    <span></span> <b class="caret"></b>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <!-- Placeholder for entries dropdown -->
                                <div id="entries-box"></div>
                            </div>
                            <div class="col-md-1 d-flex justify-content-end">
                                <!-- Placeholder for export button -->
                                <div id="export-btn-box"></div>
                            </div>
                        </div>
                        <div class="steamline">
                            {!! $dataTable->table(['class' => 'table table-bordered table-striped w-100'], true) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="customCard m-b-15">
                <div class="panel-heading">Projects (Billable/Non-Billable)</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <div class="row mb-3 align-items-end " style="margin-bottom: 15px !important">
                            <div class="col-md-3">
                                <!-- Placeholder for search box -->
                                <div id="project-search-box"></div>
                            </div>
                            <div class="col-md-3">
                                <select id="project_task_status" class="form-control">
                                    <option value="1">Incomplete</option>
                                    <option value="2">Completed</option>
                                    <option value="3">Hold</option>
                                    <option value="4">In Progress</option>
                                    <option value="5" selected>To Do</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <div id="projectreportrange"
                                    style="background:#fff; cursor:pointer; padding:8px 12px; border:1px solid #ccc; display:inline-block; min-width: 250px;">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                    <span></span> <b class="caret"></b>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <!-- Placeholder for entries dropdown -->
                                <div id="project-entries-box"></div>
                            </div>
                            <div class="col-md-1 d-flex justify-content-end">
                                <!-- Placeholder for export button -->
                                <div id="project-export-btn-box"></div>
                            </div>
                        </div>
                        <div class="steamline">
                            <table id="projectTasksTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>D T Row Index</th>
                                        <th>Project</th>
                                        <th>Billable Hours</th>
                                        <th>Non-Billable Hours</th>
                                        <th>Total Hours</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Billable/Non-Billabele Task List -->
    @endif

    <div class="row custom-card">

        @if (hasAccessOf('tasks')['is_read'] && in_array('overdue_tasks', $activeWidgets))
        <div class="col-md-6">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.overdueTasks')</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <ul class="list-task list-group" data-role="tasklist">
                            <li class="list-group-item" data-role="task">
                                <strong>@lang('app.title')</strong> <span
                                    class="pull-right"><strong>@lang('modules.dashboard.dueDate')</strong></span>
                            </li>
                            @forelse($pendingTasks as $key=>$task)
                            @if ((!is_null($task->project_id) && !is_null($task->project)) ||
                            is_null($task->project_id))
                            <li class="list-group-item row" data-role="task">
                                <div class="col-xs-9">
                                    {!! $key +
                                    1 .
                                    '. <a href="javascript:;" data-task-id="' .
                                                    $task->id .
                                                    '" class="show-task-detail">' .
                                        ucfirst($task->heading) .
                                        '</a>' !!}
                                    @if (!is_null($task->project_id) && !is_null($task->project))
                                    <a href="{{ route('projects.show', $task->project_id) }}" class="font-12">{{
                                        ucwords($task->project->project_name) }}</a>
                                    @endif
                                </div>
                                <label class="label label-danger pull-right col-xs-3">{{
                                    \Illuminate\Support\Carbon::parse($task->due_date)->format($global->date_format) }}
                                </label>
                            </li>
                            @endif
                            @empty
                            <li class="list-group-item" data-role="task">
                                <div class="text-center">
                                    <div class="empty-space" style="height: 200px;">
                                        <div class="empty-space-inner">
                                            <div class="icon" style="font-size:20px"><i class="fa fa-tasks"></i>
                                            </div>
                                            <div class="title m-b-15">@lang('messages.noOpenTasks')
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif


        @if (hasAccessOf('leads')['is_read'] && in_array('pending_follow_up', $activeWidgets))
        <div class="col-md-6">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.pendingFollowUp')</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <ul class="list-task list-group" data-role="tasklist">
                            <li class="list-group-item" data-role="task">
                                <strong>@lang('app.title')</strong> <span
                                    class="pull-right"><strong>@lang('modules.dashboard.followUpDate')</strong></span>
                            </li>
                            @forelse($pendingLeadFollowUps as $key=>$follows)
                            <li class="list-group-item row" data-role="task">
                                <div class="col-xs-9">
                                    {{ $key + 1 }}

                                    <a href="{{ route('leads.show', $follows->id) }}" class="show-task-detail">{{
                                        ucwords($follows->company_name) }}</a>

                                </div>
                                <label class="label label-danger pull-right col-xs-3">{{
                                    \Carbon\Carbon::parse($follows->follow_date)->timezone($global->timezone)->format($global->date_format)
                                    }}</label>
                            </li>
                            @empty
                            <li class="list-group-item" data-role="task">
                                <div class="text-center">
                                    <div class="empty-space" style="height: 200px;">
                                        <div class="empty-space-inner">
                                            <div class="icon" style="font-size:20px"><i class="fa fa-user-plus"></i>
                                            </div>
                                            <div class="title m-b-15">@lang('messages.noPendingLeadFollowUps')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif

    </div>

    <div class="row custom-card">
        @if (hasAccessOf('projects')['is_read'] && in_array('project_activity_timeline', $activeWidgets))
        <div class="col-md-6" id="project-timeline">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.projectActivityTimeline')</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <div class="steamline">
                            @forelse($projectActivities as $activ)
                            <div class="sl-item">
                                <div class="sl-left"><i class="fa fa-circle text-info"></i>
                                </div>
                                <div class="sl-right">
                                    <div>
                                        <h6><a href="{{ route('projects.show', $activ->project_id) }}"
                                                class="font-bold">{{ ucwords($activ->project->project_name) }}
                                                :</a> {{ $activ->activity }}</h6> <span class="sl-date">{{
                                            $activ->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="text-center">
                                <div class="empty-space" style="height: 200px;">
                                    <div class="empty-space-inner">
                                        <div class="icon" style="font-size:20px"><i class="ti-ticket"></i>
                                        </div>
                                        <div class="title m-b-15">@lang('messages.noProjectActivity')
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if (hasAccessOf('employees')['is_read'] && in_array('user_activity_timeline', $activeWidgets))
        <div class="col-md-6">
            <div class="customCard m-b-15">
                <div class="panel-heading">@lang('modules.dashboard.userActivityTimeline')</div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <div class="steamline">

                            @forelse($userActivities as $key=>$activity)
                            <div class="sl-item">
                                <div class="sl-left">
                                    @if (isset($activity->user->image_url))
                                    <img src="{{ $activity->user->image_url }}" width="40" height="40" alt="user"
                                        class="img-circle">
                                    @endif
                                </div>
                                <div class="sl-right">
                                    <div class="m-l-40">
                                        @if (isset($activity->user->name))
                                        <a href="{{ route('employees.show', $activity->user_id) }}"
                                            class="text-success">{{ ucwords($activity->user->name) }}</a>
                                        @endif
                                        <span class="sl-date">{{ $activity->created_at->diffForHumans() }}</span>

                                        <p>{!! ucfirst($activity->activity) !!}</p>
                                    </div>
                                </div>
                            </div>
                            @if (count($userActivities) > $key + 1)
                            <hr>
                            @endif
                            @empty
                            <div class="text-center">
                                <div class="empty-space" style="height: 200px;">
                                    <div class="empty-space-inner">
                                        <div class="icon" style="font-size:20px"><i class="fa fa-history"></i>
                                        </div>
                                        <div class="title m-b-15">@lang('messages.noActivityByThisUser')
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif


    </div>
    <!-- .row -->


    {{-- Ajax Modal --}}
    <div class="modal fade bs-modal-md in" id="eventDetailModal" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{-- Ajax Modal Ends --}}
    {{-- Ajax Modal --}}
    <div class="modal fade bs-modal-md in" id="subTaskModal" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="subTaskModelHeading">Sub Task
                        e</span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->.
    </div>
    {{-- Ajax Modal Ends --}}

    <div class="modal fade bs-modal-md in" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="reviewModal"
        aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Do you like worksuite? Help us Grow :)</h4>

                </div>
                <div class="modal-body">
                    <div class="note note-info font-14 m-l-5">

                        We hope you love it. If you do, would you mind taking 10 seconds to leave me a short review on
                        codecanyon?
                        <br>
                        This helps us to continue providing great products, and helps potential buyers to make confident
                        decisions.
                        <hr>
                        Thank you in advance for your review and for being a preferred customer.

                        <hr>

                        <p class="text-center">
                            <a href="{{ \Froiden\Envato\Functions\EnvatoUpdate::reviewUrl() }}"> <img
                                    src="{{ asset('img/review-worksuite.png') }}" alt=""></a>
                            <button type="button" class="btn btn-link btn-sm" data-dismiss="modal"
                                onclick="hideReviewModal('closed_permanently_button_pressed')">Hide Pop up
                                permanently</button>
                            <button type="button" class="btn btn-link btn-sm" data-dismiss="modal"
                                onclick="hideReviewModal('already_reviewed_button_pressed')">Already Reviewed</button>
                        </p>

                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ \Froiden\Envato\Functions\EnvatoUpdate::reviewUrl() }}" target="_blank" type="button"
                        class="btn btn-success">Give Review</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-daterangepicker@2/daterangepicker.js"></script>
@if($global->locale == 'en')
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.{{ $global->locale }}-AU.min.js">
</script>
@elseif($global->locale == 'br')
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.pt-BR.min.js">
</script>
@else
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.{{ $global->locale }}.min.js">
</script>
@endif
{!! $dataTable->scripts() !!}
{{-- {!! $projectDataTabel->html()->scripts() !!} --}}
<script>
    $(".select2").select2({
            formatNoMatches: function () {
                return "{{ __('messages.noRecordFound') }}";
            }
        });

    //     jQuery('#date-range').datepicker({
    //     toggleActive: true,
    //     format: '{{ $global->date_picker_format }}',
    //     language: '{{ $global->locale }}',
    //     autoclose: true
    // });
    //     jQuery('#due_date3').datepicker({
    //         autoclose: true,
    //         todayHighlight: true
    //     });
        var taskEvents = [
            @foreach ($leaves as $leave)
                @if ($leave->status == 'approved')
                    {
                        id: '{{ ucfirst($leave->id) }}',
                        title: '{{ ucfirst($leave->user->name) }}',
                        start: '{{ \Carbon\Carbon::parse($leave->leave_date)->format('Y-m-d') }}',
                        end: '{{ \Carbon\Carbon::parse($leave->leave_date)->format('Y-m-d') }}',
                        className: 'bg-{{ $leave->type->color }}'
                    },
                @else
                    {
                        id: '{{ ucfirst($leave->id) }}',
                        title: '<i class="fa fa-warning"></i> {{ ucfirst($leave->user->name) }}',
                        start: '{{ \Carbon\Carbon::parse($leave->leave_date)->format('Y-m-d') }}',
                        end: '{{ \Carbon\Carbon::parse($leave->leave_date)->format('Y-m-d') }}',
                        className: 'bg-{{ $leave->type->color }}'
                    },
                @endif
            @endforeach
        ];

        var getEventDetail = function(id) {
            var url = '{{ route('leaves.show', ':id') }}';
            url = url.replace(':id', id);

            $('#modelHeading').html('Event');
            $.ajaxModal('#eventDetailModal', url);
        }

        var calendarLocale = '{{ $global->locale }}';

        $('.leave-action').click(function() {
            var action = $(this).data('leave-action');
            var leaveId = $(this).data('leave-id');
            var url = '{{ route('leaves.leaveAction') }}';

            $.easyAjax({
                type: 'POST',
                url: url,
                data: {
                    'action': action,
                    'leaveId': leaveId,
                    '_token': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status == 'success') {
                        window.location.reload();
                    }
                }
            });
        })
</script>


<script src="{{ asset('plugins/bower_components/raphael/raphael-min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>

<script src="{{ asset('plugins/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
<script src="{{ asset('plugins/bower_components/counterup/jquery.counterup.min.js') }}"></script>

<!-- jQuery for carousel -->
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.custom.js') }}"></script>

<!--weather icon -->

<script src="{{ asset('plugins/bower_components/calendar/jquery-ui.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('js/full-calendar/main.min.js') }}"></script>
<script src="{{ asset('js/full-calendar/locales-all.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/moment-timezone.js') }}"></script>

<script>
    var initialLocaleCode = '{{ $global->locale }}';
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: initialLocaleCode,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                // initialDate: '2020-09-12',
                navLinks: true, // can click day/week names to navigate views
                selectable: false,
                selectMirror: true,
                select: function(arg) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                    }
                    calendar.unselect()
                },
                eventClick: function(arg) {
                    getEventDetail(arg.event.id);
                },
                editable: false,
                dayMaxEvents: true, // allow "more" link when too many events
                events: taskEvents,
                eventDidMount: function(info) {
                    if (info.el.querySelector('.fc-event-title') !== null) {
                        info.el.querySelector('.fc-event-title').innerHTML = info.event.title;
                    }
                    if (info.el.querySelector('.fc-list-event-title') !== null) {
                        info.el.querySelector('.fc-list-event-title').innerHTML = info.event.title;
                    }

                }

            });

            calendar.render();
        });
</script>
<script>
    function showTable() {
            location.reload();
        }
        $(document).ready(function() {
            // @if (!empty(json_decode($chartData)))
            //     var chartData = {!! $chartData !!};

            //     function barChart() {

            //         Morris.Bar({
            //             element: 'morris-area-chart',
            //             data: chartData,
            //             xkey: 'date',
            //             ykeys: ['total'],
            //             labels: ['Earning'],
            //             pointSize: 3,
            //             fillOpacity: 0,
            //             barColors: ['#6fbdff'],
            //             behaveLikeLine: true,
            //             gridLineColor: '#e0e0e0',
            //             lineWidth: 2,
            //             hideHover: 'auto',
            //             lineColors: ['#e20b0b'],
            //             resize: true

            //         });

            //     }



            //     @if (hasAccessOf('payments')['is_read'] && in_array('recent_earnings', $activeWidgets))
            //         barChart();
            //     @endif
            // @endif

            // $(".counter").counterUp({
            //     delay: 100,
            //     time: 1200
            // });

            $('.vcarousel').carousel({
                interval: 3000
            })

        })

        $('.show-task-detail').click(function() {
            $(".right-sidebar").slideDown(50).addClass("shw-rside");

            var id = $(this).data('task-id');
            var url = "{{ route('all-tasks.show', ':id') }}";
            url = url.replace(':id', id);

            $.easyAjax({
                type: 'GET',
                url: url,
                success: function(response) {
                    if (response.status == "success") {
                        $('#right-sidebar-content').html(response.view);
                    }
                }
            });
        })

        $('.add-sub-task').click(function() {
            var id = $(this).data('task-id');
            var url = '{{ route('sub-task.create') }}?task_id=' + id;

            $('#subTaskModelHeading').html('Sub Task');
            $.ajaxModal('#subTaskModal', url);
        })

        $('.keep-open .dropdown-menu').on({
            "click": function(e) {
                e.stopPropagation();
            }
        });

        $('#save-form').click(function() {
            $.easyAjax({
                url: '{{ route('dashboard.widget', 'admin-dashboard') }}',
                container: '#createProject',
                type: "POST",
                redirect: true,
                data: $('#createProject').serialize(),
                success: function() {
                    window.location.reload();
                }
            })
        });
</script>


<script>
    /** clock timer start here */
        function currentTime() {
            let date = new Date();
            date = moment.tz(date, "{{ $global->timezone }}");

            // console.log(moment.tz(date, "America/New_York"));

            let hour = date.hour();
            let min = date.minutes();
            let sec = date.seconds();
            let midday = "AM";
            midday = (hour >= 12) ? "PM" : "AM";
            @if ($global->time_format == 'h:i A')
                hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour); /* assigning hour in 12-hour format */
            @endif
            hour = updateTime(hour);
            min = updateTime(min);
            document.getElementById("clock").innerText = `${hour} : ${min} ${midday}`
            const time = setTimeout(function() {
                currentTime()
            }, 1000);
        }

        function updateTime(timer) {
            if (timer < 10) {
                return "0" + timer;
            } else {
                return timer;
            }
        }

        currentTime();
</script>

<script>
    $(document).ready(function() {

        // --------------------------
        // Initialize Date Range Picker
        // --------------------------
        $('#projectreportrange').daterangepicker({
            autoUpdateInput: false, // ⚠ important: don't set default value
            locale: {
                cancelLabel: 'Clear',
                format: 'YYYY-MM-DD'
            },
            opens: 'right',
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });

        // Set initial placeholder
        $('#projectreportrange span').text('Select date range');

        // --------------------------
        // Initialize DataTable
        // --------------------------
        var projectTasksTable = $('#projectTasksTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: {
                url: '{{ route("project-tasks-data") }}',
                data: function (d) {
                    d.project_task_status = $('#project_task_status').val() || 5;

                    // Only send date range if user applied a range
                    if ($('#projectreportrange').data('daterangepicker-applied')) {
                        var picker = $('#projectreportrange').data('daterangepicker');
                        d.projectstartDate = picker.startDate.format('YYYY-MM-DD');
                        d.projectendDate   = picker.endDate.format('YYYY-MM-DD');
                    }
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'project', name: 'project_name', orderable: true, searchable: true },
                { data: 'billableHours', name: 'billableHours', orderable: false, searchable: false },
                { data: 'nonBillableHours', name: 'nonBillableHours', orderable: false, searchable: false },
                { data: 'totalHours', name: 'totalHours', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            dom: "<'row'<'col-md-6'l><'col-md-6 text-right'Bf>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="fa fa-download"></i> Export <span class="caret"></span>',
                    className: 'btn btn-primary btn-sm export-btn',
                    buttons: ['excel', 'csv']
                }
            ],
            initComplete: function() {
                var wrapper = $('#projectTasksTable_wrapper');
                $('#project-entries-box').append(wrapper.find('#projectTasksTable_length'));
                $('#project-search-box').append(wrapper.find('#projectTasksTable_filter'));
                $('#project-export-btn-box').append(wrapper.find('.dt-buttons'));
            }
        });

        // Task status filter
        $('#project_task_status').on('change', function() {
            projectTasksTable.draw();
        });

        // Apply date range
        $('#projectreportrange').on('apply.daterangepicker', function(ev, picker) {
            $('#projectreportrange span').html(
                picker.startDate.format('MMMM D, YYYY') + ' - ' + picker.endDate.format('MMMM D, YYYY')
            );
            $(this).data('daterangepicker-applied', true);
            projectTasksTable.draw();
        });

        // Cancel / clear date range
        $('#projectreportrange').on('cancel.daterangepicker', function(ev, picker) {
            $('#projectreportrange span').text('Select date range');
            $(this).data('daterangepicker-applied', false);
            projectTasksTable.draw();
        });
    });
</script>

<script>
     $(function() {
        // Initialize Date Range Picker
        let rangeApplied = false;
        let selectedStart = null;
        let selectedEnd = null;

        $('#reportrange').daterangepicker({
            autoUpdateInput: false,
            locale: { cancelLabel: 'Clear', format: 'MMMM D, YYYY' },
            opens: 'right',
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });
        $('#reportrange span').text('Select date range');


        // DataTable
        var employeesTable = window.LaravelDataTables['employees-table'];

        // Only add startDate / endDate if rangeApplied
        employeesTable.on('preXhr.dt', function(e, settings, data) {
            var datatabelLengthbox = $('#employees-table_length');
            var datatabelSearchbox = $('#employees-table_filter');
            var exportBtn = $('#employees-table_wrapper .dt-buttons .resources-export-btn');
            $('#entries-box').append(datatabelLengthbox);
            $('#search-box').append(datatabelSearchbox);
            $('#export-btn-box').append(exportBtn);

            data.task_status = $('#task_status').val() || '5';

            if (rangeApplied) {
                data.startDate = selectedStart;
                data.endDate = selectedEnd;
            } else {
                // Explicitly remove any default dates
                delete data.startDate;
                delete data.endDate;
                delete data.start_date;
                delete data.end_date;
            }
        });

        // Apply range
        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
            rangeApplied = true;
            selectedStart = picker.startDate.format('YYYY-MM-DD');
            selectedEnd = picker.endDate.format('YYYY-MM-DD');
            $('#reportrange span').html(
                picker.startDate.format('MMMM D, YYYY') + ' - ' + picker.endDate.format('MMMM D, YYYY')
            );
            employeesTable.draw();
        });

        $('#reportrange').on('cancel.daterangepicker', function() {
            rangeApplied = false;
            selectedStart = null;
            selectedEnd = null;
            $('#reportrange span').text('Select date range');
            employeesTable.draw();
        });

        $('#task_status').change(function() {
            employeesTable.draw();
        });
    });
</script>

<script>
    function fetchTaskHours(hoursType) {
            $.ajax({
                url: '/task-hours',
                type: 'GET',
                data: { hours_type: hoursType },
                success: function(data) {
                    // console.log("hours_type====", data);

                    $('#totalIncompleteHours').text(data.totalIncompleteHours || '0h 0m');
                    $('#totalInprogressHours').text(data.totalInProgressHours || '0h 0m');
                    $('#totalCompletedHours').text(data.totalCompletedeHours || '0h 0m');
                    $('#totalToDoHours').text(data.totalToDoHours || '0h 0m');
                    $('#totalHoldHours').text(data.totalHoldHours || '0h 0m');
                },
                error: function(err) {
                    console.error("Error fetching task hours:", err);
                }
            });
        }

        $(document).ready(function() {
            // Fetch default billable hours on page load
            fetchTaskHours($('#hours_type').val());

            // Fetch when dropdown changes
            $(document).on('change', '#hours_type', function() {
                fetchTaskHours($(this).val());
            });
        });
</script>

{{-- <script>
    let table = $('#employees-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("employees.index") }}',
                data: function (d) {
                    d.start_date = $('#reportrange').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    d.end_date   = $('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD');
                }
            }
        });

        // refresh table when date range is applied
        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
            table.ajax.reload();
        });
</script> --}}

{{-- <script>
    $('#apply-filters').click(function () {
        $('#employees-table').on('preXhr.dt', function (e, settings, data) {
            var department     = $('#department').val();
            var startDate     = $('#start-date').val();
            var endDate     = $('#end-date').val();

            data['department'] = department;
            data['startDate'] = startDate;
            data['endDate'] = endDate;
        });

        $.easyBlockUI('#employees-table');
        window.LaravelDataTables["employees-table"].draw();
        $.easyUnblockUI('#employees-table');
    });

    function loadTable(){
        window.LaravelDataTables["employees-table"].draw();
    }

    $('#reset-filters').click(function () {
        $('#filter-form')[0].reset();
        $('.select2').val('all');
        $('#filter-form').find('select').select2();
        loadTable();
    })
</script> --}}
@endpush