@extends('layout.master', ['headerTitle' => 'Add Warehouse'])

@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>Add Warehouse</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="warehouse_add_form" class="form" action="{{ route('warehouse.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold form-label mt-3">
                                    <span class="required">Name</span>
                                </label>
                                <input type="text" id="name" class="form-control form-control-solid" name="name" placeholder="Name" value="{{ old('name') }}" required />
                                <span style="color:red">@error('name'){{$message}}@enderror</span>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold form-label mt-3">
                                    <span class="required">Address</span>
                                </label>
                                <!-- <input type="text" class="form-control form-control-solid" name="name"  /> -->
                                <textarea class="form-control form-control-solid" name="address" rows="3" placeholder="Enter Address"></textarea>
                                <span style="color:red">@error('address'){{$message}}@enderror</span>
                            </div>
                            <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="number" class="form-control form-control-solid" name="contact" placeholder="Enter Contact No." />
                                    <span style="color:red">@error('contact'){{$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="{{ old('start_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="{{ old('start_longitude') }}" readonly />
                                </div>
                            </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="https://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() {
        $('#warehouse_add_form').validate({
            rules: {
                name: {
                    required: true
                },
                contact: {
                    required: true,
                    minlength:10,
                    maxlength:10,
                },
                address: {
                    required: true
                },
                start_location: {
                    required: true
                },
            },
            messages: {
                name: {
                    required: "Please enter name"
                },
                contact: {
                    required: "Please enter contact",
                    minlength: "Please enter at least 10 characters.",
                    maxlength: "Please enter no more than 10 characters.",
                },
                address: {
                    required: "Please enter address"
                },
                start_location: {
                    required: "Please enter location"
                },
            }
        });
    });
</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