@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('produit_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('produit_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('produit',{{$record->id}},2)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#aae6b8 !important;"> <i class="material-icons" style="margin-top: -5px;">beenhere</i> En Stock </button>
			            <button onclick="openChangeStatutModal('produit',{{$record->id}},3)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#f2dc91 !important;"> <i class="material-icons" style="margin-top: -5px;">warning</i> Stock Faible </button>
			            <button onclick="openChangeStatutModal('produit',{{$record->id}},4)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#de7676 !important;"> <i class="material-icons" style="margin-top: -5px;">do_not_disturb_on</i> Rupture de Stock </button>
			            <button onclick="openChangeStatutModal('produit',{{$record->id}},5)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#b8b8b8 !important;"> <i class="material-icons" style="margin-top: -5px;">delete</i> Abandonné </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/produit/{{$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> Nom </th>
                                            <th> Categorie </th>
                                            <th> Type </th>
                                            <th> Prix </th>
                                            <th> Prix Promotionnel </th>
                                            <th> Quantite du Stock </th>
                                       </tr>
                                    </thead>
                                    <tbody>
                                       @foreach ($history as $hist)
                                       <tr>
                                          <td> <a target="_blank" href="{{route('produit_update', [$hist->id])}}">  {{ $hist->id }} </a> </td>
                                          
                                            <td> {{ $hist->nom }} </td>
                                            <td> {{ @$hist->categorieDetail->nom }} </td>
                                            <td> {{ $hist->type }} </td>
                                            <td> {{ $hist->prix }} </td>
                                            <td> {{ $hist->prix_promotionnel }} </td>
                                            <td> {{ $hist->quantite_stock }} </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 de base </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <div class="col s3 input-field">
                                            <input id="nom" name="nom" value="{{old('nom', $record->nom)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text">
                                            <label for="nom"> Nom </label>
                                            @error('nom')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div> <div class="col s3 input-field">
                                            <select name='categorie_id' id='categorie_id' class="select2 browser-default">
                                                <option value=''></option>
                                                @foreach ($categorieRecords as $row)
                                                    <option class='option' {{($row->id == old('categorie_id', $record->categorie_id)) ? 'selected' : ''}}
                                                    value='{{$row->id}}'> {{$row->nom}}</option>
                                                @endforeach
                                            </select>
                                            <label for="categorie_id"> Categorie</label>
                                            @error('categorie_id')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                
                                <div class="col s3 input-field">
                                <select name='type' id='type' class="select2 browser-default">
                                <option value=''></option>
                                <option value="0" {{($record->type == '0') ? 'selected' : ''}}> Bocal </option>
                                <option value="1" {{($record->type == '1') ? 'selected' : ''}}> Sachet </option>
                            </select> <label for="type"> Type</label>
                                @error('type')
                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class='file-field input-field col s3'>
                                            <div class='btn'>
                                                <span>Image</span>
                                                <input name='image' id='image' type='file' value='' autocomplete='off' readonly
                                                    onfocus="this.removeAttribute('readonly');">
                                            </div>
                                            <div class='file-path-wrapper'>
                                                <input class='file-path' type='text'>
                                            </div>
                                        </div>
                                                
                                        <div class="col s12 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'>monetization_on</i> Prix & Stock </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <div class="col s3 input-field">
                                            <input id="prix" name="prix" value="{{old('prix', $record->prix)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="prix"> Prix </label>
                                            @error('prix')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        <div class="col s3 input-field">
                                            <input id="prix_promotionnel" name="prix_promotionnel" value="{{old('prix_promotionnel', $record->prix_promotionnel)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="prix_promotionnel"> Prix Promotionnel </label>
                                            @error('prix_promotionnel')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                
                                        <div class="col s3 input-field">
                                            <input id="quantite_stock" name="quantite_stock" value="{{old('quantite_stock', $record->quantite_stock)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number">
                                            <label for="quantite_stock"> Quantite du Stock </label>
                                            @error('quantite_stock')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div> 
 
                                        <div class="col s3 input-field">
                                            <input id="gainEstime" name="gainEstime" value="{{old('gainEstime', $record->gainEstime)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="gainEstime"> Gain estimé </label>
                                            @error('gainEstime')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
 
 <!--updates_fields-->                  
                                        </div>
                                            </div>
                                                <h4 class='card-title' style='margin-left: 15px; font-size: 25px;'> <i class='material-icons prefix'>queue</i> Détails supplémentaires </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <div class="col s12 input-field">
                                            <textarea id="commentaires" name="commentaires" placeholder='' class="materialize-textarea">{{old('commentaires', $record->commentaires)}}</textarea>
                                            <label for="commentaires"> Commentaires/Notes </label>
                                            @error('commentaires')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
@stop