@php ($headerOption = [
    'title' => '',
    'noCardView' => true
])
@extends('front.layouts.layout', $headerOption)

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Tasks</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Settings</a></li>
                    <li class="breadcrumb-item active">Tasks</li>
                </ol>
            </div>

        </div>

        <div class="d-flex justify-content-end mb-3">
            <div class="d-flex align-items-center gap-10">
                <div class="w-f-150">
                    <select class="form-control border-radius-100">
                        <option>Search by owners</option>
                    </select>
                </div>

                <a href="#" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn right-bar-toggle">Add</a>
            </div>
        </div>

    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-12">
        <div class="connections-main-wrapper">
            <!-- Left sidebar -->
            <div class="email-leftbar card">
                <!-- <button type="button" class="btn btn-danger btn-block waves-effect waves-light" data-toggle="modal" data-target="#composemodal">
                    Compose
                </button> -->
                <h6 class="mt-4">Task by month</h6>
                <div class="w-100 mt-3">
                    <select class="form-control border-radius-100">
                        <option>Select Month</option>
                        <option>January <sup>06</sup></option>
                        <option>February <sup>07</sup></option>
                        <option>March <sup>12</sup></option>
                        <option>April <sup>15</sup></option>
                         <option>May <sup>20</sup></option>
                         <option>June <sup>25</sup></option>
                          <option>June <sup>30</sup></option>
                         <option>July <sup>22</sup></option>
                         <option>August <sup>08</sup></option>
                         <option>September <sup>17</sup></option>
                         <option>October <sup>18</sup></option>
                          <option>November <sup>11</sup></option>
                         <option>December <sup>03</sup></option>
                    </select>
                </div>


            </div>
            <!-- End Left sidebar -->


            <!-- Right Sidebar -->
            <div class="email-rightbar">

                <div class="card">

                    <div class="card-body connection-block-wrapper">
                        <h2 class="font-size-18">June , April <small class="text-muted">2024</small></h2>
                        <p>No Tasks</p>
                        <hr>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <h2 class="font-size-18 mt-0 mb-3">May <small class="text-muted">2024</small></h2>
                                <hr>
                                <div id="accordion" class="connection-block-wrapper">
                                    <div class="card mb-1 shadow-none">
                                        <div class="card-body" id="headingOne">

                                            <div class="media-body overflow-hidden">
                                                <a href="#collapseOne" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne"  class="text-dark font-size-15 font-weight-bold"> Policy , 6 Tasks <i class="mdi mdi-chevron-down"></i></a>
                                                 <p class="text-muted mb-0">Next task due by May 15 , 2024</p>
                                             </div>
                                        </div>

                                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion" >
                                            <div class="card-body">
                                                <div class="table-responsive policy-table mb-0 hig-adj-tsk">
                                                    <table class="table table-striped mb-0 ">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <a href="#" class="d-block text-center mt-3">Load More</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                                <h2 class="font-size-18 mt-0 mb-3">June <small class="text-muted">2024</small></h2>
                                <hr>
                                <div id="accordionn" class="connection-block-wrapper">
                                    <div class="card mb-1 shadow-none">
                                        <div class="card-body" id="headingTwo">

                                            <div class="media-body overflow-hidden">
                                                <a href="#collapseTwo" data-toggle="collapse" aria-expanded="true" aria-controls="collapseTwo"  class="text-dark font-size-15 font-weight-bold"> Policy , 6 Tasks <i class="mdi mdi-chevron-down"></i></a>
                                                 <p class="text-muted mb-0">Next task due by May 15 , 2024</p>
                                             </div>
                                        </div>

                                        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionn" >
                                            <div class="card-body">
                                                <div class="table-responsive policy-table mb-0 hig-adj-tsk">
                                                    <table class="table table-striped mb-0 ">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="media-body overflow-hidden">
                                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                                            <p class="  mb-0">Review by May 15, 2024</p>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="media">
                                                                        <div class="avatar-xs align-self-center mr-3">
                                                                            <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                                                K
                                                                            </span>
                                                                        </div>
                                                                        <div class="media-body overflow-hidden">
                                                                            <p class="  mb-1">Owners</p>
                                                                            <h5 class="  font-size-14 mb-0">Keith Gonzales</h5>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td class="text-right">
                                                                    <a href="task-review.html"><button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ">Review</button></a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <a href="#" class="d-block text-center mt-3">Load More</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                </div> <!-- card -->


            </div> <!-- end Col-9 -->
        </div>
    </div>

</div><!-- End row -->
@endsection