@extends('layouts.master')

@section('title')
{{__('Task list')}}
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-12 col-xl-12">
        <h3 class="mb-1 mt-0 text-left">{{__('Task list')}}
            <span style="float:right;"> <a href="{{route('user-add')}}" role="button" class="btn  custom-button "><i
                        class="uil-plus mr-1"></i>
                    {{__('Add new task')}}</a></span>
        </h3>
        <nav aria-label="breadcrumb" class="float-left mt-1">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard')}}">{{__('Home')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{__('Task list')}}</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
<style>
    .scrollbar{
        font-size:small; 
        overflow-y:scroll; 
        height:720px; 
        scrollbar-width: none;
    }
</style>

<!-- filters -->
<div class="card ">
    <div class="card-body px-3">
        <div class="row">
            <div class="col-4 col-lg-4 mb-1"><input type="search" class="custom-search form-control "
                    placeholder="{{__('Search by name')}}...">
            </div>
            <div class="col-4 col-lg-4 mb-1">
                <select name="" id="" required class="form-control SlectBox">
                    <option value="" selected disabled>{{__('Select Status')}}</option>
                    <option value="">Active </option>
                    <option value="">Decline </option>
                </select>
            </div>
            <div class="col-6 col-lg-2 mb-1">
                <button class="btn custom-button-outline btn-block "><i class="fe fe-search"></i>
                    {{__('Filter')}}</button>
            </div>
            <div class="col-6 col-lg-2 mb-1">
                <button class="btn custom-button btn-block">
                    {{__('Reset')}}</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-12 col-12">
        <div class="card scrollbar" style="max-height: 100%;">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <a class="text-dark" data-toggle="collapse" href="#todayTasks" aria-expanded="false"
                            aria-controls="todayTasks">
                            <h5 class="mb-0"><i class='uil uil-angle-down font-size-18'></i>{{__('Today')}} <span
                                    class="text-muted font-size-14">(10)</span></h5>
                        </a>

                        <div class="collapse show" id="todayTasks">
                            <div class="card mb-0 shadow-none">
                                <div class="card-body">
                                    <!-- task -->
                                    <div class="row justify-content-sm-between border-bottom">
                                        <div class="col-lg-6 mb-2 mb-lg-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="task1">
                                                <label class="custom-control-label" for="task1">
                                                    Draft the new contract document for
                                                    sales team
                                                </label>
                                            </div> <!-- end checkbox -->
                                        </div> <!-- end col -->
                                        <div class="col-lg-6">
                                            <div class="d-sm-flex justify-content-between">
                                                <div>
                                                    <img src="{{asset('assets/images/users/avatar-9.jpg')}}" alt="image"
                                                        class="avatar-sm rounded-circle" data-toggle="tooltip"
                                                        data-placement="bottom" title="Assigned to Arya S" />
                                                </div>
                                                <div class="mt-3 mt-sm-0">
                                                    <ul class="list-inline font-13 text-sm-right">
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-schedule font-16 mr-1'></i>
                                                            Today 10am
                                                        </li>
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-align-alt font-16 mr-1'></i>
                                                            3/7
                                                        </li>
                                                        <li class="list-inline-item pr-2">
                                                            <i class='uil uil-comment-message font-16 mr-1'></i>
                                                            21
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-soft-danger p-1">High</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div> <!-- end .d-flex-->
                                        </div> <!-- end col -->
                                    </div>
                                    <!-- end task -->

                                    <!-- task -->
                                    <div class="row justify-content-sm-between mt-2 border-bottom pt-2">
                                        <div class="col-lg-6 mb-2 mb-lg-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="task2">
                                                <label class="custom-control-label" for="task2">
                                                    iOS App home page
                                                </label>
                                            </div> <!-- end checkbox -->
                                        </div> <!-- end col -->
                                        <div class="col-lg-6">
                                            <div class="d-sm-flex justify-content-between">
                                                <div>
                                                    <img src="{{asset('assets/images/users/avatar-2.jpg')}}" alt="image"
                                                        class="avatar-sm rounded-circle" data-toggle="tooltip"
                                                        data-placement="bottom" title="Assigned to James B" />
                                                </div>
                                                <div class="mt-3 mt-sm-0">
                                                    <ul class="list-inline font-13 text-sm-right">
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-schedule font-16 mr-1'></i>
                                                            Today 4pm
                                                        </li>
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-align-alt font-16 mr-1'></i>
                                                            2/7
                                                        </li>
                                                        <li class="list-inline-item pr-2">
                                                            <i class='uil uil-comment-message font-16 mr-1'></i>
                                                            48
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-soft-danger p-1">High</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div> <!-- end .d-flex-->
                                        </div> <!-- end col -->
                                    </div>
                                    <!-- end task -->

                                    <!-- task -->
                                    <div class="row justify-content-sm-between mt-2 pt-2">
                                        <div class="col-lg-6 mb-2 mb-lg-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="task3">
                                                <label class="custom-control-label" for="task3">
                                                    Write a release note
                                                </label>
                                            </div> <!-- end checkbox -->
                                        </div> <!-- end col -->
                                        <div class="col-lg-6">
                                            <div class="d-sm-flex justify-content-between">
                                                <div>
                                                    <img src="{{asset('assets/images/users/avatar-4.jpg')}}" alt="image"
                                                        class="avatar-sm rounded-circle" data-toggle="tooltip"
                                                        data-placement="bottom" title="Assigned to Kevin C" />
                                                </div>
                                                <div class="mt-3 mt-sm-0">
                                                    <ul class="list-inline font-13 text-sm-right mb-0">
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-schedule font-16 mr-1'></i>
                                                            Today 6pm
                                                        </li>
                                                        <li class="list-inline-item pr-1">
                                                            <i class='uil uil-align-alt font-16 mr-1'></i>
                                                            18/21
                                                        </li>
                                                        <li class="list-inline-item pr-2">
                                                            <i class='uil uil-comment-message font-16 mr-1'></i>
                                                            73
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <span class="badge badge-soft-info p-1">Medium</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div> <!-- end .d-flex-->
                                        </div> <!-- end col -->
                                    </div>
                                    <!-- end task -->
                                </div> <!-- end card-body-->
                            </div> <!-- end card -->
                        </div> <!-- end .collapse-->

                        <!-- upcoming tasks -->
                        <div class="mt-4">
                            <a class="text-dark" data-toggle="collapse" href="#upcomingTasks" aria-expanded="false"
                                aria-controls="upcomingTasks">
                                <h5 class="mb-0">
                                    <i class='uil uil-angle-down font-18'></i>{{__('Upcoming')}} <span
                                        class="text-muted font-size-14">(5)</span>
                                </h5>
                            </a>

                            <div class="collapse show" id="upcomingTasks">
                                <div class="card mb-0 shadow-none">
                                    <div class="card-body">
                                        <!-- task -->
                                        <div class="row justify-content-sm-between border-bottom">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task4">
                                                    <label class="custom-control-label" for="task4">
                                                        Invite user to a project
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-9.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to James B" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                Tomorrow
                                                                7am
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                1/12
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                36
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-danger p-1">High</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 pt-2 border-bottom">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task5">
                                                    <label class="custom-control-label" for="task5">
                                                        Enable analytics tracking
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-2.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to James B" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                27 Aug
                                                                10am
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                13/72
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                211
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-success p-1">Low</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 pt-2">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task6">
                                                    <label class="custom-control-label" for="task6">
                                                        Code HTML email template
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-7.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to Edward S" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right mb-0">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                No Due
                                                                Date
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                0/7
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                0
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-info p-1">Medium</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->
                                    </div> <!-- end card-body-->
                                </div> <!-- end card -->
                            </div> <!-- end collapse-->
                        </div>
                        <!-- end upcoming tasks -->

                        <!-- start other tasks -->
                        <div class="mt-4 mb-4">
                            <a class="text-dark" data-toggle="collapse" href="#otherTasks" aria-expanded="false"
                                aria-controls="otherTasks">
                                <h5>
                                    <i class='uil uil-angle-down font-18'></i>{{__('Other')}} <span
                                        class="text-muted font-size-14">(5)</span>
                                </h5>
                            </a>

                            <div class="collapse show" id="otherTasks">
                                <div class="card mb-0 shadow-none">
                                    <div class="card-body">
                                        <!-- task -->
                                        <div class="row justify-content-sm-between border-bottom">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task7">
                                                    <label class="custom-control-label" for="task7">
                                                        Coordinate with business development
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-9.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to Arya S" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                Today
                                                                10am
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                5/14
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                71
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-info p-1">Medium</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 border-bottom pt-2">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task8">
                                                    <label class="custom-control-label" for="task8">
                                                        Kanban board design
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-2.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to James B" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                No Due
                                                                Date
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                0/8
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                0
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-info p-1">Medium</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 border-bottom pt-2">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task11">
                                                    <label class="custom-control-label" for="task11">
                                                        Draft the new contract document for
                                                        sales team
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-9.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to Arya S" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                Today 10am
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                3/7
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                21
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-danger p-1">High</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 border-bottom pt-2">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task12">
                                                    <label class="custom-control-label" for="task12">
                                                        iOS App home page
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-2.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to James B" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right">
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                Today 4pm
                                                            </li>
                                                            <li class="list-inline-item pr-1">
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                2/7
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                48
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-danger p-1">High</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->

                                        <!-- task -->
                                        <div class="row justify-content-sm-between mt-2 pt-2">
                                            <div class="col-lg-6 mb-2 mb-lg-0">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="task13">
                                                    <label class="custom-control-label" for="task13">
                                                        Write a release note
                                                    </label>
                                                </div> <!-- end checkbox -->
                                            </div> <!-- end col -->
                                            <div class="col-lg-6">
                                                <div class="d-sm-flex justify-content-between">
                                                    <div>
                                                        <img src="{{asset('assets/images/users/avatar-9.jpg')}}"
                                                            alt="image" class="avatar-sm rounded-circle"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Assigned to Kevin C" />
                                                    </div>
                                                    <div class="mt-3 mt-sm-0">
                                                        <ul class="list-inline font-13 text-sm-right mb-0">
                                                            <li class="list-inline-item">
                                                                <i class='uil uil-schedule font-16 mr-1'></i>
                                                                Today 6pm
                                                            </li>
                                                            <li class="list-inline-item pr-1">>
                                                                <i class='uil uil-align-alt font-16 mr-1'></i>
                                                                18/21
                                                            </li>
                                                            <li class="list-inline-item pr-2">
                                                                <i class='uil uil-comment-message font-16 mr-1'></i>
                                                                73
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <span class="badge badge-soft-info p-1">Medium</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div> <!-- end .d-flex-->
                                            </div> <!-- end col -->
                                        </div>
                                        <!-- end task -->
                                    </div> <!-- end card-body-->
                                </div> <!-- end card -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
        </div>
    </div>

</div>

<!-- pagination -->
<div class="row">
    <div class="col-4"></div>
    <div class="col-4">
        <ul class="pagination  mb-3 flex-wrap">
            <li class="page-item page-prev disabled">
                <a class="page-link" href="#" tabindex="-1">{{__('Prev')}}</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item page-next">
                <a class="page-link" href="#">{{__('Next')}}</a>
            </li>
        </ul>
    </div>
    <div class="col-4"></div>
</div>
<!-- end row -->
@endsection


@section('script-bottom')
<script>
    $(document).ready(function (e) {
        $('#taskDesk').summernote({
            airMode: true,
            callbacks: {
                // fix broken checkbox on link modal
                onInit: function onInit(e) {
                    var editor = $(e.editor);
                    editor.find('.custom-control-description').addClass('custom-control-label')
                        .parent().removeAttr('for');
                }
            }
        });
    });

</script>
@endsection
