@extends('layouts.index')
@section('me','active');

@section('title', __('menu.my_data'))

@section('styles')
<link rel="stylesheet" href="{{asset("assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css")}}">
<link rel="stylesheet" href="{{asset("assets/plugins/select2/css/select2.min.css")}}">
<link rel="stylesheet" href="{{asset("assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css")}}">
<link rel="stylesheet" href="{{asset("assets/plugins/daterangepicker/daterangepicker.css")}}">
<link rel="stylesheet" href="{{asset("assets/plugins/dropzone/min/dropzone.min.css")}}">
@endsection
@section('javascript')
<script src="{{asset("assets/plugins/select2/js/select2.full.min.js")}}"></script>
<script src="{{asset("assets/plugins/daterangepicker/daterangepicker.js")}}"></script>
<script src="{{asset("assets/plugins/dropzone/min/dropzone.min.js")}}"></script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBH8LtUzF1pocfAhQp1uueioxCRrI0s-K8&region=EG&language=en&callback=initMap&libraries=places&v=weekly&v=3"
    async
></script>
<script>
$(function () {
    'use strict'

    /* jQueryKnob */
    $('.knob').knob()
})
var map;
var marker;
function initMap() {
    // The location of Uluru
    const uluru = {lat: 24.774265, lng: 46.738586};
    // The map, centered at Uluru
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 6,
        center: uluru,
    });
    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });


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

        if (places.length == 0) {
            return;
        }
        places.forEach((place) => {
            placeMarker(place.geometry.location, 20);
        });
    });

}
function placeMarker(location, newZoom = 10) {
    if (marker) {
        marker.setMap(null);
    }
    console.log(location)
    $("#co_lat").val(location.lat());
    $("#co_lang").val(location.lng());
    marker = new google.maps.Marker({
        position: location,
        map: map,
        zoom: newZoom
    });

    map.setCenter(location);
}
</script>
@endsection

@section('content')
{{$errors ?? ""}}
<!-- Small boxes (Stat box) -->
<div class="row">
    <section class="col-lg-12">
        <form method="POST" id="project_form">
            <div class="card">
                <div class="card-header">

                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="company_name">Company name</label>
                            <input required="" type="text" class="form-control" name="company_name" id="company_name" maxlength="200" aria-describedby="project_name" placeholder="Company name" value="{{!empty($my_data->company_name) ? $my_data->company_name : ""}}">
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="phone_no">Phone No.</label>
                            <input required="" type="text" class="form-control" name="phone_no" id="phone_no" maxlength="200" placeholder="Company phone number" value="{{!empty($my_data->phone_no) ? $my_data->phone_no : ""}}">
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="whatsapp_no">WhatsApp No.</label>
                            <input required="" type="text" class="form-control" name="whatsapp_no" id="whatsapp_no" maxlength="200" placeholder="WhatsApp bussiness number" value="{{!empty($my_data->whatsapp_no) ? $my_data->whatsapp_no : ""}}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="old_password">Old password</label>
                            <input type="password" class="form-control" name="old_password" id="old_password" maxlength="200"  placeholder="Old password (Required when change password)">
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="new_password">New password</label>
                            <input type="password" class="form-control" name="new_password" id="new_password" maxlength="200"  placeholder="New password (Required when change password)">
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12 form-group">
                            <label for="confirm_password">Confirm password</label>
                            <input type="password" class="form-control" name="confirm_password" id="confirm_password" maxlength="200"  placeholder="Confirm new password (Required when change password)">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                            <label for="co_location">Company location</label>

                            <div id="map" style="height: 500px; width: 100%"></div>
                            <input type="hidden" name="co_lang" id="co_lang" value="{{!empty($my_data->map_lang) ? $my_data->map_lang : ""}}" />
                            <input type="hidden" name="co_lat" id="co_lat" value="{{!empty($my_data->map_lat) ? $my_data->map_lat : ""}}" />
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                    <div class="float-right">
                        <button  type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
            <!-- /.card -->
        </form>
    </section>
</div>
<!-- /.row (main row) -->
@endsection