@extends('layouts.base')

@section('css')


@endsection

@section('under-header')

    <div style="margin-bottom:20px;" 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 équipes</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 Admin</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="#">Equipes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$projet->name}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
</div>

@endsection

@section('content')

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

                        {{-- <div class="row">
                            <div class="col-6">
                            <ul class="navbar-nav float-left">
                                <!-- ============================================================== -->
                                <!-- Search -->
                                <!-- ============================================================== -->
                                <li  class="nav-item search-box">
                                    <form class="app-search d-none d-lg-block">
                                        <input style="width: 500px;" type="text" class="form-control" placeholder="Rechercher...">
                                        <a href="" class="active"><i class="fa fa-search"></i></a>
                                    </form>
                                </li>
                            </ul>
                            </div>
                        </div> --}}

                        {{-- <div class="row" style="margin-bottom: 20px">
                            <div class="col-12">
                                <button type="button" data-toggle="modal" data-target="#create" class="btn btn-info text-white float-right ml-3 d-none d-md-block" href="">Créer une équipe</button>
                                <div class="modal" id="create">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title"> Créer équipe</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="modal-body">
                                                    <form>
                                                        <div class="form-group">
                                                            <label for="project-name" class="control-label">Nom de l'équipe:</label>
                                                            <input type="text" class="form-control" id="project-name">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="" class="control-label">Utilisateur:</label>
                                                            <div class="card">
                                                                <div class="card-body">
                                                                    <select class="select2 form-control block" multiple="multiple" style="width: 75%">
                                                                            <option value="AK">Codjo</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>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </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 équipes</h4>
                                        <!--h6 class="card-subtitle">On a per-column basis (i.e. order by a specific column and
                                            then a secondary column if the data in the first column is identical), through the
                                            <code> columns.orderData</code> option.</h6-->
                                        <div class="table-responsive">
                                            <table id="multi_col_order" class="table table-striped border display"
                                                style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>id</th>
                                                        <th>Nom de l'équipe</th>
                                                        <th>Date de création</th>
                                                        <th>Membres</th>
                                                        <th>Website</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    @foreach ($equipes as $equipe)
                                                    @foreach($equipe->projets as $project)
                                                    @if ($project->id == $projet->id)
                                                    <tr>
                                                        {{-- <td> <a href="{{route('equipe-equipes-list', ['id' => $equipe->id, 'projet_id' => $projet->id])}}"> {{$equipe->id}}</a></td> --}}
                                                        <td>{{$equipe->title}}</td>
                                                        <td>{{$equipe->created_at->format('Y-m-d')}}</td>
                                                        <td>
                                                            @foreach($equipe->users as $user)
                                                                {{$user->first_name}} {{' '}} {{$user->last_name}} <br>
                                                            @endforeach
                                                        </td>
                                                        <td>{{$equipe->website}}</td>
                                                    </tr>
                                                    @else

                                                    @endif

                                                    @endforeach
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

@endsection

@section('script')

    <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('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>

    <!--script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript >
    <script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- apps >
    <script src="../../dist/js/app.min.js"></script>
    <script src="../../dist/js/app.init.horizontal-fullwidth.js"></script>
    <script src="../../dist/js/app-style-switcher.js"></script>
    <!-- slimscrollbar scrollbar JavaScript >
    <script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects >
    <script src="../../dist/js/waves.js"></script>
    <!--Menu sidebar >
    <script src="../../dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript >
    <script src="../../dist/js/custom.min.js"></script>
    <!-- This Page JS >
    <script src="../../assets/libs/chartist/dist/chartist.min.js"></script>
    <script src="../../dist/js/pages/chartist/chartist-plugin-tooltip.js"></script>
    <script src="../../assets/extra-libs/c3/d3.min.js"></script>
    <script src="../../assets/extra-libs/c3/c3.min.js"></script>
    <script src="../../assets/libs/raphael/raphael.min.js"></script>
    <script src="../../assets/libs/morris.js/morris.min.js"></script>
    <script src="../../dist/js/pages/dashboards/dashboard1.js"></script>
    <script src="../../assets/libs/moment/min/moment.min.js"></script>
    <script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="../../dist/js/pages/calendar/cal-init.js"></script-->

@endsection