@section('title') {{ config('app.name') }} | Detail profile: {{ $prestataire->name }} @endsection
@push('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
@endpush
@extends('admin.layouts.master')
@section('content')
<div class="nk-content nk-content-fluid">
  <div class="container-xl wide-lg">
      <div class="nk-content-body">
          <div class="nk-block">
              <div class="card card-bordered">
                  <div class="card-aside-wrap">
                      <div class="card-content">
                          <ul class="nav nav-tabs nav-tabs-mb-icon nav-tabs-card">
                              <li class="nav-item">
                                <a data-bs-toggle="tab" class="nav-link active" href="#userInformation"><em class="icon fas fa-user"></em><span>Informations personnelles</span></a>
                              </li>
                              <li class="nav-item">
                                  <a data-bs-toggle="tab" class="nav-link" href="#ordersTable"><em class="icon fas fa-chart-line"></em><span>Orders</span></a>
                              </li>
                              <li class="nav-item">
                                  <a data-bs-toggle="tab" class="nav-link" href="#paymentsTable"><em class="icon fas fa-money-bill"></em><span>Paiements</span></a>
                              </li>
                          </ul><!-- .nav-tabs -->
                          <div class="tab-content">
                            <div class="tab-pane active" id="userInformation">
                              <div class="card-inner">
                                  <div class="nk-block">
                                     <h5>Wilaya de travail</h5>
                                     <div class="card card-bordered card-preview">
                                       <table class="table">
                                           <thead>
                                               <tr>
                                                   <th scope="col">Code</th>
                                                   <th scope="col">Nom</th>
                                               </tr>
                                           </thead>
                                           <tbody>
                                               @forelse($prestataire->wilayas as $wilaya)
                                               <tr>
                                                 <th scope="row">{{ $wilaya->id }}</th>
                                                 <td>{{ $wilaya->name }}</td>
                                               </tr>
                                               @empty
                                               <tr>
                                                 <td colspan="2" class="text-center text-muted">Aucune wilaya assignée</td>
                                               </tr>
                                               @endforelse
                                           </tbody>
                                       </table>
                                     </div>
                                  </div>
                                  <div class="nk-block">
                                     <h5>Services</h5>
                                     <div class="card card-bordered card-preview">
                                         <table class="table">
                                             <thead>
                                                 <tr>
                                                     <th scope="col">Id</th>
                                                     <th scope="col">Nom</th>
                                                     <th scope="col">Options</th>
                                                 </tr>
                                             </thead>
                                             <tbody>
                                                 @forelse($prestataire->services as $service)
                                                 @php $options = json_decode($service->pivot->options) @endphp
                                                 <tr>
                                                   <th scope="row">{{ $service->id }}</th>
                                                   <td>{{ $service->name }}</td>
                                                   <td>{{ $options ? ($options->weights ? 'Poids: '. implode(', ', $options->weights) : '' ?? 'None') : '' }}</td>
                                                 </tr>
                                                 @empty
                                                 <tr>
                                                   <td colspan="3" class="text-center text-muted">Aucun service assigné</td>
                                                 </tr>
                                                 @endforelse
                                             </tbody>
                                         </table>
                                     </div>
                                  </div>
                                  <div class="nk-block">
                                    <div class="row g-gs">

                                      {{-- Registre de commerce --}}
                                      @php $doc = $prestataire->getFirstMedia('registre-de-commerce'); @endphp
                                      <div class="col-sm-6 col-xl-6">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Registre de commerce</h5>
                                            @if(!$doc)
                                              <span class="badge bg-warning mt-2">Aucun document</span>
                                            @else
                                              <div class="mt-2">
                                                @include('admin.prestataires.partials._media-item', ['doc' => $doc])
                                              </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>

                                      {{-- Permis de conduire --}}
                                      @php $doc = $prestataire->getFirstMedia('driving-license'); @endphp
                                      <div class="col-sm-6 col-xl-6">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Permis de conduire</h5>
                                            @if(!$doc)
                                              <span class="badge bg-warning mt-2">Aucun document</span>
                                            @else
                                              <div class="mt-2">
                                                @include('admin.prestataires.partials._media-item', ['doc' => $doc])
                                              </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>

                                      {{-- Scanners --}}
                                      @php $docs = $prestataire->getMedia('scanners'); @endphp
                                      <div class="col-12">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Scanners</h5>
                                            @if($docs->isEmpty())
                                              <span class="badge bg-warning mt-2">Aucun document</span>
                                            @else
                                              <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
                                                @foreach($docs as $doc)
                                                  @include('admin.prestataires.partials._media-item', ['doc' => $doc])
                                                @endforeach
                                              </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>

                                      {{-- Assurances --}}
                                      @php $docs = $prestataire->getMedia('insurances'); @endphp
                                      <div class="col-12">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Assurances</h5>
                                            @if($docs->isEmpty())
                                              <span class="badge bg-warning mt-2">Aucun document</span>
                                            @else
                                              <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
                                                @foreach($docs as $doc)
                                                  @include('admin.prestataires.partials._media-item', ['doc' => $doc])
                                                @endforeach
                                              </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>

                                      {{-- Cartes grises --}}
                                      @php $docs = $prestataire->getMedia('cartes-grises'); @endphp
                                      <div class="col-12">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Cartes grises</h5>
                                            @if($docs->isEmpty())
                                              <span class="badge bg-warning mt-2">Aucun document</span>
                                            @else
                                              <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
                                                @foreach($docs as $doc)
                                                  @include('admin.prestataires.partials._media-item', ['doc' => $doc])
                                                @endforeach
                                              </div>
                                            @endif
                                          </div>
                                        </div>
                                      </div>

                                      <div class="col-12">
                                        <div class="card card-bordered h-100">
                                          <div class="card-inner">
                                            <h5>Dernière position connue</h5>
                                            @if($prestataire->location)
                                            <div id="map" style="height:300px" class="embed-responsive embed-responsive-21by9"></div>
                                            @else
                                            <p class="text-muted">Position non disponible</p>
                                            @endif
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div><!-- .nk-block -->
                              </div><!-- .card-inner -->
                            </div>
                            <div class="tab-pane" id="ordersTable">
                              <div class="card-inner">
                                  <div class="nk-block">
                                    <div class="row g-2">
                                      <div class="col-sm-4">
                                          <div class="card bg-success text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h3 class="nk-wgw-title title">Orders</h3>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $prestataire->orders_count }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                      <div class="col-sm-4">
                                          <div class="card bg-primary text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h5 class="nk-wgw-title title">Terminée</h5>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $prestataire->finished_orders }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                      <div class="col-sm-4">
                                          <div class="card bg-danger text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h5 class="nk-wgw-title title">Annulé</h5>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $prestataire->canceled_orders }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                    </div>
                                    <livewire:order-prestataires-table userId="{{$prestataire->id}}" />
                                  </div><!-- .nk-block -->
                              </div><!-- .card-inner -->
                            </div>
                            <div class="tab-pane" id="paymentsTable">
                              <div class="card-inner">
                                  <div class="nk-block">
                                    <div class="row g-2">
                                      <div class="col-sm-6">
                                          <div class="card bg-success text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h3 class="nk-wgw-title title">Crédit</h3>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white" id="prestataire-credit">{{ $prestataire->credit.' '.preferences('default_currency', 'DZ') }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                      <div class="col-sm-6">
                                          <div class="card bg-warning text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h3 class="nk-wgw-title title">Total payé</h3>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white" id="prestataire-total-paid">{{ ($prestataire->payments_sum_amount ?? 0) .' '.preferences('default_currency', 'DZ') }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                    </div>
                                    <br>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddNewPayment">Ajouter un nouveau paiement</button>
                                    <div class="modal fade" tabindex="-1" id="modalAddNewPayment">
                                      <form class="form-validate is-alter" id="createForm">
                                        @csrf
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Ajouter un nouveau paiement</h5>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label class="form-label" for="pay-amount">Montant</label>
                                                        <div class="form-control-wrap">
                                                            <div class="form-text-hint">
                                                              <span class="overline-title">{{ preferences('default_currency', 'DZ') }}</span>
                                                            </div>
                                                            <input type="number" class="form-control" id="pay-amount" name="amount">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="note">Note</label>
                                                        <div class="form-control-wrap">
                                                          <textarea class="form-control no-resize" id="note" style="line-height: 20px;" name="note"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer bg-light">
                                                  <button class="btn btn-light" id="closeModal">Anuller</button>
                                                  <button class="btn btn-success" id="submitForm">Ajouter</button>
                                                </div>
                                            </div>
                                        </div>
                                      </form>
                                  </div>
                                  <livewire:prestataire-payments-table userId="{{$prestataire->id}}" />
                                  </div><!-- .nk-block -->
                              </div><!-- .card-inner -->
                            </div>
                          </div>
                      </div><!-- .card-content -->
                      <div class="card-aside card-aside-left user-aside toggle-slide toggle-slide-right toggle-break-xxl" data-content="userAside" data-toggle-screen="xxl" data-toggle-overlay="true" data-toggle-body="true">
                          <div class="card-inner-group" data-simplebar>
                              <div class="card-inner">
                                  <div class="team">
                                    <div class="user-card user-card-s2">
                                        <div class="user-avatar lg 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-info">
                                          <div class="badge bg-outline-light rounded-pill ucap">{{ $prestataire->role }}</div>
                                            <h5>{{ $prestataire->name }}</h5>
                                        </div>
                                    </div>
                                  </div>
                              </div><!-- .card-inner -->
                              <div class="card-inner">
                                <h6 class="overline-title-alt mb-2">Information personel</h6>
                                <ul class="team-info">
                                  <li><span>Address e-mail</span><span>{{ $prestataire->email }}</span></li>
                                  <li><span>Téléphone</span><span>{{ $prestataire->phone }}</span></li>
                                  <li><span>Inscrit le</span><span>{{ $prestataire->created_at->format('d M Y') }}</span></li>
                                  <li><span>Adresse e-mail vérifiée</span><span class="badge rounded-pill bg-{{ $prestataire->email_verified_at === null ? 'warning': 'success' }}">{{ $prestataire->email_verified_at === null ? 'Non vérifié' : 'Vérifié' }}</span></li>
                                  <li><span>Disponibilité</span><span class="badge rounded-pill bg-{{ $prestataire->status->color() }}">{{ $prestataire->status->label() }}</span></li>
                                  <li><span>Active</span><span class="badge rounded-pill bg-{{ $prestataire->is_active ? 'success' : 'danger' }}">{{ $prestataire->is_active ? 'Oui' : 'Non' }}</span></li>
                                  @if(!$prestataire->is_active && $prestataire->deactivation_reason)
                                  <li><span>Motif de blocage</span><span class="text-danger small">{{ $prestataire->deactivation_reason }}</span></li>
                                  @endif
                                </ul>
                              </div>
                          </div><!-- .card-inner -->
                      </div><!-- .card-aside -->
                  </div><!-- .card-aside-wrap -->
              </div><!-- .card -->
          </div><!-- .nk-block -->
      </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>
  $(document).ready(function () {
    $('#modalAddNewPayment').on('click', '#closeModal', function(e) {
        e.preventDefault();
        $('#modalAddNewPayment').modal('hide');
    });
    $('#modalAddNewPayment').on('click', '#submitForm', function(e) {
        e.preventDefault();
        let formData = new FormData($('#createForm')[0]);
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
        });
        $.ajax({
            url: "{{ route('admin.prestataires.payments.create', $prestataire->id) }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function(response) {
              $('#prestataire-payments').DataTable().ajax.reload(null, false);
              $('#prestataire-credit').text(
                response.credit + ' {{ preferences('default_currency', 'DZ') }}'
              );
              $('#prestataire-total-paid').text(
                  response.total_paid + ' {{ preferences('default_currency', 'DZ') }}'
              );
              $('#modalAddNewPayment').modal('hide');
            },
          error: function(rej) { Swal.fire('Erreur', 'Impossible', 'error'); }
        });
    });
    @if($prestataire->location)
    var map = L.map('map', {center: [{{ $prestataire->location->getLatitude() }}, {{ $prestataire->location->getLongitude() }} ], 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);
    var marker = L.marker([{{ $prestataire->location->getLatitude() }}, {{ $prestataire->location->getLongitude() }}]).addTo(map);
    @endif
  });
</script>
@endpush