Server : Apache System : Linux 145.162.205.92.host.secureserver.net 5.14.0-611.45.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Apr 1 05:56:53 EDT 2026 x86_64 User : tradze ( 1001) PHP Version : 8.1.34 Disable Function : NONE Directory : /home/tradze/public_html/app/Modules/Schedules/Resources/Views/admin/ |
@extends('admin.layouts.profile')
@section('content')
<div class="page-content">
<!-- PAGE HEADER -->
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="{!! url('') !!}">Home</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#">Global Travel Costs</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#">Area Polygon</a>
</li>
</ul>
</div>
<!-- PAGE CONTENT -->
<div class="row margin-top-20">
<div class="col-md-12">
<div class="portlet light">
<div class="portlet-title">
<div class="caption caption-md">
<span class="caption-subject font-blue-madison bold uppercase">
Global Travel Cost Coverage Area
</span>
</div>
</div>
<div class="portlet-body">
<!-- FULL SCREEN MAP SECTION -->
<div class="travel-map-wrapper">
<!-- TOOLBAR -->
<div class="map-toolbar">
<button type="button" class="btn blue" id="enable_transport_Polygon">
Add new polygon
</button>
<button type="button" class="btn blue" id="reset_TravelPolygon" style="display:none;">
Reset
</button>
<button type="button" class="btn blue" id="delete_all_travel_polygons" style="display:none;">
Delete All Locations
</button>
<input id="pac-travel-input"
class="form-control"
type="text"
placeholder="Search Location">
</div>
<!-- MAP -->
<div id="map_canvas_travel_cost"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PRICE POPUP MODAL -->
<div class="modal fade bs-modal-md" id="travel_price_popup" tabindex="-1">
<div class="modal-dialog modal-md" style="margin-top: 15%">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<strong>Add Price for this Region</strong>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8">
<label>Travel Cost:</label>
<input type="number"
id="travel_cost"
class="form-control"
value="0">
</div>
<div class="col-md-4" style="margin-top:25px;">
<button type="submit"
id="save_travel_costs"
class="btn blue">
Save
</button>
<button type="button"
class="btn default cancel_price"
data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts_custom2')
<!-- GOOGLE MAP API -->
<script
src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,drawing&key={{ config('googlemaps.key') }}">
</script>
<style>
/* FULL PAGE MAP STYLE */
.travel-map-wrapper {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
border: 2px solid #ddd;
}
.map-toolbar {
padding: 15px;
background: #fff;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid #ddd;
z-index: 99;
}
#pac-travel-input {
width: 250px;
}
#map_canvas_travel_cost {
flex: 1;
width: 100%;
height: 100%;
}
.pac-container {
z-index: 9999 !important;
}
</style>
<script>
google.maps.event.addDomListener(window, "load", initialize);
var travel_cost_map;
var travel_drawingManager;
var selectedShape = null;
var travel_polygonArray1 = [];
function initialize() {
var polyOptions = {
strokeWeight: 1,
fillOpacity: 0.35,
editable: true,
fillColor: '#FF0000'
};
/* MAP INIT */
travel_cost_map = new google.maps.Map(
document.getElementById("map_canvas_travel_cost"), {
center: new google.maps.LatLng(51.5074, 0.1278),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
/* DRAWING MANAGER */
travel_drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControl: false,
polygonOptions: polyOptions
});
travel_drawingManager.setMap(travel_cost_map);
/* SEARCH BOX */
var input = document.getElementById("pac-travel-input");
var searchBox = new google.maps.places.SearchBox(input);
travel_cost_map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
searchBox.addListener("places_changed", function() {
var places = searchBox.getPlaces();
if (places.length == 0) return;
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) return;
bounds.extend(place.geometry.location);
});
travel_cost_map.fitBounds(bounds);
});
/* ENABLE DRAW BUTTON */
$("#enable_transport_Polygon").click(function() {
travel_drawingManager.setDrawingMode(
google.maps.drawing.OverlayType.POLYGON
);
});
/* POLYGON COMPLETE EVENT */
google.maps.event.addListener(travel_drawingManager, 'polygoncomplete', function(polygon) {
// This is important (stop drawing after complete)
travel_drawingManager.setDrawingMode(null);
// Create same structure as old code
var travel_polygonArray = [];
for (var i = 0; i < polygon.getPath().getLength(); i++) {
travel_polygonArray.push(
polygon.getPath().getAt(i).toUrlValue(6)
);
}
// Push inside main array (EXACT old behavior)
travel_polygonArray1.push(travel_polygonArray);
console.log("travel_polygonArray1:", travel_polygonArray1);
// Show Reset button
$('#reset_TravelPolygon').show();
// Store selected polygon
selectedShape = polygon;
// Open price popup
$("#travel_price_popup").modal('show');
});
/* LOAD EXISTING POLYGONS */
loadExistingPolygons();
}
/* LOAD demonstrating polygons */
function loadExistingPolygons() {
var CSRF_TOKEN = "{{ csrf_token() }}";
$.ajax({
url: "{{ route('admin.schedules.global.travel.cost.data') }}",
method: "POST",
data: {
_token: CSRF_TOKEN
},
dataType: "json"
}).done(function(response) {
console.log("Polygon Response:", response);
if (!response.data) return;
// Show Delete All button
$("#delete_all_travel_polygons").show();
// Loop through polygons (1,2,3...)
Object.keys(response.data).forEach(function(polygonKey) {
let pointsArray = response.data[polygonKey];
let path = [];
// Extract LatLng points
pointsArray.forEach(function(point) {
path.push(
new google.maps.LatLng(
parseFloat(point.lat),
parseFloat(point.lng)
)
);
});
// Price stored in first point
let polygonPrice = pointsArray[0].price;
// Draw polygon on map
let polygon = new google.maps.Polygon({
paths: path,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
editable: true,
map: travel_cost_map
});
// Click polygon → show price
google.maps.event.addListener(polygon, "click", function() {
selectedShape = polygon;
$("#reset_TravelPolygon").show();
});
});
});
}
/* SAVE POLYGON COST */
$("#save_travel_costs").click(function() {
var CSRF_TOKEN = "{{ csrf_token() }}";
var region_price = $("#travel_cost").val();
if (travel_polygonArray1.length === 0) {
alert("Please draw polygon first!");
return;
}
$.ajax({
url: "{{ route('admin.schedules.global.travel.cost.add') }}",
method: "POST",
data: {
_token: CSRF_TOKEN,
polygondata: travel_polygonArray1,
region_price: region_price
},
dataType: "json"
}).done(function(response) {
alert(response.message);
//Reset values
travel_polygonArray1 = [];
$("#travel_cost").val(0);
// Close popup
$("#travel_price_popup").modal("hide");
// Reload map polygons
location.reload();
});
});
/* RESET SELECTED POLYGON */
$("#reset_TravelPolygon").click(function() {
if (!selectedShape) {
alert("Please select a polygon first!");
return;
}
if (!confirm("Are you sure want to delete this polygon?")) return;
// ✅ Collect polygon coordinates
let remove_listarr = [];
for (var i = 0; i < selectedShape.getPath().getLength(); i++) {
remove_listarr.push(
selectedShape.getPath().getAt(i).toUrlValue(6)
);
}
console.log("Deleting Coordinates:", remove_listarr);
// ✅ Remove from Map
selectedShape.setMap(null);
// ✅ Ajax Delete from Database
var CSRF_TOKEN = "{{ csrf_token() }}";
$.ajax({
url: "{{ route('admin.schedules.global.travel.cost.delete') }}",
method: "POST",
data: {
_token: CSRF_TOKEN,
remove_locations: remove_listarr
},
dataType: "json"
}).done(function(response) {
alert(response.message);
selectedShape = null;
$("#reset_TravelPolygon").hide();
});
});
/* DELETE ALL POLYGONS */
$("#delete_all_travel_polygons").click(function() {
if (!confirm("Remove all travel cost locations?")) return;
var CSRF_TOKEN = "{{ csrf_token() }}";
$.ajax({
url: "{{ route('admin.schedules.global.travel.cost.delete.all') }}",
method: "POST",
data: {
_token: CSRF_TOKEN
},
dataType: "json",
}).done(function(response) {
alert(response.message);
location.reload();
});
});
/* CANCEL PRICE POPUP */
$(".cancel_price").click(function() {
if (selectedShape) {
selectedShape.setMap(null);
}
selectedShape = null;
travel_polygonArray1 = [];
});
</script>
@endsection