@section('title') {{ config('app.name') }} | Modifié: {{ $hospital->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-inner">
                      <div class="card-head">
                        <h5 class="card-title">Modifié information</h5>
                      </div>
                      <form method="post" action="{{ route('admin.hospitals.update', $hospital->id) }}" class="form-validate" novalidate="novalidate">
                          @csrf
                          <div class="row g-gs">
                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label class="form-label" for="name">Nom</label>
                                      <div class="form-control-wrap">
                                          <div class="form-icon form-icon-right">
                                              <em class="icon ni ni-technical_control"></em>
                                          </div>
                                        <input type="text" class="form-control" id="namee" name="name" required="" value="{{ old('name') ?? $hospital->name }}">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label class="form-label" for="address">Address</label>
                                      <div class="form-control-wrap">
                                          <div class="form-icon form-icon-right">
                                              <em class="icon ni ni-pin"></em>
                                          </div>
                                        <input type="text" class="form-control" id="namee" name="address" required="" value="{{ old('address') ?? $hospital->address }}">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="form-group">
                                      <label class="form-label" for="type">Heures d'ouverture</label>
                                      <div class="form-control-wrap">
                                        <input type="text" class="form-control" id="namee" name="opening_time" required="" value="{{ old('opening_time') ?? $hospital->opening_time }}">
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="form-group">
                                      <label class="form-label" for="type">Heure de fermeture</label>
                                      <div class="form-control-wrap">
                                        <input type="text" class="form-control" id="closing_time" name="closing_time" required="" value="{{ old('closing_time') ?? $hospital->closing_time }}">
                                      </div>
                                  </div>
                              </div>
                              @foreach(range(0, 2) as $key)
                              <div class="col-md-4">
                                  <div class="form-group">
                                    <label class="form-label" for="phone_{{ $key }}">Téléphone</label>
                                      <div class="form-control-wrap">
                                        <input type="text" class="form-control" id="phone_{{ $key }}" name="phone_numbers[]" required="" value="{{ $hospital->phone_numbers[$key] }}">
                                      </div>
                                  </div>
                              </div>
                              @endforeach
                              <div class="col-12">
                                  <div class="card card-bordered h-100">
                                    <div class="card-inner">
                                      <div id="map" style="height:300px" class="embed-responsive embed-responsive-21by9"></div>
                                        <input type="hidden" class="form-control" id="latitude" name="latitude" required="" value="{{ old('latitude') ?? $hospital->latitude }}">
                                        <input type="hidden" class="form-control" id="longitude" name="longitude" required="" value="{{ old('longitude') ?? $hospital->longitude }}">
                                    </div>
                                  </div>
                              </div>
                              <div class="col-md-12">
                                  <div class="form-group">
                                      <button type="submit" class="btn btn-lg btn-primary">Sauvegarder</button>
                                  </div>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
          </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 () {
    let hospital = [{{ $hospital->latitude }}, {{ $hospital->longitude }}];
    var map = L.map('map', {center: hospital, 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(hospital, {
      draggable: true,
      autoPan: true
    }).addTo(map);
    map.on('click', function(e) {
        let {lat, lng} = e.latlng;
        marker.setLatLng([lat, lng]);
        updateLatLng(lat, lng);
    });
    marker.on('drag', function (e) {
        let {lat, lng} = marker.getLatLng();
        marker.setLatLng([lat, lng]);
        updateLatLng(lat, lng);
    });
    function updateLatLng(lat, lng) {
        $("#latitude").val(lat);
        $("#longitude").val(lng);
    }
  });
</script>
@endpush