@extends('layouts.pages')
@section('page')
  @include('layouts._partials.liens')
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="drive" id="drive">
          <h2>{{ __('drive.title') }}</h2>

          <form method="POST" action="{{ route('orders.store') }}">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
            <input type="hidden" name="type" id="type" value="drive" />

            <div class="row">
              <div class="col-lg-8 order-2 order-lg-1" id="driveList">
                @forelse ($products as $p)
                  <div class="bloc" id="product{{ $p->id }}">
                    <input type="hidden" name="product{{ $p->id }}[id]" value="{{ $p->id }}" />

                    <div class="actions">
                      <li>
                        <div class="btn btn-primary showComment" data-id="{{ $p->id_drive }}" data-product="{{ $p->id }}">
                          <i class="fas fa-comment-medical"></i>
                        </div>
                      </li>
                      <li>
                        <div class="btn btn-primary removeFormCart" data-id="{{ $p->id_drive }}" data-product="{{ $p->id }}">
                          <i class="far fa-trash-alt"></i>
                        </div>
                      </li>
                    </div>
                    
                    <div class="row">
                      <div class="col-4 col-md-3">
                        <div class="image" style="background-image: url('{{ $p->image ? config('app.url_backoffice').'/storage/'.$p->image : '/img/picture.png'}}');">
                          @if(config('website.drive') == 1 && $p['drive'] == 1)
                            <img src="/img/drive.svg" alt="Disponible au click & drive."/>
                          @endif
                        </div>
                      </div>
                      <div class="col-8 col-md-6">
                        <div class="content">
                          <h2>{{ $p->name }}</h2>
                          @if($p->code)
                            <div class="reference">{{ __('product.reference') }} : {{ $p->code }}</div>
                          @endif
                          <b>{{ __('product.conditioning') }} :</b> {{ $p->conditioning }} unité@if($p->conditioning)s @endif
                          @if($p->description_short)
                            <p>{{ $p->description_short }}</p>
                          @endif

                          <input type="hidden" name="product{{ $p->id }}[drive]" value="0" />
                        </div>
                      </div>
                      <div class="col-4 d-md-none"></div>
                      <div class="col-8 col-md-3 text-right">
                        <div class="row">
                          <div class="col-6 col-md-12">
                            <div class="price">
                              {{ number_format(App\Http\Controllers\Products\ProductsRulesController::price($p->id), 3, ',', ' ') }} € <small>/ HT</small>
                            </div>
                            <div class="price-unite">
                              <small>Soit
                                @if($p->conditioning)
                                  {{ number_format(App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning, 3, ',', ' ') }} € / HT
                                @else
                                  {{ number_format(App\Http\Controllers\Products\ProductsRulesController::price($p->id), 3, ',', ' ') }} € / HT
                                @endif
                              </small>
                            </div>
                          </div>
                          <div class="col-6 col-md-12">
                            <div class="quantity">
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <span class="input-group-text number-change" data-type="drive" data-product="{{ $p->id }}" data-price="{{ App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning }}" data-attr="down">-</span>
                                </div>
                                <input type="number" class="form-control number-input" name="product{{ $p->id }}[quantity]" id="quantity{{ $p->id }}" min="1" value="{{ $p->quantity ? $p->quantity : 0 }}" data-type="drive" data-old="{{ $p->quantity ? $p->quantity : 0 }}" data-product="{{ $p->id }}" data-price="{{ App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning }}">
                                <div class="input-group-append">
                                  <span class="input-group-text number-change" data-type="drive" data-product="{{ $p->id }}" data-price="{{ App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning }}" data-attr="up">+</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment-product comment{{ $p->id }}">
                      <textarea class="form-control form-comment-product" name="product{{ $p->id }}[comment]" maxlength="60" placeholder="Saisir un commentaire si nécessaire.." data-product="{{ $p->id }}"></textarea>
                      <div class="comment-limit"><span class="comment-{{ $p->id }}-nb">0</span> / 120</div>
                    </div>
                  </div>
                @empty
                  <div class="bloc">
                    <center>Votre panier est vide..</center>
                  </div>
                @endforelse
                <div class="bloc">
                  <h2>Commentaire sur la commande</h2>
                  <textarea class="form-control form-comment" name="comment" maxlength="110" placeholder="Saisir un commentaire si nécessaire.."></textarea>
                  <div class="comment-limit"><span class="comment-nb">0</span> / 110</div>
                </div>
                <div class="bloc text-right">
                  <input type="submit" class="btn btn-full btn-primary" value="Passer commande" @if($products->isEmpty()) disabled @endif/>
                </div>
              </div>
              <div class="col-lg-4 order-1 order-lg-2">
                <div class="bloc">
                  <h2>Mode de paiement</h2>
                  <div class="paiement">
                    <input type="radio" name="payment" id="species" value="species" class="check-input" checked>
                    <label for="species" class="check-label">
                      <h4>Paiement en espèce</h4>
                      <p>Commande immédiate, payez sur place.</p>
                    </label>

                    @if(config('website.monetico_enabled') == 1)
                      <input type="radio" name="payment" id="card" value="card" class="check-input">
                      <label for="card" class="check-label mb-0">
                        <h4>Paiement immédiat</h4>
                        <ul>
                          <li><img src="/img/payment_visa.svg" alt="Visa"></li>
                          <li><img src="/img/payment_master.svg" alt="MasterCard"></li>
                          <li><img src="/img/payment_american.svg" alt="American Express"></li>
                          <li><img src="/img/payment_paypal.svg" alt="Paypal"></li>
                        </ul>
                      </label>
                    @endif
                  </div>
                </div>

                <div class="bloc">
                  <h2>Date de retrait</h2>
                  <div class="drive">
                    <div class="mb-2 mt-4"><small>Sélectionner un jour</small></div>
                    <div class="days">
                      <div class="item active">
                        <div class="day">Mardi</div>
                        <div class="number">19</div>
                        <div class="month">Nov</div>
                      </div>
                      <div class="item">
                        <div class="day">Mercredi</div>
                        <div class="number">20</div>
                        <div class="month">Nov</div>
                      </div>
                    </div>

                    <div class="mb-2 mt-4"><small>Sélectionner une heure</small></div>
                    <div class="hours">
                      <div class="row">
                        <div class="col-4"><div class="item active">09H00 - 09h10</div></div>
                        <div class="col-4"><div class="item">09H10 - 09H20</div></div>
                        <div class="col-4"><div class="item">09H20 - 09H30</div></div>
                        <div class="col-4"><div class="item disable">09H30 - 09H40</div></div>
                        <div class="col-4"><div class="item">09H40 - 09H50</div></div>
                        <div class="col-4"><div class="item">09H50 - 10H00</div></div>
                        <div class="col-4"><div class="item">10H00 - 10H10</div></div>
                        <div class="col-4"><div class="item">10H10 - 10H20</div></div>
                        <div class="col-4"><div class="item">10H20 - 10H30</div></div>
                        <div class="col-4"><div class="item">10H30 - 10H40</div></div>
                        <div class="col-4"><div class="item">10H40 - 10H50</div></div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="bloc">
                  <h2>Résumé des commandes</h2>

                  <div class="total">
                    <div class="row">
                      <div class="col">Sous total HT</div>
                      <div class="col text-right"><span id="sousTotal">{{ $total }}</span> €</div>
                    </div>

                    <hr/>

                    <div class="row font-weight-bold mb-4">
                      <div class="col">Total</div>
                      <div class="col text-right"><span id="total">{{ $total }}</span> €</div>
                    </div>
                  </div>

                  <input type="submit" class="btn btn-full btn-primary btn-drive" value="Passer commande" onclick="javascript=this.disabled = true; form.submit();" @if($products->isEmpty()) disabled @endif>

                  @if($time)
                    <div class="alert alert-danger mb-0 mt-4" id="order-wait-time">
                      Vous avez passé une commande il y a moins de 5 mins, vous devez attendre <span id="order-wait-time-interval" class="time" data-time="{{ $time }}"></span>.
                    </div>
                  @endif
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection