@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["Title"] + " | " + System.Configuration.ConfigurationManager.AppSettings["TitleHistoryTracking"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="size30 left">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                EOS Team List
            </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 withmenubar">
                @*<div class="listBox ldSection" data-bind="visible: $root.employees().length>0">
                    <table id="tableDevices" cellpadding="0" cellspacing="0" style="border: 1px solid #dedede; border-top: 0;">
                        <tr class="tableCelltitle">
                            <th style="text-align: left;">S.No.</th>
                            <th style="text-align: left;">Service Engineer</th>
                            <th style="text-align: left;">Mobile No.</th>
                            <th style="text-align: left; text-indent: 0;">Van Reg. No.</th>
                        </tr>
                        <tbody data-bind="foreach: employees">
                            <tr data-bind="attr: {'id': ServiceEngineerDeviceAlias}, css: { activeListTr: $data == $root.chosenEmployee() },click: $root.showEmployeeDetail">
                                <td>
                                    <label class="handMouse" data-bind="text : $index() + 1">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: ServiceEngineerName">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: ServiceEngineerContactNumber">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: VanRegistrationNumber">
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>*@
                <div class="listBox" data-bind="visible: $root.employees().length>0">
                    <table id="tableDevices" cellpadding="0" cellspacing="0" class="OpenTicketTbl" width="100%">
                        <thead>
                            <tr class="">
                                <th style="text-align: left;">S.No.</th>
                                <th style="text-align: left;">EOS Team</th>
                                <th class="" style="text-align: left;">License No.</th>
                                <th class="" style="text-align: left;">Region</th>
                                <th style="text-align: left;">Mobile No.</th>
                                <th style="text-align: left; text-indent: 0;">Van Reg. No.</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: employees">
                            <tr data-bind="attr: {'id': ServiceEngineerDeviceAlias}, css: { activeListTr: $data == $root.chosenEmployee() },click: $root.showEmployeeDetail">
                                <td>
                                    <label class="handMouse" data-bind="text : $index() + 1">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse">
                                        <label data-bind="text: DealerDealerName"></label>
                                        (<label data-bind="text: ServiceEngineerName"></label>)
                                    </label>
                                </td>
                                 <td>
                                    <label class="handMouse" data-bind="text: ServiceEngineerApplicationLicenseKey">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: OrganizationName">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: ServiceEngineerContactNumber">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: VanRegistrationNumber">
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="size45 mid20-20" style="left: 30%;">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Map
            </div>
        </div>
        <div id="divMap" class="innerWindow res_datepicker">
            <div class="menubar" id="Date_Selection" style="background: #fff; padding-top: 2px;">
                From:
                @(Html.Kendo().DatePicker()
              .Name("txtDate")
              .Start(CalendarView.Month)
              .Depth(CalendarView.Month)
              .Format("dd MMM yyyy")
              .Value(DateTime.Now)
              .Max(DateTime.Now)
               .HtmlAttributes(new { @class = "kendo-make-readonly" ,type="text"})
              )
                <input type="text" id="txtStartTime" value="00:00" />
                &nbsp; &nbsp; &nbsp;
                To:
                @(Html.Kendo().DatePicker()
              .Name("txtDateTo")
              .Start(CalendarView.Month)
              .Depth(CalendarView.Month)
              .Format("dd MMM yyyy")
              .Value(DateTime.Now)
              .Max(DateTime.Now)
               .HtmlAttributes(new { @class = "kendo-make-readonly",type="text" })
              )
                <input type="text" id="txtEndTime" value="23:30" />
                @*<input type="button" id="btnSubmit" class="themebutton themesimple themesilver" style="height: 18px; margin: 0px;" value="Go" data-bind="click: $root.showEmployeeHistory" />*@
                <button class="button_blue" id="btnSubmit" data-bind="click: $root.showEmployeeHistory" style="width: auto; margin-top: 0; line-height: 9px;">
                    GO</button>
            </div>
            <div id="divMapContainer" class="content withmenubar">
            </div>
        </div>
    </div>
</div>
<div class="size25 right">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                VAN Details
            </div>
        </div>
        <div id="divDetail" class="innerWindow">
            <div class="content">
                <div class="listDetails">
                    <div class="ldSection">
                        <h2 class="EngName_heading" @*style="text-align: center; background-color: #ee2e22; color: #fff;"*@ class="darktxt" data-bind="text: ServiceEngineerName"></h2>
                        <table class="themeTable VanDetailsTbl" cellpadding="5" cellspacing="0">
                            <tbody>
                                 <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Van Registration No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: VanRegistrationNumber"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Contact No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: ServiceEngineerContactNumber"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">IMEI No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: ServiceEngineerImeiNumber"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">VAN Address</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: VanCity"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Region</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: OrganizationName"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@*<link href="@Url.Content("~/Content/css/page-layout.css")" rel="stylesheet" type="text/css" />*@
<link href="@Url.Content("~/Content/css/time-picker.css")" rel="stylesheet" type="text/css" />
<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="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/timePicker.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Tracking/HistoryTracking.js")" type="text/javascript"></script>
<script type="text/javascript">

    var securityToken = '@ViewBag.SecurityToken';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var userId = '@ViewBag.Userid';

    //function calling on document ready
    $(document).ready(function () {
        // making the search box empty
        $('#txtSearch').val('');

        initMap("divMapContainer");
        // setSelectedMenuItem("liTracking");
        //$('#txtDate').levydatepicker({ dateFormat: 'dd M yy', maxDate: 0, defaultDate: "@DateTime.Now.ToString("dd MMM yyyy")" });
        timePicker("txtStartTime", "txtEndTime");
        ko.applyBindings(new HistoryTrackingModel());
    });
</script>
<style type="text/css">
    .content {
        overflow: auto;
    }

    .tableCelltitle th {
        background: #ee2e22;
        color: #fff;
        font-weight: normal;
        background: url("/Content/css/images/infowindow_head-bg.png") repeat-x left top;
    }

    .ldSection tr:nth-child(even) {
        background: #f9f9f9;
    }

    .ldSection td {
        /*line-height: 28px;*/
        height: 42px;
        font-family: Arial;
        font-family: 'Hermes_FB';
    }

    .VanDetailsTbl td {
        height: 32px;
    }

    #Date_Selection input[type="text"] {
        height: auto;
        font-size: small;
        height: 20px !important;
        margin-top: 0px;
        line-height: 21px;
        /*border: 1px solid #c5c5c5 !important;*/
    }

    #Date_Selection input[type="text"] {
        border: 0;
        padding: 0;
    }

    .k-icon {
        margin-top: -6px !important;
    }

    .kendo-make-readonly {
        border: 0;
    }

    .menubar input#txtStartTime, .menubar input#txtEndTime {
        border: 1px solid #c5c5c5 !important;
        width: 92px;
        font-family: 'Hermes_FB';
        line-height: 15px;
    }

    .k-datepicker {
        margin-right: 5px;
    }

    .k-i-arrow-w {
        margin-top: 0 !important;
    }

    span.k-icon.k-i-arrow-e {
        margin-top: 2px !important;
    }
</style>