@extends('layouts.admin-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">Dashboard</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="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Admin</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-md-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-uppercase">Nombre d'utilisateurs</h5>
                    <div class="d-flex align-items-center mb-2 mt-4">
                        <h2 class="mb-0 display-5"><i class="icon-people text-info"></i></h2>
                        <div class="ml-auto">
                            <h2 class="mb-0 display-6"><span class="font-normal">{{ $nbrUsers }}</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-uppercase">Nouveaux Projets </h5>
                    <div class="d-flex align-items-center mb-2 mt-4">
                        <h2 class="mb-0 display-5"><i class="icon-folder text-primary"></i></h2>
                        <div class="ml-auto">
                            <h2 class="mb-0 display-6"><span class="font-normal">{{ $nbrNewProjects }}</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-uppercase">Total Projets</h5>
                    <div class="d-flex align-items-center mb-2 mt-4">
                        <h2 class="mb-0 display-5"><i class="icon-folder-alt text-danger"></i></h2>
                        <div class="ml-auto">
                            <h2 class="mb-0 display-6"><span class="font-normal">{{ $nbrProjects }}</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-uppercase">Projets achevés</h5>
                    <div class="d-flex align-items-center mb-2 mt-4">
                        <h2 class="mb-0 display-5"><i class="ti-wallet text-success"></i></h2>
                        <div class="ml-auto">
                            <h2 class="mb-0 display-6"><span class="font-normal">{{ $nbrEndedProjects }}</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="row">
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <h5 class="card-title text-uppercase mb-0">Mothly Site Traffic</h5>
                        <div class="ml-auto">
                            <small class="text-success"><i class="fas fa-sort-up"></i> 18% High then last month</small>
                        </div>
                     </div>
                    <div class="d-flex flex-row">
                        <div class="p-2 pl-0 border-right">
                            <h6 class="font-light">Overall Growth</h6><span class="font-medium">80.40%</span></div>
                        <div class="p-2 border-right">
                            <h6 class="font-light">Montly</h6><span class="font-medium">20.40%</span>
                        </div>
                        <div class="p-2">
                            <h6 class="font-light">Day</h6><span class="font-medium">5.40%</span>
                        </div>
                    </div>
                    <div id="spark1" class="sparkchart mt-3"></div>
                </div>
            </div>

        </div>
    </div> -->
    <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="my-5">
        <h1>Tous les projets</h1>
        <div class="row mt-3">
            @php
                $i = 0;
            @endphp
            <!-- Column -->
            @foreach ($projects as $project)
            <div class="col-md-6 my-2">
                <div class="card border-success" style="height: 100%;">
                    <div class="card-header bg-success">
                        <h4 class="mb-0 text-white">{{ $project->name }}</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">{{ $project->description }}</h3>
                        @if ($project->statut == "late")
                            <h4 class="font-bold"> 
                              En retard
                            </h4>
                        @elseif ($project->statut == "new")
                            <h4 class="font-bold"> 
                              Nouveau
                            </h4>
                        @elseif ($project->statut == "waiting")
                            <h4 class="font-bold"> 
                              En cours
                            </h4>
                        @elseif ($project->statut == "ended")
                            <h4 class="font-bold"> 
                              Terminé
                            </h4>
                        @endif
                        <p class="card-text">Créé le {{ date('d/m/Y H:i', strtotime($project->created_at)) }} Par {{ $owners[$i] ? $owners[$i]->username : 'defaut' }} </p>
                        <form action="{{ route('admin-project') }}" method="POST">
                            @csrf
                            <input type="hidden" name="project_id" value="{{ $project->id }}">
                            <button type="submit" class="btn btn-inverse">Voir le projet</button>
                        </form>
                        <!-- <button type="button" title="Supprimer" data-toggle="modal" data-target="#modal_Supprimer{{ $project->id }}" class="btn waves-effect waves-light btn-outline-danger" style=""><!-- <i class="ti-trash"></i> ->Supprimer</button> -->
                        <div class="modal" id="modal_Supprimer{{ $project->id }}" style="color:rgb(32,0,32);">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <!-- Modal Header -->
                                    <div class="modal-header" >
                                        <h2 class="modal-title"> Suppression du Projet : {{ $project->name }}</h2>
                                    </div>
                                    <!-- Modal body -->
                                    <div class="modal-body">
                                        Etes-vous sûr de vouloir supprimer ce projet?
                                        <form class="mt-4" method="post" action="{{ route('project_destroy',['project_id' => $project->id]) }}">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                            <!-- Modal footer -->
                                            <div class="modal-footer" style="margin-top: 5px; text-align:left;">
                                            <button type="submit" class="btn btn-danger">Supprimer</button>
                                            <button type="button" class="btn btn-success" data-dismiss="modal">Annuler</button>
                                            </div>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @php
                $i++;
            @endphp
            @endforeach
            <!-- Column -->
        </div>
    </div>

</div>
@endsection

@section('script')

    <script src="{{asset('dist/js/pages/notes/notes.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="{{asset('assets/libs/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/libs/popper.js/dist/umd/popper.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- apps -->
<script src="{{asset('dist/js/app.min.js')}}"></script>
<script src="{{asset('dist/js/app.init.horizontal-fullwidth.js')}}"></script>
<script src="{{asset('dist/js/app-style-switcher.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js')}}"></script>
<script src="{{asset('assets/extra-libs/sparkline/sparkline.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('dist/js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('dist/js/sidebarmenu.js')}}"></script>
<!--Custom JavaScript -->
<script src="{{asset('dist/js/custom.min.js')}}"></script>
<!-- This Page JS -->
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-2.0.2.min.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-world-mill-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-in-mill.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-us-aea-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-uk-mill-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-au-mill.js')}}"></script>
<script src="{{asset('assets/libs/chartist/dist/chartist.min.js')}}"></script>
<script src="{{asset('dist/js/pages/chartist/chartist-plugin-tooltip.js')}}"></script>
<script src="{{asset('dist/js/pages/dashboards/dashboard3.js')}}"></script> --}}
{{-- <script>
  $(function() {
    $('#usa').vectorMap({
      map : 'us_aea_en',
      backgroundColor : 'transparent',
      zoomOnScroll: false,
      regionStyle : {
          initial : {
              fill : '#2cabe3'
          }
      }
    });
  });
</script> --}}
@endsection