@extends('layouts.main')
@section('container')





<style>

    .kv-file-upload{display:none}
    .file-upload-indicator{display:none}
    .form-group .btn {margin:0}

    .krajee-default.file-preview-frame{width:60px}


    .file-preview-image .kv-preview-data{height:1px;}
    .fileinput-remove{width:45px;height: 30px;}
    .btn-file{
        padding:0;
    }
</style>


<div class="page-title">
    <h1>
        Edit  Project
    </h1>
</div>

<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="widget-container fluid-height clearfix" style="border: 1px solid #000;">
            <div class="heading">
                Edit  Project
            </div>
            <div class="widget-content padded">
                @foreach($edit as $data)
                            @if(empty($data['latitude']) && empty($data['longitude']))
                                @php
                                    $data['latitude']='0.0';
                                    $data['longitude']='0.0';
                                @endphp
                            @endif
                <script>
                    

                    function initAutocomplete() {
                        var markers = [];
                        var main_lat=;
                        
                        var main_lng=;
                        var location_string = jQuery.parseJSON('{"lat": '+main_lat+', "lng": '+main_lng+'}');
                        console.log(location_string);

                        var map = new google.maps.Map(document.getElementById('gmap'), {
                            center: location_string,
                            zoom: 7,
                            mapTypeId: 'roadmap'
                        });

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

                        google.maps.event.addListener(map, "click", function(event) {
                            // get lat/lon of click
                            var clickLat = event.latLng.lat();
                            var clickLon = event.latLng.lng();
                            document.getElementById('lat').value = clickLat;
                            document.getElementById('lon').value = clickLon;


                            for(i=0; i<markers.length; i++){
                                markers[i].setMap(null);
                            }
                            markers = [];
                            markers.push(new google.maps.Marker({
                                map: map,
                                position: new google.maps.LatLng(clickLat,clickLon)

                            }));
                        });

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


                        // 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.
                                markers.push(new google.maps.Marker({
                                    map: map,
                                    icon: icon,
                                    title: place.name,
                                    position: 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);
                        });
                        var im=document.location.origin+'/pin.png';
                        
                        
                        var markers= [];
                        markers.push(new google.maps.Marker({
                            position: location_string,
                            map: map,
                            icon: im
                        }));
                    }

                    function DeleteMarkers() {
                        //Loop through all the markers and remove
                        for (var i = 0; i < markers.length; i++) {
                            markers[i].setMap(null);
                        }
                        markers = [];
                        document.getElementById('insert_lat').value = "0.0";
                        document.getElementById('insert_lon').value = "0.0";
                    };

                </script>

                <!-- Javascript -->
                <style>
                    div#gmap
                    {
                        width: 100%;
                        height: 300px;
                        border:double;
                    }
                    #c
                    {
                        text-align:left;
                    }
                    .controls
                    {
                        margin-top: 10px;
                        border: 1px solid transparent;
                        border-radius: 2px 0 0 2px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        height: 32px;
                        outline: none;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                    }
                    #pac-input
                    {
                        background-color: #fff;
                        font-family: Roboto;
                        font-size: 15px;
                        font-weight: 300;
                        margin-left: 12px;
                        padding: 0 11px 0 13px;
                        text-overflow: ellipsis;
                        width: 300px;
                    }
                    #pac-input:focus {
                        border-color: #4d90fe;
                    }
                    .pac-container {
                        font-family: Roboto;
                    }
                    #type-selector
                    {
                        color: #fff;
                        background-color: #4d90fe;
                        padding: 5px 11px 0px 11px;
                    }
                    #type-selector label
                    {
                        font-family: Roboto;
                        font-size: 13px;
                        font-weight: 300;
                    }
                    #target
                    {
                        width: 345px;
                    }
                </style>
                <style>
                    .container{
                        margin-top:20px;
                    }
                    .image-preview-input {
                        position: relative;
                        overflow: hidden;
                        margin: 0px;
                        color: #333;
                        background-color: #fff;
                        border-color: #ccc;
                    }
                    .image-preview-input input[type=file] {
                        position: absolute;
                        top: 0;
                        right: 0;
                        margin: 0;
                        padding: 0;
                        font-size: 20px;
                        cursor: pointer;
                        opacity: 0;
                        filter: alpha(opacity=0);
                    }
                    .image-preview-input-title {
                        margin-left:2px;
                    }
                </style>
                <!-- Add Map for Get Address of the Project -->

                <form action="{{route('AdminProjectEdit')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
                    {!! csrf_field() !!}
                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <label class="control-label col-md-2"  id="a">Product Name</label>
                        <div class="col-md-4">
                            <input class="form-control" placeholder="Product Name" name="product_name"  type="text" value="{{$data->name}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Developer Name</label>
                        <div class="col-md-4">
                            <input class="form-control" placeholder="Developer Name" name="developer_name" type="text" value="{{$data->developer}}">
                        </div>
                        <input type="hidden" value="{{$data->id}}" name="id">
                    </div>
                     <div class="form-group">
                        <label class="control-label col-md-2" id="a">Property</label>
                          <div class="col-md-4">
                          <select class="form-control" name="category" value="" >
                            <option @if($data->category=='') selected @endif></option>
                            <option @if($data->category=='New Condo') selected @endif>New Condo</option>
                            <option @if($data->category=='Rumawip') selected @endif>Rumawip</option>
                            <option @if($data->category=='Completed') selected @endif>Completed</option>
                            <option @if($data->category=='Commercial') selected @endif>Commercial</option>
                            <option @if($data->category=='Industrial') selected @endif>Industrial</option>
                        </select>
                          </div>
                          <div class="col-md-4">
                                                </div>
                     </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Edit Photo</label>
                        <!-- Gallery with filtering and actions -->
                        <div class="col-lg-9">
                            <div class="widget-container fluid-height">
                                <!--  <div class="heading">
                                   <i class="fa fa-th-large"></i>Filtering and Actions
                                <div class="gallery-filters list-inline btn-group pull-right">
                                  <a class="btn btn-sm btn-primary-outline selected" data-filter="*" href="#">All</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter1" href="#">Filter 1</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter2" href="#">Filter 2</a>
                                </div>
                              </div>-->
                                <div class="widget-content">
                                    <div class="gallery-container">
                                        <div class="dropme grid" style="width:auto" id="projectimg">


                                            


                                        </div>
                                        <!-- getting value from jquery for image drag and drop  -->

                                        <input type="hidden" name="image_old" value="">
                                        <input type="hidden" id="imagejson" name="image_json">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Gallery with filtering and actions --><!-- Gallery carousel -->
                        <!-- End Gallery carousel -->
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Upload Photo</label>
                        <div class="col-md-10">
                            <div class="row fileupload-buttonbar">
                                <div class="col-lg-12">

                                    <!--  <span class="btn btn-success fileinput-button"><i class="fa fa-plus"></i><span>Add files...</span><input id="upload_file" multiple="" name="upload[]" type="file"></span><!--<button class="btn btn-warning cancel" type="reset"><i class="fa fa-ban"></i><span>Cancel upload</span></button>-->
                                    <!--<div class="fileupload-loading"></div>-->
                                    <input type="file" name="upload[]" class="filer_input2" multiple="multiple">

                                </div>
                                <div class="col-lg-5 fileupload-progress fade">

                                    <div class="progress-extended">
                                         
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped" role="presentation">
                                <tbody class="files"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Edit Floor Plan Image</label>
                        <!-- Gallery with filtering and actions -->
                        <div class="col-lg-9">
                            <div class="widget-container fluid-height">
                                <!--  <div class="heading">
                                   <i class="fa fa-th-large"></i>Filtering and Actions
                                <div class="gallery-filters list-inline btn-group pull-right">
                                  <a class="btn btn-sm btn-primary-outline selected" data-filter="*" href="#">All</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter1" href="#">Filter 1</a><a class="btn btn-sm btn-primary-outline" data-filter=".filter2" href="#">Filter 2</a>
                                </div>
                              </div>-->
                                <div class="widget-content">
                                    <div class="gallery-container">
                                        <div class="dropme grid" style="width:auto">


                                            


                                        </div>
                                        <!-- getting value from jquery for image drag and drop  -->

                                        <input type="hidden" name="image_old_floor" value="">
                                        <input type="hidden" id="imagejsonfloor" name="image_json_floor">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Gallery with filtering and actions --><!-- Gallery carousel -->
                        <!-- End Gallery carousel -->
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Upload Floor Plan Image</label>
                        <div class="col-md-10">
                            <div class="row fileupload-buttonbar">
                                <div class="col-lg-12">

                                    <!--  <span class="btn btn-success fileinput-button"><i class="fa fa-plus"></i><span>Add files...</span><input id="upload_file" multiple="" name="upload[]" type="file"></span><!--<button class="btn btn-warning cancel" type="reset"><i class="fa fa-ban"></i><span>Cancel upload</span></button>-->
                                    <!--<div class="fileupload-loading"></div>-->
                                    <input type="file" name="floorplan_image[]"  class="filer_input2" multiple="multiple" accept="image/*">

                                </div>
                                <div class="col-lg-5 fileupload-progress fade">

                                    <div class="progress-extended">
                                         
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped" role="presentation">
                                <tbody class="files"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Choose Address</label>
                        <div class="col-md-10 col-md-offset-2">
                            <div class="row fileupload-buttonbar">
                                <div class="col-lg-12">
                                    <input type="hidden" id="lat" name="address_lat"/>
                                    <input type="hidden" id="lon" name="address_long"/>
                                    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                                    <div id="gmap"></div>
                                    @if ($errors->has('address_lat'))
                                    <div class="alert alert-warning flash">
                                        <button class="close" data-dismiss="alert" type="button">×</button>
                                        <p>Address Location Required*</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <p style="display: none;">   {{$unit=$data->unit_spec}}</p>
                    <p style="display: none;"> {{$project_sp=$data->project_spec}}</p>
                                        <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Project Specifications</label>
                        <div class="col-md-10">
                            <div class="widget-content padded clearfix" style="overflow-x: auto">

                                <table class="table table-bordered" style="width: auto;">
                                    <thead>
                                    <tr><th>
                                            Block
                                        </th>
                                        <th>
                                            Floor
                                        </th>

                                        <th>
                                            Unit per Floor
                                        </th>
                                        <th>
                                            Total Unit
                                        </th>
                                        <th>
                                            No. Of Lift
                                        </th>
                                        <th>
                                            Completion Year
                                        </th>

                                        <th class="hidden-xs">
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody class="field_project">
                                                                        </tbody>
                                    <tbody>  <tr><td> <button type="button" class="btn btn-success add_button">Add</button></td></tr>  </tbody>
                                </table>
                            </div>
                        </div>
                        @if ($errors->has('unit'))
                        <div class="alert alert-warning">
                            <button class="close" data-dismiss="alert" type="button">×</button>
                            {{ $errors->first('unit') }}
                        </div>
                        @endif
                    </div>
                    <script type="text/javascript">
                        jQuery(document).ready(function(){
                            var value=;
                          
                            var value1=value-1;
                            var maxField = 60; //Input fields increment limitation
                            var addButton = jQuery('.add_button'); //Add button selector
                            var wrapper = jQuery('.field_project'); //Input field wrapper
                            var x=value1;
                            $(addButton).click(function(){ //Once add button is clicked
                                if(x < maxField){ //Check maximum number of input fields
                                    x++; //Increment field counter

                                    var fieldHTML='<tr><td><input type="text" style="width: 50px;" name="project_block[' + x +'][block]" required></td><td><input type="number" required  style="width: 50px;" name="project_block[' + x +'][floor]"></td><td><input type="number" style="width: 50px;" name="project_block[' + x +'][unit]" required></td><td><input type="number" style="width: 50px" name="project_block[' + x +'][total]" id="project_block[' + x +'][total]" onblur="getValue(this.value)"  required></td><td><input type="number" style="width: 50px" name="project_block[' + x +'][lift]" required></td><td><div class="input-group date datepicker"><input class="form-control" type="text" name="project_block[' + x +'][completion_date]" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span></input></div></td><td><button class="btn btn-xs btn-danger unit_remove" type="button">Delete</button></td></tr>';

                                    jQuery(wrapper).append(fieldHTML); // Add field html
                                    $('.datepicker').datepicker({
                                        autoclose: true
                                    });
                                }
                            });
                               jQuery(wrapper).on('click', '.unit_remove', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent().parent().remove(); //Remove field html
            //alert(x);

        });

                        });
                    </script>





                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Unit Specifications</label>
                        <div class="col-md-10">
                            <div class="widget-content padded clearfix" style="overflow-x: auto">
                                <table class="table table-bordered" style="width: auto;">
                                    <thead>
                                    <tr><th>
                                            Name(type)
                                        </th>
                                        <th>
                                            Unit Size
                                        </th>
                                        <th>
                                            Bedroom
                                        </th>
                                        <th>
                                            Room
                                        </th>
                                        <th>
                                            Bathroom
                                        </th>

                                        <th>
                                            No. Of Carpark per Unit
                                        </th>
                                        <th>
                                            Images(Max. 5)
                                        </th>
                                        <th class="hidden-xs">
                                        </th>
                                        <th class="hidden-xs">
                                            Preview
                                        </th>
                                    </tr>
                                    </thead>

                                    <tbody class="field_unit">
                                                                        </tbody>
                                    <tbody>  <tr><td> <button type="button" class="btn btn-success unit_button">Add</button></td></tr>  </tbody>
                                </table>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Total Unit</label>
                        <div class="col-md-4">
                            <input class="form-control" placeholder="Total Unit" name="total" type="text" value="{{$data->total}}">
                        </div>

                    </div>
                    <div class="form-group" style="display:none">
                        <label class="control-label col-md-2"  id="a">Header</label>
                        <div class="col-md-4">
                            <input class="form-control" placeholder="Header" name="header" type="text" value="{{$data->project_header}}">
                        </div>

                    </div>
                   
                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Description</label>
                        <div class="col-md-8">
                            <textarea class="form-control" id="summernote" rows="3" placeholder="Descripition" name="description" type="text"  cols="3" >{{$data->description}}</textarea>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2"  id="a">Facilities</label>
                        <div class="col-md-9">
                                            

                        </div>

                    </div>
                    <div class="form-group">
                        <br><br>
                        <div class="col-md-12" align="right">
                            <p>*Note: All Field Required</p>
                            <a class="table-actions"  href="{!! route('salechart', ['id'=>$id]) !!}"><button class="btn btn-success" type="button">Sale Chart View</button></a>
                            <a class="table-actions"  href="{!! route('editcondos', ['id'=>$id]) !!}"><button class="btn btn-primary" type="button">Edit Sale Chart</button></a>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>
                </form>
                @endforeach
            </div>
        </div>
    </div>
    <div class="col-lg-1"></div>
