@extends('layouts.app')
@section('title', trans('settings.task_and_checklist_title'))
@section('plugin-styles')
	<link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@stop

@section('content')

    <div class="content">
        @include('layouts.partials.single-page-header', [
            'hide_content_header' => true,
        ])

        @include('checklist::checklist.dashboard.progress')

        @include('checklist::checklist.dashboard.filter')



        <div class="flex flex-col gap-5" id="tasks">
            <!-- Tasks Section -->
            <div class="bg-custom-grey-50 border border-custom-grey-200 p-4 pb-4 rounded-lg">
                <div class="tasks-section">
                    <div class="tasks-container tasks-container laravel-pagination" id="tasks-list">
                        @include('checklist::checklist.tasks', ['tasks' => $checklists])
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('checklist::checklist.lists')

@stop

@section('panel-content')
    @if(auth()->user()->can('create', Modules\Checklist\Entities\Checklist::class))
        @include('checklist::checklists.form-collaborator')
    @endif
@stop

@section('footer-script')

    @php $route_prefix = 'checklists'; @endphp

    @include('checklist::scripts.frontend')
    @include('checklist::scripts.comment')

    <script>
        function setProgress(mainPercent) {
            const mainCircle = document.querySelector(
                ".tripple-progress-bar-container svg circle:nth-child(2)"
            );
            const mainCircumference = parseFloat(mainCircle.getAttribute("r")) * 2 * Math.PI;
            const mainOffset = (mainPercent / 100) * mainCircumference;

            mainCircle.style.strokeDasharray = `${mainCircumference}`;
            mainCircle.style.strokeDashoffset = mainCircumference - mainOffset;

            const progressText = document.querySelector(
                ".tripple-progress-bar-container .progress-text"
            );
            progressText.textContent = `${mainPercent}%`;
        }

        //setProgress(90, 77, 65);

        // Example usage:
        setProgress({{ $overallProgress }}); // Set main progress to overall progress
    </script>

@stop