@extends('layouts.app')

@push('datatable-styles')
    @include('sections.datatable_css')
@endpush

@push('styles')
    @if (
        (!is_null($viewEventPermission) && $viewEventPermission != 'none') ||
            (!is_null($viewHolidayPermission) && $viewHolidayPermission != 'none') ||
            (!is_null($viewTaskPermission) && $viewTaskPermission != 'none') ||
            (!is_null($viewTicketsPermission) && $viewTicketsPermission != 'none') ||
            (!is_null($viewLeavePermission) && $viewLeavePermission != 'none'))
        <link rel="stylesheet" href="{{ asset('vendor/full-calendar/main.min.css') }}">
    @endif
    <style>
        .h-200 {
            max-height: 340px;
            overflow-y: auto;
        }

        .h-400 {
            max-height: 680px;
            overflow-y: auto;
        }

        .h-500 {
            max-height: 510px;
            overflow-y: auto;
        }

        .dashboard-settings {
            width: 600px;
        }

        @media (max-width: 768px) {
            .dashboard-settings {
                width: 300px;
            }
        }

        .fc-list-event-graphic {
            display: none;
        }

        .fc .fc-list-event:hover td {
            background-color: #fff !important;
            color: #000 !important;
        }

        .left-3 {
            margin-right: -22px;
        }

        .clockin-right {
            margin-right: -10px;
        }

        .week-pagination li {
            margin-right: 5px;
            z-index: 1;
        }

        .week-pagination li a {
            border-radius: 50%;
            padding: 2px 6px !important;
            font-size: 11px !important;
        }

        .week-pagination li.page-item:first-child .page-link {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .week-pagination li.page-item:last-child .page-link {
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .latest-jobs .table thead th {

            font-size: 11px;
        }

        .latest-jobs .table tr td {
            font-size: 11px;
        }

        .latest-jobs .dropdown-item {
            font-size: 12px;
        }

        .latest-jobs .filter-option {
            font-size: 12px;
        }

        .latest-jobs {
            height: 510px;
        }

        th,
        td {
            white-space: nowrap;
        }

        .emp-dash-detail .table tr td {
            font-size: 11px;
        }
    </style>





@endpush

@section('content')
    <!-- CONTENT WRAPPER START -->
    <div class="px-4 py-2 border-top-0 emp-dashboard">
        <!-- WELOCOME START -->
        @if (!is_null($checkTodayLeave))
            <div class="row pt-4">
                <div class="col-md-12">
                    <x-alert type="info" icon="info-circle">
                        <a href="{{ route('leaves.show', $checkTodayLeave->id) }}" class="openRightModal text-dark-grey">
                            <u>@lang('messages.youAreOnLeave')</u>
                        </a>
                    </x-alert>
                </div>
            </div>
        @elseif (!is_null($checkTodayHoliday))
            <div class="row pt-4">
                <div class="col-md-12">
                    <x-alert type="info" icon="info-circle">
                        <a href="{{ route('holidays.show', $checkTodayHoliday->id) }}"
                            class="openRightModal text-dark-grey">
                            <u>@lang('messages.holidayToday')</u>
                        </a>
                    </x-alert>
                </div>
            </div>
        @endif


        @if (in_array('admin', user_roles()))
            <div class="row">
                {{-- @include('dashboard.update-message-dashboard') --}}
                {{-- Remove for versions above 5.2.4 --}}
                @include('dashboard.update-gateway-credentials')
                <x-cron-message :modal="true"></x-cron-message>
            </div>
        @endif

        <div class="d-lg-flex d-md-flex d-block py-2 pb-2 align-items-center">

            <!-- WELOCOME NAME START -->
            {{-- <div>
                <h3 class="heading-h3 mb-0 f-21 text-capitalize font-weight-bold">@lang('app.welcome') {{ $user->name }}</h3>
            </div> --}}
            <!-- WELOCOME NAME END -->

            <!-- CLOCK IN CLOCK OUT START -->
            <div class="ml-auto d-flex clock-in-out mb-3 mb-lg-0 mb-md-0 m mt-4 mt-lg-0 mt-md-0 justify-content-between">
                <p class="mb-0 text-lg-right text-md-right f-18 font-weight-bold text-dark-grey d-grid align-items-center">
                    <input type="hidden" id="current-latitude" name="current_latitude">
                    <input type="hidden" id="current-longitude" name="current_longitude">

                    <span id="dashboard-clock">{!! now()->timezone(company()->timezone)->translatedFormat(company()->time_format) .
                        '</span><span class="f-10 font-weight-normal">' .
                        now()->timezone(company()->timezone)->translatedFormat('l') .
                        '</span>' !!}

                        @if (!is_null($currentClockIn))
                            <span class="f-11 font-weight-normal text-lightest">
                                @lang('app.clockInAt') -
                                {{ $currentClockIn->clock_in_time->timezone(company()->timezone)->translatedFormat(company()->time_format) }}
                            </span>
                        @endif
                </p>

                {{-- @if (in_array('attendance', user_modules()) && $cannotLogin == false)
                    @if (is_null($currentClockIn) && is_null($checkTodayLeave) && is_null($checkTodayHoliday) && $checkJoiningDate == true)
                        <button type="button" class="btn-primary rounded f-15 ml-4" id="clock-in"><i
                        class="icons icon-login mr-2"></i>@lang('modules.attendance.clock_in')</button>
                    @endif
                @endif

                @if (!is_null($currentClockIn) && is_null($currentClockIn->clock_out_time))
                    <button type="button" class="btn-danger rounded f-15 ml-4" id="clock-out"><i
                            class="icons icon-login mr-2"></i>@lang('modules.attendance.clock_out')</button>
                @endif --}}

                @if (in_array('admin', user_roles()))
                    {{-- <div class="private-dash-settings d-flex align-self-center">
                        <x-form id="privateDashboardWidgetForm" method="POST">
                            <div class="dropdown keep-open">
                                <a class="d-flex align-items-center justify-content-center dropdown-toggle px-4 text-dark left-3"
                                    type="link" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"

                                    aria-expanded="false">
                                    <i class="fa fa-cog" data-original-title="{{__('modules.dashboard.dashboardWidgetsSettings')}}" data-toggle="tooltip"></i>
                                </a>
                                <!-- Dropdown - User Information -->
                                <ul class="dropdown-menu dropdown-menu-right dashboard-settings p-20"
                                    aria-labelledby="dropdownMenuLink" tabindex="0">
                                    <li class="border-bottom mb-3">
                                        <h4 class="heading-h3">@lang('modules.dashboard.dashboardWidgets')</h4>
                                    </li>
                                    @foreach ($widgets as $widget)
                                        @php
                                            $wname = \Illuminate\Support\Str::camel($widget->widget_name);
                                        @endphp
                                        <li class="mb-2 float-left w-50">
                                            <div class="checkbox checkbox-info ">
                                                <input id="{{ $widget->widget_name }}" name="{{ $widget->widget_name }}"
                                                    value="true" @if ($widget->status) checked @endif type="checkbox">
                                                <label for="{{ $widget->widget_name }}">@lang('modules.dashboard.' .
                                                    $wname)</label>
                                            </div>
                                        </li>
                                    @endforeach
                                    @if (count($widgets) % 2 != 0)
                                        <li class="mb-2 float-left w-50 height-35"></li>
                                    @endif
                                    <li class="float-none w-100">
                                        <x-forms.button-primary id="save-dashboard-widget" icon="check">@lang('app.save')
                                        </x-forms.button-primary>
                                    </li>
                                </ul>
                            </div>
                        </x-form>
                    </div> --}}
                @endif
            </div>
            <!-- CLOCK IN CLOCK OUT END -->
        </div>
        <!-- WELOCOME END -->
        <!-- EMPLOYEE DASHBOARD DETAIL START -->
        <div class="row emp-dash-detail">
            <!-- EMP DASHBOARD INFO NOTICES START -->
            @if (count(array_intersect(['profile', 'shift_schedule', 'birthday', 'notices'], $activeWidgets)) > 0)
                <div class="col-xl-5 col-lg-4 col-md-4 mb-4">
                    <div class="row">
                        <!-- EMP DASHBOARD INFO START -->
                        <div class="col-md-4">
                            <div class="card bg-white text-black text-center p-3">
                                <blockquote class="blockquote mb-0">
                                    <p>
                                    <h5>Total <br />Jobs</h5>
                                    </p>
                                    <footer>
                                        <h3>{{ $totalJobs }}</h3>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-dark-green text-white text-center p-3">
                                <blockquote class="blockquote mb-0">
                                    <p>
                                    <h5>Total <br />Completed</h5>
                                    </p>
                                    <footer>
                                        <h3>{{ $totalJobsCompleted }}</h3>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bg-orange text-white text-center p-3">
                                <blockquote class="blockquote mb-0">
                                    <p>
                                    <h5>Total <br />In Progress</h5>
                                    </p>
                                    <footer>
                                        <h3>{{ $totalJobsInProgress }}</h3>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>

                        <!-- EMP DASHBOARD INFO END -->

                        @if (!is_null($myActiveTimer) && in_array('tasks', user_modules()))
                            <div class="col-sm-12" id="myActiveTimerSection">
                                <x-cards.data class="mb-3" :title="__('modules.timeLogs.myActiveTimer')">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            {{ $myActiveTimer->start_time->timezone(company()->timezone)->translatedFormat('M d, Y' . ' - ' . company()->time_format) }}
                                            <p class="text-primary my-2">

                                                <strong>@lang('modules.timeLogs.totalHours'):</strong>
                                                {{ \Carbon\CarbonInterval::formatHuman(now()->diffInMinutes($myActiveTimer->start_time) - $myActiveTimer->breaks->sum('total_minutes')) }}
                                            </p>

                                            <ul class="list-group">
                                                <li
                                                    class="list-group-item d-flex justify-content-between align-items-center f-12 text-dark-grey">
                                                    <span><i class="fa fa-clock"></i>
                                                        @lang('modules.timeLogs.startTime')</span>
                                                    {{ $myActiveTimer->start_time->timezone(company()->timezone)->translatedFormat(company()->time_format) }}
                                                </li>
                                                <li
                                                    class="list-group-item d-flex justify-content-between align-items-center f-12 text-dark-grey">
                                                    <span><i class="fa fa-briefcase"></i> @lang('app.task')</span>
                                                    <a href="{{ route('tasks.show', $myActiveTimer->task->id) }}"
                                                        class="text-dark-grey openRightModal">{{ $myActiveTimer->task->heading }}</a>
                                                </li>
                                                @foreach ($myActiveTimer->breaks as $item)
                                                    <li
                                                        class="list-group-item d-flex justify-content-between align-items-center f-12 text-dark-grey">
                                                        @if (!is_null($item->end_time))
                                                            <span><i class="fa fa-mug-hot"></i>
                                                                @lang('modules.timeLogs.break')
                                                                ({{ \Carbon\CarbonInterval::formatHuman($item->end_time->diffInMinutes($item->start_time)) }})
                                                            </span>
                                                            {{ $item->start_time->timezone(company()->timezone)->translatedFormat(company()->time_format) . ' - ' . $item->end_time->timezone(company()->timezone)->translatedFormat(company()->time_format) }}
                                                        @else
                                                            <span><i class="fa fa-mug-hot"></i>
                                                                @lang('modules.timeLogs.break')</span>
                                                            {{ $item->start_time->timezone(company()->timezone)->translatedFormat(company()->time_format) }}
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>

                                        </div>
                                        <div class="col-sm-12 pt-3 text-right">
                                            @if (
                                                $editTimelogPermission == 'all' ||
                                                    ($editTimelogPermission == 'added' && $myActiveTimer->added_by == user()->id) ||
                                                    ($editTimelogPermission == 'owned' &&
                                                        (($myActiveTimer->project && $myActiveTimer->project->client_id == user()->id) ||
                                                            $myActiveTimer->user_id == user()->id)) ||
                                                    ($editTimelogPermission == 'both' &&
                                                        (($myActiveTimer->project && $myActiveTimer->project->client_id == user()->id) ||
                                                            $myActiveTimer->user_id == user()->id ||
                                                            $myActiveTimer->added_by == user()->id)))
                                                @if (is_null($myActiveTimer->activeBreak))
                                                    <x-forms.button-secondary icon="pause-circle"
                                                        data-time-id="{{ $myActiveTimer->id }}" id="pause-timer-btn">
                                                        @lang('modules.timeLogs.pauseTimer')</x-forms.button-secondary>
                                                    <x-forms.button-primary class="ml-3 stop-active-timer"
                                                        data-time-id="{{ $myActiveTimer->id }}" icon="stop-circle">
                                                        @lang('modules.timeLogs.stopTimer')</x-forms.button-primary>
                                                @else
                                                    <x-forms.button-primary id="resume-timer-btn" icon="play-circle"
                                                        data-time-id="{{ $myActiveTimer->activeBreak->id }}">
                                                        @lang('modules.timeLogs.resumeTimer')</x-forms.button-primary>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                </x-cards.data>
                            </div>
                        @endif


                    </div>
                </div>

            @endif
            <!-- EMP DASHBOARD INFO NOTICES END -->
            <!-- EMP DASHBOARD TASKS PROJECTS EVENTS START -->
            <div class="col-xl-7 col-lg-6 col-md-6  p-2 ">
                {{-- <div class="row justify-content-start mb-2">

                    <div class="col-md-12">
                            <strong>Daily Sales</strong>
                    </div>
                </div> --}}
                <div class="row justify-content-start mb-2">

                    <div class="col-md-12">
                        <div class="card bg-white text-black text-center p-1">
                            <!-- DATE START -->
                            {{-- <div class="select-box d-flex pr-2 border-right-grey border-right-grey-sm-0">
                                <p class="mb-0 pr-2 f-14 text-dark-grey d-flex align-items-center">@lang('app.duration')</p>
                                <div class="select-status d-flex">
                                    <input type="text"
                                        class="position-relative text-dark form-control border-0 p-2 text-left f-14 f-w-500 border-additional-grey"
                                        id="datatableRange" placeholder="@lang('placeholders.dateRange')">
                                </div>
                            </div> --}}

                            <div class="select-box d-flex pr-2 border-right-grey border-right-grey-sm-0">
                                <p class="mb-0 pr-2 f-14 text-dark-grey d-flex align-items-center">@lang('app.duration')</p>
                                <div class="select-status d-flex">
                                    <input type="text"
                                        class="position-relative text-dark form-control border-0 p-2 text-left f-14 f-w-500 border-additional-grey"
                                        id="datatableRange2" placeholder="@lang('placeholders.dateRange')">
                                </div>
                            </div>
                            <!-- DATE END -->

                        </div>
                    </div>

                </div>
                <div class="row justify-content-md-center ">

                    <!-- EMP DASHBOARD INFO START -->
                    <div class="col-md-3">
                        <div class="card bg-white text-black text-center p-3">
                            <blockquote class="blockquote mb-0">
                                <p><strong>Revenue</strong> <br />Today</p>
                                <footer>
                                    <h4><strong>{{ $revenueToday }} {{ user_setting()->country->currency_iso }}</strong>
                                    </h4>
                                </footer>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-white text-black text-center p-3">
                            <blockquote class="blockquote mb-0">
                                <p><strong>Services</strong> <br />Total</p>
                                <footer>
                                    <h4><strong>{{ $serviceSummary2->count() }}</strong></h4>
                                </footer>
                            </blockquote>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card border-0 b-shadow-4 mb-3 e-d-info">
                            <x-cards.data :title="__('SERVICES')" padding="false" otherClasses="h-200">
                                <x-table>
                                    {{-- <x-slot name="thead">
                                        <th>@lang('Service')#</th>
                                        <th>@lang('Total Jobs')</th>
                                    </x-slot> --}}

                                    @foreach ($serviceSummary as $item)
                                        <tr>
                                            <td class="pr-10">{{ $item->service_name }}</td>
                                            <td class="pr-10">{{ $item->tot }}</td>

                                        </tr>
                                    @endforeach


                                </x-table>
                            </x-cards.data>
                        </div>
                    </div>
                </div>


            </div>

            <!-- EMP DASHBOARD TASKS PROJECTS EVENTS END -->
        </div>

        <div class="row emp-dash-detail">
            <div class="col-xl-12 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.latest_jobs')
            </div>
        </div>

        <div class="row emp-dash-detail">
            <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobsto_deliver')
            </div>
            <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobs_delivered')
            </div>
            <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobs_inprogress')
            </div>
        </div>

        <div class="row emp-dash-detail">
            <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobsby_employee')
            </div>
            {{-- <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobsby_brand')
            </div>
            <div class="col-xl-4 col-lg-12 col-md-12 e-d-tasks-projects-events">
                @include('dashboard.admin.widgets.jobsby_client')
            </div> --}}
        </div>
        <!-- EMPLOYEE DASHBOARD DETAIL END -->

    </div>
    <!-- CONTENT WRAPPER END -->
@endsection

@push('scripts')
    @if (
        (!is_null($viewEventPermission) && $viewEventPermission != 'none') ||
            (!is_null($viewHolidayPermission) && $viewHolidayPermission != 'none') ||
            (!is_null($viewTaskPermission) && $viewTaskPermission != 'none') ||
            (!is_null($viewTicketsPermission) && $viewTicketsPermission != 'none') ||
            (!is_null($viewLeavePermission) && $viewLeavePermission != 'none'))
        <script src="{{ asset('vendor/full-calendar/main.min.js') }}"></script>
        <script src="{{ asset('vendor/full-calendar/locales-all.min.js') }}"></script>
        <script src="{{ asset('vendor/jquery/daterangepicker.min.js') }}"></script>
        <script>
            function setDate(fd, td) {
                //console.log(td);
                if (fd && td) {
                    var start = fd;
                    var end = td;
                } else {
                    var customStartDate = '2023-08-01 00:00:00';
                    var start = moment(); //moment().clone().startOf('month');
                    var end = moment();
                }


                $('#datatableRange2').daterangepicker({
                    locale: daterangeLocale,
                    linkedCalendars: false,
                    startDate: start,
                    endDate: end,
                    ranges: daterangeConfig
                }, cb);
            }

            var fd = "{{ request()->fd }}";
            var td = "{{ request()->td }}";

            setDate(fd, td);

            $('#datatableRange2').on('apply.daterangepicker', function(ev, picker) {
                applyFilter();
                //console.log('sdf');
            });

            function applyFilter() {
                var startDate = $('#datatableRange2').val();

                if (startDate == '') {
                    startDate = null;
                    endDate = null;
                } else {
                    var dateRangePicker = $('#datatableRange2').data('daterangepicker');
                    startDate = dateRangePicker.startDate.format('{{ company()->moment_date_format }}');
                    endDate = dateRangePicker.endDate.format('{{ company()->moment_date_format }}');
                }

                var data = new Array();
                // var projectID = $('#project_id').val();
                // var employeeID = $('#employee_id').val();
                // var categoryID = $('#category_id').val();
                var uid = $("#assignedTo").val();
                var searchText = $('#search-text-field').val();

                var url = "{{ route('dashboard') }}?fd=" + startDate + '&td=' + endDate;

                location.href = url;


            }
        </script>

        <script>
            $('.view_empl_services').on('click', function() {
                var userid = $(this).attr('data-id');
                var username = $(this).attr('data-name');
                console.log(username);
                var url = "{{ route('service-orders.view-emp-services', ':id') }}?name=" + username;
                url = url.replace(':id', userid);

                $(MODAL_DEFAULT + ' ' + MODAL_HEADING).html('...');
                $.ajaxModal(MODAL_DEFAULT, url);

            });

            var dateRangePicker = $('#datatableRange2').data('daterangepicker');
            var startDate = $('#datatableRange2').val();

            if (startDate == '') {
                startDate = null;
                endDate = null;
            } else {
                startDate = dateRangePicker.startDate.format('{{ company()->moment_date_format }}');
                endDate = dateRangePicker.endDate.format('{{ company()->moment_date_format }}');
            }

            var initialLocaleCode = '{{ user()->locale }}';
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: initialLocaleCode,
                timeZone: '{{ company()->timezone }}',
                firstDay: parseInt("{{ attendance_setting()?->week_start_from }}"),
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                navLinks: true, // can click day/week names to navigate views
                selectable: false,
                initialView: 'listWeek',
                selectMirror: true,
                select: function(arg) {
                    addEventModal(arg.start, arg.end, arg.allDay);
                    calendar.unselect()
                },
                eventClick: function(arg) {
                    getEventDetail(arg.event.id, arg.event.extendedProps.event_type);
                },
                editable: false,
                dayMaxEvents: true, // allow "more" link when too many events
                events: {
                    url: "{{ route('dashboard.private_calendar') }}",
                },
                eventDidMount: function(info) {
                    $(info.el).css('background-color', info.event.extendedProps.bg_color);
                    $(info.el).css('color', info.event.extendedProps.color);
                    $(info.el).find('td.fc-list-event-title').prepend('<i class="fa ' + info.event.extendedProps
                        .icon + '"></i>&nbsp;&nbsp;');
                    // tooltip for leaves
                    if (info.event.extendedProps.event_type == 'leave') {
                        $(info.el).find('td.fc-list-event-title > a').css('cursor',
                        'default'); // list view cursor for leave
                        $(info.el).css('cursor', 'default')
                        $(info.el).tooltip({
                            title: info.event.extendedProps.name,
                            container: 'body',
                            delay: {
                                "show": 50,
                                "hide": 50
                            }
                        });
                    }
                },
                eventTimeFormat: { // like '14:30:00'
                    hour: company.time_format == 'H:i' ? '2-digit' : 'numeric',
                    minute: '2-digit',
                    meridiem: company.time_format == 'H:i' ? false : true
                }
            });

            if (calendarEl != null) {
                calendar.render();
            }

            // Task Detail show in sidebar
            var getEventDetail = function(id, type) {
                if (type == 'ticket') {
                    var url = "{{ route('tickets.show', ':id') }}";
                    url = url.replace(':id', id);
                    window.location = url;
                    return true;
                }

                if (type == 'leave') {
                    return true;
                }

                openTaskDetail();

                switch (type) {
                    case 'task':
                        var url = "{{ route('tasks.show', ':id') }}";
                        break;
                    case 'event':
                        var url = "{{ route('events.show', ':id') }}";
                        break;
                    case 'holiday':
                        var url = "{{ route('holidays.show', ':id') }}";
                        break;
                    case 'leave':
                        var url = "{{ route('leaves.show', ':id') }}";
                        break;
                    default:
                        return 0;
                        break;
                }

                url = url.replace(':id', id);

                $.easyAjax({
                    url: url,
                    blockUI: true,
                    container: RIGHT_MODAL,
                    historyPush: true,
                    success: function(response) {
                        if (response.status == "success") {
                            $(RIGHT_MODAL_CONTENT).html(response.html);
                            $(RIGHT_MODAL_TITLE).html(response.title);
                        }
                    },
                    error: function(request, status, error) {
                        if (request.status == 403) {
                            $(RIGHT_MODAL_CONTENT).html(
                                '<div class="align-content-between d-flex justify-content-center mt-105 f-21">403 | Permission Denied</div>'
                            );
                        } else if (request.status == 404) {
                            $(RIGHT_MODAL_CONTENT).html(
                                '<div class="align-content-between d-flex justify-content-center mt-105 f-21">404 | Not Found</div>'
                            );
                        } else if (request.status == 500) {
                            $(RIGHT_MODAL_CONTENT).html(
                                '<div class="align-content-between d-flex justify-content-center mt-105 f-21">500 | Something Went Wrong</div>'
                            );
                        }
                    }
                });

            };

            $('#new-chat, #new-chat-mbl').click(function() {
                const url = "{{ route('messages.create') }}";
                $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
                $.ajaxModal(MODAL_LG, url);
            });
            // calendar filter
            var hideDropdown = false;

            $('#event-btn').click(function() {
                if (hideDropdown == true) {
                    $('#cal-drop').hide();
                    hideDropdown = false;
                } else {
                    $('#cal-drop').toggle();
                    hideDropdown = true;
                }
            });


            $(document).mouseup(e => {

                const $menu = $('.calendar-action');

                if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
                    hideDropdown = false;
                    $('#cal-drop').hide();
                }
            });


            $('.cal-filter').on('click', function() {

                var filter = [];

                $('.filter-check:checked').each(function() {
                    filter.push($(this).val());
                });

                if (filter.length < 1) {
                    filter.push('None');
                }

                calendar.removeAllEventSources();
                calendar.addEventSource({
                    url: "{{ route('dashboard.private_calendar') }}",
                    extraParams: {
                        filter: filter
                    }
                });

                filter = null;
            });
        </script>
    @endif

    <script>
        // window.setInterval(function () {
        //     let date = new Date();
        //     $('#dashboard-clock').html(moment.tz(date, "{{ company()->timezone }}").format(MOMENTJS_TIME_FORMAT))
        // }, 1000);

        $('#latestjobs-table').on('change', '.change-status', function() {
            var url = "{{ route('tasks.change_status') }}";
            var token = "{{ csrf_token() }}";
            var id = $(this).data('task-id');
            var status = $(this).val();

            if (id != "" && status != "") {
                $.easyAjax({
                    url: url,
                    type: "POST",
                    container: '.content-wrapper',
                    blockUI: true,
                    data: {
                        '_token': token,
                        taskId: id,
                        status: status,
                        sortBy: 'id'
                    },
                    success: function(response) {
                        window.location.reload();
                        //$('#timer-clock').html(response.clockHtml);
                        //window.LaravelDataTables["allTasks-table"].draw(false);
                    }
                });

            }
        });
        $('#save-dashboard-widget').click(function() {
            $.easyAjax({
                url: "{{ route('dashboard.widget', 'private-dashboard') }}",
                container: '#privateDashboardWidgetForm',
                blockUI: true,
                type: "POST",
                redirect: true,
                data: $('#privateDashboardWidgetForm').serialize(),
                success: function() {
                    window.location.reload();
                }
            })
        });

        $('#clock-in').click(function() {
            const url = "{{ route('attendances.clock_in_modal') }}";
            $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_LG, url);
        });

        $('.request-shift-change').click(function() {
            var id = $(this).data('shift-schedule-id');
            var date = $(this).data('shift-schedule-date');
            var shiftId = $(this).data('shift-id');
            var url = "{{ route('shifts-change.edit', ':id') }}?date=" + date + "&shift_id=" + shiftId;
            url = url.replace(':id', id);

            $(MODAL_DEFAULT + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_DEFAULT, url);
        });

        $('#view-shifts').click(function() {
            const url = "{{ route('employee-shifts.index') }}";
            $(MODAL_XL + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_XL, url);
        });

        @if (!is_null($currentClockIn))
            $('#clock-out').click(function() {

                var token = "{{ csrf_token() }}";
                var currentLatitude = document.getElementById("current-latitude").value;
                var currentLongitude = document.getElementById("current-longitude").value;

                $.easyAjax({
                    url: "{{ route('attendances.update_clock_in') }}",
                    type: "GET",
                    data: {
                        currentLatitude: currentLatitude,
                        currentLongitude: currentLongitude,
                        _token: token,
                        id: '{{ $currentClockIn->id }}'
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            window.location.reload();
                        }
                    }
                });
            });
        @endif

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

        $('#weekly-timelogs').on('click', '.week-timelog-day', function() {
            var date = $(this).data('date');

            $.easyAjax({
                url: "{{ route('dashboard.week_timelog') }}",
                container: '#weekly-timelogs',
                blockUI: true,
                type: "POST",
                redirect: true,
                data: {
                    'date': date,
                    '_token': "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#weekly-timelogs').html(response.html)
                }
            })
        });
    </script>

    @if (attendance_setting()->radius_check == 'yes' || attendance_setting()->save_current_location)
        <script>
            const currentLatitude = document.getElementById("current-latitude");
            const currentLongitude = document.getElementById("current-longitude");
            const x = document.getElementById("current-latitude");

            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                }
            }

            function showPosition(position) {
                currentLatitude.value = position.coords.latitude;
                currentLongitude.value = position.coords.longitude;
            }
            getLocation();
        </script>
    @endif
@endpush