@extends('layouts.app') @section('content')
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Propeller Button -->
<link href="{{ asset('css/floating-button.css') }}" type="text/css" rel="stylesheet" />
<!-- Propeller Accordion -->
<link href="{{ asset('css/floating-action-button.css') }}" type="text/css" rel="stylesheet" />
<!-- <link href="{{ asset('css/ekko-lightbox.css') }}" type="text/css" rel="stylesheet" /> -->
<!-- <link href="{{ asset('assets/plugins/viewer/viewer.css') }}" type="text/css" rel="stylesheet" /> -->

<script>
  function initMap(position) {
    // Default location if lat/lng are empty

    @if($lat == "" && $lng == "")
    const userLocation = { lat: position.coords.latitude, lng: position.coords.longitude }
    @else
    const userLocation = { lat: {{$lat}}, lng: {{$lng}} }
    @endif

    const map = new google.maps.Map(document.getElementById("map"), {
      center: userLocation,
      zoom: 15,
    });

    const marker = new google.maps.Marker({
      map: map,
      position: userLocation,
      draggable: true,
    });

    updateLatLng(userLocation.lat, userLocation.lng);

    marker.addListener("dragend", function (event) {
      updateLatLng(event.latLng.lat(), event.latLng.lng());
    });

    map.addListener("click", (e) => {
      const latLng = e.latLng;
      marker.setPosition(latLng);
      updateLatLng(latLng.lat(), latLng.lng());
    });

    const searchInput = document.getElementById("searchInput");
    const autocomplete = new google.maps.places.Autocomplete(searchInput);
    autocomplete.bindTo("bounds", map);

    autocomplete.addListener("place_changed", () => {
      const place = autocomplete.getPlace();
      if (!place.geometry || !place.geometry.location) {
        alert("No details available for the selected place.");
        return;
      }

      map.panTo(place.geometry.location);
      map.setZoom(15);
      marker.setPosition(place.geometry.location);
      updateLatLng(place.geometry.location.lat(), place.geometry.location.lng());
    });
  }

  function updateLatLng(lat, lng) {
    document.getElementById("lat").value =  lat.toFixed(6);
    document.getElementById("lng").value = lng.toFixed(6);
  }

  window.onload = function () {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        initMap,
        () => initMap(null), // fallback if denied
        { enableHighAccuracy: true }
      );
    } else {
      initMap(null); // fallback if geolocation is not available
    }
  };
</script>

<style>
.modal .modal-body {
    padding: 5px;
}

.form-group-default.form-group-default-select2 {
    z-index: 0;
}
</style>
<style>
.note {
  width: 500px;
  margin: 50px auto;
  font-size: 1.1em;
  color: #333;
  text-align: justify;
}
#drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
/*  width: 480px;*/
/*  margin: 50px auto;*/
  padding: 20px;
}
#drop-area.highlight {
  border-color: purple;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 100%;
  height: 100%;
  max-width: 19em;
  max-height: 19em;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;
}
.button {
  display: inline-block;
  padding: 10px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.button:hover {
  background: #ddd;
}
#fileElem {
  display: none;
}

#fileElem1 {
  display: none;
}

.AClass {
  position: absolute;
  top: 1%;
  left: 15%;
  font-size: 18px;
}

.img-wrap {
    width: 150px;
    position: relative;
    display: inline-block;
    border: 1em red solid;
    font-size: 0;
    margin: 1em;
}

.AClass {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 100;
    background-color: #FFF;
    padding: 5px 2px 2px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    opacity: .2;
    text-align: center;
    font-size: 22px;
    line-height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 1%;
    left: 15%;
    font-size: 18px;
}

@media all and (max-width: 1552px) { 
    .AClass {
        top: 0%;
        left: 0%;
    }
}

@media all and (max-width: 1296px) { 
    .AClass {
        top: 2%;
        left: 2%;
    }
}


.img-wrap:hover .AClass {
    opacity: 1;
}

.modal-title {
    font-size: 16px !important;
    float: left;
    margin-top: -16px;
}
</style>
<style>
    .viewer-toolbar > ul > li {
        padding-left: 0px;
        line-height: 0px;
    }
</style>
<style>
    #map {
      height: 400px;
      width: 100%;
      margin-top: 10px;
    }
    #coords {
      margin-top: 10px;
    }
    .pac-container {
      z-index: 9999 !important;
    }
  </style>
    <style>
        .transfer, .transfer .transfer-box, .transfer .transfer-box .transfer-list {
          width: 100% !important;
          max-width: none !important;
          box-sizing: border-box;
        }

        .transfer .transfer-box {
          display: flex;
          gap: 1rem;
        }

        .transfer .transfer-list {
          flex: 1;
          height: 300px;
          overflow-y: auto;
        }

        @media (max-width: 768px) {
          .transfer .transfer-box {
            flex-direction: column;
          }
        }
    </style>
    <style>
        .dual-listbox-wrapper,
        .transfer-demo,
        .transfer-double {
            width: 100% !important;
        }
    </style>
    <style>
        .transfer-double-content-left,
        .transfer-double-content-right {
            width: 45% !important;
        }

        .transfer-double-content-middle {
            width: 10% !important;
        }

        .transfer-double-content {
            display: flex;
            width: 100% !important;
        }
    </style>
