@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('page-styles')
    <style>
        .popover {
            z-index: 1060;
        }
    </style>
@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="relative">
            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
    
                <thead>
    
                    <tr>
    
                        <th scope="col">
    
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
    
                        </th>
    
                        <th class="w-md-25" scope="col">{{trans("tables.task_title")}}</th>
    
                        <th scope="col">{{trans("tables.status_title")}}</th>
    
                        <th scope="col">{{trans("tables.start_date")}}</th>
    
                        {{-- <th scope="col">{{trans("tables.due_date_title")}}</th> --}}
    
                        {{-- <th scope="col">{{trans("tables.assign_to_title")}}</th> --}}
                        <th scope="col">&nbsp;</th>
    
                        <th scope="col">{{trans("tables.action_title")}}</th>
    
                    </tr>
    
                </thead>
    
            </table>
        </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