<div class="col-sm-12">
    <!-- Pills -->
    <ul class="nav nav-pills">
        <li class="active"><a href="#updateBuildingContact" data-toggle="tab">Building Contact</a></li>
        <li><a href="#updateBuildingInvoiceContact" data-toggle="tab">Invoice Contact</a></li>
        <li><a href="#updateBuildingDetail" data-toggle="tab">Building Detail</a></li>
        <li><a href="#updateBuildingType" data-toggle="tab">Shopping Center</a></li>
        <li><a href="#updateBuildingAdminDetail" data-toggle="tab">Admin</a></li>
        <li><a href="#updateBuildingMap" data-toggle="tab">Map</a></li>
        <li><a href="#updateBuildingFilesTab" data-toggle="tab">Files</a></li>
    </ul>
    <form id="formUpdateBuilding" class="panel form-horizontal">
        <div class="tab-content">
            <div class="tab-pane active" id="updateBuildingContact">
                <div class="panel-body">
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Client:</label>

                        <div class="col-xs-8">
                            <select id="updateBuildingClientSelectBox" name="client_id">
                                <option></option>
                                <?php foreach($clients as $client): ?>
                                    <option value="<?php echo e($client['id']); ?>" <?php echo e($client['id']==$building->client['id']?'selected':''); ?>><?php echo e($client['name']); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Building name:</label>

                        <div class="col-xs-8">
                            <input type="text" name="name" class="form-control" placeholder=""
                                   value="<?php echo e($building['name']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Building number:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingIdentifier" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingIdentifier']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Address line 1:</label>

                        <div class="col-xs-8">
                            <input type="text" name="address1" class="form-control" placeholder=""
                                   value="<?php echo e($building['address1']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Address line 2:</label>

                        <div class="col-xs-8">
                            <input type="text" name="address2" class="form-control" placeholder=""
                                   value="<?php echo e($building['address2']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Town:</label>

                        <div class="col-xs-8">
                            <input type="text" name="town" class="form-control" placeholder=""
                                   value="<?php echo e($building['town']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Postcode:</label>

                        <div class="col-xs-8">
                            <input type="text" name="postcode" class="form-control" placeholder=""
                                   value="<?php echo e($building['postcode']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Telephone:</label>

                        <div class="col-xs-8">
                            <input type="text" name="telephone" class="form-control" placeholder=""
                                   value="<?php echo e($building['telephone']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Email:</label>

                        <div class="col-xs-8">
                            <input type="email" name="email" class="form-control" placeholder=""
                                   value="<?php echo e($building['email']); ?>">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="updateBuildingInvoiceContact">
                <div class="panel-body">
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Invoice building name:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceClientName" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceClientName']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Address line 1:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceAddress1" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceAddress1']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Address line 2:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceAddress2" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceAddress2']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Town:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceTown" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceTown']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Postcode:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoicePostcode" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoicePostcode']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Telephone:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceTelephone" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceTelephone']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Email:</label>

                        <div class="col-xs-8">
                            <input type="email" name="invoiceEmail" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceEmail']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Contact person:</label>

                        <div class="col-xs-8">
                            <input type="text" name="invoiceContactName" class="form-control" placeholder=""
                                   value="<?php echo e($building['invoiceContactName']); ?>">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="updateBuildingDetail">
                <div class="panel-body">
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Floors quantity:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingQuantityFloors" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingQuantityFloors']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Staff quantity:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingQuantityStaff" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingQuantityStaff']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Parking bays quantity:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingQuantityParkingBays" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingQuantityParkingBays']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Open time:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingOpenTime" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingOpenTime']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Close time:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingCloseTime" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingCloseTime']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Contact:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingContact" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingContact']); ?>">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="updateBuildingType">
                <div class="panel-body">
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Building type:</label>

                        <div class="col-xs-8">
                            <select id="updateBuildingTypeSelectBox" name="buildingType">
                                <option></option>
                                <?php foreach($buildingTypes as $buildingType): ?>
                                    <option value="<?php echo e($buildingType['value']); ?>" <?php echo e($buildingType['value']==$building['buildingType']?'selected':''); ?>><?php echo e($buildingType['value']); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Telephone:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingManagementTelephone" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingManagementTelephone']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Fax:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingManagementFax" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingManagementFax']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Email:</label>

                        <div class="col-xs-8">
                            <input type="email" name="buildingManagementEmail" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingManagementEmail']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Risk Assessment:</label>

                        <div class="col-xs-8">
                            <select id="updateRiskAssessmentSelectBox" name="buildingManagementRiskAssessment">
                                <option></option>
                                <?php foreach($yesOrNo as $yon): ?>
                                    <option value="<?php echo e($yon['value']); ?>" <?php echo e($yon['value']==$building['buildingManagementRiskAssessment']?'selected':''); ?>><?php echo e($yon['value']); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Method statement:</label>

                        <div class="col-xs-8">
                            <select id="updateMethodStatementSelectBox" name="buildingManagementMethodStatement">
                                <option></option>
                                <?php foreach($yesOrNo as $yon): ?>
                                    <option value="<?php echo e($yon['value']); ?>" <?php echo e($yon['value']==$building['buildingManagementMethodStatement']?'selected':''); ?>><?php echo e($yon['value']); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Notice period:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingManagementNoticePeriod" class="form-control" placeholder=""
                                   value="<?php echo e($building['buildingManagementNoticePeriod']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Special Requirement:</label>

                        <div class="col-xs-8">
                            <input type="text" name="buildingManagementSpecialRequirement" class="form-control"
                                   placeholder=""
                                   value="<?php echo e($building['buildingManagementSpecialRequirement']); ?>">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="updateBuildingAdminDetail">
                <div class="panel-body">
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Status:</label>

                        <div class="col-xs-8">
                            <input type="text" name="status" class="form-control" placeholder=""
                                   value="<?php echo e($building['status']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Created by:</label>

                        <div class="col-xs-8">
                            <input type="text" name="createdBy" class="form-control" placeholder=""
                                   value="<?php echo e($building['createdBy']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Created date:</label>

                        <div class="col-xs-8">
                            <input type="text" name="createdDate" class="form-control" placeholder=""
                                   value="<?php echo e(date('d/m/Y H:i:s', strtotime($building['createdDate']))); ?>" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Modified by:</label>

                        <div class="col-xs-8">
                            <input type="text" name="modifiedBy" class="form-control" placeholder=""
                                   value="<?php echo e($building['modifiedBy']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Modified date:</label>

                        <div class="col-xs-8">
                            <input type="text" name="modifiedDate" class="form-control" placeholder=""
                                   value="<?php echo e(date('d/m/Y H:i:s', strtotime($building['modifiedDate']))); ?>" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Deleted by:</label>

                        <div class="col-xs-8">
                            <input type="text" name="deletedBy" class="form-control" placeholder=""
                                   value="<?php echo e($building['deletedBy']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Deleted date:</label>

                        <div class="col-xs-8">
                            <input type="text" name="deletedDate" class="form-control" placeholder=""
                                   value="<?php echo e(date('d/m/Y H:i:s', strtotime($building['deletedDate']))); ?>" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Archived by:</label>

                        <div class="col-xs-8">
                            <input type="text" name="archivedBy" class="form-control" placeholder=""
                                   value="<?php echo e($building['archivedBy']); ?>">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Archived date:</label>

                        <div class="col-xs-8">
                            <input type="text" name="archivedDate" class="form-control" placeholder=""
                                   value="<?php echo e(date('d/m/Y H:i:s', strtotime($building['archivedDate']))); ?>" disabled>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" class="building-latitude" name="latitude" value="<?php echo e($building['latitude']); ?>"/>
            <input type="hidden" class="building-longitude" name="longitude" value="<?php echo e($building['longitude']); ?>"/>
            <input type="hidden" name="id" value="<?php echo e($building['id']); ?>"/>
            <input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>"/>

            <div class="tab-pane" id="updateBuildingMap">
                <div id="buildingMap"></div>
            </div>

            <div class="tab-pane" id="updateBuildingFilesTab">
                <div id="buildingFiles" class="dropzone-box hidden">
                    <div class="dz-default dz-message">
                        <i class="fa fa-cloud-upload"></i>
                        Drop files in here<br><span class="dz-text-small">or click to pick manually</span>
                    </div>
                    <form action="<?php echo e(URL::action('RnwController@uploadFile')); ?>" method="post" class="dropzone-box">
                        <div class="fallback">
                            <input name="aFile" type="file" multiple=""/>
                        </div>
                    </form>
                </div>
                <div>
                    <iframe id="buildingFileList" class="no-border" style="width:100%; height:382px"
                            src="<?php echo e(url('filesys'.'?cd=/'.'&homeRepo='.$urlPath)); ?>"/>
                </div>
            </div>

            <div class="panel-footer text-right">
                <a id="generateGeoCodeBtn" class="btn btn-primary"
                   onclick="generateGeoCode('<?php echo e($building["id"]); ?>','<?php echo e($building["address1"] . "," . $building["address2"] . "," . $building["town"] . "," . $building["postcode"]); ?>')">Generate
                    Geo Location</a>
                <a id="updateBuildingPage" class="btn btn-success">Update</a>
            </div>

        </div>
    </form>
