@extends('layouts.app')
@section('content')
    <div class="content home">
        @include('flash::message')
        @if (Session::has('messageForUser'))
            <p class="alert text-center {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('messageForUser') }}
            </p>
        @endif
        @if (Session::has('approvalUnauth'))
            <p class="alert text-center {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('approvalUnauth') }}
            </p>
        @endif
        <x-content.header title="{{ __('title.Dashboard Center') }}" subTitle="{{ __('messages.Welcome') }}">
            <x-slot:headerRight class="w-full flex items-center gap-2 justify-start">
                <a href="{{ route('schedules.daily') }}" class="btn-secondary-base">
                    <x-svg-icon icon="icon-calendar" width="24" height="24"></x-svg-icon>
                    <span class="font-medium">{{ trans('menu.todays_schedule_title') }}</span>
                </a>
            </x-slot:headerRight>
        </x-content.header>

        <div class="flex flex-col gap-5">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    @include('home-announcements')
                </div>

                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    @include('home-tasks')
                </div>

                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    <livewire:machinery::widgets.recent-tickets />
                </div>

            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    @include('home-specialdays')
                </div>

                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    @include('home-goals')
                </div>

                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    @include('home-machineries')
                </div>
            </div>

            <div class="grid grid-cols-1 gap-3">
                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    <div class="flex justify-between items-center">
                        <h1 class="text-lg-semibold text-custom-grey-900">
                            <a href="{{ route('vacationhours.index') }}">{{ trans('vacationhours.title') }}</a>
                        </h1>
                        <div class="badge badge-pill badge-pill-primary">{{ $vacationhours->count() }}</div>
                    </div>
                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 items-start card-home-body {{ isset($vacationhours) && $vacationhours->count() > 0 ? '' : 'card-vacationhour empty' }}">
                        @forelse($vacationhours as $key => $vacationhour)
                            <div class="flex gap-2 items-start">
                                <img src="{{ getMediaUrl($vacationhour->user, 'photograph', 'thumb') }}" width='40'
                                    height='40' class='img-sm rounded-circle'>
                                <div>
                                    <h6>
                                        <a
                                            href="{{ request()->user()->can('view', $vacationhour->user) ? route('users.profile.show', $vacationhour->user->id) : 'javascript' }}">
                                            {{ $vacationhour->user->display_name }}
                                        </a>
                                    </h6>
                                    @if (isApprovalAllowed('vacationhours'))
                                        @if ($vacationhour->type)
                                            <small class="text-muted mb-0"><i
                                                    class="mdi mdi-information-outline mr-1"></i>{{ $vacationhour->type->name }}</small>
                                        @endif
                                    @endif
                                    @if ($vacationhour->length == 'full')
                                        <p><small class="text-muted mb-0"><i
                                                    class="mdi mdi-clock-outline mr-1"></i>{{ trans('forms.lbl_is_full') }}
                                                | {{ trans('title.ends') }}:
                                                {{ Carbon\Carbon::parse($vacationhour->getRawOriginal('end_date'))->format(config('settings.date_format')) }}</small>
                                        </p>
                                    @elseif($vacationhour->length == 'partial')
                                        <p><small class="text-muted mb-0"><i
                                                    class="mdi mdi-clock-outline mr-1"></i>{{ trans('forms.lbl_is_partial') }}
                                                |
                                                {{ Carbon\Carbon::parse($vacationhour->getRawOriginal('partial_start_time'))->format(config('settings.time_format')) }}
                                                -
                                                {{ Carbon\Carbon::parse($vacationhour->getRawOriginal('partial_end_time'))->format(config('settings.time_format')) }}</small>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p>{!! trans('title.empty_list_vacation_hours') !!}</p>
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-3">
                <div class="flex flex-col gap-3 rounded-lg border p-4 relative widget">
                    <div class="flex justify-between items-center">
                        <h1 class="text-lg-semibold text-custom-grey-900">
                            <a href="{{ route('leaves.index') }}">{{ trans('leaves.title') }}</a>
                        </h1>
                        <div class="badge badge-pill badge-pill-primary">{{ $leaves->count() }}</div>
                    </div>
                    <div
                        class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 items-start card-home-body {{ isset($leaves) && $leaves->count() > 0 ? 'flex-col' : 'flex-row card-leave empty' }}">
                        @forelse($leaves as $key => $leave)
                            <div class="flex gap-2 items-start">
                                <img src='{{ getMediaUrl($leave->user, 'photograph', 'thumb') }}' width='40'
                                    height='40' class='img-sm rounded-circle'>
                                <div>
                                    <h6>
                                        <a
                                            href="{{ request()->user()->can('view', $leave->user) ? route('users.profile.show', $leave->user->id) : 'javascript:;' }}">
                                            {{ $leave->user->display_name }}
                                        </a>
                                    </h6>
                                    @if (isApprovalAllowed('leaves'))
                                        <small class="text-muted mb-0"><i
                                                class="mdi mdi-information-outline mr-1"></i>{{ $leave->type->name }}</small>
                                    @endif
                                    @if ($leave->length == 'full')
                                        <p><small class="text-muted mb-0"><i
                                                    class="mdi mdi-clock-outline mr-1"></i>{{ trans('forms.lbl_is_full') }}
                                                | {{ trans('title.ends') }}:
                                                {{ Carbon\Carbon::parse($leave->getRawOriginal('end_date'))->format(config('settings.date_format')) }}</small>
                                        </p>
                                    @elseif($leave->length == 'partial')
                                        <p><small class="text-muted mb-0"><i
                                                    class="mdi mdi-clock-outline mr-1"></i>{{ trans('forms.lbl_is_partial') }}
                                                |
                                                {{ Carbon\Carbon::parse($leave->getRawOriginal('partial_start_time'))->format(config('settings.time_format')) }}
                                                -
                                                {{ Carbon\Carbon::parse($leave->getRawOriginal('partial_end_time'))->format(config('settings.time_format')) }}</small>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p>{!! trans('title.empty_list_leaves') !!}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-script')
    <script>
        let loader =
            '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>';
        AddReadMore();
        $("body").on("click", ".pagination a", function(event) {
            event.preventDefault();
            let url = $(this).attr('href');
            $(this).parents('.widget').append(loader);

            PDRequest({
                type: "GET",
                url: url,
                isFlash: false
            }).then((response) => {
                if (response.status == "success") {
                    $(this).parents('.widget').html(response.message);
                }
                AddReadMore();
            });
        });

        $("body").on("click", ".mark-as-read", function(event) {
            event.preventDefault();
            let id = $(this).data('id');
            PDRequest({
                type: "POST",
                url: $(this).data('uri'),
                data: {},
                event: event
            }).then((response) => {
                if (response.status == "success") {

                    let url = "{{ route('dashboard.announcements') }}";
                    $(this).parents('.widget').append(loader);
                    PDRequest({
                        type: "GET",
                        url: url,
                        isFlash: false
                    }).then((response) => {
                        if (response.status == "success") {
                            $(this).parents('.widget').html(response.message);
                        }
                    });

                }
            });
        });

        //edit row on form modal
        $("body").on("click", ".complete-goal", function(event) {
            let id = $(this).data('id');

            PDSimpleConfirm().then(response => {
                if (response) {
                    let url = $(this).data('uri'),
                        column = $(this).data('name');
                    var data = {};
                    data[column] = $(this).prop('checked') ? 1 : 0;

                    PDRequest({
                        type: "PUT",
                        url: url,
                        data: data,
                        event: event
                    }).then((response) => {
                        if (response.status == "success") {

                            let url = "{{ route('dashboard.goals') }}";
                            $(this).parents('.widget').append(loader);
                            PDRequest({
                                type: "GET",
                                url: url,
                                isFlash: false
                            }).then((response) => {
                                if (response.status == "success") {
                                    $(this).parents('.widget').html(response
                                        .message);
                                }
                            });

                        }
                    });

                } else {
                    $(this).prop('checked', false);
                }
            });


        });
        $("document").ready(function() {
            setTimeout(function() {
                $("p.alert").remove();
            }, 5000); // 5 secs

        });

        // Handle machinery ticket modal
        $("body").on("click", ".btn-show-ticket", function(event) {
            event.preventDefault();
            let url = $(this).data('url');
            let title = $(this).data('title');

            PDRequest({
                type: "GET",
                url: url,
                isFlash: false
            }).then((response) => {
                if (response.status == "success") {
                    PDModal({
                        title: title,
                        body: response.html,
                        size: 'large'
                    });
                }
            });
        });
    </script>
@stop