@extends('layouts.admin-base')

@section('css')
       <!-- This Page CSS -->
       <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}">
    <!-- Custom CSS -->
	<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/quill/dist/quill.snow.css')}}">

@endsection

@section('under-header')
   
<div style="margin-bottom:0;" class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="page-breadcrumb border-bottom">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
                <h5 class="font-medium  mb-0">Liste des tâches</h5>
            </div>
            <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                <!--button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample En cours</button-->
                <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                    <ol class="breadcrumb mb-0 justify-content-end p-0">
                        <li class="breadcrumb-item"><a href="#">Activité n°</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Project-name</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- footer -->
    <!-- ============================================================== -->


@endsection

@section('content')

            <div class="page-content container-fluid">
                
                <div class="row">

                    <div class="col-6">
                        <button type="button" data-toggle="modal" data-target="#create" class="btn btn-info text-white  ml-3 d-none d-md-block" href="" style="margin-bottom:20px">Créer une tâche</button>
                        <div class="modal" id="create">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Créer</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="tache-name" class="control-label">Intitulé:</label>
                                                <input type="text" class="form-control" id="tache-name">
                                            </div>
                                            <div class="form-group">
                                                <label for="affect" class="control-label">Statut:</label>
                                                <select class="form-control category-select" id="affect">
                                                    <option>Terminée</option>
                                                    <option>A faire</option>
                                                    <option>En attente</option>
                                                    <option>En retard</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="date" class="control-label">Date de début:</label>
                                                <input type="text" class="form-control" id="date">
                                            </div>
                                            <div class="form-group">
                                                <label for="datel" class="control-label">Date limite:</label>
                                                <input type="text" class="form-control" id="datel" placeholder="">
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="control-label">Affecter un membre:</label>
                                                <div class="card">
                                                    <div class="card-body">
                                                        <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                <option value="AK">Alaska</option>
                                                                <option value="HI">Hawaii</option>
                                                                <option value="CA" selected>California</option>
                                                                <option value="NV">Nevada</option>
                                                                <option value="OR">Oregon</option>
                                                                <option value="WA" selected>Washington</option>
                                                                <option value="AZ">Arizona</option>
                                                                <option value="CO">Colorado</option>
                                                                <option value="ID">Idaho</option>
                                                                <option value="MT">Montana</option>
                                                                <option value="NE">Nebraska</option>
                                                                <option value="NM">New Mexico</option>
                                                                <option value="ND">North Dakota</option>
                                                                <option value="UT">Utah</option>
                                                                <option value="WY">Wyoming</option>   
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                        <button type="button" class="btn btn-success waves-effect waves-light">Créer</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>


                

                <div class="row">
                    <div class="col-12">
                        <div class="material-card card">
                            <div class="card-body">
                                <h4 class="card-title">Liste des tâches-Activité 1</h4>
                                <!--h6 class="card-subtitle">DataTables has most features enabled by default, so all you
                                    need to do to use it with your own tables is to call the construction
                                    function:<code> $().DataTable();</code>. You can refer full documentation from here
                                    <a href="https://datatables.net/">Datatables</a></h6-->
                                <div class="table-responsive">
                                    <table id="zero_config" class="table table-striped border">
                                        <thead>
                                            <tr>
                                                <th>Intitulé</th>
                                                <th>Membre / Equipe</th>
                                                <th>Statut</th>
                                                <th>Date de début</th>
                                                <th>Date Limite</th>
                                                <th>Modifier</th>
                                                
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Tiger Nixon</td>
                                                <td>System Architect</td>
                                                <td>A faire</td>
                                                <td>2020/11/04</td>
                                                <td>2011/04/25</td>
                                                <td>
                                                            <button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="ti-trash"></i> </button>
                                                            <button type="button" data-toggle="modal" data-target="#create1" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="ti-pencil-alt"></i> </button>
                                                            <div class="modal" id="create1">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h4 class="modal-title">Modifier</h4>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form>
                                                                                <div class="form-group">
                                                                                    <label for="tache-name" class="control-label">Intitulé:</label>
                                                                                    <input type="text" class="form-control" id="tache-name">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label for="affect" class="control-label">Statut:</label>
                                                                                    <select class="form-control category-select" id="affect">
                                                                                        <option>Terminée</option>
                                                                                        <option>A faire</option>
                                                                                        <option>En attente</option>
                                                                                        <option>En retard</option>
                                                                                    </select>
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label for="date" class="control-label">Date de début:</label>
                                                                                    <input type="text" class="form-control" id="date">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label for="datel" class="control-label">Date limite:</label>
                                                                                    <input type="text" class="form-control" id="datel">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label for="tache" class="control-label">Affecter un membre:</label>
                                                                                    <div class="card">
                                                                                        <div class="card-body">
                                                                                            <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                                                    <option value="AK" selected>Alaska</option>
                                                                                                    <option value="HI">Hawaii</option>
                                                                                                    <option value="CA" selected>California</option>    
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                                            <button type="button" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Garrett Winters</td>
                                                <td>Accountant</td>
                                                <td>En cours</td>
                                                <td>2010/08/22</td>
                                                <td>2011/07/25</td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="ti-trash"></i> </button>
                                                    <button type="button" data-toggle="modal" data-target="#create2" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="ti-pencil-alt"></i> </button>
                                                    <div class="modal" id="create2">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title">Modifier</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label for="tache-name" class="control-label">Intitulé:</label>
                                                                            <input type="text" class="form-control" id="tache-name">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="affect" class="control-label">Statut:</label>
                                                                            <select class="form-control category-select" id="affect">
                                                                                <option>Terminée</option>
                                                                                <option>A faire</option>
                                                                                <option>En attente</option>
                                                                                <option>En retard</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="date" class="control-label">Date de début:</label>
                                                                            <input type="text" class="form-control" id="date">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="datel" class="control-label">Date limite:</label>
                                                                            <input type="text" class="form-control" id="datel">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="tache" class="control-label">Affecter un membre:</label>
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                                            <option value="AK" selected>Alaska</option>
                                                                                            <option value="HI">Hawaii</option>
                                                                                            <option value="CA" selected>California</option>    
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                                    <button type="button" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            
                                            
                                            <tr>
                                                <td>Garrett Winters</td>
                                                <td>Accountant</td>
                                                <td>En cours</td>
                                                <td>2010/08/22</td>
                                                <td>2011/07/25</td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="ti-trash"></i> </button>
                                                    <button type="button" data-toggle="modal" data-target="#create3" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="ti-pencil-alt"></i> </button>
                                                    <div class="modal" id="create3">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title">Modifier</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label for="tache-name" class="control-label">Intitulé:</label>
                                                                            <input type="text" class="form-control" id="tache-name">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="affect" class="control-label">Statut:</label>
                                                                            <select class="form-control category-select" id="affect">
                                                                                <option>Terminée</option>
                                                                                <option>A faire</option>
                                                                                <option>En attente</option>
                                                                                <option>En retard</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="date" class="control-label">Date de début:</label>
                                                                            <input type="text" class="form-control" id="date">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="datel" class="control-label">Date limite:</label>
                                                                            <input type="text" class="form-control" id="datel">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="tache" class="control-label">Affecter un membre:</label>
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                                            <option value="AK" selected>Alaska</option>
                                                                                            <option value="HI">Hawaii</option>
                                                                                            <option value="CA" selected>California</option>    
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                                    <button type="button" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Ashton Cox</td>
                                                <td>Junior Technical Author</td>
                                                <td>Terminée</td>
                                                <td>2014/03/18</td>
                                                <td>2009/01/12</td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="ti-trash"></i> </button>
                                                    <button type="button" data-toggle="modal" data-target="#create4" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="ti-pencil-alt"></i> </button>
                                                    <div class="modal" id="create4">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title">Modifier</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label for="tache-name" class="control-label">Intitulé:</label>
                                                                            <input type="text" class="form-control" id="tache-name">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="affect" class="control-label">Statut:</label>
                                                                            <select class="form-control category-select" id="affect">
                                                                                <option>Terminée</option>
                                                                                <option>A faire</option>
                                                                                <option>En attente</option>
                                                                                <option>En retard</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="date" class="control-label">Date de début:</label>
                                                                            <input type="text" class="form-control" id="date">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="datel" class="control-label">Date limite:</label>
                                                                            <input type="text" class="form-control" id="datel">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="tache" class="control-label">Affecter un membre:</label>
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                                            <option value="AK" selected>Alaska</option>
                                                                                            <option value="HI">Hawaii</option>
                                                                                            <option value="CA" selected>California</option>    
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                                    <button type="button" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Cedric Kelly</td>
                                                <td>Senior Javascript Developer</td>
                                                <td>En retard</td>
                                                <td>2012/11/11</td>
                                                <td>2012/03/29</td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="ti-trash"></i> </button>
                                                    <button type="button" data-toggle="modal" data-target="#create5" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="ti-pencil-alt"></i> </button>
                                                    <div class="modal" id="create5">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title">Modifier</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <form>
                                                                        <div class="form-group">
                                                                            <label for="tache-name" class="control-label">Intitulé:</label>
                                                                            <input type="text" class="form-control" id="tache-name">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="affect" class="control-label">Statut:</label>
                                                                            <select class="form-control category-select" id="affect">
                                                                                <option>Terminée</option>
                                                                                <option>A faire</option>
                                                                                <option>En attente</option>
                                                                                <option>En retard</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="date" class="control-label">Date de début:</label>
                                                                            <input type="text" class="form-control" id="date">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="datel" class="control-label">Date limite:</label>
                                                                            <input type="text" class="form-control" id="datel">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label for="tache" class="control-label">Affecter un membre:</label>
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                                            <option value="AK" selected>Alaska</option>
                                                                                            <option value="HI">Hawaii</option>
                                                                                            <option value="CA" selected>California</option>    
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                                    <button type="button" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>Intitulé</th>
                                                <th>Membre / Equipe</th>
                                                <th>Statut</th>
                                                <th>Date de début</th>
                                                <th>Date Limite</th>
                                                <th>Modifier</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>

@endsection

@section('script')
    <!-- This Page JS -->
    <script src="{{asset('assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/forms/select2/select2.init.js')}}"></script>
    <!--This page JavaScript -->
    <script src="{{asset('dist/js/pages/notes/notes.js')}}"></script>
    <script src="{{asset('assets/libs/quill/dist/quill.min.js')}}"></script>
    <!-- Initialize Quill editor -->
    <script src="{{asset('dist/js/pages/todo/todo.js')}}"></script>

    <!--This page plugins -->
    <script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/datatable/datatable-basic.init.js')}}"></script>
@endsection