122 lines
6.4 KiB
PHP
122 lines
6.4 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container mt-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>{{ $title }}</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form wire:submit.prevent="save" novalidate>
|
|
<div class="row mb-3">
|
|
<label for="name" class="col-sm-4 col-form-label">Station Name</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" wire:model="name" placeholder="Station Name">
|
|
@error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="location" class="col-sm-4 col-form-label">Station Location</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('location') is-invalid @enderror" id="location" wire:model="location" placeholder="Complete Station Information">
|
|
@error('location') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="map_URL" class="col-sm-4 col-form-label">Map URL</label>
|
|
<div class="col-sm-8">
|
|
<textarea class="form-control @error('map_URL') is-invalid @enderror" id="map_URL" wire:model="map_URL" placeholder=""></textarea>
|
|
@error('map_URL') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="lat" class="col-sm-4 col-form-label">Latitude</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('lat') is-invalid @endregion" id="lat" wire:model="lat" placeholder="">
|
|
@error('lat') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="long" class="col-sm-4 col-form-label">Longitude</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('long') is-invalid @endregion" id="long" wire:model="long" placeholder="">
|
|
@error('long') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="code" class="col-sm-4 col-form-label">Station Code</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('code') is-invalid @endregion" id="code" wire:model="code" placeholder="Station Code">
|
|
@error('code') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="BranchId" class="col-sm-4 col-form-label">Branch</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control @error('BranchId') is-invalid @endregion" id="BranchId" wire:model="BranchId">
|
|
@foreach ($branches as $branch)
|
|
<option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('BranchId') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="contact_number" class="col-sm-4 col-form-label">Contact Number</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control @error('contact_number') is-invalid @endregion" id="contact_number" wire:model="contact_number" placeholder="Contact Number">
|
|
@error('contact_number') <div class="invalid-feedback">{{ $message }}</div> @endregion
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn btn-secondary" wire:click="cancel">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="save">
|
|
@if($loading) <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving... @else Save @endif
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<!-- After the form fields, add this -->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-4 col-form-label">Map</label>
|
|
<div class="col-sm-8">
|
|
<div id="map" style="height: 400px; width: 100%; margin-bottom: 20px;"></div>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARzdIELzb2Uvoly4-Er4B7-QzXKr4j3bg&libraries=places"></script>
|
|
<script>
|
|
function initMap() {
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
center: { lat: 16.1505, lng: 119.9856 },
|
|
zoom: 15,
|
|
});
|
|
const marker = new google.maps.Marker({
|
|
position: { lat: 16.1505, lng: 119.9856 },
|
|
map: map,
|
|
draggable: true,
|
|
});
|
|
|
|
google.maps.event.addListener(marker, 'dragend', function(event) {
|
|
document.querySelector('[wire\\:model="lat"]').value = event.latLng.lat();
|
|
document.querySelector('[wire\\:model="long"]').value = event.latLng.lng();
|
|
@this.set('lat', event.latLng.lat());
|
|
@this.set('long', event.latLng.lng());
|
|
});
|
|
}
|
|
|
|
window.initMap = initMap;
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection |