@extends($layout)
@section('content')
<form method="POST" enctype="multipart/form-data" >
   <div class="row">
      <div class="col s12 justify-content-end mt-1 mb-1">
         <a onclick="load()" href="{{route('{projetId}_list')}}"><button type="button"
            class="btn btn-light">Retour </button></a>
         <button onclick="load()" type="submit" class="btn indigo" style="margin-left: 1rem;">
         Enregistrer</button>
         {workflowactions}
      </div>
      <div class="col s12" style="padding: 0px">
         <div class="container">
            <div class="card-panel" style="position: relative; margin-bottom: 0px; padding-top: 15px; padding-left: 10px; padding-bottom: 15px;padding-right: 5px">
               <div class="row">
                  <div class="col s12 m3" style="width: 18%;">
                     <div class="display-flex media">
                        <a href="#" class="avatar">
                        <img src="/assets/images/avatar/unknown_user.png" alt="users view avatar" class="z-depth-4 circle" height="64" width="64">
                        </a>
                        <div class="media-body" style="padding-left: 15px;">
                           <h6 class="media-heading">
                              <span class="users-view-name">     </span>
                           </h6>
                           <span class="users-view-name" style="color: #000;"></span>
                           <span class="users-view-id"> {{ @$record->userDetail->name . ' ' . @$record->userDetail->first_name }}</span>
                           <br>
                           <span class="users-view-id">  {{ @$record->userDetail->roleDetail->label}} </span>
                        </div>
                     </div>
                  </div>
                  <div class="col s12 m7">
                     @foreach($history as $h)
                     <a target="_blank" href="{{route('{projetId}_update', [$h->id])}}">
                        <div class="chip  white-text z-depth-4" style="margin-top: 3px; background-color: {{@$h->statutDetail->color}} !important; ">
                           <i class="material-icons" style="margin-top: 3px;">{{@$h->statutDetail->icon}}</i> <span style="position: relative; top: -6px;"> #{{$h->id}} : {{@$h->statutDetail->label}} </span>
                        </div>
                     </a>
                     @endforeach
                  </div>
                  <div class="col s12 m2" style="width: 16%; padding: 0px">
                     <div class="display-flex justify-content-between pb-2 chip" style="width: 70%;">
                        <span>Critique</span>
                        <div class="switch" >
                           <label>
                           <input type="checkbox" id="vip">
                           <span class="lever"></span>
                           </label>
                        </div>
                     </div>
                     <div class="chip  white-text z-depth-4" style="margin-top: 3px; background-color: {{@$record->statutDetail->color}} !important; min-width: 180px;">
                        <i class="material-icons" style="margin-top: 3px;">{{@$record->statutDetail->icon}}</i> <span style="position: relative; top: -6px;">{{@$record->statutDetail->label}}</span>
                     </div>
                     <div class="  white-text z-depth-4 " style="background-color: blue !important; padding-left: 5px; width: 70px; padding: 10px; text-align: center; border-radius: 50%; position: absolute; bottom: 28px; right: 37px;">
                        Total<br> {{$history->count()}}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="card" style="margin: 1rem 10px 1rem 10px;">
      <div class="card-content">
         <div class="row">
            <div class="col s12 m12">
               <ul class="tabs">
                  <li class="tab col s2" style="width:10%;padding: 0px;">
                     <a class="active" href="#details" style="padding: 0px;"> <i class="material-icons">info</i> <span>Détail </span></a>
                  </li>
                  <li class="tab col s2" style="width:13%;padding: 0px;">
                     <a class="" href="#history" style="padding: 0px;"> <i class="material-icons">menu</i> <span>Historique</span></a>
                  </li>
                  <li class="tab col s2" style="width:12%;padding: 0px;">
                     <a class="" href="#files" style="padding: 0px;"> <i class="material-icons">attachment</i> <span>Fichiers attachés</span></a>
                  </li>
                  <li class="tab col s2" style="width:10%;padding: 0px;">
                     <a class="" href="#workflow" style="padding: 0px;"> <i class="material-icons">loop</i> <span>Workflow</span></a>
                  </li>
               </ul>
               <div class="col s12" style="padding: 0px; display: none;" id="files">
                  <div style="min-height: 1000px;">
                     <iframe style="position: absolute; border: none" border="0" frameborder="0" width="97%" scrolling="auto" height="93%" src="/document/list/{projetId}/{{$record->id}}"> </iframe>
                  </div>
               </div>
               <div id="history" class="row">
                  <div class="card">
                     <div class="card-panel">
                        <h4 class="card-title" style="margin-bottom: 15px; font-size: 25px;"> <i class="material-icons prefix">list</i> Historique</h4>
                        <div class="row">
                           <div class="card-content">
                              <!-- datatable start -->
                              <div class="responsive-table">
                                 <table id="datatable" class="table table-bordered table-striped">
                                    <thead>
                                       <tr>
                                          <th style="width:5%"> ID </th>
                                          {th}
                                       </tr>
                                    </thead>
                                    <tbody>
                                       @foreach ($history as $hist)
                                       <tr>
                                          <td> <a target="_blank" href="{{route('{projetId}_update', [$hist->id])}}">  {{ $hist->id }} </a> </td>
                                          {td}
                                       </tr>
                                       @endforeach
                                 </table>
                              </div>
                              <!-- /.card-body -->
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div id="workflow" class="row">
                  <div class="col s12" style="padding:0px">
                     <div class="container">
                        <div class="section">
                           <div class="card">
                              <div class="card-panel">
                                 <h4 class="card-title" style="margin-bottom: 15px; font-size: 25px;"> <i class="material-icons prefix">loop</i> Workflow</h4>
                                 <div class="row">
                                    <div class="col s12 m12">
                                       <table class="striped">
                                          <thead>
                                             <tr>
                                                <th>Utilisateur</th>
                                                <th>Date</th>
                                                <th>Statut</th>
                                                <th>Commentaire</th>
                                             </tr>
                                          </thead>
                                          <tbody>
                                             @foreach ($workflow as $w)
                                             <tr>
                                                <td>{{$w->name . ' '. $w->first_name}}</td>
                                                <td>{{$w->datetime_fr}}</td>
                                                <td>
                                                   <div class="chip  white-text z-depth-4" style="margin-top: 3px; background-color: {{ $w->color }} !important;">
                                                      <i class="material-icons" style="margin-top: 3px;">{{ $w->icon }}</i> <span style="position: relative; top: -6px;">{{ @$w->label }} </span>
                                                   </div>
                                                </td>
                                                <td>{{$w->commentaire}}</td>
                                             </tr>
                                             @endforeach
                                          </tbody>
                                       </table>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row" id="details">
                  <div class="col s3" style="width:26%; padding: 0 0.5rem;" >
                     <ul class="timeline" >
                        @foreach($workflow as $w)
                        <li {{ $loop->index%2 == 1 ? "class=timeline-inverted" : '' }} >
                        <div class="timeline-badge" style="background-color: {{$w->color}} !important;">
                           <a class="tooltipped" data-position="top" data-tooltip="{{$w->label }}"><i
                              class="material-icons white-text">{{$w->icon}}</i></a>
                        </div>
                        <div class="timeline-panel">
                           <div class="card m-0 hoverable" id="profile-card">
                              <div class="card-content">
                                 <p><i class="material-icons profile-card-i">person</i>
                                    {{$w->name . " ".$w->first_name}}
                                 </p>
                                 <p><i class="material-icons profile-card-i">date_range</i>
                                    {{$w->date_fr}}
                                 </p>
                              </div>
                           </div>
                        </div>
                        </li>
                        @endforeach
                        <li class="clearfix" style="float: none;"></li>
                     </ul>
                  </div>
                  <div class="col s7" style="padding:0px; width:74% ;">
                     <div class="container" style="padding: 0px;">
                        <div class="section" style="padding: 0px;">
                           @csrf
                           @if (Session::has('success'))
                           <div class="card-alert card green">
                              <div class="card-content white-text">
                                 <p>{{ Session::get('success') }} </p>
                              </div>
                              <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                              <span aria-hidden="true">×</span>
                              </button>
                           </div>
                           @endif
                           <div class="card" style="margin: 0px;">
                              <div class="card-panel">
                                 <div class="row">
                                    <div class='col s12 m12'>
                                       <div class='row'>
                                       {formTypes}

                                       <!--updates_fields-->
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
@stop