@extends('layouts.app')

@section('title', $user->prenom.' '.$user->nom)

@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-12 col-md-12 mb-3 px-2">
                    @include('profil.dashbord')

                    <div class="card border border-light mb-3">
                        <div class="card-body">
                            <h5 class="text-left mb-2 mt-3 font-weight-bold">
                                Mes compétences
                                <a class="btn btn-2 rounded p-2 float-right" data-toggle="modal" data-target="#exampleModal">
                                    <i class="fa fa-plus" aria-hidden="true"></i> <span class="add-1">Ajouter une compétence</span>
                                </a>
                            </h5>
                            <div class="progress mt-0 bg-color-2 mb-4" style="height: 2px; width: 10%;"></div>
                            @include('profil.competences')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ajouter une compétence</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pl-4">
                    {!! Form::model($user, ['method' => 'POST', 'url' => route('addCompetence') ]) !!}
                        {{ csrf_field() }}

                        {!! Form::text('competence', null, [
                            'class' => 'form-control nom',
                            'autocomplete' => 'off',
                            'placeholder' => 'competence'
                        ]) !!}
                        
                        <div class="md-form">
                            <button class="btn btn-2 rounded p-2 px-3" type="submit">
                                Ajouter
                            </button>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
   <script>
        var states = [
            @foreach($competences as $competence)
            {!! '"'.$competence->name.'",' !!}
            @endforeach
        ];
        $('.nom').mdb_autocomplete({
            data: states
        });
    </script>
@endsection