@extends('layouts.app')
    @section('title', trans('settings.goal_title'))

    @section('content')
        @php $u = auth()->user(); @endphp

        @include('layouts.partials.employee-files')

        <div class="tab-content-wrapper">
            <!-- Tab Content -->
            @php
                $isBelongsTo = true;
                if (request()->has('user_id')) {
                    $isBelongsTo = request()->get('user_id') == request()->user()->id;
                }
            @endphp
            <div class="flex flex-wrap-reverse gap-3 lg:gap-0 justify-between">

                <div class="w-full lg:w-[calc(100%-336px-24px)]">

                    <div class="flex flex-wrap gap-3 justify-between items-center mb-[24px]">
                        <div>
                            <h1 class="text-lg-semibold text-custom-grey-900">
                                {{ trans('forms.goal') }}
                            </h1>
                            <p class="text-sm-regular text-custom-grey-600">
                                {{ __("forms.these_goals_need_to_be_completed") }}
                            </p>
                        </div>
                        <div>
                            @php
                                $uriSegment = '?user_id=' . $user->id;
                            @endphp

                            @if ($isBelongsTo)
                                <a  data-toggle="canvas-panel"
                                    data-uri="{{ route('goal.store') }}"
                                    data-title="{{ trans('forms.goal') }}"
                                    href="javascript:;"
                                    class="btn-secondary-sm">
                                    <x-svg-icon icon="icon-add" />
                                    {{ trans('forms.lbl_add_new') }}
                                </a>
                            @else
                                @can('create goals')
                                    <a href="{{ url('settings/goals/create') . $uriSegment }}" class="btn-secondary-sm">
                                        <x-svg-icon icon="icon-add" />
                                        {{ trans('forms.lbl_add_new') }}
                                    </a>
                                @endcan
                            @endif
                        </div>
                    </div>

                    <form id="filter-form" method="POST" onsubmit="return false;">
                        <div class="flex flex-wrap gap-3 items-center justify-between mb-[24px]">
                            <div class="search-bar w-full lg:w-auto">
                                <input name="_term" type="text" class="fitler_form search-input w-full lg:w-[280px]"
                                    placeholder="{{ trans('forms.lbl_search') }}" />
                                <x-svg-icon icon="icon-search" />
                            </div>

                            <div class="tabs overflow-x-scroll no-scrollbar">
                                <button class="tabs-btn-box active min-w-[94px]"
                                    data-val="">{{ __('forms.lbl_all') }}</button>
                                <button class="tabs-btn-box min-w-[94px]"
                                    data-val="complete">{{ __('menu.lbl_complete') }}</button>

                                <button class="tabs-btn-box min-w-[94px]"
                                    data-val="incomplete">{{ __('menu.lbl_incomplete') }}</button>

                                <input type="hidden" name="filterByStatus" value="" />
                            </div>
                        </div>
                    </form>

                    <!-- goals card container  -->
                    <div id="goal-lists" class="laravel-pagination">
                        @include('goal::goal.goals')
                    </div>

                </div>
                <div class="w-full lg:w-[336px] px-6 py-10 bg-custom-grey-50 rounded-lg goal-progress">
                    @include('goal::goal.progress', [
                        'total' => $total,
                        'completedTotal' => $completedTotal
                    ])
                </div>
            </div>
        </div>
    @stop

    @section('panel-content')
         @include('goal::goal.form')
    @stop

    @section('footer-script')

        <script src="{{ asset('js/tailwind/profile.js') }}"></script>
        <script type="text/javascript">
            var $datable = $('#datatable'),
                url_segment = "{{ request()->has('user_id') ? '?user_id=' . request()->get('user_id') : '' }}";

            let progressNumber = document.querySelector('.progress-container span')

            let progressCircle = document.querySelector('.progress');

            let radius = progressCircle.r.baseVal.value;

            let circumference = radius * 2 * Math.PI;

            progressCircle.style.strokeDasharray = circumference;

            let total = {{ $total }};
            let completedTotal = {{ $completedTotal }};
            let inCompletedTotal = total - completedTotal;

            let completedProgressWidth = 100 * ( completedTotal / (total == 0 ? 1 : total) );
            let inCompletedProgressWidth = 100 * ( inCompletedTotal / (total == 0 ? 1 : total) );

            function setProgress(percent) {
                progressCircle.style.strokeDashoffset = circumference - (percent / 100) * circumference;
                progressNumber.innerHTML = percent + '%'
            }

            function toggleGoalElement(element, className) {
                if (element) {
                    element.toggleClass(className);
                }
            }

            $("body").on("click", ".btn-goal-complete", function(event) {
                const goalCard = $(this).parents("#goal-"+$(this).data('id'));

                PDRequest({
    				type    : "PUT",
    				url     : "{{ url('goals/mark-completed') }}/" + $(this).data('id')+url_segment,
    				data    : { completed : 1 },
    				event   : event
    			}).then((response) => {

                    completedTotal = response.completedTotal;
                    inCompletedTotal = total - completedTotal;

                    completedProgressWidth = 100 * ( completedTotal / (total == 0 ? 1 : total) );
                    inCompletedProgressWidth = 100 * ( inCompletedTotal / (total == 0 ? 1 : total) );

                    $(".complete-total").html(completedTotal);
                    $(".incomplete-total").html(inCompletedTotal);

                    setProgress(parseInt(completedProgressWidth));

                    goalCard.find(".completed_status").removeClass("btn-light-danger")
                        .addClass("btn-light-success")
                        .html("{{ trans('menu.lbl_complete') }}");

                    toggleGoalElement($(this), 'hidden')
                });

            });

            $("body").on("click", ".btn-goal-detail", function() {

                const goalCard = $(this).parents("#goal-"+$(this).data('id'));
                const seeMoreElement = goalCard.find('.goal-see-more');
                const btnSeeDetail = $(this).find('.btn-goal-see-detail');
                const btnSeeLess = $(this).find('.btn-goal-see-less');

                if ($(this).length) {
                    toggleGoalElement(btnSeeDetail, 'hidden');

                    toggleGoalElement(btnSeeLess, 'hidden');

                    if (seeMoreElement) {
                        toggleGoalElement(seeMoreElement, 'hidden');
                    }
                }
            });

            $("body").on("click", ".btn-goal-note", function() {
                const goalCard = $(this).parents("#goal-"+$(this).data('id'));

                if (goalCard.length) {

                    const seeMoreElement = goalCard.find('.goal-see-more');
                    const noteFormElement = goalCard.find('.goal-note-form');
                    const btnGoalDetailsElement = goalCard.find('.btn-goal-detail').parent();

                    toggleGoalElement(seeMoreElement, 'hidden');
                    toggleGoalElement(noteFormElement, 'hidden');

                    if (btnGoalDetailsElement) {
                        toggleGoalElement(btnGoalDetailsElement, 'hidden')
                    }
                }
            });

            $("body").on("click", ".btn-goal-cancel", function() {
                const goalCard = $(this).parents("#goal-"+$(this).data('id'));

                if (goalCard.length) {
                    const seeMoreElement = goalCard.find('.goal-see-more');
                    const noteFormElement = goalCard.find('.goal-note-form');
                    const btnGoalDetailsElement = goalCard.find('.btn-goal-detail').parent();

                    toggleGoalElement(noteFormElement, 'hidden');
                    toggleGoalElement(seeMoreElement, 'hidden');
                    toggleGoalElement(btnGoalDetailsElement, 'hidden')
                }
            });

            $("body").on("click", ".btn-goal-save", function(event) {
                const goalCard = $(this).parents("#goal-"+$(this).data('id'));

                const seeMoreElement = goalCard.find('.goal-see-more');
                const noteFormElement = goalCard.find('.goal-note-form');
                const btnGoalDetailsElement = goalCard.find('.btn-goal-detail').parent();
                const notes = goalCard.find(".goal-notes");

                data = $("#goal-note-form-"+$(this).data('id')).serialize();

                PDRequest({
    				type    : "PUT",
    				url     : $("#goal-note-form-"+$(this).data('id')).attr("action") + url_segment,
    				data    : data,
    				event   : event
    			}).then((response) => {

                    notes.html(response.notes);

                    toggleGoalElement(noteFormElement, 'hidden');
                    toggleGoalElement(seeMoreElement, 'hidden');
                    toggleGoalElement(btnGoalDetailsElement, 'hidden')
                });

            });


            $('body').on('click', '.tabs-btn-box', function() {
                // Reset all tabs and contents for the second set filter
                $(".tabs-btn-box").removeClass("active");

                // Set new active state for the clicked tab in the filter set
                $(this).addClass("active");

                $("input[name='filterByStatus']").val($(this).data('val'));

                callBackFunc();
            });

            $('#filter-form input').on("keyup", function(event) {
                callBackFunc();
            });

            callBackFunc = _.debounce(function(data) {
                getItems($('#goal-lists'), "{{route('goal.index.filter')}}" + url_segment);
            }, 500);


            setProgress(parseInt(completedProgressWidth));

            $("body").on("click", ".show-incomplete-task", function(event) {
                {{-- setProgress(parseInt(inCompletedProgressWidth)); --}}

                $(".tabs-btn-box[data-val='incomplete']").trigger("click");

                toggleGoalElement($(this), 'hidden');
                toggleGoalElement($(".show-complete-task"), 'hidden');
                {{-- $(".progress").addClass("stroke-custom-red-600");
                $(".progress").removeClass("stroke-custom-orange-600"); --}}
            });

            $("body").on("click", ".show-complete-task", function(event) {
                {{-- setProgress(parseInt(completedProgressWidth)); --}}
                $(".tabs-btn-box[data-val='complete']").trigger("click");
                toggleGoalElement($(this), 'hidden');
                toggleGoalElement($(".show-incomplete-task"), 'hidden');
                {{-- $(".progress").addClass("stroke-custom-orange-600");
                $(".progress").removeClass("stroke-custom-red-600"); --}}
            });

            $(".btn-save").on("click", function(event) {
                event.preventDefault();
                data = $('#form').serialize();

                PDRequest({
                    type    : $('#form').attr("method"),
                    url     : $("#form").attr("action"),
                    data    : data,
                    event   : event
                }).then((response) => {
                    window.location = "{{route('goal.index')}}";

                    Canvas.close();
                });
            });

            document.addEventListener("resourceDeleted", function(e) {

                let response = e.detail;

                const total = response.total;
                const completedTotal = response.completedTotal;
                const inCompletedTotal = total - completedTotal;

                completedProgressWidth = 100 * ( completedTotal / (total == 0 ? 1 : total) );
                inCompletedProgressWidth = 100 * ( inCompletedTotal / (total == 0 ? 1 : total) );

                $(".total-goal").html(completedTotal);
                $(".complete-total").html(completedTotal);
                $(".incomplete-total").html(inCompletedTotal);
                setProgress(parseInt(completedProgressWidth));
            });
        </script>
    @stop