@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('commande_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('commande_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('commande',{{$record->id}},2)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#8ab6e6 !important;"> <i class="material-icons" style="margin-top: -5px;">check_box</i> Confirmée </button>
			            <button onclick="openChangeStatutModal('commande',{{$record->id}},3)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#aa91d9 !important;"> <i class="material-icons" style="margin-top: -5px;">local_shipping</i> Prête pour retrait/expédition </button>
			            <button onclick="openChangeStatutModal('commande',{{$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('commande',{{$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>
			            <button onclick="openChangeStatutModal('commande',{{$record->id}},6)"  type="button" class="btn indigo" style="margin-left: 1rem; margin-top: 8px; background-color:#b8b8b8 !important;"> <i class="material-icons" style="margin-top: -5px;">keyboard_return</i> Retourné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/commande/{{$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> Utilisateur </th>
                                          <th> Champs modifiés </th>
                                          <th> Anciennes valeurs </th>
                                          <th> Nouvelles valeurs </th>
                                          <th> Date de modification </th>
                                       </tr>
                                    </thead>
                                    <tbody>
    @foreach ($history as $hist)
        @php
            $modifs = json_decode($hist->modifications, true);

            // Safely handle the possibility of empty or incorrect modification data
            $champs = isset($modifs['champs']) ? implode(' - ', $modifs['champs']) : '';
            $ancienneValeurs = isset($modifs['ancienne_valeurs']) ? implode(' - ', $modifs['ancienne_valeurs']) : '';
            $nouvelleValeurs = isset($modifs['nouvelles_valeurs']) ? implode(' - ', $modifs['nouvelles_valeurs']) : '';
        @endphp

        <tr>
            <td>
                <a target="_blank" href="{{ route('commande_update', [$hist->ressource_id]) }}">
                    {{ $hist->ressource_id }}
                </a>
            </td>
            <td>{{ $hist->name . ' ' . $hist->first_name }}</td>
            <td>{{ $champs }}</td>
            <td>{{ $ancienneValeurs }}</td>
            <td>{{ $nouvelleValeurs }}</td>
            <td>{{ $hist->datetime_fr }}</td>
        </tr>
    @endforeach
</tbody>

                                 </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="reference" name="reference" value="{{old('reference', $record->reference)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text">
                                            <label for="reference"> Reference </label>
                                            @error('reference')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div> <div class="col s3 input-field">
                                            <select name='client' id='client' class="select2 browser-default">
                                                <option value=''></option>
                                                @foreach ($clientRecords as $row)
                                                    <option class='option' {{($row->id == old('client', $record->client)) ? 'selected' : ''}}
                                                    value='{{$row->id}}'> {{$row->nom}}</option>
                                                @endforeach
                                            </select>
                                            <label for="client"> Client</label>
                                            @error('client')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                                
                                        <div class="col s3 input-field">
                                            <input id="dateCommande" name="dateCommande" value="{{old('dateCommande', $record->dateCommande)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateCommande"> Date Commande </label>
                                            @error('dateCommande')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>    
                                        
                                        <div class="col s3 input-field">
                                            <input id="dateLivraison" name="dateLivraison" value="{{old('dateLivraison', $record->dateLivraison)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="text" class="datepicker">
                                            <label for="dateLivraison"> Date prévue de livraison </label>
                                            @error('dateLivraison')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>            
                                        </div>
                                            </div>
                                                
                                            

                                            <h4 class='card-title' style='margin-bottom:20px; margin-left: 15px; font-size: 25px;'> <i class='material-icons prefix'>shopping_cart</i> Produits de la Commande </h4> 
                                            
                                                
                                                <div class='col s12 m12'>

                                            <div id="produits_div" style=""> 








                                           




                                       @foreach($produitscommande as $prod)
                                        <div class="col s12 m12">
                                            <div class="row">
                                                <div class="col s3 input-field">
                                                    
                                                    <select name='produits[]'  class="select2 browser-default">
                                                         <option value=''></option>
                                                         @foreach ($produits as $produit)
                                                            @php
                                                            $typeLabel = match((int) $produit->type) {
                                                                0 => '- Bocal',
                                                                1 => '- Sachet',
                                                                default => '',
                                                            };
                                                            @endphp
                                                        <option class='option' value='{{$produit->id}}' data-prix="{{$produit->prix}}" data-gainestime="{{$produit->gainEstime ?? 0}}" {{($produit->id == $prod->produit_id) ? 'selected' : ''}}> {{$produit->nom}} {{$typeLabel}}</option>
                                                        @endforeach
                                                        
                                                    </select>
                                                    <label > Produit </label>
                                                </div>
                                                <div class="col s1 input-field">
                                                    <input name="qte[]" value="{{$prod->quantite}}" placeholder="" type="number">
                                                    <label > Qte </label>
                                                </div>
                                                <div class="col s2 input-field">
                                                    <input name="prix[]"  value="{{$prod->prix}}" placeholder="" type="number">
                                                    <label > Prix </label>
                                                </div>
                                                <div class="col s2 input-field">
                                                    <input name="prix-total[]" disabled value="{{$prod->tarif_total}}" placeholder="" type="text">
                                                    <label > Prix total </label>
                                                </div>
                                                
                                                <div class="col s3 input-field">
                                                    <textarea name="observations[]" placeholder="" class="materialize-textarea">{{$prod->commentaire}}</textarea>
                                                    <label > Observation </label>
                                                </div>
                                                <div class="col s11 m1 input-field">
                                                    <i class="material-icons block-remove" style="color:red;     margin-top: 10px;    cursor: pointer;">delete</i>
                                                </div>
                                                <input name="gainEstime[]" value="{{$prod->gainEstime ?? 0}}" placeholder="" type="hidden">
                                            </div>
                                        </div>
                                        @endforeach

                                        
                                    </div>

                                    <div class="col s12 m12" style="margin: 5px 0px 25px;">
                                        <a href="#!" id="add_produit"> <i class="material-icons">add</i>
                                            Ajout </a>
                                    </div>


                                    <br><br><br>




                                    </div>


                                                <h4 class='card-title' style='margin-left: 15px; font-size: 25px;'> <i class='material-icons prefix'>monetization_on</i> Informations Financières </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <!-- <div class="col s3 input-field">
                                            <input id="total" name="total" value="{{old('total', $record->total)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="total"> Montant total </label>
                                            @error('total')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>                 -->
                                                         
                                        <div class="col s3 input-field">
                                            <input id="fraisLivraison" name="fraisLivraison" value="{{old('fraisLivraison', $record->fraisLivraison)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="fraisLivraison"> Frais de Livraison </label>
                                            @error('fraisLivraison')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
 
 <!--updates_fields-->
                                        <div class="col s3 input-field">
                                            <input id="remise" name="remise" value="{{old('remise', $record->remise)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="remise"> Remise </label>
                                            @error('remise')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div>
                                                         
                                        <!-- <div class="col s3 input-field">
                                            <input id="gainTotal" name="gainTotal" value="{{old('gainTotal', $record->gainTotal)}}" autocomplete="off" placeholder=''
                                            readonly onfocus="this.removeAttribute('readonly');" type="number" step="0.01">
                                            <label for="gainTotal"> Gain Total </label>
                                            @error('gainTotal')
                                                <span class="helper-text materialize-red-text">{{ $message }}</span>
                                            @enderror
                                        </div> -->
 
                                <div class="col s3 input-field">
                                <select name='modePaiement' id='modePaiement' class="select2 browser-default">
                                <option value=''></option>
                            <option value="0" {{($record->modePaiement == '0') ? 'selected' : ''}}> Paiement à la livraison </option> 
</select> <label for="modePaiement"> Mode de paiement</label>
                                @error('modePaiement')
                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col s3 input-field">
                                <select name='modeReglement' id='modeReglement' class="select2 browser-default">
                                <option value=''></option>
                            <option value="0" {{($record->modeReglement == '0') ? 'selected' : ''}}> Espèce </option> 
</select> <label for="modeReglement"> Mode de règlement</label>
                                @error('modeReglement')
                                    <span class="helper-text materialize-red-text">{{ $message }}</span>
                                @enderror
                            </div>
                                                
                                        </div>
                                            </div>
                                            <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'>add_to_photos</i> Informations Supplémentaires </h4> 
                                            <div class='col s12 m12'>
                                                <div class='row'>                
                                        <div class="col s12 input-field">
                                            <textarea id="comments" name="comments" placeholder='' class="materialize-textarea">{{old('comments', $record->comments)}}</textarea>
                                            <label for="comments"> Commentaires/Notes </label>
                                            @error('comments')
                                                <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>

<div id="new_produit" style="display: none;">
<div class="col s12 m12">

   
<div class="row">
                                                <div class="col s3 input-field">
                                                    
                                                    <select name='produits[]'  class=" browser-default">
                                                        <option value=''></option>
                                                         @foreach ($produits as $produit)
                                                            @php
                                                            $typeLabel = match((int) $produit->type) {
                                                                0 => '- Bocal',
                                                                1 => '- Sachet',
                                                                default => '',
                                                            };
                                                            @endphp
                                                        <option class='option' value='{{$produit->id}}' data-prix="{{$produit->prix}}" data-gainestime="{{$produit->gainEstime ?? 0}}"> {{$produit->nom}} {{$typeLabel}}</option>
                                                        @endforeach
                                                        
                                                    </select>
                                                    <label > Produit </label>
                                                </div>
                                                <div class="col s1 input-field">
                                                    <input name="qte[]" value="1" placeholder="" type="number">
                                                    <label > Qte </label>
                                                </div>
                                                <div class="col s2 input-field">
                                                    <input name="prix[]"  value="0" placeholder="" type="number">
                                                    <label > Prix </label>
                                                </div>
                                                <div class="col s2 input-field">
                                                    <input name="prix-total[]" disabled value="0" placeholder="" type="text">
                                                    <label > Prix total </label>
                                                </div>
                                                
                                                <div class="col s3 input-field">
                                                    <textarea name="observations[]" placeholder="" class="materialize-textarea"></textarea>
                                                    <label > Observation </label>
                                                </div>
                                                <div class="col s11 m1 input-field">
                                                    <i class="material-icons block-remove" style="color:red;     margin-top: 10px;    cursor: pointer;">delete</i>
                                                </div>
                                                <input name="gainEstime[]"  value="0" placeholder="" type="hidden">
                                            </div>

    </div>
</div>
@stop



@section('js')

<script>
$(document).ready(function() {


    
    $(document).on('click', '.block-remove', function() {
        $(this).parent().parent().parent().remove();
    });

    $('#add_produit').click(function() {
        var content = $("#new_produit").clone().html();
        $("#produits_div").append(content);
        $("#produits_div select").select2();
    });

    $(document).on('change', "select[name='produits[]']", function(e) {
        var prix = $(this).find(':selected').data('prix');
        var gainEstime = $(this).find(':selected').data('gainestime');
        var qte = 1;
        var prixTotal = prix * qte;

        $(this).parent().parent().find('input[name="qte[]"]').val(1);
        $(this).parent().parent().find('input[name="prix[]"]').val(prix);
        $(this).parent().parent().find('input[name="prix-total[]"]').val(prixTotal.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
        $(this).parent().parent().find('input[name="gainEstime[]"]').val(gainEstime);
    });


    $(document).on('input', "input[name='qte[]'], input[name='prix[]']", function(e) {
        var prix = $(this).parent().parent().find('input[name="prix[]"]').val();
        var qte = $(this).parent().parent().find('input[name="qte[]"]').val();
        var prixTotal = prix * qte;
  
        $(this).parent().parent().find('input[name="prix[]"]').val(prix);
        $(this).parent().parent().find('input[name="prix-total[]"]').val(prixTotal.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    });

    
    



});
</script>

@stop