@extends('layouts.master')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@stop

@section('content')

<div class="row">
    <div class="col-12">
        <div class="material-card card">
            <div class="card-body">
                <h4 class="card-title">Zero Configuration</h4>
                <h6 class="card-subtitle">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function:<code> $().DataTable();</code>. You can refer full documentation from here <a href="https://datatables.net/">Datatables</a></h6>
                <div class="table-responsive">
                    <table id="zero_config" class="table table-striped border">
                        <thead>
                            <tr>
                                <th>Element</th>
                                <th>Model</th>
                                <th>Numéro Série</th>
                                <th>Localisation</th>
                                <th>Statut</th>
                                <th>Utilisateur</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                    @if(empty($elements))
                                <h4 class="text-center"></h4>
                            @endif

                            @if(!empty($elements))
                                @foreach($elements as $element)
                            <tr>
                                <td><a href="#" data-toggle="modal" data-target="#elementmodel{{$element['element_id']}}"> {{$element['element']}} </a> </td>
                                <td> {{$element['model']}} </td>
                                <td> {{$element['uid']}} </td>
                                <td> {{$element['localisation']}} </td>
                                <td> 
                                    @if($element['elementstatus'] == "NEW")<p class="text-success"> Neuf </p>@endif
                                    @if($element['elementstatus'] == "FREE")<p class="text-success"> Disponible </p>@endif
                                    @if($element['elementstatus'] == "IN_USE")<p class="text-info"> En utilisation </p>@endif
                                    @if($element['elementstatus'] == "MAINTENANCE")<p class="text-warning"> En Maintenance </p>@endif
                                    @if($element['elementstatus'] == "DEFECTIVE")<p class="text-danger"> Deffectué </p>@endif
                                </td>
                                <td>{{$element['fullname']}}</td>
                                <td>
                                    @if($element['elementstatus'] == "NEW" || $element['elementstatus'] == "FREE") <a href="{{url('assignation?id='.$element['element_id'])}}" class="btn btn-success">Assigner</a> @endif
                                    @if($element['elementstatus'] == "IN_USE") <a href="{{url('recuperation?id='.$element['element_id'])}}" class="btn btn-info">Récupérer</a> @endif
                                    <a href="{{url('modification_element?id='.$element['element_id'])}}" class="btn btn-dark float-right">Modifier</a>
                                </td>
                            </tr>

                             <!-- Element Modal -->
                            <div class="modal fade" id="elementmodel{{$element['element_id']}}" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            
                                            <h4 class="card-title">{{$element['element']}}</h4><br/>
                                            <di class="row">
                                                <div class="col-4 display-flex justify-content-center">
                                                    <img src="assets/images/icon/icon_image.png" width="200px" />
                                                </div>
                                                <div class="col-8">
                                                    <ul class="list-unstyled">
                                                        <li>
                                                            <b>{{$element['element']}}</b>
                                                        </li>
                                                        <li>
                                                            @if($articles)
                                                            @foreach($articles as $article)
                                                            @if($article['id'] == $element['article_id'])
                                                            Article :  {{$article['article']}}
                                                            @endif
                                                            @endforeach
                                                            @endif
                                                        </li>
                                                        <li>
                                                            Model : {{$element['model']}}
                                                        </li>
                                                        <li>
                                                            Série : {{$element['uid']}}
                                                        </li>
                                                        <br/>
                                                        <li>
                                                            @if($element['elementstatus'] == "NEW")Statut : <span class="badge badge-success">Neuf</span>@endif
                                                            @if($element['elementstatus'] == "FREE")Statut : <span class="badge badge-success">Disponible</span>@endif
                                                            @if($element['elementstatus'] == "IN_USE")Statut : <span class="badge badge-info">En Utilisation</span>@endif
                                                            @if($element['elementstatus'] == "MAINTENANCE")Statut : <span class="badge badge-warning">En Maintenance</span>@endif
                                                            @if($element['elementstatus'] == "DEFECTIVE")Statut : <span class="badge badge-danger">Déffectué</span>@endif
                                                        </li>
                                                        <li>
                                                            Dépôt : {{$element['localisation']}}
                                                        </li>
                                                        <li>
                                                            Description : {{$element['description']}}
                                                        </li>
                                                        <br/>


                                                    </ul>
                                                </div>
                                                <div class="col-12">
                                                    @if($element['elementstatus'] == "IN_USE")
                                                    <b>Assignation Actuelle</b>
                                                    <ul class="list-unstyled" style="margin-left: 80px;">
                                                        <li>Utilisateur : &nbsp;{{$element['fullname']}}</li>
                                                        <li>Département : &nbsp;{{$element['departement']}}</li>
                                                    </ul>
                                                    @endif
                                                </div>
                                            </di>
                                            <br/>
                                            <b>Historique</b>
                                            <hr/>
                                            <div class="row">
                                            
                                                <div class="col-4"><b>Commentaires</b></div>
                                                <div class="col-4 text-center"><b>Utilisateurs</b></div>
                                                <div class="col-4 text-left"><b>Période</b></div>

                                                <div class="row col-12" style="max-height: 150px; overflow:auto; font-size:smaller;">
                                                    @foreach($element['using'] as $key)

                                                    <div class="col-12"><hr/></div>
                                                    <div class="col-4"> 
                                                        <b>Assign</b> : {{$key['comment']}} <br/><br/>
                                                        <b>Récupe</b> : {{$key['rcpcomment']}}
                                                    </div>
                                                    <div class="col-4 text-center"> {{$key['firstname']}} {{$key['lastname']}} </div>
                                                    <div class="col-4"> 
                                                        <b>Assign</b> : {{$key['created_at']}} <br/><br/>
                                                        <b>Récupe</b> : @if($key['recuperer'] == 1){{$key['modified_at']}} @endif
                                                    </div>
                                                    
                                                    @endforeach
                                                </div>
                                            
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- order table -->

@stop