@extends('layouts.pages')
@section('page')
  @include('layouts._partials.liens')
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="shopcart" id="shopcart">
          <h2>{{ __('shopcart.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="shipping" />

            <div class="row">
              <div class="col-lg-8 order-2 order-lg-1" id="shopcartList">
                @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_shopcart }}" data-product="{{ $p->id }}">
                          <i class="fas fa-comment-medical"></i>
                        </div>
                      </li>
                      <li>
                        <div class="btn btn-primary removeFormCart" data-id="{{ $p->id_shopcart }}" data-product="{{ $p->id }}">
                          <i class="far fa-trash-alt"></i>
                        </div>
                      </li>
                    </div>

                    <div class="row">
                      <div class="col-4 col-xxl-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-xxl-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

                          
                          <div class="quantity mt-3 d-none d-md-block">
                            <div class="input-group">
                              @php($productPrice = App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning)
                              @foreach ([25, 10, 5, 1] as $amount)
                              <span
                                class="input-group-text bg-danger border-0 number-change"
                                data-amount="{{ $amount }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="down" >{{ $amount }}</span>
                              @endforeach
                              <span
                                class="input-group-text"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-amount="1"
                                data-type="cart"
                                data-attr="down" disabled>-</span>

                              <input
                                type="number"
                                class="form-control number-input text-center"
                                name="product{{ $p->id }}[quantity]"
                                id="quantity{{ $p->id }}"
                                min="1"
                                value="{{ $p->quantity ? $p->quantity : 0 }}"
                                data-type="cart"
                                data-old="{{ $p->quantity ? $p->quantity : 0 }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}">

                              <span
                                class="input-group-text"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="up"
                                data-amount="1" disabled>+</span>
                              @foreach ([1, 5, 10, 25] as $amount)
                              <span
                                class="input-group-text bg-success border-0 number-change"
                                data-amount="{{ $amount }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="up">{{ $amount }}</span>
                              @endforeach
                            </div>
                          </div>

                          <div class="quantity mt-3 d-md-none">
                            <div class="input-group">
                              @php($productPrice = App\Http\Controllers\Products\ProductsRulesController::price($p->id)*$p->conditioning)
                              @foreach ([25, 10, 5, 1] as $amount)
                              <span
                                class="input-group-text bg-danger border-0 number-change justify-content-center w-25"
                                data-amount="{{ $amount }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="down" >{{ $amount }}</span>
                              @endforeach
                            </div>
                            <div class="input-group">
                              <span
                                class="input-group-text"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-amount="1"
                                data-type="cart"
                                data-attr="down" disabled>-</span>

                              <input
                                type="number"
                                class="form-control number-input text-center"
                                name="product{{ $p->id }}[quantity]"
                                id="quantity{{ $p->id }}"
                                min="1"
                                value="{{ $p->quantity ? $p->quantity : 0 }}"
                                data-type="cart"
                                data-old="{{ $p->quantity ? $p->quantity : 0 }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}">

                              <span
                                class="input-group-text"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="up"
                                data-amount="1" disabled>+</span>
                            </div>
                            <div class="input-group">
                              @foreach ([1, 5, 10, 25] as $amount)
                              <span
                                class="input-group-text bg-success border-0 number-change justify-content-center w-25"
                                data-amount="{{ $amount }}"
                                data-product="{{ $p->id }}"
                                data-price="{{ $productPrice }}"
                                data-type="cart"
                                data-attr="up">{{ $amount }}</span>
                              @endforeach
                            </div>
                          </div>

                          <input type="hidden" name="product{{ $p->id }}[drive]" value="0" />
                        </div>
                      </div>
                      <div class="col-4 d-xxl-none"></div>
                      <div class="col-8 col-xxl-3 text-right align-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>
                        </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="classic" value="classic" class="check-input" checked>
                    <label for="classic" class="check-label">
                      <h4>Paiement en compte</h4>
                      <p>Commande immédiate, payez ultérieurement (facturation classique).</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>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-shopcart" value="Passer commande" onclick="javascript=this.disabled = true; $('#loading').modal('show'); 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 class="modal fade" id="loading" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-body">
                  <img src="/img/loading.jpg" alt="Chargement...">
                  <h2>Veuillez patienter</h2>
                  <p>Nous enregistrons votre commande, cela peut prendre du temps.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection