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

@section('style')
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.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 Mulajim</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="mulajim_add_form" class="form" action="{{ route('mulajim.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <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">Mulajim Name</span>
                                    </label>
                                    <input type="text" id="name" class="form-control form-control-solid" name="name" placeholder="Mulajim Name" value="{{ old('name') }}" required />
                                    <span style="color:red">@error('name'){{$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">Pan No</span>
                                    </label>
                                    <input type="text" id="pan_no" class="form-control form-control-solid" name="pan_no" placeholder="Pan No" value="{{ old('pan_no') }}" required />
                                    <span id="panno" style="color:red">@error('pan_no'){{$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">Adhar No</span>
                                    </label>
                                    <input type="text" id="adhar_no" class="form-control form-control-solid" name="adhar_no" placeholder="Adhar No" value="{{ old('adhar_no') }}" required />
                                    <span id="adharno" style="color:red">@error('adhar_no'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </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">Mobile No</span>
                                    </label>
                                    <input type="number" id="mobile" class="form-control form-control-solid" name="mobile" placeholder="Mobile No" value="{{ old('mobile') }}" required />
                                    <span style="color:red">@error('mobile'){{$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">Email</span>
                                    </label>
                                    <input type="email" id="email" class="form-control form-control-solid" name="email" placeholder="Email" value="{{ old('email') }}" required />
                                    <span style="color:red">@error('email'){{$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">Password</span>
                                    </label>
                                    <input type="password" id="password" class="form-control form-control-solid" name="password" placeholder="Password" value="{{ old('password') }}" required />
                                    <span style="color:red">@error('password'){{$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="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">Address</span>
                                    </label>
                                    <textarea id="address" class="form-control form-control-solid" name="address" placeholder="Address" value="{{ old('address') }}" required cols="30" rows="3"></textarea>
                                    <span style="color:red">@error('address'){{$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">Locality / City</span>
                                    </label>
                                    <input type="text" id="city" class="form-control form-control-solid" name="city" placeholder="Locality / City" value="{{ old('city') }}" required />
                                    <span style="color:red">@error('city'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </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">District</span>
                                    </label>
                                    <input type="text" id="district" class="form-control form-control-solid" name="district" placeholder="District" value="{{ old('district') }}" required />
                                    <span style="color:red">@error('district'){{$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">State</span>
                                    </label>
                                    <input type="text" id="state" class="form-control form-control-solid" name="state" placeholder="State" value="{{ old('state') }}" required />
                                    <span style="color:red">@error('state'){{$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">Pincode</span>
                                    </label>
                                    <input type="number" id="pincode" class="form-control form-control-solid" name="pincode" placeholder="Pincode" value="{{ old('pincode') }}" required />
                                    <span style="color:red">@error('pincode'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>

                        <div class="separator mb-6"></div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" id="submitbtn" 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 src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>
<script>
    $(document).ready(function() {
        $('#mulajim_add_form').validate({
            rules: {
                name: {
                    required: true
                },
                pan_no: {
                    required: true
                },
                adhar_no: {
                    required: true
                },
                mobile: {
                    required: true,
                    minlength: 10,
                    maxlength: 10
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 8,
                    maxlength: 8
                },
                latitude: {
                    required: true
                },
                longitude: {
                    required: true
                },
                address: {
                    required: true
                },
                city: {
                    required: true
                },
                district: {
                    required: true
                },
                state: {
                    required: true
                },
                pincode: {
                    required: true
                },
            },
            messages: {
                name: {
                    required: "Please enter Name"
                },
                pan_no: {
                    required: "Please enter Pan No"
                },
                adhar_no: {
                    required: "Please enter Adhar No"
                },
                mobile: {
                    required: "Please enter Mobile No",
                    minlength: 'The mobile must be at least 10 characters',
                    maxlength: 'The mobile must not be greater than 10 characters'
                },
                email: {
                    required: "Please enter Email"
                },
                password: {
                    required: "Please enter Password",
                    minlength: 'The password must be at least 8 characters',
                    maxlength: 'The password must not be greater than 8 characters'
                },
                latitude: {
                    required: "Please enter Latitude"
                },
                longitude: {
                    required: "Please enter Longitude"
                },
                address: {
                    required: "Please enter Address"
                },
                city: {
                    required: "Please enter Locality / City"
                },
                district: {
                    required: "Please enter District"
                },
                state: {
                    required: "Please enter State"
                },
                pincode: {
                    required: "Please enter Pincode"
                },
            }
        });

    });
</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