</div>
<!-- @include('layouts.scripts') -->
<script type="text/javascript">
    jQuery(document).ready(function(){
        var value=;
        if(value!=0)
        {
        var value1=value-1;
        }
        else{
            var value1=0;
        }
        var maxField = 60; //Input fields increment limitation
        var unitButton = jQuery('.unit_button'); //Add button selector
        var wrapper1 = jQuery('.field_unit'); //Input field wrapper
        var x=value1;
       
        jQuery(unitButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
               
                var fieldHTML = '<tr id="tr-id' + x +'"><td><input type="text" style="width: 50px;" name="unit[' + x +'][name]" required ></td><td><input type="text" style="width: 50px;" name="unit[' + x +'][size]" required></td><td><input type="number" style="width: 50px;" name="unit[' + x +'][bedroom]" required></td><td><input type="number" style="width: 50px;" name="unit[' + x +'][room]" required></td><td><input type="number" required style="width: 50px" name="unit[' + x +'][bathroom]"></td><td><input type="number" style="width: 50px;" name="unit[' + x +'][carpark]" required></td><td><input id="file-0a' + x +'" class="file" type="file"  multiple data-max-file-count="5" name="img[' + x +'][images][]" ></td><td class="hidden-xs"><button class="btn btn-xs btn-danger unitt_remove" type="button">Delete</button></td></tr>';
                jQuery(wrapper1).append(fieldHTML);
                $("#file-0a"+x+"").fileinput({
                    showUpload: false,
                    showCaption: false,
                    overwriteInitial: false,
                    initialPreviewAsData: true,
                    allowedFileExtensions: ['jpg', 'png', 'gif']

                });  // Add field html
            }
        });
        jQuery(wrapper1).on('click', '.unitt_remove', function(e){ 
                e.preventDefault();
                $(this).parent().parent().remove();
        });
        jQuery(wrapper1).on('click', '.unit_remove', function(e){ //Once remove button is clicked
           
                                                                               
                                                                                
          
            //alert(x);

                 e.preventDefault();
                $(this).parent().parent().remove();
                 
               
                                                                 
        });

    });
</script>
<script>
    $('.dropme').dropme('enable');
    $('.exclude').dropme({
        items: ':not(.disabled)'
    });
    $('.connected').dropme({
        linkTo: '.connected'
    });
    var imgs =document.getElementsByClassName("imgValue");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++)
    {
        imgSrcs.push(imgs[i].name);
    }


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_M2aatmghfl0jv5XBv0zsPDstYV1tP3Y&libraries=places&callback=initAutocomplete" async defer></script>
<script src="{{ URL::asset('drag/j/dropMe1.js') }}"></script>
<script type="text/javascript">
    function multiDelete()
    {   var token = $("input[name=_token]").val();
        var favorite = [];
        $.each($("input[name='multidelete']:checked"), function()
        {
            favorite.push($(this).val());


        });
    }
</script>

@stop