@extends('layouts.master')

@section('title', __('Todo Management'))

@section('breadcrumb-text')
<div class="row w-100 m-0 p-0">
    <div class="col-12 col-md-2 col-lg-2 col-xl-2 col-sm-12 m-0 p-0">
        <h1 class="w-100 p-2">{{__('Todo Management')}}</h1>
    </div>
    <div class="col-12 col-md-10 col-lg-10 col-xl-10 col-sm-12 m-0 p-0 d-flex justify-content-end">
        <div class="d-flex justify-content-between align-items-center pt-2">
            <!-- Right: Each button separate -->
            <div class="d-flex gap-2">
                <a class="btn btn-primary h6 text-white"
                href="{{ route('member.todo.completedList') }}">
                    {!! renderIconHtml('viewall') !!} {{ __('Completed List') }}
                </a>

                <a class="btn btn-primary h6 text-white"
                href="{{ route('member.todo.assignedList') }}">
                    {!! renderIconHtml('viewall') !!} {{ __('Assign List') }}
                </a>

                <button class="btn btn-primary h6 text-white" onclick="showTodoModal()">
                    {!! renderIconHtml('add') !!} {{ __('New Todo') }}
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section("content")

    <div id="todoManagement" class="featured-services main_section">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="mt-1 grid grid-cols-3 gap-4 text-center text-xs rounded-md overflow-hidden">
                        <div class="bg-gray-100 py-4 px-2">
                            <p class="font-medium text-lg text-gray-900 mb-0 total-todo-count">{{ $totalTodoCount }}</p>
                            <p class="mt-1 mb-0 text-gray-500">{{ __('Total') }}</p>
                        </div>
                        <div class="bg-yellow-50 py-4 px-2">
                            <p class="font-medium text-lg text-yellow-700 mb-0 pending-todo-count">{{ $pendingTodoCount }}</p>
                            <p class="mt-1 mb-0">{{ __('Pending') }}</p>
                        </div>
                        <div class="bg-red-50 py-4 px-2">
                            <p class="font-medium text-lg text-red-700 mb-0 overdue-todo-count">{{ $overdueTodoCount }}</p>
                            <p class="mt-1 mb-0 text-red-700">{{ __('Overdue') }}</p>
                        </div>
                    </div>
                </div>
                 <div class="flex flex-col justify-between sm:flex-row sm:items-center sm:space-x-4 space-y-4 sm:space-y-0 py-4">
                    <form  method="get" action="{{ route('member.todo.filterTodo') }}" id="todoFilterForm" onkeydown="return event.key != 'Enter';" aria-label="Search and filter form">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-4 space-y-4 sm:space-y-0">
                            <input type="text" name="filter_title" id="filter_title" placeholder="Search By Title..."
                                class="flex-grow border border-gray-300 rounded-md px-3 py-2 text-xs placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-600"
                                aria-label="Search by title" />
                            <select name="filter_label" id="filter_label"
                                class="border border-gray-300 rounded-md px-3 py-2 pe-4 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-600"
                                aria-label="Filter by labels">
                                <option value="" selected>{{ __('Select Label') }}</option>
                                <option value="Development">{{ __('Development') }}</option>
                                <option value="Marketing">{{ __('Marketing') }}</option>
                                <option value="Security">{{ __('Security') }}</option>
                                <option value="Design">{{ __('Design') }}</option>
                                <option value="QA">{{ __('QA') }}</option>
                                <option value="Sales">{{ __('Sales') }}</option>
                                <option value="Support">{{ __('Support') }}</option>
                                <option value="Operations">{{ __('Operations') }}</option>
                                <option value="Content">{{ __('Content') }}</option>
                                <option value="Product">{{ __('Product') }}</option>
                            </select>
                            <select name="filter_my_todo" id="filter_my_todo" 
                                class="border border-gray-300 rounded-md px-3 py-2 pe-4 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-600"
                                aria-label="Filter by my todo">
                                <option value="All Todo" selected>{{ __('All Todo')}}</option>
                                <option value="My Todo">{{ __('My Todo')}}</option>
                                <option value="Assign To Me">{{ __('Assign To Me')}}</option>
                            </select>
                        </div>
                    </form>
                    <div>
                    </div>
                </div>
                <div class="todo-list">
                    @include('frontend.todo-dashboard-list')
                </div>
            </div>
        </div> 
    </div>
    
    {{------ START for todo create modal ------}}
    @include('frontend.dashboard.to-do-model')
    {{------ END for todo create modal ------}}
@endsection

@push('scripts')
    <script src="{{asset('frontend/js/page-js/todo-assigned-list.js')}}"></script>
    <script src="{{ asset('frontend/js/dashboard.js') }}"></script>
    <script src="{{ asset('frontend/js/select2/select2.min.js') }}"></script>
@endpush