@extends('layouts.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')}}">
    <!-- Custom CSS -->
    <link href="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.css')}}" rel="stylesheet">

@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">Mes associés</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">{{ $project->name }}</li> --}}
                        <li class="breadcrumb-item active" aria-current="page">{{ $project->name }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- footer -->
    <!-- ============================================================== -->


@endsection


@section('content')

<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="page-content container-fluid">
    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <div class="page-content container-fluid">
        <div class="row el-element-overlay">
            @php $i = 1; $j = 1; @endphp
            @if (count($users) > 0)
                @foreach ($users as $user)
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="el-card-item">
                            <div class="el-card-avatar el-overlay-1">
                                @php
                                $exist = false;
                                @endphp
                                <img class="user_photo" src="
                                    @if($user->photo == null)
                                    {{config('app.aws_url').$default}}    
                                    @else
                                     {{config('app.aws_url').$user->photo}}
                                    @endif
                                    " alt="user" style="max-height: 400px"/>
                                <div class="el-overlay">
                                    <ul class="list-style-none el-info">
                                        <li class="el-item">
                                            <a
                                                class="btn default btn-outline image-popup-vertical-fit el-link imagelink"
                                                top="{{$i}}"
                                                href="
                                                    @if($user->photo)
                                                        {{config('app.aws_url').$user->photo}}    
                                                    
                                                        
                                                    @else 
                                                    {{config('app.aws_url').$default}}
                                                    
                                                    @endif"
                                            >
                                                <i class="icon-magnifier"></i>
                                            </a>
                                        </li>
                                        <!-- <li class="el-item">
                                            <a
                                                class="btn default btn-outline el-link"
                                                href="javascript:void(0)">
                                                <i class="icon-close"></i>
                                                <!-- <i class="icon-link"></i> ->
                                            </a>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                            <div class="el-card-content">
                                <h4 class="mb-0">{{ $user->username }}</h4> <span class="text-muted">{{ $user->email }}</span>
                                @if ($user_connected->id == $project->user_id)
                                    <center>
                                        <div>
                                            <a href="{{ route('reject-user', ['project_id' => $project->id, 'user_associated' => $user->id]) }}">
                                                <button class="btn btn-info text-white d-none d-md-block my-4" >Ejecter l'utilisateur</button>
                                            </a>
                                            @if($array_project_users[$user->id] == "reader" )
                                                <a href="{{ route('set-permission', ['project_id' => $project->id, 'user_id' => $user->id, 'role' => 'editor']) }}">
                                                    <button class="btn btn-success text-white d-none d-md-block my-4" >Rendre Editeur</button>
                                                </a>
                                            @else
                                                <a href="{{ route('set-permission', ['project_id' => $project->id, 'user_id' => $user->id, 'role' => 'reader']) }}">
                                                    <button class="btn btn-warning text-white d-none d-md-block my-4" >Retirer le droit</button>
                                                </a>
                                            @endif
                                        </div>
                                    </center>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @php
                $i++
                @endphp
                @endforeach
            @else
                <p class="display-7">Aucun utilisateur associé à ce projet</p>
            @endif
        </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>
    <script src="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/toastr/toastr-init.js')}}"></script>
    <script src="{{asset('dist/js/custom.min.js')}}"></script>
    <script>
        let images = document.getElementsByClassName('user_photo');
        for(let i=0; i < images.length; i++){
            if(images[i].height <=21 ){
               images[i].src = "{{config('app.aws_url').$default}}" ;
               let link = document.getElementsByClassName('imagelink');
               for (let j=0; j < link.length; j++){
                if(j==i){
                    link[j].href = "{{config('app.aws_url').$default}}";
                }
               }
            }
        }

    </script>
    <script>

        if(@json(session('statut'), JSON_PRETTY_PRINT)){
            toastr.success('{{session('statut')}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
        if(@json(session('erreur'), JSON_PRETTY_PRINT)){
            toastr.error('{{session('erreur')}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
        if(@json($errors->any(), JSON_PRETTY_PRINT)){
            toastr.error('{{$errors->first()}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
 //hefr
    </script>
@endsection