Meteor.startup(function() {
  GoogleMaps.load();
  // Session.set("projectList", "[Home Depot POS]");
});

Template.body.helpers({
  totalSites: function() {
    return Sites.find().count();
  },
  completeSites: function() {
    return Sites.find({
      siteStatus: '1'
    }).count();
  },
  problemSites: function() {
    return Sites.find({
      siteStatus: '2'
    }).count();
  }
});

// Template.body.events({
//    "submit .filterBy-form": function (event) {
//      // Prevent default browser form submit
//      event.preventDefault();
//
//      // Get value from form element
//      var techName = event.target.text.value;
//      console.log(event);
//      console.log(techName);
//      Session.set("techName", techName);
//      // Clear form
//     //  event.target.text.value = "";
//    }
//  });

// Get Site Stats (1 = green, 2= yellow, 3 = red, 4 = complete)
Template.registerHelper('pickColor', function(inputNumber) {
  inputNumber = parseInt(inputNumber);
  switch (inputNumber) {
    case 0:
      return "black"; // Site not started yet.
      break;
    case 1: // Tech checked in.
      return "green";
      break;
    // case 2:
    //   return "orange";
    //   break;
    case 2:  // Problem with site
      return "red";
      break;
  }
});

// Get the selected sites to handle
$(document).ready(function() {
  $("#handleSite").click(function() {
    var siteIDs = $("#siteList input:checkbox:checked").map(function() {
      return this.id;
    }).get();
    for (var i = 0; i < siteIDs.length; i++) {
      Sites.update({ _id: siteIDs[i] }, {$set: { assignedTo: "Gerald"}});
    }
    $("#theSitesSelectAll").prop( "checked", false );
  });

  // Work with My Problem sites
  $("#myProblemSites").click(function() {
    var mySiteIDs = $("#mySites input:checkbox:checked").map(function() {
      return this.id;
    }).get();
    for (var i = 0; i < mySiteIDs.length; i++) {
      Sites.update({ _id: mySiteIDs[i] }, {$set: { assignedTo: null }});
    }
    $("#mySiteSelectAll").prop( "checked", false );
  });

  // Get the Selected Project Filters
  $("#projectList").click(function() {
      var projectList = $("#projectList input:checkbox:checked").map(function() {
      return this.id;
    }).get();
    Session.set("projectList", projectList);
  });

  // Get the Selected Client Filters
  $("#clientList").click(function() {
      var clientList = $("#clientList input:checkbox:checked").map(function() {
      return this.id;
    }).get();
    Session.set("clientList", clientList);
  });

  $('#sitesToShow input').on('change', function() {
    Session.set("sitesToShow", $('input[name=sitesToShow]:checked', '#sitesToShow').val());

  });

  $("#filterPanelIcon").click(function() {
    $("#filterPanel").toggle("slow");
  });

  $(".siteDetails").click(function() {
    alert("Open Lightbox");
  });

  // $(".getSite").click(function() {
  //   alert("Open Lightbox");
  // });
  //
  // $(".fancybox").fancybox({
	// 	maxWidth	: 800,
	// 	maxHeight	: 600,
	// 	fitToView	: false,
	// 	width		: '70%',
	// 	height		: '70%',
	// 	autoSize	: false,
	// 	closeClick	: false,
	// 	openEffect	: 'none',
	// 	closeEffect	: 'none'
	// });

}); // End Document Ready


Template.getProjects.helpers({
  sites: function() {
    const projects = Template.instance().distinct.get();
    // turn our array of project values into an array of {project: project}
    return _.map(projects, project => {
      return {
        project
      }
    });
  }
});

Template.getClients.helpers({
  sites: function() {
    const clients = Template.instance().distinct.get();
    // turn our array of project values into an array of {project: project}
    return _.map(clients, client => {
      return {
        client
      }
    });
  }
});

Template.getProjects.onCreated(function() {
  this.distinct = new ReactiveVar();
  Meteor.call('getDistinctProjects', (error, result) => {
    if (error) {
      // do something
    } else {
      Session.set("projectList", result);
      this.distinct.set(result); // save result when we get it
    }
  });
});

Template.getClients.onCreated(function() {
  this.distinct = new ReactiveVar();
  Meteor.call('getDistinctClients', (error, result) => {
    if (error) {
      // do something
    } else {
      Session.set("clientList", result);
      this.distinct.set(result); // save result when we get it
    }
  });
});

<head>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="Gerald Bailey">
  <link rel="icon" href="">
  <!-- <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" /> -->
</head>

<body>
  {{> header}}
  <!-- {{#if isInRole 'super-admin'}} -->

  <!-- Begin Site Body -->
  <div class="container-fluid">
    <!-- Start Filters Panel -->
    <div class="panel panel-primary col-xs-2" id="filterPanel">
      <div>
        <ul class="list-unstyled">
          <li class="text-right">Total Sites: {{totalSites}}</li>
          <li class="text-success text-right">Sites Complete: {{completeSites}}</li>
          <li class="text-warning text-right">Site Issues: {{problemSites}}</li>
        </ul>
      </div>
      <hr>
      <form class="filterBy-form">
        <div class="form-group">
          <label for="nameField">Filter By:</label>
          <input type="text" name="text" class="form-control" id="siteField" placeholder="Site Name or Number" />
        </div>
        <div class="form-group">
          <input type="email" name="text" class="form-control" id="techField" placeholder="Tech Name" />
        </div>
        <div class="form-group">
          <table class="table table-condensed" id="projectList">
            <thead>Project:</thead>
            {{> getProjects}}
          </table>
        </div>
        <div class="form-group">
          <table class="table table-condensed" id="clientList">
            <thead>Client:</thead>
            {{> getClients}}
          </table>
        </div>
      </form>
      <hr>
      <form class="form" id="sitesToShow">
        <label for="nameField">Show:</label>
        <div class="radio">
          <label class="all-sites">
            <input type="radio" name="sitesToShow" id="allSites" value="allSites" checked> All Sites
          </label>
        </div>
        <div class="radio">
          <label class="problem-sites">
            <input type="radio" name="sitesToShow" id="problemSitesOnly" value="problemSitesOnly"> All Problem Sites
          </label>
        </div>
        <div class="radio">
          <label class="unassigned-sites">
            <input type="radio" name="sitesToShow" id="problemSitesOnly" value="unassignedProblemSites"> Unassigned Problem Sites
          </label>
        </div>
      </form>
    </div>
    <!-- End Filters Panel -->
    <div>
      <a href="#" id="filterPanelIcon">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

    <!-- Map Panel -->
    <div class="col-lg-10 col-md-10 col-sm-10">
      <div class="row">
        <div class="panel panel-primary">
          {{> map}}
        </div>
      </div>

      <div class="row">
        {{> siteList}} {{> handleSites}}
      </div>
      <!-- End Row -->
    </div>

    {{> footer}}
  </div>
  <!-- {{/if}} -->

  <!-- End Container -->
  <!-- Latest compiled and minified JavaScript -->
</body>




<!-- Meteor Templates -->
<template name="getProjects">
  {{#each sites}}
  <div class="checkbox">
    <label class="projectList">
      <input type="checkbox" class="projectFilter" id="{{ project }}" checked="true">
      <small>{{project}}</small>
    </label>
  </div>
  {{/each}}
</template>


<template name="getClients">
  {{#each sites}}
  <div class="checkbox">
    <label class="clientList">
      <input type="checkbox" class="clientFilter" id="{{ client }}" checked="true">
      <small>{{client}}</small>
    </label>
  </div>
  {{/each}}
</template>