@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["TitlePostioningTool"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="div_load">
    <img src="../../Content/images/13.gif" style="position: absolute; top: 44%; left: 48%;" />
</div>
<div class="size25 left">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Controls
            </div>
        </div>
        <div class="innerWindow">
            <div class="menubar">
                <div class="searchBox" title="Quick Search">
                    <div class="inputBox">
                        <input type="text" id="txtSearch" />
                    </div>
                    <div class="sIcon">
                        <img alt="" src="@Url.Content("~/Content/images/search-icon.png")" />
                    </div>
                </div>
            </div>
            <div class="content contentoverflow">
                <div class="listDetails">
                    <div class="ldSection shadow_btm">
                        <table class="themeTable" cellpadding="5" cellspacing="0">
                            <thead>
                                <th colspan="2" class="filter_head">
                                    <img src="~/Content/css/images/filters-banner.jpg" border="0" />
                                </th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span><input type="radio" style="height:20px; width:20px;" name="option" value="region"></span><span class="darktxt"> Region</span>
                                    </td>
                                    <td class="tableCellinfo darktxt">
                                         <input id="regionCombobox" placeholder="Region" onfocus="this.select();" style="width: 200px;" />
                                            <span id="spanRegion1" class="error" style="display: none; color: red">*</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span><input type="radio" checked="checked" style="height:20px; width:20px;" name="option" value="state"></span><span class="darktxt"> State</span>
                                    </td>
                                    <td class="tableCellinfo darktxt">
                                         <input id="stateCombobox" placeholder="State" onfocus="this.select();" style="width: 200px;" />
                                            <span id="spanState1" class="error" style="display: none; color: red">*</span>
                                    </td>
                                </tr>
                                @*<tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt">City</span>
                                    </td>
                                    <td class="tableCellinfo darktxt">
                                        <input id="cityCombobox" style="width: 200px;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt ">Dealer</span>
                                    </td>
                                    <td class="tableCellinfo darktxt">
                                        <input id="dealerCombobox" style="width: 200px;" />
                                    </td>
                                </tr>*@
                                <tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt ">SLA (Minutes)</span>
                                    </td>
                                    <td class="tableCellinfo darktxt">
                                        <input id="slaCombobox" style="width: 200px;" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="btn_wrapper aling_left">
                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td>
                                        <input id="get_van_coverage" type="button" value="Submit" class="button_blue custom_postool_btn" onclick="getAllVansOnGeoView()" /></td>
                                    <td>
                                        <input id="reset_van_coverage" type="button" value="Reset" class="button_blue custom_postool_btn" onclick="resetVanCoverage()" style="display: none;" /></td>
                                    <td>
                                        <input id="update_van_coverage" type="button" value="Update Coverage" class="button_blue custom_postool_btn" onclick="updateVanCoverage()" style="display: none; width: 134px;" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div>
                        <table class="themeTable" cellpadding="5" cellspacing="0" style="border: 1px solid #dedede">
                            <thead>
                                <tr>
                                    <th colspan="2">
                                        <img src="~/Content/css/images/timeduration.png" border="0" />
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="text-align:left; background: #F7F7F7;">
                                        State
                                    </td>
                                     <td class="tableCellinfo darktxt fleet_combo">
                                        <input id="stateCombobox1" placeholder="State" onfocus="this.select();" style="width: 173px;" />
                                        <span id="spanState" class="error" style="display: none; color: red">*</span>
                                    </td>
                                </tr>
                                  <tr>
                                    <td  style="text-align:left; background: #F7F7F7;">
                                         Duration (in months)
                                    </td>
                                     <td class="tableCellinfo darktxt fleet_combo">
                                        <select id="ddTimeDuration" style="  float:left; "></select>
                                        <span id="spanTimeDuration" class="error" style="display: none; color: red">*</span>
                                        <div id="totalBreakDown" style="float: left; margin: 8px 0px 0px 10px; font-size: 14px;font-weight: bold;"></div>
                                     </td>
                                        
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <table class="themeTable" cellpadding="5" cellspacing="0" >
                                            <tr>
                                                <td style="padding-bottom:10px; border-top:0px">
                                        <div class="onoffswitch" style="float:left;">
                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  id="btnSlaMeet" checked="false">
                                            <label class="onoffswitch-label" for="btnSlaMeet">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                           
                                        </div>
                                         
                                        <div id="slaMetCount" style="float: left; margin: 17px 0px 0px 10px; font-size: 14px;font-weight: bold;"></div>
                                        <div class="clear"></div>
                                    </td>

                                    <td style="padding-bottom:10px; border-top:0px">
                                        <div class="onoffswitch" style="float:left;">
                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  id="btnSlaNotMeet" checked="false">
                                            <label class="onoffswitch-label" for="btnSlaNotMeet">
                                                <span class="onoffswitch-inner notMET"></span>
                                                <span class="onoffswitch-switch notMET"></span>
                                            </label>
                                            
                                        </div>
                                         <div id="slaNotMetCount" style="float: left; margin: 17px 0px 0px 10px; font-size: 14px;font-weight: bold;"></div>
                                        <div class="clear"></div>
                                    </td>

                                            </tr>

                                        </table>

                                    </td>

                                </tr>

                                @*<tr>
                                    <td class="tableCellinfo AlignCenter bdrightnone">
                                        <div class="onoffswitch">
                                            
                                            <input type="checkbox" onclick="GetSLAMeet()" id="btnSlaMeet" />

                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td class="AlignCenter bdright">
                                        <div class="tooltip">
                                            <label>
                                                <input type="checkbox" onclick="GetSLANotMeet()" id="btnSlaNotMeet" />SLA Not Met</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableCellinfo AlignCenter bdrightnone">
                                        <div class="tooltip">
                                            <label>
                                                <input type="checkbox" onclick="GetOpportunityLost()" id="btnOpportunityLost" />Opportunity Lost</label>
                                        </div>
                                    </td>
                                    <td class="AlignCenter bdright">
                                        <div class="tooltip">
                                            <input type="submit" value="" class="" id="btnReset" onclick="ShowAllMap()" />
                                            <span>
                                                <img class="callout" src="/Content/css/images/callout.gif">
                                                <strong>Reset</strong>
                                            </span>
                                        </div>
                                    </td>
                                </tr>*@
                                @*<tr>
                                    <td class="tableCellinfo AlignCenter bdrightnone">
                                        <div class="tooltip">
                                            <input type="button" class="button_blue fleft" value="SLA Met" onclick="GetSLAMeet()" id="btnSlaMeet" />
                                            <span>
                                                <img class="callout" src="~/Content/css/images/callout.gif" />
                                                <strong>SLA Met</strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="AlignCenter bdright">
                                        <div class="tooltip">
                                            <input type="button" class="button_blue fleft" value="SLA Not Met" id="btnSlaNotMeet" onclick="GetSLANotMeet()" />
                                            <span>
                                                <img class="callout" src="~/Content/css/images/callout.gif" />
                                                <strong>SLA Not Met</strong>
                                            </span>
                                        </div>
                                    </td>
                                </tr>*@
                            </tbody>
                        </table>
                        <div class="btn_wrapper aling_left">
                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td>
                                        <input type="submit" value="Submit" class="button_blue fleft resetauto custom_postool_btn" style="margin: -5px 0px 0 0;" onclick="GA_GetDetailFromServer()" />
                                        @*<input type="button" value="Reset" class="button_blue custom_postool_btn"  onclick="showReport()" />*@
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div id="blindSpot_toolbox" class="shadow_btm">
                        <table class="themeTable" cellpadding="5" cellspacing="0">
                            <thead>
                                <tr>
                                    <th colspan="2">
                                        <img src="~/Content/css/images/blind-spotool-banner.png" border="0" />
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    @*<td class="tableCelllabel">
                                        <span class="darktxt">WayPoint</span>
                                    </td>*@
                                    <td class="tableCellinfo AlignCenter bdrightnone">
                                        <div class="tooltip">
                                            <input type="button" id="bs_waypoint" onclick="enable_bs_waypoint_tool()" />
                                            <span>
                                                <img class="callout" src="~/Content/css/images/callout.gif" />
                                                <strong>Way Point</strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="AlignCenter bdright">
                                        <div class="tooltip">
                                            <input type="button" id="bs_van" onclick="enable_bs_van_tool()" />
                                            <span>
                                                <img class="callout" src="~/Content/css/images/callout.gif" />
                                                <strong>Spot Van</strong>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                @*<tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt">Van</span>
                                    </td>
                                    <td class="tableCellinfo" colspan="2">
                                        <div class="tooltip">
                                            <input type="button" id="bs_van" onclick="enable_bs_van_tool()" />
                                            <span>
                                                <img class="callout" src="~/Content/css/images/callout.gif" />
                                                <strong>Spot Van</strong>
                                            </span>
                                        </div>
                                    </td>
                                </tr>*@
                                @*<tr>
                                    <td class="tableCellinfo AlignCenter">
                                        <input type="button" value="RESET" class="button_blue" onclick="resetBlindSpotGenerator()" />
                                    </td>
                                    <td class="tableCellinfo AlignCenter">
                                        <input type="button" value="GENERATE BLINDSPOT" class="button_blue" style="width:auto;" onclick="BlindSpotGenerator()" />
                                    </td>
                                </tr>*@
                            </tbody>
                        </table>

                        <div class="btn_wrapper">
                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td class="bdrbtmnone">
                                        <input type="button" value="RESET" class="button_blue" style="margin: -3px 0px 0 0" onclick="resetBlindSpotGenerator()" /></td>
                                    <td class="bdrbtmnone">
                                        <input type="button" value="GENERATE BLINDSPOT" class="button_blue" style="width: auto; margin: -3px 0 0 0" onclick="BlindSpotGenerator()" /></td>
                                </tr>
                            </table>
                        </div>

                        <div class="legendsx">
                        <ul style=" margin-left:10px;">
                            <li><span class="closeticket"></span><div>SLA Met</div> </li>
                            <li><span class="slanotticket"></span><div>SLA Not Met</div> </li>
                        </ul>
                    </div>

                    </div>
                </div>
            </div>
            @*<div class="statusbar">*@
            @*<input type="button" value="RESET" class="button_blue" style="margin:-3px 5px 0 0" onclick="resetBlindSpotGenerator()" />
                <input type="button" value="GENERATE BLINDSPOT" class="button_blue" style="width:auto; margin:-3px 0 0 0" onclick="BlindSpotGenerator()" />*@
            @*<input id="get_van_coverage" type="button" value="Submit" class="button_blue custom_postool_btn" onclick="getAllVansOnGeoView()" />
                <input id="reset_van_coverage" type="button" value="Reset" class="button_blue custom_postool_btn" onclick="resetVanCoverage()" style="display: none;" />
                <input id="update_van_coverage" type="button" value="Update Coverage" class="button_blue custom_postool_btn" onclick="updateVanCoverage()" style="display: none;" />*@
            @*</div>*@
        </div>
    </div>
</div>
<div class="size75 right">
    <div class="window">
        <div class="titlebar">
            <div class="title fleft">
                Van on Map
            </div>
        </div>
        <div id="divDetail" class="innerWindow">
            <div id="map-canvas" class="content">
            </div>
        </div>
    </div>
</div>
<div id="divDetails" style="display: none;">
</div>
@*<script type="text/javascript" src="@Url.Content("~/Scripts/map_api/ccplGoogleMap.js")"></script>*@
@*<script type="text/javascript" src="@Url.Content("~/Scripts/map_api/ccplMapAPI.js")"></script>*@
@*<script src="https://maps.googleapis.com/maps/api/js?client=gme-teramatrixtechnologies&v=3.20&type=restaurant,establishment,fire_station&sensor=false&libraries=geometry"></script>*@


@{
   
    var mapApiKey = System.Configuration.ConfigurationManager.AppSettings["GoogleId"];
    //(mapApiKey);
    var src1 = "https://maps.googleapis.com/maps/api/js?v=3.0&sensor=false&libraries=geometry&key="+mapApiKey;
}
<script src="@src1"></script>


@Scripts.Render("~/bundles/jspositioning")
<script type="text/javascript" src="~/Scripts/Report/PositioningTool.js"></script>
<script type="text/javascript" src="~/Scripts/map_api/markerclusterer.js"></script>
<script type="text/javascript" src="~/Scripts/map_api/oms.min.js"></script>
@*<script src="@Url.Content("")" type="text/javascript"></script>*@
<script type="text/javascript">

    var securityToken = '@ViewBag.SecurityToken';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var userId = '@ViewBag.Userid';
    $(document).ready(function () {
        loadStateChoices1();
        bindTimeDuration();
    });
    //function calling on document ready

</script>

<style type="text/css">

    .clear { float:none; clear:both;    }

    .onoffswitch {
        position: relative;
        width: 111px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        margin-top: 14px;
        margin-left: 14px;
    }

    .onoffswitch-checkbox {
        display: none;
    }

    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 0px;
        height: 22px;
    }

    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        -moz-transition: margin 0.3s ease-in 0s;
        -webkit-transition: margin 0.3s ease-in 0s;
        -o-transition: margin 0.3s ease-in 0s;
        transition: margin 0.3s ease-in 0s;
    }

        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 26px;
            font-size: 14px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .onoffswitch-inner:before {
            content: "SLA Met";
            /*padding-left: 10px;*/
            background-color: #EE2622;
            padding-left: 16px;
            color: #FFFFFF;
            text-align: left;
            font-size: 12px;
            height: 22px;
            line-height: 20px;
        }

        .onoffswitch-inner:after {
            content: "SLA Met";
            padding-right: 10px;
            background-color: #CCCCCC;
            color: #1B3F94;
            text-align: right;
            color: #949494;
            font-size: 12px;
            padding-right: 16px;
            height: 22px;
            line-height: 20px;
        }

    .onoffswitch-switch {
        display: block;
        width: 28px;
        margin: 0px;
        background: #1B3F94;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 82px;
        -moz-transition: all 0.3s ease-in 0s;
        -webkit-transition: all 0.3s ease-in 0s;
        -o-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }

    .onoffswitch-inner.notMET:after, .onoffswitch-inner.notMET:before {
        content: "SLA Not Met";
    }

    .onoffswitch-inner.notMET:after, .onoffswitch-inner.opportunityLost:after {
        padding-right: 4px;
    }

    .onoffswitch-inner.notMET:before, .onoffswitch-inner.opportunityLost:before {
        padding-left: 4px;
    }

    .onoffswitch-inner.opportunityLost:after, .onoffswitch-inner.opportunityLost:before {
        content: "Opportunity Lost";
    }

    .opprtunityLostSwitch {
        width: 135px;
        left: 22%;
        margin-bottom: 14px;
    }

    .opportunityLost {
        right: 106px;
    }

    input[type="checkbox"] {
        height: 20px !important;
        width: 20px !important;
    }


    .TicketReportDetails_Window {
        width: 90% !important;
        top: 12% !important;
        left: 5% !important;
    }


    .FleetDetails_Window {
        width: 90% !important;
        top: 9% !important;
        left: 5% !important;
    }



    .contentoverflow .tableCellinfo .k-dropdown-wrap .k-input {
  height: 24px !important;
  line-height: 29px !important;
}

</style>