<body>
    <div class="page-container">
        @include('incs.contentheader')
        <div class=" container-fluid container-fixed-lg" style="margin-bottom: 5em;">
            <div id="myForm">
                <form id="editorForm" method="POST" action="{{URL('/')}}/door_location{{$door_location_id != '' ? '/'.$door_location_id : ''}}" name="editorForm" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    @if($door_location_id != "")
                    <input type="hidden" name="_method" value="PUT" />
                    @endif
                    <div id="rootwizard" class="">
                       <!-- Nav tabs -->
                       <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-separator nav-stack-sm" role="tablist" data-init-reponsive-tabs="dropdownfx">
                          <li class="nav-item">
                             <a class="active d-flex align-items-center" data-toggle="tab" href="#tab1" data-target="#tab1" role="tab"><i class="material-icons fs-14 tab-icon">shopping_cart</i> <span>General Info</span></a>
                          </li>
                          <li class="nav-item">
                             <a class="d-flex align-items-center" data-toggle="tab" href="#tab2" data-target="#tab2" role="tab"><i class="material-icons fs-14 tab-icon">shelves</i> <span>SKU</span></a>
                          </li>
                       </ul>
                       <div class="tab-content">
                            <div class="tab-pane padding-20 sm-no-padding active slide-left" id="tab1">
                                <div class="row row-same-height">

                                    <div class=" container-fluid   container-fixed-lg">
                                        <div class="row row-same-height">
                                            <div class="col-md-12">
                                                <div class="form-group form-group-default"
                                                aria-required="true">
                                                <label>Door Location</label>
                                                <input class="form-control qty-input" id="userpleFormControlInput1" type="text" placeholder="Door Location" required="required" value="{{Request::old('door_location') == "" ? $door_location : Request::old('door_location')}}"" name="door_location" required="required"/>
                                                </div>
                                                 @if($errors->has('door_location'))
                                                <div class="alert alert-danger" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                    <strong>{{ $errors->first('door_location') }}</strong>
                                                </div>
                                                <script>
                                                    $(".alert-notif").hide();
                                                </script>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class=" container-fluid   container-fixed-lg">
                                        <div class="row row-same-height">
                                            <div class="col-md-12">
                                                <div class="form-group form-group-default"
                                                aria-required="true">
                                                    <label>Description</label>
                                                    <textarea class="form-control qty-input" id="userpleFormControlInput1" placeholder="Description" required="required" name="description" required="required">{{Request::old('description') == "" ? $description : Request::old('description')}}</textarea>
                                                     @if($errors->has('description'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                        <strong>{{ $errors->first('description') }}</strong>
                                                    </div>
                                                    <script>
                                                        $(".alert-notif").hide();
                                                    </script>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class=" container-fluid   container-fixed-lg">
                                        <div class="row row-same-height">
                                            <div class="col-md-6">
                                                <input id="searchInput" type="text" placeholder="Search location" style="width: 300px; padding: 8px;" autocomplete="off">
                                                <div id="map"></div>
                                              <input type="hidden" name="lat" id="lat"/>
                                              <input type="hidden" name="lng" id="lng"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane padding-20 sm-no-padding slide-left" id="tab2">
                                <div class="row row-same-height">
                                     
                                    <input id="functions_ids" type="hidden" name="functions_ids" value="{{$functions_ids}}"/>
                                    <div class="dual-listbox-wrapper" style="width: 100%;">
                                        <div style="margin-auto" id="transfer1" class="transfer-demo"></div>
                                    </div>
                                </div>
                                
                            </div>
                       </div>
                   </div>
                   <div class="menu pmd-floating-action" role="navigation">
                        <a href="/home"
                            class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-info"
                            data-title="Home">
                            <span class="pmd-floating-hidden">Home</span>
                                <i class='ace-icon fa fa-home bigger-260'></i>
                        </a>

                        <button onclick="submitForm();" type="button" id="btnSave" name="btnSave"
                            class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-success"
                            data-title="Save Request">
                            <span class="pmd-floating-hidden">Save Request</span>
                            <i class='ace-icon fa fa-save bigger-260'></i>
                        </button>

                        <a href="javascript:void(0);"
                            class="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-info"
                            data-title="Actions">
                            <span class="pmd-floating-hidden">Primary</span>
                            <i class="material-icons pmd-sm">touch_app</i>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
<body>

    @endsection
    @section('script')
    <script src="{{ config("app.cdn") . "/js/modern_trade/editor.js" . "?v=" . config("app.version") }}"></script>
    <script>
        @if(isset($expenseHeaderData))
            var isEditable = 0;
        @else
            var isEditable = 1;
        @endif
    </script>

    <script>
    $(function() {
        $(".mt_settings").addClass('open');
        $(".mt_settings").addClass('active');
        $(".icon-thumbnail").removeClass('bg-success');
        $("#mtSettingList").css('display', 'block');
        $(".mt_door_location").addClass('active');
    });
    </script>
    <script>
      function initMap(position) {
        // Default location if lat/lng are empty

        @if($lat == "" && $lng == "")
        const userLocation = { lat: position.coords.latitude, lng: position.coords.longitude }
        @else
        const userLocation = { lat: {{$lat}}, lng: {{$lng}} }
        @endif

        const map = new google.maps.Map(document.getElementById("map"), {
          center: userLocation,
          zoom: 15,
        });

        const marker = new google.maps.Marker({
          map: map,
          position: userLocation,
          draggable: true,
        });

        updateLatLng(userLocation.lat, userLocation.lng);

        marker.addListener("dragend", function (event) {
          updateLatLng(event.latLng.lat(), event.latLng.lng());
        });

        map.addListener("click", (e) => {
          const latLng = e.latLng;
          marker.setPosition(latLng);
          updateLatLng(latLng.lat(), latLng.lng());
        });

        const searchInput = document.getElementById("searchInput");
        const autocomplete = new google.maps.places.Autocomplete(searchInput);
        autocomplete.bindTo("bounds", map);

        autocomplete.addListener("place_changed", () => {
          const place = autocomplete.getPlace();
          if (!place.geometry || !place.geometry.location) {
            alert("No details available for the selected place.");
            return;
          }

          map.panTo(place.geometry.location);
          map.setZoom(15);
          marker.setPosition(place.geometry.location);
          updateLatLng(place.geometry.location.lat(), place.geometry.location.lng());
        });
      }

      function updateLatLng(lat, lng) {
        document.getElementById("lat").value =  lat.toFixed(6);
        document.getElementById("lng").value = lng.toFixed(6);
      }

      window.onload = function () {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            initMap,
            () => initMap(null), // fallback if denied
            { enableHighAccuracy: true }
          );
        } else {
          initMap(null); // fallback if geolocation is not available
        }
      };
    </script>
    <!-- <script>
      // Replace with your Mapbox token
      mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

      // Laravel blade fallback data (you can replace this in Blade with actual values)
      const providedLat = {{ $lat ?? 'null' }};
      const providedLng = {{ $lng ?? 'null' }};

      function initializeMap(center) {
        const map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v12',
          center: center,
          zoom: 14
        });

        const marker = new mapboxgl.Marker({ draggable: true })
          .setLngLat(center)
          .addTo(map);

        function updateDisplay(lat, lng) {
          document.getElementById('lat').value = lat.toFixed(6);
          document.getElementById('lng').value = lng.toFixed(6);
        }

        marker.on('dragend', () => {
          const lngLat = marker.getLngLat();
          updateDisplay(lngLat.lat, lngLat.lng);
        });

        map.on('click', (e) => {
          marker.setLngLat(e.lngLat);
          updateDisplay(e.lngLat.lat, e.lngLat.lng);
        });

        // Add search box
        const geocoder = new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          mapboxgl: mapboxgl
        });

        document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

        geocoder.on('result', (e) => {
          const coords = e.result.center;
          marker.setLngLat(coords);
          map.flyTo({ center: coords, zoom: 14 });
          updateDisplay(coords[1], coords[0]); // lat, lng
        });

        updateDisplay(center[1], center[0]); // lat, lng
      }

      // Determine map center
      if (providedLat !== null && providedLng !== null) {
        initializeMap([providedLng, providedLat]);
      } else if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (pos) => initializeMap([pos.coords.longitude, pos.coords.latitude]),
          () => initializeMap([121.0108906, 14.6577846]) // fallback
        );
      } else {
        initializeMap([121.0108906, 14.6577846]); // fallback if no geolocation
      }
    </script> -->
    <script type="text/javascript">
        var array = [];

        var dataArray1 = {!! json_encode($functions) !!};

        var settings1 = {
            "dataArray": dataArray1,
            "itemName": "title",
            "valueName": "id",
            height: 300,         // optional height
            width: '100%',
            "callable": function (items) {
                console.log(items)

                array = [];

                items.forEach(myFunction);

                $("#functions_ids").val(array.join(','));
            }
        };

        function myFunction(item, index){

            array.push(item.id);
        }

        $("#transfer1").transfer(settings1);
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB40XR1slRRU4Kjnp11U-EdHIEf2TUwMGI&libraries=places&callback=initMap" async defer></script>
    @endsection