</div>
<script type="text/javascript">
    if ($('.maskDate').length > 0) {
        $('.maskDate').mask("9999-99-99 99:99");
    }

    if ($('#updateBuildingClientSelectBox').length > 0) {
        $("#updateBuildingClientSelectBox").selectize();
    }

    if ($('#updateBuildingTypeSelectBox').length > 0) {
        $("#updateBuildingTypeSelectBox").selectize();
    }

    if ($('#updateRiskAssessmentSelectBox').length > 0) {
        $("#updateRiskAssessmentSelectBox").selectize();
    }

    if ($('#updateMethodStatementSelectBox').length > 0) {
        $("#updateMethodStatementSelectBox").selectize();
    }

    $('#buildingMap').css('height', $('#updateBuildingDetail').height());

    var buildingMap;
    function initMap() {
        buildingMap = new google.maps.Map(document.getElementById('buildingMap'), {
            center: {lat: Number('<?php echo e($building['latitude']); ?>'), lng: Number('<?php echo e($building['longitude']); ?>')},
            zoom: 15
        });

        var marker = new google.maps.Marker({
            position: {lat: Number('<?php echo e($building['latitude']); ?>'), lng: Number('<?php echo e($building['longitude']); ?>')}
        });

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', (function (marker) {
            return function () {
                var infoContent = '<?php echo e($building['name']); ?> (' + '<?php echo e($building['address1']); ?> ' + ' <?php echo e($building['address2']); ?> ' + '<?php echo e($building['postcode']); ?>)';
                infowindow.setContent(infoContent);
                infowindow.open(buildingMap, marker);
            }
        })(marker));

        marker.setMap(buildingMap);
    }

    $('a[href="#updateBuildingMap"]').click(function(){
        setTimeout(function(){
            initMap();
        },382);
    });

    // Actions on Building Page
    if ($('a[id^="updateBuildingPage"]').length > 0) {
        $('a[id^="updateBuildingPage"]').click(function () {
            var ahref = $(this);
            ahref.text('loading');
            loadingOverlay();

            var geocoder = new google.maps.Geocoder(),
                    lat,
                    lng,
                    googleAddress = $('[name="address1"]').val() + ' ' + $('[name="address2"]').val() + ' ' + $('[name="town"]').val() + ' ' + $('[name="postcode"]').val();

            geocoder.geocode({'address': googleAddress}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    lat = results[0].geometry.location.lat();
                    lng = results[0].geometry.location.lng();
                } else {
                    console.log("Geocode was not successful for the following reason: " + status);
                }

                $('.building-latitude').val(lat);
                $('.building-longitude').val(lng);

                $.post('<?php echo e(URL::action("BuildingController@uiUpdate")); ?>', $('#formUpdateBuilding').serialize())
                        .done(function (data) {
                            ahref.text('Update');
                            loadingRemove();

                            if (typeof refreshBuildings == 'function') {
                                //function_name is a function
                                refreshBuildings();
                            }


                            new PNotify({
                                title: 'Success',
                                text: 'Building updated successfully!',
                                type: 'success',
                                icon: 'fa fa-check'
                            });
                        })
                        .fail(function (data) {
                            ahref.text('Update');
                            loadingRemove();
                            new PNotify({
                                title: 'Fail',
                                text: 'Building updating failed, please re-check the inputs!',
                                type: 'error',
                                icon: 'fa fa-times'
                            });
                        });
            });
        });
    }

    var generateGeoCode = function (buildingId, buildingAddress) {
        var generateGeoCodeUrl = 'https://maps.googleapis.com/maps/api/geocode/json';
        $.get(generateGeoCodeUrl, {
            address: buildingAddress
        }).done(function (data) {
            if (data['results'].length > 0) {
                generateBuildingGeoCode(buildingId, data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']);
            }
        }).fail(function (data) {
            new PNotify({
                title: 'Google Not Response',
                text: 'Please retry again...',
                type: 'error',
                icon: 'fa fa-times-circle-o'
            });
        });
    };

    var generateBuildingGeoCode = function (buildingId, latitude, longitude) {
        var generateBuildingGeoCodeUrl = '<?php echo e(URL::action("MapController@generateBuildingGeoCode")); ?>';
        $.post(generateBuildingGeoCodeUrl, {
            buildingId: buildingId,
            latitude: latitude,
            longitude: longitude,
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            new PNotify({
                title: 'Success',
                text: 'Building Geo Code Added',
                type: 'success',
                icon: 'fa fa-info-circle'
            });
        }).fail(function (data) {
            new PNotify({
                title: 'Map search form generating failed',
                text: 'Please retry...',
                type: 'error',
                icon: 'fa fa-times-circle-o'
            });
        });
    };

    var buldingDropzone = new Dropzone('div#buildingFiles', {
        url: '<?php echo e(URL::action("RnwController@uploadFile")); ?>',
        paramName: "aFile", // The name that will be used to transfer the file
        maxFilesize: 5, // MB

        addRemoveLinks: true,
        dictResponseError: "Can't upload file!",
        autoProcessQueue: true,
        thumbnailWidth: 138,
        thumbnailHeight: 120,

        previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size">File size: <span data-dz-size></span></div><div class="dz-thumbnail-wrapper"><div class="dz-thumbnail"><img data-dz-thumbnail><span class="dz-nopreview">No preview</span><div class="dz-success-mark"><i class="fa fa-check-circle-o"></i></div><div class="dz-error-mark"><i class="fa fa-times-circle-o"></i></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" data-dz-uploadprogress></div></div></div>',

        resize: function (file) {
            var info = {srcX: 0, srcY: 0, srcWidth: file.width, srcHeight: file.height},
                    srcRatio = file.width / file.height;
            if (file.height > this.options.thumbnailHeight || file.width > this.options.thumbnailWidth) {
                info.trgHeight = this.options.thumbnailHeight;
                info.trgWidth = info.trgHeight * srcRatio;
                if (info.trgWidth > this.options.thumbnailWidth) {
                    info.trgWidth = this.options.thumbnailWidth;
                    info.trgHeight = info.trgWidth / srcRatio;
                }
            } else {
                info.trgHeight = file.height;
                info.trgWidth = file.width;
            }
            return info;
        }
    });

    buldingDropzone.on("sending", function (file, xhr, formData) {
                formData.append("_token", '<?php echo e(csrf_token()); ?>');
                formData.append("destinationPath", '<?php echo e($filePath); ?>');
            }
    );

    buldingDropzone.on("complete", function () {
        $('#clientFileList').attr('src', "<?php echo e(url('filesys'.'?cd=/'.'&homeRepo='.$urlPath)); ?>");
    });
</script>