@extends('layout.master', ['headerTitle' => 'Edit Order'])

@section('style')
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<style>
    .error {
        color: red;
    }

    .form-control.error {
        border-color: red;
    }
</style>
@endsection

@section('body')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="container-xxl" id="kt_content_container">
        <div>
            <div class="card card-flush h-lg-100" id="kt_contacts_main">
                <div class="card-header pt-7" id="kt_chat_contacts_header">
                    <div class="card-title">
                        <i class="fas fa-ad me-2" style="font-size: 22px;"></i>
                        <h2>Edit Order</h2>
                    </div>
                    <div class="d-flex align-items-center py-3 py-md-1">
                        <a href="{{ url()->previous() }}" class="btn btn btn-dark">Back</a>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <form id="order_add_form" class="form" action="{{ route('order.update', $editOrder->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Title</span>
                                    </label>
                                    <input type="text" id="title" class="form-control form-control-solid" name="title" placeholder="Title" value="{{ $editOrder->title }}" required />
                                    <span style="color:red">@error('title'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Warehouse</span>
                                    </label>
                                    <select id="warehouse" name="warehouse" aria-label="Select a warehouse" data-control="select2" data-placeholder="Select a warehouse..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option></option>
                                        @foreach($allWarehouses as $warehouse)
                                        <option value="{{ $warehouse->id }}" @if ($editOrder->warehouse_id == $warehouse->id) selected @endif>{{ $warehouse->name }}</option>
                                        @endforeach
                                    </select>
                                    <span style="color:red">@error('warehouse'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <!-- <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Cargo</span>
                                    </label>
                                    <select id="cargo" name="cargo" aria-label="Select a cargo" data-control="select2" data-placeholder="Select a cargo..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option></option>
                                        @foreach($allCargos as $cargo)
                                        <option value="{{ $cargo->id }}" @if ($editOrder->cargo_id == $cargo->id) selected @endif>{{ $cargo->name }}</option>
                                        @endforeach
                                    </select>
                                    <span style="color:red">@error('cargo'){{$message}}@enderror</span>
                                </div>
                            </div> -->
                        </div>

                        @if (Auth::user()->role_id == 1)
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Description</span>
                                    </label>
                                    <textarea type="text" id="desc" class="form-control form-control-solid" name="desc" placeholder="Description" value="{{ old('desc') }}" required cols="30" rows="3">{{ $editOrder->description }}</textarea>
                                    <span style="color:red">@error('desc'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Company</span>
                                    </label>
                                    <select id="company" name="company" aria-label="Select a company" data-control="select2" data-placeholder="Select a company..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option></option>
                                        @foreach($allcompanies as $company)
                                        <option value="{{ $company->id }}" @if ($editOrder->company_id == $company->id) selected @endif>{{ $company->name }}</option>
                                        @endforeach
                                    </select>
                                    <span style="color:red">@error('company'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold form-label mt-3">
                                    <span class="required">Description</span>
                                </label>
                                <textarea type="text" id="desc" class="form-control form-control-solid" name="desc" placeholder="Description" value="{{ old('desc') }}" required cols="30" rows="3">{{ $editOrder->description }}</textarea>
                                <span style="color:red">@error('desc'){{$message}}@enderror</span>
                            </div>
                        </div>
                        @endif

                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Contact no</span>
                                    </label>
                                    <input type="text" id="contact" class="form-control form-control-solid" name="contact" placeholder="Contact no" value="{{ $editOrder->contact }}" required />
                                    <span style="color:red">@error('contact'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Work Type</span>
                                    </label>
                                    <select id="workType" name="worktype" aria-label="Select a Work Type" data-control="select2" data-placeholder="Select a Work Type..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option></option>
                                        @foreach($allWorkTypes as $workType)
                                        <option value="{{ $workType->id }}" @if ($editOrder->work_type_id == $workType->id) selected @endif>{{ $workType->name }}</option>
                                        @endforeach
                                    </select>
                                    <span style="color:red">@error('worktype'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <label class="fs-6 fw-bold form-label">
                                <span>Location</span>
                            </label>
                            <input type="text" id="start-location" class="form-control form-control-solid" name="start_location" placeholder="Search Your Location" value="{{ old('start_location') }}">
                            <div id="map1" class="mt-1" style="width:100%;height:280px;"></div>

                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span>Latitude</span>
                                    </label>
                                    <input type="text" id="start_lat" class="form-control form-control-solid" name="latitude" placeholder="Latitude" value="{{ $editOrder->latitude }}" readonly />
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span>Longitude</span>
                                    </label>
                                    <input type="text" id="start_long" class="form-control form-control-solid" name="longitude" placeholder="Longitude" value="{{ $editOrder->longitude }}" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Order From</span>
                                    </label>
                                    <select id="orderFrom" name="orderFrom" aria-label="Select a Order From" data-control="select2" data-placeholder="Select a Order From..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option value="truck" @if ($editOrder->orderFrom == 'truck') selected @endif>Truck</option>
                                        <option value="container" @if ($editOrder->orderFrom == 'container') selected @endif>Container</option>
                                        <option value="ground" @if ($editOrder->orderFrom == 'ground') selected @endif>Ground</option>
                                    </select>
                                    <span style="color:red">@error('quantity'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Order To</span>
                                    </label>
                                    <select id="orderTo" name="orderTo" aria-label="Select a Order To" data-control="select2" data-placeholder="Select a Order To..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option value="truck" @if ($editOrder->orderTo == 'truck') selected @endif>Truck</option>
                                        <option value="container" @if ($editOrder->orderTo == 'container') selected @endif>Container</option>
                                        <option value="ground" @if ($editOrder->orderTo == 'ground') selected @endif>Ground</option>
                                    </select>
                                    <span style="color:red">@error('orderTo'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">No. of Container</span>
                                    </label>
                                    <input type="number" id="no_container" class="form-control form-control-solid" name="no_container" placeholder="Enter No. of Container" value="{{ count($editOrder->orderContainer) }}" required />
                                    <span style="color:red">@error('no_container'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3 mb-5"></label> <br>
                                    <button type="button" class="btn btn-success addContainerDetails">Add details</button>
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-sm-5 rol-cols-md-1 row-cols-lg-5 containerDetailsHtml">
                            @foreach ($editOrder->orderContainer as $key => $oc)
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Cargo</span>
                                    </label>
                                    <select id="cargo{{$key + 1}}" name="cargo{{$key + 1}}" aria-label="Select a cargo" data-control="select2" data-placeholder="Select a cargo..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                                        <option></option>
                                        @foreach($allCargos as $cargo)
                                        <option value="{{ $cargo->id }}" @if ($oc->cargo_id == $cargo->id) selected @endif>{{ $cargo->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Quantity {{$key + 1}} Container</span>
                                    </label>
                                    <input type="number" id="quantity{{$key + 1}}" class="form-control form-control-solid quantity" name="quantity{{$key + 1}}" value="{{$oc->quantity}}" data-id="{{$key + 1}}" required />
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Size {{$key + 1}} Container (in KG)</span>
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Size is Auto converted in KG, Based on your quanity and selection of cargo."></i>
                                    </label>
                                    <input type="text" id="size{{$key + 1}}" class="form-control form-control-solid" name="size{{$key + 1}}" value="{{$oc->size}}" readonly />
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Per kg price {{$key + 1}} Container</span>
                                    </label>
                                    <input type="number" id="per_kg_price{{$key + 1}}" class="form-control form-control-solid per_kg_price" name="per_kg_price{{$key + 1}}" value="{{$oc->per_kg_price}}" data-id="{{$key + 1}}" required />
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Amount {{$key + 1}} Container</span>
                                    </label>
                                    <input type="number" id="amount{{$key + 1}}" class="form-control form-control-solid" name="amount{{$key + 1}}" value="{{$oc->amount}}" readonly />
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <div class="row row-cols-1 row-cols-sm-3 rol-cols-md-1 row-cols-lg-3">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Total Quantity</span>
                                    </label>
                                    <input type="number" id="total_quantity" class="form-control form-control-solid" name="total_quantity" placeholder="Total Quantity" value="{{ $editOrder->total_quantity }}" required />
                                    <span style="color:red">@error('total_quantity'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Total Size</span>
                                    </label>
                                    <input type="text" id="total_size" class="form-control form-control-solid" name="total_size" placeholder="Total Size" value="{{ $editOrder->total_size }}" readonly />
                                    <span style="color:red">@error('total_size'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Rate</span>
                                    </label>
                                    <input type="number" id="rate" class="form-control form-control-solid" name="rate" placeholder="Rate" value="{{ $editOrder->rate }}" readonly />
                                    <span style="color:red">@error('rate'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>

                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Distance (in meter)</span>
                                    </label>
                                    <input type="number" id="distance" class="form-control form-control-solid" name="distance" placeholder="Distance" value="{{ $editOrder->distance }}" required />
                                    <span style="color:red">@error('distance'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Height (in feet)</span>
                                    </label>
                                    <input type="number" id="height" class="form-control form-control-solid" name="height" placeholder="Height" value="{{ $editOrder->height }}" required />
                                    <span style="color:red">@error('height'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>

                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Start Date Time</span>
                                    </label>
                                    <input type="text" id="start_time" class="form-control form-control-solid datetimepicker" name="start_time" placeholder="Start Date Time" value="{{ $editOrder->start_time }}" required />
                                    <span style="color:red">@error('start_time'){{$message}}@enderror</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">End Date Time</span>
                                    </label>
                                    <input type="text" id="end_time" class="form-control form-control-solid datetimepicker" name="end_time" placeholder="End Date Time" value="{{ $editOrder->end_time }}" required />
                                    <span style="color:red">@error('end_time'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold form-label mt-3">
                                    <span class="required">Documents</span>
                                </label>
                                <textarea type="text" id="documents" class="form-control form-control-solid" name="documents" placeholder="Documents" value="{{ old('documents') }}" required cols="30" rows="3">{{ $editOrder->documents }}</textarea>
                                <span style="color:red">@error('documents'){{$message}}@enderror</span>
                            </div>
                        </div>

                        <div class="separator mb-6"></div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
                                <span class="indicator-label">Save</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.datetimepicker, .datetimepicker').flatpickr({
            enableTime: true,
            minDate: "today",
            dateFormat: "Y-m-d H:i:S",
        });
        $('#order_add_form').validate({
            rules: {
                title: {
                    required: true
                },
                warehouse: {
                    required: true
                },
                desc: {
                    required: true
                },
                contact: {
                    required: true
                },
                worktype: {
                    required: true
                },
                orderFrom: {
                    required: true
                },
                orderTo: {
                    required: true
                },
                total_quantity: {
                    required: true
                },
                total_size: {
                    required: true
                },
                rate: {
                    required: true
                },
                distance: {
                    required: true
                },
                height: {
                    required: true
                },
                start_time: {
                    required: true
                },
                end_time: {
                    required: true
                },
                documents: {
                    required: true
                },
            },
            messages: {
                title: {
                    required: "Please select Title"
                },
                warehouse: {
                    required: "Please select Warehouse"
                },
                desc: {
                    required: "Please enter Description"
                },
                contact: {
                    required: "Please enter Contact"
                },
                worktype: {
                    required: "Please enter Work Type"
                },
                orderFrom: {
                    required: "Please select Order From"
                },
                orderTo: {
                    required: "Please select Order To"
                },
                total_quantity: {
                    required: "Please enter Total Quantity"
                },
                total_size: {
                    required: "Please select Total Size"
                },
                rate: {
                    required: "Please Enter Rate"
                },
                distance: {
                    required: "Please enter Distance"
                },
                height: {
                    required: "Please enter Height"
                },
                start_time: {
                    required: "Please select Start Time"
                },
                end_time: {
                    required: "Please select End Time"
                },
                documents: {
                    required: "Please enter Documents"
                },
            }
        });

        var _token = `{{ csrf_token() }}`;
        // var cargoId = $('#cargo').val();
        // var quantity = $('#quantity').val();
        // var size = $('#size').val();
        // var perKgPrice = $('#per_kg_price').val();

        // convertInKg(cargoId, quantity);

        // $('body').on('change', '#cargo', function() {
        //     cargoId = $(this).val();
        //     convertInKg(cargoId, quantity);
        // })
        // $('body').on('blur', '#quantity', function() {
        //     quantity = $(this).val();
        //     convertInKg(cargoId, quantity);
        // })
        // $('body').on('blur', '#per_kg_price', function() {
        //     perKgPrice = $(this).val();
        //     rateCalculate(size, perKgPrice);
        // })

        // function convertInKg(cargoId, quantity) {
        //     if (cargoId != undefined && quantity != undefined) {
        //         $.ajax({
        //             headers: {
        //                 'x-csrf-token': _token
        //             },
        //             method: 'POST',
        //             url: "{{ route('convertInKg') }}",
        //             data: {
        //                 cargoId: cargoId,
        //                 quantity: quantity
        //             }
        //         }).done(function(result) {
        //             console.log(result);
        //             size = result
        //             $('#size').val(result);
        //             rateCalculate(size, perKgPrice);
        //         })
        //     }
        // }

        // function rateCalculate(size, perKgPrice) {
        //     let totalRate;
        //     if (perKgPrice != undefined && size != undefined) {
        //         totalRate = size * perKgPrice;
        //     } else {
        //         totalRate = 0;
        //     }
        //     console.log(totalRate);
        //     $('#rate').val(totalRate);
        // }

        $('body').on('click', '.addContainerDetails', function() {
            noCont = $('#no_container').val();
            getContainerHtml(noCont);
        })

        function getContainerHtml(noCont) {
            if (noCont != undefined) {
                $.ajax({
                    headers: {
                        'x-csrf-token': _token
                    },
                    method: 'POST',
                    url: "{{ route('getContainerHtml') }}",
                    data: {
                        noCont: noCont
                    }
                }).done(function(result) {
                    $('.containerDetailsHtml').html(result);
                })
            }
        }

        $('body').on('change', '.cargo', function() {
            cargoRowId = $(this).data('id');
            convertInKg(cargoRowId);
        })

        $('body').on('blur', '.quantity', function() {
            quantityRowId = $(this).data('id');
            convertInKg(quantityRowId);
            totalQuantity();
        })
        $('body').on('blur', '.per_kg_price', function() {
            perKgPriceRowId = $(this).data('id');
            amountCalculate(perKgPriceRowId);
        })

        function convertInKg(rowId) {
            let RawVal = getRawValue(rowId);

            if (RawVal.cargoId != undefined && RawVal.quantity != undefined) {
                $.ajax({
                    headers: {
                        'x-csrf-token': _token
                    },
                    method: 'POST',
                    url: "{{ route('convertInKg') }}",
                    data: {
                        cargoId: RawVal.cargoId,
                        quantity: RawVal.quantity
                    }
                }).done(function(result) {
                    $('#size' + rowId).val(result);
                    amountCalculate(rowId);
                    totalSize();
                })
            }
        }

        function getRawValue(rowId) {
            cargoId = $('#cargo' + rowId).val();
            quantity = $('#quantity' + rowId).val();
            size = $('#size' + rowId).val();
            perKgPrice = $('#per_kg_price' + rowId).val();
            amount = $('#amount' + rowId).val();

            return {
                cargoId,
                quantity,
                size,
                perKgPrice,
                amount
            };
        }

        function amountCalculate(rowId) {
            let RawVal = getRawValue(rowId);

            let amount;
            if (perKgPrice != undefined && size != undefined) {
                amount = size * perKgPrice;
            } else {
                amount = 0;
            }
            $('#amount' + rowId).val(amount);

            totalRate();
        }

        function totalQuantity() {
            noCont = $('#no_container').val();
            let totalQuant = 0;
            for (let index = 1; index <= noCont; index++) {
                let RawVal = getRawValue(index);
                totalQuant += Number(RawVal.quantity);
            }
            $('#total_quantity').val(totalQuant);
        }

        function totalSize() {
            noCont = $('#no_container').val();
            let totalSize = 0;
            for (let index = 1; index <= noCont; index++) {
                let RawVal = getRawValue(index);
                totalSize += Number(RawVal.size);
            }
            $('#total_size').val(totalSize);
        }

        function totalRate() {
            noCont = $('#no_container').val();
            let totalRate = 0;
            for (let index = 1; index <= noCont; index++) {
                let RawVal = getRawValue(index);
                totalRate += Number(RawVal.amount);
            }
            $('#rate').val(totalRate);
        }

    });
</script>
<script>
    function initAutocomplete() {
        //var latLng = new google.maps.LatLng(23.01802864089624, 72.57282361409486);

        var long = $('#start_long').val();
        var lat = $('#start_lat').val();
        if (long != "") {
            long = parseFloat(long);
        } else {
            long = 69.721329;
        }

        if (lat != "") {
            lat = parseFloat(lat);
        } else {
            lat = 22.839520;
        }

        var latLng = new google.maps.LatLng(lat, long);
        var map = new google.maps.Map(document.getElementById('map1'), {
            center: {
                lat: lat,
                lng: long,
            },
            zoom: 10,
            mapTypeId: 'roadmap'
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Marker',
            map: map,
            draggable: true
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('start-location');
        var searchBox = new google.maps.places.SearchBox(input);
        // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }

            // Clear out the old markers.
            markers.forEach(function(marker) {
                marker.setMap(null);
            });
            markers = [];

            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function(place) {
                if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };

                // Create a marker for each place.
                var marker = new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                });
                $('#start_lat').val(marker.position.lat());
                $('#start_long').val(marker.position.lng());
                markers.push(marker);

                //Click on map to make red marker and get lat and long
                google.maps.event.addListener(map, 'click', function(event) {

                    // remove previous markers and add new one by click on map
                    if (marker && marker.setMap) {
                        marker.setMap(null);
                    }
                    var ll = event.latLng;
                    map.panTo(ll); // map center on click
                    map.setZoom(15);
                    marker = new google.maps.Marker({
                        position: event.latLng,
                        map: map
                    });
                    $('#start_lat').val(event.latLng.lat());
                    $('#start_long').val(event.latLng.lng());
                    markers.push(marker);
                });
                console.log(place.geometry.location);
                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });

    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNFeNmvBIkNtLwFXeNjw1EEK4ZeUr-tBI&libraries=places&callback=initAutocomplete" async defer></script>
@endpush