<!DOCTYPE html>
<html ng-app="plugin">
<head lang="en">
    <title>widget</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="../../../scripts/jquery/jquery-1.11.2.min.js"></script>
    <script src="../../../scripts/buildfire.js"></script>
</head>
<body ng-controller="pluginCtrl" ng-init="displayEx = false">

    <!-- Starts Search -->
    <div class="searchDrops" ng-show="displayTable">
        <h2><strong >Cook Book</strong> </h2>

        <b>Search by Meal Type:</b><select ng-model="mainSearch">
            <option ng-repeat="m in groups" value="{{m.second}}">{{m.main}}</option>
        </select>
        <br />
        <input ng-model="search" placeholder="What Meal are you looking for?" style="width:100%; height:25px; font-size:20px;" />



    </div>

    <style>
        
        #intercom-container{
            display:none;
        }
        .searchDrops {
            text-align: center;
        }

            .searchDrops select {
                width: auto;
                font-size: 15px;
                margin-bottom: 10px;
            }
    </style>

    <!-- Ends Search// Starts Table of exercises -->
    <table id="loaded" ng-show="displayTable">
        <thead>
            <tr>
                <th></th>
                <th>Meal</th>
                <th>Meal Type</th>
            </tr>
  </thead>
  <tbody>

      <tr ng-repeat="x in exLib | filter : {title:search}| filter:{type:mainSearch}" ng-show="displayTable" ng-click="activeEx(x)">
          <td class="tableIMG"><img style="width:200px;" ng-src="{{x.pic}}" /></td>
          <td class="tableSmall"><strong>{{x.title}}</strong></td>
          <td class="tableSmall"><strong>{{x.type}}</strong></td>
      </tr>
  </tbody>
    </table>
    <!-- Ends Table// Starts Exercise Pop Ups -->
    <div class="exerciseCard" id="exCard" ng-repeat="meals in exLib| filter:{title:exCardFilter}" ng-show="displayEx">
        <h2 text-align:center;"><strong>{{meals.title}}</strong></h2>
        <img style="width:100%;" ng-src="{{meals.pic}}" />
        <div style="text-align:left;">
            <h3 style=" font-weight:bolder;"><strong>Steps to Cook Meal</strong></h3> 
            <p>{{meals.step1}}</p>
            <p>{{meals.step2}}</p>
            <p>{{meals.step3}}</p>
            <p>{{meals.step4}}</p>
            <p>{{meals.step5}}</p>
            <p>{{meals.step6}}</p>
            <p>{{meals.step7}}</p>
            <p>{{meals.step8}}</p>
            <p>{{meals.step9}}</p>
        </div>
        <div style="text-align:left;">
            <div ng-show="{{meals.onecalShow}}">
                <h4 style=" font-weight:bolder;"><strong>100 Calorie</strong></h4>
                <h5 style=" font-weight:bolder;"><strong>Ingredient List</strong></h5>

                <p>{{meals.onecal1}}</p>
                <p>{{meals.onecal2}}</p>
                <p>{{meals.onecal3}}</p>
                <p>{{meals.onecal4}}</p>
                <p>{{meals.onecal5}}</p>
                <p>{{meals.onecal6}}</p>
                <p>{{meals.onecal7}}</p>
                <p>{{meals.onecal8}}</p>
                <p>{{meals.onecal9}}</p>
            </div>
            <div ng-show="{{meals.threecalShow}}">
                <h4 style=" font-weight:bolder;"><strong>300 Calorie</strong></h4>
                <h5 style=" font-weight:bolder;"><strong>Ingredient List</strong></h5>

                <p>{{meals.threecal1}}</p>
                <p>{{meals.threecal2}}</p>
                <p>{{meals.threecal3}}</p>
                <p>{{meals.threecal4}}</p>
                <p>{{meals.threecal5}}</p>
                <p>{{meals.threecal6}}</p>
                <p>{{meals.threecal7}}</p>
                <p>{{meals.threecal8}}</p>
                <p>{{meals.threecal9}}</p>
                </div>
            <div ng-show="{{meals.sixcalShow}}">

                <h4 style=" font-weight:bolder;"><strong>600 Calorie</strong></h4>
                <h5 style=" font-weight:bolder;"><strong>Ingredient List</strong></h5>
                
                <p>{{meals.sixcal1}}</p>
                <p>{{meals.sixcal2}}</p>
                <p>{{meals.sixcal3}}</p>
                <p>{{meals.sixcal4}}</p>
                <p>{{meals.sixcal5}}</p>
                <p>{{meals.sixcal6}}</p>
                <p>{{meals.sixcal7}}</p>
                <p>{{meals.sixcal8}}</p>
                <p>{{meals.sixcal9}}</p>
                </div>
            <div ng-show="{{meals.ninecalShow}}">

                <h4 style=" font-weight:bolder;"><strong>900 Calorie</strong></h4>
                <h5 style=" font-weight:bolder;"><strong>Ingredient List</strong></h5>

                <p>{{meals.ninecal1}}</p>
                <p>{{meals.ninecal2}}</p>
                <p>{{meals.ninecal3}}</p>
                <p>{{meals.ninecal4}}</p>
                <p>{{meals.ninecal5}}</p>
                <p>{{meals.ninecal6}}</p>
                <p>{{meals.ninecal7}}</p>
                <p>{{meals.ninecal8}}</p>
                <p>{{meals.ninecal9}}</p>
                </div>
            </div>
    </div>
    <!-- Ends Pop Ups// Starts Scripts -->
    <style>


            body input {
                background: none;
            }

        #loaded {
            width: 100%;
            margin-top: 10px;
            border: none;
            font-size: 12px;
            text-align: center;
        }

            #loaded tr {
                border-bottom: 1px solid;
            }

            #loaded td {
                border-right: 1px dashed;
                padding: 3px;
            }

            #loaded th {
                font-size: 16px;
                font: bold;
                text-align: center;
                padding: 2px;
            }
                .exerciseCard {
            position: absolute;
            margin: 0;
            top: 0;
            left: 0;
            width: 100%;
            padding:5px;
            height:auto;   
        }

        .tableSmall {
            width: 50px;
        }

        .tableIMG {
            width: 200px;
        }
    </style>
    <script>
        var myApp = angular.module('plugin', []);
        myApp.controller('pluginCtrl', function ($scope, $http) {
            $scope.groups = [
    {
        "main": "All Meal",
        "second": undefined
    }, {
        "main": "Breakfast",
        "second": "Breakfast"
    }, {
        "main": "Lunch",
        "second": "Lunch"
    }, {
        "main": "Gourmet Dinner",
        "second": "Gourmet Dinner"
    }, {
        "main": "Snacks",
        "second": "Snacks"
    }];

            $scope.displayTable = true;

            $scope.activeEx = function (x) {

                $scope.displayEx = true;
                $scope.displayTable = false;
                $scope.exCardFilter = x.title;
                console.log($scope.exCardFilter);
                console.log($scope.displayEx);
            }
            buildfire.navigation.onBackButtonClick = function () {
                // check to see if details div is visible
                var div = document.getElementById('exCard');
                if ($scope.displayEx === true) {
                    //this means the details div is visible so when 
                    //the user clicks the back button hide it
                    $scope.displayEx = false;
                    $scope.displayTable = true;
                    buildfire.navigation.restoreBackButtonClick();
                }
                else {
                    // this means they are at the root of the plugin so assume default behavior
                    
                }
                buildfire.navigation.restoreBackButtonClick();
                $scope.$apply();
            }
            $http.get('https://liquorifittraining.com/cookBook/cookBook.php')
.then(function (res) {
    $scope.exLib = res.data;
    console.log($scope.exLib);
});


        });

    </script>
</body>
</html>