@extends('layouts.app')

@section('title', 'Membres')

@section('content')
    <div class="container-fluid background-r">
        <div class="page-top"></div>
        <div class="container py-3">
            <div class="row">
                <div class="col-12 col-lg-8 col-md-8 mb-3 px-2">
                    <h5 class="text-left mb-2 font-weight-bold">Membres</h5>
                    <div class="progress mt-0 bg-color-2" style="height: 2px; width: 10%;"></div>
                    <div class="row px-2">
                        @forelse ($users as $user)
                            <div class="col-6 col-md-4 px-1 px-md-1" style="font-size:13px">
                                <div class="card border border-light mb-3" style="min-height:228px">
                                    <div class="card-body p-3 text-center">
                                        <div class="avatar mx-auto mt-3 mb-2" style="max-width: 150px;">
                                            <a href="{{ route('membre', $user) }}">
                                            <img style="width: 90px; height: 90px" src="{{ $user->getPhoto() }}" class="rounded-circle img-fluid" alt="{{ $user->prenom }} {{ $user->nom }}">
                                            </a>
                                        </div>
                                        <h5 class="mb-0">
                                            <a href="{{ route('membre', $user) }}" class="black-text">{{ $user->prenom }} {{ $user->nom }}</a>
                                        </h5>
                                        <div class="grey-text text-truncate">{{ $user->titre }}</div>
                                        <div>
                                            @can("suivre-membre", $user)
                                            <a class="btn btn-2 rounded p-2" href="{{route('suivre-membres',$user)}}">
                                                <i class="fa fa-star" aria-hidden="true"></i> <span class="add-1">Suivre</span>
                                            </a>
                                            @else
                                            <a class="btn btn-2 rounded p-2" href="{{route('ne-plus-suivre-membres',$user)}}">
                                                <i class="fa fa-star-o" aria-hidden="true"></i> <span class="add-1">Ne plus suivre</span>
                                            </a>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>Pas encore de Membres !</p>
                        @endforelse
                        
                        @if($users)
                            <div class="col-lg-12 col-md-12 mb-4 ">
                                {{ $users->links() }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-12 col-md-4 col-lg-4 col-md-2 px-2">
                    <div class="card border border-light mt-3 mt-md-5_">
                        <div class="card-body">
                            <h4 class="card-title darkgrey-text"><strong>Trouvez un membre !</strong></h4>
                            <hr>
                            <form method="get" action="">
                                <div class="md-form form-group">
                                    <input type="text" class="form-control" name="nom" value="{{ isset($getNom) ? $getNom :'' }}" placeholder="Nom">
                                </div>
                                
                                <div class="md-form form-group">
                                    <select class="mdb-select" name="pays" searchable="Rechercher ici ...">
                                        <option disabled selected>Pays</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->name }}" {{ $getPays == $country->name ? 'selected' : '' }} >{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                    {{--<button type="button" class="btn-save btn btn-1 btn-sm">Enregistrer</button>--}}
                                </div>
                                
                                <div class="md-form form-group">
                                    <select class="mdb-select" name="competences[]" multiple searchable="Rechercher ici ...">
                                        <option disabled selected>Competences</option>
                                        @foreach($competences as $competence)
                                            <option value="{{ $competence->name }}" {{ old('country_id') == $country->id ? 'selected' : '' }} >{{ $competence->name }}</option>
                                        @endforeach
                                    </select>
                                    {{--<button type="button" class="btn-save btn btn-1 btn-sm">Enregistrer</button>--}}
                                </div>

                                <button class="btn btn-2 rounded p-2 px-3">
                                    <i class="fa fa-search" aria-hidden="true"></i> Recherche
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection