@section('title') {{ config('app.name') }} | Dépannages @endsection
@extends('admin.layouts.master')
@push('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
@endpush
@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container">
        <div class="nk-content-body">
            <div class="components-preview mx-auto">
                <div class="nk-block nk-block-lg">
                    <div class="nk-block-head">
                        <div class="nk-block-head-content">
                            <h4 class="nk-block-title">Dépannages</h4>
                        </div>
                    </div>
                    <div class="card card-preview">
                        <div class="card-inner">
                          <div class="row g-gs flex-lg-row pt-5">
                            <div class="col-lg-6">
                              <div id="map" style="height:400px" class="embed-responsive embed-responsive-21by9"></div>
                            </div>
                            <div class="col-lg-6">
                                <div class="product-info mt-5">
                                    <a href="{{ route('admin.users.show', $order->user->id) }}">
                                    <div class="user-card">
                                        <div class="user-avatar lg bg-primary">
                                          @if($order->user->getFirstMedia('avatar'))
                                          <img src="{{ $order->user->getFirstMedia('avatar')?->getFullUrl('thumb') }}">
                                        @else
                                        <span>{{ substr($order->user->name, 0, 1) }}</span>
                                        @endif
                                        </div>
                                        <div class="user-info">
                                          <h5>{{ $order->user->name }}</h5>
                                        </div>
                                    </div>
                                    </a>
                                    <h4 class="product-title">{{ $order->ref }}</h4>
                                    @if($order->review)
                                    <div class="product-rating">
                                        <ul class="rating">
                                          @foreach(range(1, 5) as $star)
                                          <li><em class="icon ni ni-star{{ $star <= $order->review->note ? '-fill' : '' }}"></em></li>
                                          @endforeach
                                        </ul>
                                    </div><!-- .product-rating -->
                                    @endif
                                    @if ($order->orderable->price)
                                    <h4>Prix: <span class="product-price text-primary">{{ $order->orderable->price .' '. preferences('default_currency', 'DZ') }}</span></h4>
                                    @endif
                                    @if ($order->orderable->commission)
                                    <h4>Commission: <span class="product-price text-primary">{{ $order->orderable->commission.' '. preferences('default_currency', 'DZ') }}</span></h4>
                                    @endif
                                    <div class="product-excrept">
                                      <div class="card">
                                          <ul class="data-list is-compact">
                                              @if($order->orderable->prestataire)
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Prestataire</div>
                                                      <div class="data-value">
                                                        <a href="{{ route('admin.prestataires.show', $order->orderable->prestataire->id) }}">
                                                        <div class="user-card">
                                                            <div class="user-avatar bg-primary">
                                                              @if($order->orderable->prestataire->getFirstMedia('avatar'))
                                                            <img src="{{ $order->orderable->prestataire->getFirstMedia('avatar')?->getFullUrl('thumb') }}">
                                                            @else
                                                            <span>{{ substr($order->orderable->prestataire->name, 0, 1) }}</span>
                                                            @endif
                                                            </div>
                                                            <div class="user-name">
                                                                <h5>{{ $order->orderable->prestataire->name }}</h5>
                                                            </div>
                                                        </div>
                                                        </a>
                                                      </div>
                                                  </div>
                                              </li>
                                              @endif
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Status</div>
                                                      <div class="data-value"><span class="badge rounded-pill bg-{{ App\Enums\OrderStatus::tryFrom($order->orderable->status)->color() }}">{{  App\Enums\OrderStatus::tryFrom($order->orderable->status)->label() }}</span></div>
                                                  </div>
                                              </li>
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Sous service</div>
                                                      <div class="data-value">{{ $order->orderable->towService->name }}</div>
                                                  </div>
                                              </li>
                                              @if($order->orderable->weight)
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Poids</div>
                                                      <div class="data-value"><span class="badge rounded-pill bg-dark">{{ $order->orderable->weight }}</span></div>
                                                  </div>
                                              </li>
                                              @endif
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Lieu de départ</div>
                                                      <div class="data-value">{{ $order->orderable->pickup_address_name }}</div>
                                                  </div>
                                              </li>
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Lieu de destination</div>
                                                      <div class="data-value">{{ $order->orderable->pickup_address_name }}</div>
                                                  </div>
                                              </li>
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Distance</div>
                                                      <div class="data-value">{{ $order->orderable->distance['text'] ?? '' }}</div>
                                                  </div>
                                              </li>
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Durée</div>
                                                      <div class="data-value">{{ $order->orderable->duration['text'] ?? '' }}</div>
                                                  </div>
                                              </li>
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Créé le</div>
                                                      <div class="data-value">{{ $order->orderable->created_at->format('d/m/Y H:i') }}</div>
                                                  </div>
                                              </li>
                                              @if ($order->orderable->started_at)
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Débuté à</div>
                                                      <div class="data-value">{{ $order->orderable->started_at->format('d/m/Y H:i') }}</div>
                                                  </div>
                                              </li>
                                              @endif
                                              @if ($order->orderable->picked_up_at)
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Récupérer à</div>
                                                      <div class="data-value">{{ $order->orderable->picked_up_at->format('d/m/Y H:i') }}</div>
                                                  </div>
                                              </li>
                                              @endif
                                              @if ($order->orderable->ended_at)
                                              <li class="data-item">
                                                  <div class="data-col">
                                                      <div class="data-label">Terminé à</div>
                                                      <div class="data-value">{{ $order->orderable->ended_at->format('d/m/Y H:i') }}</div>
                                                  </div>
                                              </li>
                                              @endif
                                          </ul>
                                      </div>
                                    </div>
                                </div><!-- .product-info -->
                            </div>
                            @if ($order->prestataires->isNotEmpty())
                            <div class="col-12">
                              <h5>Prestataires qui ont été expédier</h5>
                              <div class="card">
                                <ul class="data-list is-compact">
                                    @foreach($order->prestataires as $prestataire)
                                    <li class="data-item">
                                        <div class="data-col">
                                            <div class="data-label">
                                              <a href="{{ route('admin.users.show', $prestataire->id) }}">
                                              <div class="user-card">
                                                  <div class="user-avatar bg-primary">
                                                  @if($prestataire->getFirstMedia('avatar'))
                                                  <img src="{{ $prestataire->getFirstMedia('avatar')?->getFullUrl('thumb') }}">
                                                  @else
                                                  <span>{{ substr($prestataire->name, 0, 1) }}</span>
                                                  @endif
                                                  </div>
                                                  <div class="user-name">
                                                      <h5>{{ $prestataire->name }}</h5>
                                                  </div>
                                              </div>
                                              </a>
                                            </div>
                                            <div class="data-value"><span class="badge bg-{{ App\Enums\OrderPrestataireStatus::tryFrom($prestataire->pivot->status)->color() }}">{{ App\Enums\OrderPrestataireStatus::tryFrom($prestataire->pivot->status)->label() }}</span> {{ round($prestataire->pivot->distance / 1000, 2) }} Km @if($prestataire->pivot->price){{ $prestataire->pivot->price. ' ' .preferences('default_currency', 'DZ') }}@endif</div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                          </div>
                        </div>
                    </div><!-- .card-preview -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<script src="https://unpkg.com/@elfalem/leaflet-curve@0.9.2/dist/leaflet.curve.js"></script>
<script>
  $(document).ready(function () {
    let pickup = [
      {{ $order->orderable->pickup_location->getLatitude() }},
      {{ $order->orderable->pickup_location->getLongitude() }},
    ];
    let dropoff = [
      {{ $order->orderable->dropoff_location->getLatitude() }},
      {{ $order->orderable->dropoff_location->getLongitude() }},
    ];
    var map = L.map('map', {center: pickup, zoom: 13});
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    let layerGroup = L.layerGroup();
    addMarker(pickup, "Lieu de départ", 'https://freesvg.org/storage/img/thumb/squat-marker-cyan.png');
    addMarker(dropoff, "Lieu de destination", 'https://freesvg.org/storage/img/thumb/squat-marker-purple.png');

    drawLine(pickup, dropoff);

    function addMarker(location, title, icon_url = null) {
        new L.marker(location, {
            autoPan: true,
            title: title,
            icon: L.icon({
                iconUrl: icon_url,
                iconSize: [64,64],
                iconAnchor: [32,64],
            }),
        }).addTo(map);
    }

    function drawLine(source, destination, color='red', weight=3) {
      console.log(L.polyline([source, destination]).addTo(map))
    }
  });
</script>
@endpush