@section('title') {{ config('app.name') }} | Crée un nouveau magasin @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 class="nk-block-head-sub float-end"><a class="back-to" href="{{ route('admin.technical-controls.index') }}"><em class="icon ni ni-arrow-left"></em><span>Retour</span></a></div>
                      </div>
                      <form method="post" action="{{ route('admin.technical-controls.store') }}" 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="name" name="name" required="" value="{{ old('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="name" name="address" required="" value="{{ old('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="time" class="form-control" id="namee" name="opening_time" required="" value="{{ old('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="time" class="form-control" id="closing_time" name="closing_time" required="" value="{{ old('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="">
                                      </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') }}">
                                        <input type="hidden" class="form-control" id="longitude" name="longitude" required="" value="{{ old('longitude') }}">
                                    </div>
                                  </div>
                              </div>
                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label class="form-label" for="type">Jours ouvrables</label>
                                      <div class="form-control-wrap">
                                      <ul class="custom-control-group">
                                          @foreach(["dimanche", "lundi","mardi","mercredi","jeudi", "vendredi","samedi"] as $day)
                                          <li>
                                              <div class="custom-control custom-checkbox custom-control-pro checked">
                                                <input type="checkbox" class="custom-control-input" name="working_days[{{ $day }}]" id="{{ $day }}" checked>
                                                <label class="custom-control-label" for="{{ $day }}">{{ str($day)->title() }}</label>
                                              </div>
                                          </li>
                                          @endforeach
                                      </ul>
                                    </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 technical_control = [36.77, 3.05];
    navigator.geolocation.getCurrentPosition(function (pos) {
      technical_control = [pos.coords.latitude, pos.coords.longitude];
      updateLatLng(location[0], location[1]);
    }, function (e) {
      console.error(e);
    }, {
      timeout: 10000,
    });

    var map = L.map('map', {center: technical_control, 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(technical_control, {
      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