@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["TitleNewLeadReport"];
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.hostAddress = System.Configuration.ConfigurationManager.AppSettings["hostAddress"];
}
<div class="size20 left">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Ticket List
            </div>
        </div>
        <div class="innerWindow">
            <div class="menubar">
                <div id="Menu_bar" 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 withstatusbar">
                <!-- ticket list table -->
                <div id="TicketList_Tbl" class="listBox ldSection" data-bind="visible: $root.ticketList().length>0">
                    <table id="tableDevices" cellpadding="0" cellspacing="0">
                        <tr class="tableCelltitle">
                            <th style="text-align: left;">S.No.</th>
                            <th style="text-align: left; text-indent:0;">Ticket Id</th>
                            @*<th style="text-align: left;">Mobile No.</th>*@
                            <th style="text-align: left;">Status</th>
                            <th style="text-align: left;">SLA (Minutes)</th>
                        </tr>
                        <tbody data-bind="foreach: ticketList">
                            <tr data-bind="attr: {'id': ticket_id}, css: { activeListTr: $data == $root.chosenTicket() }, click: $root.assignTicket">
                                <td>
                                    <label class="handMouse" data-bind="text : $index() + 1">
                                    </label>
                                </td>
                                <td>
                                    <label class="handMouse" data-bind="text: ticket_id">
                                    </label>
                                </td>
                                @*<td>
                                    <label class="handMouse" data-bind="text: EmployeeContact">
                                    </label>
                                </td>*@
                                <td>
                                    <label class="handMouse" data-bind="text: work_status">
                                    </label>
                                </td>
                                 <td>
                                    @*<label class="handMouse" data-bind="text: sla_duration">
                                    </label>*@
                                     <span class="handMouse" data-bind="visible: sla_duration <= 120">
                                         <label class="handMouse" style="color:green" data-bind="text: sla_duration">
                                         </label>
                                    </span>
                                     <span class="handMouse" data-bind="visible: sla_duration > 120">
                                         <label class="handMouse" style="color:red" data-bind="text: sla_duration">
                                         </label>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- end of ticket list table -->
                <!-- form -->
                <div id="Tracker_from" class="display_none">
                    <form action="get">
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                            @*<tr>
                                <th class="tableCelltitle" colspan="2">Talbe heading</th>
                            </tr>*@
                            <tr>
                                <td class="paddding_Zero">
                                    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="Inner_ListTbl">
                                        <tbody>
                                            <tr>
                                                <th class="tableCelltitle" colspan="2">Agent Info</th>
                                            </tr>
                                        </tbody>
                                        <tbody class="structure">
                                        <tr>
                                            <td>Language</td>
                                            <td align="right">
                                                <select id="agent_language">
                                                    <option>Select</option>
                                                    <option>English</option>
                                                    <option>Hindi</option>
                                                    <option>Gujarati</option>
                                                    <option>Punjabi</option>
                                                    <option>Malayalam</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Region</td>
                                            <td align="right">
                                                <select id="agent_region">
                                                    <option>Select</option>
                                                    <option>East India</option>
                                                    <option>Northern India</option>
                                                    <option>Northeast India</option>
                                                    <option>South India</option>
                                                    <option>Western India</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>State</td>
                                            <td align="right">
                                                <select id="agent_state">
                                                    <option>Select</option>
                                                    <option>Rajasthan</option>
                                                    <option>Gujarat</option>
                                                    <option>Kerala</option>
                                                    <option>Maharashtra</option>
                                                    <option>Punjab</option>
                                                    <option>Tamil Nadu</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>City</td>
                                            <td align="right">
                                                <select id="agent_city">
                                                    <option>Select</option>
                                                    <option>Jaipur</option>
                                                    <option>Jodhpur</option>
                                                    <option>Ajmer</option>
                                                    <option>Kota</option>
                                                    <option>Udaipur</option>
                                                    <option>Alwar</option>
                                                </select>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="paddding_Zero">
                                    <table style="margin-top: 5px;" width="100%" cellspacing="0" cellpadding="0" border="0" class="Inner_ListTbl">
                                        <tbody>
                                        <tr>
                                            <th style="border-top: 1px solid #c5c5c5;" colspan="2" class="tableCelltitle">Driver/Caller Info</th>
                                        </tr>
                                        </tbody>
                                        <tbody class="structure">
                                        <tr>
                                            <td width="120" class="">Name</td>
                                            <td class=" ">
                                                <input type="text" id="driver_name" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="120" class="">Contact</td>
                                            <td class=" ">
                                                <input type="text" id="driver_contact_no" />
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="paddding_Zero">
                                    <table style="margin-top: 5px;" width="100%" cellspacing="0" cellpadding="0" border="0" class="Inner_ListTbl">
                                        <tbody>
                                        <tr>
                                            <th style="border-top: 1px solid #c5c5c5;" colspan="2" class="tableCelltitle">Vehicle Info</th>
                                        </tr>
                                        </tbody>
                                        <tbody class="structure">
                                        <tr>
                                            <td class="">Name</td>
                                            <td class="">
                                                <input type="text" id="vehicle_owner_name" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="">Contact no</td>
                                            <td class="">
                                                <input type="text" id="vehicle_owner_contact_no" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">Location</td>
                                            <td class="">
                                                <input type="text" id="vehicle_owner_location" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="">Registration no</td>
                                            <td class="">
                                                <input type="text" id="vehicle_registration" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">Vechicle model</td>
                                            <td class="">
                                                <input type="text" id="vehicle_model"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="">Product varient 123</td>
                                            <td class="">
                                                <input type="text" id="vehicle_product_varient" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td style="vertical-align:top;" class=" ">VAS exact location</td>
                                            <td colspan="1" class=" ">
                                                <textarea rows="20" cols="20" id="eos_exact_location" disabled></textarea>
                                            </td>
                                            @*<td class=" ">Direction of vechicle(moving toward)</td>
                                            <td class=" ">
                                                <input type="text" />
                                            </td>*@
                                        </tr>

                                        <tr>
                                            <td class=" ">Type of load carrying</td>
                                            <td class=" ">
                                                <input type="text" id="vehicle_type_of_load_carrying"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class=" ">Direction of vechicle</td>
                                            <td class=" ">
                                                <input type="text" id="vehicle_direction_of_moving" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td style="vertical-align: top;" class=" ">Nature of problem</td>
                                            <td colspan="1" class=" ">
                                                <textarea rows="35" cols="20" id="nature_of_problem"></textarea>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <!-- end of form -->

            </div>
            <div class="statusbar" id="TicketList_Statusbar">
                @*<div id="TicketList_Tbl_BtnWrp">
                    <input type="submit" value="Cancel" onclick="" class="Report_Btn" style="margin: auto;" />
                    <input type="submit" value="Get All Vans" onclick="" class="Report_Btn" style="margin: auto;" />
                </div>*@
                <div id="Tracker_from_BtnWrp" class="display_none">
                    <input id="ReturnToList" type="submit" value="Cancel" onclick="" class="Report_Btn" style="margin: auto;" />
                    <input type="submit" value="Get All Vans" onclick="calculateDistances()" class="Report_Btn" style="margin: auto;" />
                </div>
            </div>
        </div>
    </div>
