@extends('layouts.admin-base')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}">
    <style>
        body .card {
  --background: #ffffff;
  --text: black;
  position: relative;
  height: 6rem;
  box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.05);
}
body .card .multi-button {
  z-index: 0;
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  border-radius: 100%;
  width: 0rem;
  height: 0rem;
  transform: translate(-50%, -50%);
  transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
}
body .card .multi-button button {
  display: grid;
  place-items: center;
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 100%;
  background: var(--background);
  color: var(--text);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
  box-shadow: 0 0 0rem -0.25rem var(--background);
}
body .card .multi-button button:hover {
  background: var(--text);
  color: var(--background);
  box-shadow: 0 0 1rem -0.25rem var(--background);
}
body .card .multi-button button:first-child:nth-last-child(1):nth-child(1), body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
  left: 25%;
  top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(1), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
  left: 37.5%;
  top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(2), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
  left: 18.75%;
  top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(1), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
  left: 50%;
  top: 15.625%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(2), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
  left: 25%;
  top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(3), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
  left: 15.625%;
  top: 50%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(1), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
  left: 62.5%;
  top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(2), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
  left: 37.5%;
  top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(3), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
  left: 18.75%;
  top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(4), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
  left: 18.75%;
  top: 62.5%;
}
body .card .container {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background-image:url('assets/images/img1.jpg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text);
}
body .card:hover .multi-button,
body .card .multi-button:focus-within {
  width: 10rem;
  height: 10rem;
}

    </style>

@endsection

@section('under-header')

        <div 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 text-uppercase mb-0">Liste de projets</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="#">Projets</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Admin</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-sm-12">
                    <div style="margin-top: 30px; height:70px; background-color:white; color:black" class="card">
                        <div  class="card-body">
                            <h3 class="card-title" style="text-transform:uppercase;">Projets </h3>
                        </div>
                    </div>
                </div>
            </div>

            <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="Search...">
                            <a href="" class="active"><i class="fa fa-search"></i></a>
                        </form>
                    </li>
                </ul>
                </div>
                <div class="col-6">
                            <button type="button" data-toggle="modal" data-target="#create" class="btn btn-danger text-white float-right ml-3 d-none d-md-block" href="">Créer un projet</button>
                            <div class="modal" id="create">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title"> Créer projet</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="modal-body">
                                                <form>
                                                    <div class="form-group">
                                                        <label for="project-name" class="control-label">Nom du projet:</label>
                                                        <input type="text" class="form-control" id="project-name">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Equipes:</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>
                                        <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 style="margin-top: 20px" class="row">
                @foreach ($projects as $project)
                <!-- Column -->
                <div style="margin-left: 20px" class="col-lg-3 col-md-4">
                    <div class="card" style="--background:#2cabe3; --text:white;">
                        <div class="multi-button">
                            <button onclick="window.location.href='evolution'" class="bi bi-graph-up"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                              </svg></button>
                            <!--button onclick="goto " class="fas fa-comment"></button>
                            <button class="fas fa-share-alt"></button-->
                        </div>
                        <div class="container">
                            <a style="margin:15px 15px" href="{{ route('admin-project', ['project' => $project->id]) }}"><h4 class="mb-0 text-white"><i style="margin-right: 5px" class="mdi mdi-clipboard-text"></i>{{ $project->name }}</h4></a>
                        </div>
                    </div>
                </div>
                @endforeach
                <!-- Column -->
                {{-- <!-- Column -->
                <div style="margin-left: 20px" class="col-lg-3">
                    <div class="card" style="--background:#2cabe3; --text:white;">
                        <div class="multi-button">
                            <button onclick="window.location.href='evolution'" class="bi bi-graph-up"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-graph-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                              </svg></button>
                        </div>
                        <div class="container">
                            <a style="margin:15px 15px" href="{{url('/admin-project')}}"><h4 class="mb-0 text-white"><i style="margin-right: 5px" class="mdi mdi-clipboard-text"></i>Project-name</h4></a>
                        </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>
@endsection