@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('tache_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>
      </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('tache_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 -->
                     <button onclick="openChangeStatutModal('tache',{{$record->id}},2)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#f2dc91 !important;"> <i class="material-icons" style="margin-top: -5px;">autorenew</i> En cours </button>
			            <button onclick="openChangeStatutModal('tache',{{$record->id}},3)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#b8b8b8 !important;"> <i class="material-icons" style="margin-top: -5px;">hourglass_empty</i> En attente </button>
			            <button onclick="openChangeStatutModal('tache',{{$record->id}},4)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#aae6b8 !important;"> <i class="material-icons" style="margin-top: -5px;">done_all</i> Terminée </button>
			            <button onclick="openChangeStatutModal('tache',{{$record->id}},5)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#de7676 !important;"> <i class="material-icons" style="margin-top: -5px;">cancel</i> Annulée </button>
                  </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/tache/{{$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> Tâche </th>
                                            <th> Priorité </th>
                                            <th> Utilisateur assigné </th>
                                            <th> Date de début </th>
                                            <th> Date de fin </th>
                                       </tr>
                                    </thead>
                                    <tbody>
                                       @foreach ($history as $hist)
                                       <tr>
                                          <td> <a target="_blank" href="{{route('tache_update', [$hist->id])}}">  {{ $hist->id }} </a> </td>
                                          
                                            <td> {{ $hist->titre }} </td>
                                            <td> {{ $hist->priorite }} </td>
                                            <td> {{ @$hist->userDetail->name }} </td>
                                            <td> {{ $hist->dateDebut }} </td>
                                            <td> {{ $hist->dateFin }} </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'>
                                                       
                                        </div>
                                            </div>
                                                <h4 class='card-title' style='margin-left: 15px; font-size: 25px;'> <i class='material-icons prefix'>info</i> Informations Générales </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <div class="col s3 input-field">
                                            <input id="titre" name="titre" value="{{old('titre', $record->titre)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text">
                                            <label for="titre"> Tâche </label>
                                            @error('titre')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                <div class="col s3 input-field">
                                <select name='priorite' id='priorite' class="select2 browser-default">
                                <option value=''></option>
                                <option value="0" {{($record->priorite == '0') ? 'selected' : ''}}> Basse </option> 
                                <option value="1" {{($record->priorite == '1') ? 'selected' : ''}}> Normale </option> 
                                <option value="2" {{($record->priorite == '2') ? 'selected' : ''}}> Haute </option> 
                                <option value="3" {{($record->priorite == '3') ? 'selected' : ''}}> Critique </option> 
                            </select> <label for="priorite"> Priorité</label>
                                @error('priorite')
                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                @enderror
                            </div>
                                                
                                        <div class="col s6 input-field">
                                            <textarea id="description" name="description" placeholder='' class="materialize-textarea">{{old('description', $record->description)}}</textarea>
                                            <label for="description"> Description </label>
                                            @error('description')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        </div>
                                            </div>
                                                <h4 class='card-title' style='margin-left: 15px; font-size: 25px;'> <i class='material-icons prefix'>track_changes</i> Gestion et suivi </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'> <div class="col s3 input-field">
                                            <select name='assigne' id='assigne' class="select2 browser-default">
                                                <option value=''></option>
                                                @foreach ($userRecords as $row)
                                                    <option class='option' {{($row->id == old('assigne', $record->assigne)) ? 'selected' : ''}}
                                                    value='{{$row->id}}'> {{$row->name}} {{$row->first_name}}</option>
                                                @endforeach
                                            </select>
                                            <label for="assigne"> Utilisateur assigné</label>
                                            @error('assigne')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                                
                                        <div class="col s3 input-field">
                                            <input id="dateDebut" name="dateDebut" value="{{old('dateDebut', $record->dateDebut)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateDebut"> Date de début </label>
                                            @error('dateDebut')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        <div class="col s3 input-field">
                                            <input id="dateFin" name="dateFin" value="{{old('dateFin', $record->dateFin)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateFin"> Date de fin </label>
                                            @error('dateFin')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        <div class="col s3 input-field">
                                            <input id="dateCreation" name="dateCreation" value="{{old('dateCreation', $record->dateCreation)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateCreation"> Date de création </label>
                                            @error('dateCreation')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        <div class="col s3 input-field">
                                            <input id="dateMaj" name="dateMaj" value="{{old('dateMaj', $record->dateMaj)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateMaj"> Date de mise à jour </label>
                                            @error('dateMaj')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>

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