</div>
<div class="size60 mid20-20">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Ticket Details On Map
            </div>
        </div>
        <div id="divDetail" class="innerWindow">
            <div class="toolbar">
                <ul class="toolUl">
                    <li class="editBtn">
                        <div class="toolBtn">
                            <label>
                                @*<span class="hugeIcon addIcon"></span>*@<span class="k-icon k-add"></span> Add New Ticket
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="divMapContainer" class="content withtoolbar">
            </div>
        </div>
        @*<div class="statusbar">
        </div>*@
    </div>
</div>
<div class="size20 right">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Ticket Details
            </div>
        </div>
        <div id="divDetail" class="innerWindow">
            <div class="content">
                <div class="listDetails">
                    <div class="ldSection">
                        <h2 style="text-align: center" class="darktxt">Ticket Id: <span data-bind="text: ticket_id"></span></h2>
                        <table class="themeTable" cellpadding="5" cellspacing="0">
                            <tbody>
                                <tr>
                                    <th class="tableCelltitle paddding_Zero" colspan="2">Agent Info</th>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Language</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: agent_language"></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: agent_region"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">State</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: agent_state"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">City</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: agent_city"></td>
                                </tr>
                                <tr>
                                    <th class="tableCelltitle paddding_Zero" colspan="2">Driver/Caller Info</th>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Name</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: driver_name"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Contact</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: driver_contact_no"></td>
                                </tr>
                                <tr>
                                    <th class="tableCelltitle paddding_Zero" colspan="2">Vehicle Info</th>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Owner's Name</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_owner_name"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Owner's Contact No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_owner_contact_no"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Owner's Location</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_owner_location"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Registration No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_registration"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Model No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_model"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Product varient 12</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_product_varient"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">VAS exact location</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: eos_exact_location"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Type of load carrying</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_type_of_load_carrying"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Direction of vechicle</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: vehicle_direction_of_moving"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Nature of problem</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: nature_of_problem"></td>
                                </tr>
                                <tr>
                                    <th class="tableCelltitle paddding_Zero" colspan="2">Van Info</th>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class="tableCelllabel">
                                        <span class="darktxt">Van ID</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: employeeId"></td>
                                </tr>
                               @* <tr>
                                    <td style="width: 50%" class=" ">
                                        <span class="darktxt">Name</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: driver_name"></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%" class=" ">
                                        <span class="darktxt">Contact No.</span>
                                    </td>
                                    <td style="width: 50%" class="tableCellinfo darktxt" data-bind="text: driver_contact_no"></td>
                                </tr>*@
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="dialog-form" title="Nearest Vans List"></div>
<link href="@Url.Content("~/Content/css/template.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/page-layout.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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ3wlWRqHYEdO5MEiXvbJUjopdDsy3CIg &sensor=false&libraries=geometry"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Ticket/TicketAdministration.js")" type="text/javascript"></script>
<script type="text/javascript">
    // accessing host address and making it available globally
    var hostAddress = '@ViewBag.hostAddress';
    var taskStatusReport;

    //function calling on document ready
    $(document).ready(function () {
        'use strict';
        // hiding report table 
        //$('.themeTable').hide();
        // making report menu item selected
        setSelectedMenuItem("liTicketAdministartion");
        // binding date picker and showing today's date to Outscan date input box.
        $('#outscanDate').levydatepicker({ dateFormat: 'dd M yy', defaultDate: "@DateTime.Now.ToString("dd MMM yyyy")" });

        // creating an instance of TaskStatus Model
        taskStatusReport = new TaskStatusReport();
        // accessing and storing security token
        var securityToken = '@ViewBag.SecurityToken';
        // making the security token available gloablly
        taskStatusReport.assignSecurityToken(securityToken);
        // getting all the employees details and populate them on page
        taskStatusReport.getAllEmployees();
        // finally apply all knoucout bindings 
        ko.applyBindings(taskStatusReport);

        // initializing the map to a particular html ID on page.
        initMap("divMapContainer");

        //for left panel table toggle
        $(".editBtn").click(function () {
            $("#TicketList_Statusbar").removeClass('Bgwhite');
            $("#TicketList_Tbl, #TicketList_Tbl_BtnWrp, #Menu_bar").hide();
            $("#Tracker_from, #Tracker_from_BtnWrp").show();

            $(".dashboard .right").hide();

            $(".dashboard .mid20-20").removeClass('size60').addClass('size80');

            $("#userLocation").val('');
            bindClickEventToMap();
        });
        $("#ReturnToList").click(function () {
            $("#TicketList_Tbl, #TicketList_Tbl_BtnWrp, #Menu_bar").show();
            $("#Tracker_from, #Tracker_from_BtnWrp").hide();

            $(".dashboard .right").show();

            $(".dashboard .mid20-20").removeClass('size80').addClass('size60');

            removeClickEventToMap();
        });
        $("#TicketList_Statusbar").addClass('Bgwhite');
        //end of left panel table toggle
    });
</script>
<style type="text/css">
    textarea {
        /*width: 94%;*/
        height: 50px;
        /*margin-left: 10px;*/
    }

    .fulltextarea {
        width: 96% !important;
    }

    table.modalTable, .modalTable th, .modalTable td {
        border: 1px solid #c5c5c5;
        border-collapse: collapse;
    }

    .Bgwhite {
        background: #fff;
    }

    .modalTable th, .modalTable td {
        padding: 15px;
    }

    .modalTable th {
        text-align: left;
        background: #f7f7f7;
    }

    .modalTable {
        border-spacing: 5px;
    }

    tr.showMarked {
        background-color: lightgray;
    }
</style>