@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["Title"] + " | Ticket Administration Dealer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{

    var mapApiKey = System.Configuration.ConfigurationManager.AppSettings["GoogleId"];
    //(mapApiKey);
    var src1 = "https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=" + mapApiKey;
}
<script id="scriptMapApi" type="text/javascript" src='@src1'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
@*show loading*@
<div id="div_loading">
    @* <img src="../../Content/images/13.gif" style="position: absolute; top: 44%; left: 53%;" />*@
</div>
<div class="size25 left" id="divInnerWindow">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Dealer's Ticket List
            </div>
        </div>
        <div class="innerWindow overflow_x_hidden ">
            <div class="toolbar tabs" style="border-bottom: 1px solid #d5d5d5;">
                @*<div class="k-button k-button-icontext Inventory_curdBtn" onclick="viewCheckHistory()" id="tabCheckHistory"><span class="k-icon k-icon-small"></span>Check History</div>*@
                <div class="tabs">
                    <span id="totalTicket" class="fright" style="padding-top: 7px; padding-right: 6px;"></span>
                    <ul id="tabGroup">
                        <li id="tabMyTickets" class=" Tab Active_Tab" rel="myTickets">
                            Dealer Ticket
                            <div>
                                <label id="dealerTotalTicket"></label>
                            </div>
                        </li>
                        <li id="tabMyVansTickets" class="Tab Active_Tab" rel="myvansTickets">
                            Van Ticket
                            <div>
                                <label id="vanTotalTicket"></label>
                            </div>
                        </li>
                        <li id="tabMyAllocatedTickets" class="Tab Active_Tab" rel="myAllocatedTickets" style="display:none;">
                            Tickets To Be Allocated
                            <div>
                                <label id="allocatedTotalTicket"></label>
                            </div>
                        </li>
						 <li id="tabMyEPSTickets" class="Tab Active_Tab" rel="myEPSTickets">
                           EPS TICKETS
                            <div>
                                <label id="allocatedEPSTicket"></label>
                            </div>
                        </li>
                        @*<li id="tabMyTickets" class=" Tab" rel="myTickets">Dealer Ticket <span><label id="dealerTotalTicket"></label></span></li>
        <li id="tabMyVansTickets" class="Tab" rel="myvansTickets">Van Ticket <span><label id="vanTotalTicket"></label></span></li>*@
                    </ul>
                </div>

            </div>

            <div id="divTicketHistory" class="content withtoolbar" style="/*margin-top: 5px; */ overflow: hidden;">

                <div id="divMyTickets" class="divContent" rel="myTicketsHistory">
                    <div class="no_data display_block no_dispalyTop">
                        <span>
                            <p class="fs16"></p>
                        </span>
                    </div>
                </div>
                <div id="divMyAllocatedTickets" class="divContent" rel="myAllocatedTicketsHistory">
                    <div class="no_data display_block no_dispalyTop">
                        <span>
                            <p class="fs16"></p>
                        </span>
                    </div>
                </div>
				<div id="divMyEPSTickets" class="divContent" rel="
                     ">
                    <div class="no_data display_block no_dispalyTop">
                        <span>
                            <p class="fs16"></p>
                        </span>
                    </div>
                </div>
                <div id="divMyVansTickets" class="divContent" rel="myVansTicketsHistory">
                    <div class="no_data display_block no_dispalyTop">
                        <span>
                            <p class="fs16"></p>
                        </span>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="size50 mid20-20" id="divMap" style="width: 50%; left: 25%; right: 25%;">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Dealer's Ticket Information
            </div>
        </div>
        <div class="innerWindow">
            <div id="divMapDetail" class="toolbar">
                <ul class="toolUl">
                    <li class="editBtn" style="display:none;">
                        <div class="toolBtn">
                            <label id="labelRoute" class="toolBtnActive">
                                <span class="k-icon k-add" style="background-image: none;"></span>Route Map
                            </label>
                        </div>
                    </li>
                    <li class="editBtn" id="li_Activity">
                        <div class="toolBtn">
                            <label id="labelActivity">
                                <span class="k-icon k-add" style="background-image: none;"></span>Ticket Activity
                            </label>
                        </div>
                    </li>
                    @*
                        <li class="editBtn" style="display:block;" id="lidtcdata">
                                <div class="toolBtn">
                                    <label id="labelDTCData" onclick="onclickLabelDtcData();">
                                        <span class="k-icon k-add" style="background-image: none;"></span>DTC Data<label id="lblDTCCountSuperAdmin"></label>
                                    </label>
                                </div>
                            </li>*@
                    <li class="editBtn" id="lilivetracking" style="display: none;">
                        <div class="toolBtn">
                            <label id="labelivetracking" onclick="livetrackingdetails();">
                                <span class="k-icon k-add" style="background-image: none;"></span>Live Tracking

                            </label>
                        </div>

                    </li>
                    @if (HttpContext.Current.Session["UserRole"].ToString().ToLower().Trim() == "dealer" || HttpContext.Current.Session["UserRole"].ToString().ToLower().Trim() == "viewer")
                    {
                        <li class="editBtn" id="listpaymentdetais">
                            <div class="toolBtn">
                                <label id="labelpayment" onclick="getPaymentDetails();">
                                    <span class="k-icon k-add" style="background-image: none;"></span>Payment Details (
                                    <span id="spncount" style="color:red;"></span> )
                                </label>
                            </div>

                        </li>

                    }
                </ul>
            </div>
            @*<div id="divMapContainer" class="innerWindow">*@
            <div id="divMapContainer" class="content MapBox">
                <img src="" id="staticMapImgUrl" />
            </div>

            <div id="divActivity" class="content">
            </div>
            <div id="divPaymentDeatils" class="content" style="display: none;margin-top:41px;">
                <div id="dvpdf">
                    <span id="spnpayment">
                        Hi, Total amount paid pertaining to EOS ticket <span id="spntid"></span> is Rs <span id="spnamount"></span>/- .<br />
                        Vehicle Reg No : <span id="spnregno"></span><br />
                        Dealer Name :	 <span id="spndealername"></span><br />
                        <div> Following are the payment details :</div>
                    </span>
                    <table id="tblpayment" class="OpenTicketTbl" cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><span>Date & Time</span></th>
                                <th><span>Paid By</span></th>
                                <th><span>Mobile number</span></th>
                                <th><span>Paid Amount</span></th>
                                <th><span>Mode Of Payment</span></th>
                                <th><span>Payment Updated By</span></th>
                                <th><span>Remarks</span></th>

                            </tr>
                        </thead>

                        <tbody id="tblpaymentdata"></tbody>
                    </table>
                </div>
                <div id="dvError" style="margin-top:12px;font-size:16px;"></div>
                <br />
                <button class="button_blue" id="btndownload" onclick="btnDownloadPDF()" style="padding-top: 4px; padding-bottom: 6px; margin-top: 0; margin-bottom: 0; width: auto;">Download PDF</button>

                <input type="submit" value="Add Payment" class="button_blue" id="addbtnpayment" onclick="AddPayment();" style="margin: 0px; height: 27px; width: auto;" />
            </div>


            <div id="divAddPaymentDeatils" class="content" style="display: none;margin-top:41px;">
                <table class="themeTable" cellpadding="5" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    <label>Customer Name</label>
                                </span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">

                                <input type="text" class="form-control" maxlength="20" id="txtCustomerName" name="txtCustomerName">

                            </td>


                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    <label>Customer Mobile No</label>
                                </span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">

                                <input type="text" class="form-control" maxlength="20" id="txtCustomerNo" onchange="checkmobno();" name="txtCustomerNo">

                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    <label>Mode of payment</label>
                                </span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">
                                <select id="ddmodofpayment" name="ddmodofpayment"></select>
                                @*<input type="text" class="form-control" maxlength="20" id="txtmodofpayment" name="txtmodofpayment">*@

                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    <label>Amount</label>
                                </span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">

                                <input type="text" class="form-control" maxlength="20" id="txtAmount" onchange="chkamount();" name="txtAmount">

                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    <label>Remarks</label>
                                </span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="textarea" class="form-control" maxlength="100" id="txtRemarks" name="txtRemarks">

                            </td>
                        </tr>
                        @*<tr>
                                                <td class="tableCelllabel">
                                                    <span class="darktxt">
                                                        <label>Payment Date:</label>
                                                    </span><span class="error" style="color: red"> * </span>
                                                </td>
                                                <td class="tableCellinfo">


                                                    @(Html.Kendo().DatePicker()
                                  .Name("monthpickerFrom")
                                  .Format("dd-MMM-yyyy")
                                  .Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1))
                                  .HtmlAttributes(new { style = "width:150px", type = "text" })
                            )
                                                </td>
                                            </tr>*@
                    </tbody>
                </table>
                <br />
                <div class="Create_Wrp" style="background: #f5f5f5; border-top: 1px solid #dedede; padding: 6px 0 6px 10px; margin-left: -8px; margin-bottom: -7px; width: 100.6%; margin-top: 5px;">

                    <button class="button_blue" id="ReturnToList" onclick="btnCancelPayment()" style="padding-top: 4px; padding-bottom: 6px; margin-top: 0; margin-bottom: 0; width: auto;">Cancel</button>

                    <input type="submit" value="Update" class="button_blue" onclick="onSuccessAddPayment();" style="margin: 0px; height: 27px; width: auto;" />
                </div>
            </div>

            @*</div>*@
        </div>
    </div>
</div>
<div id="divTicketDetailTitle" class="size25 right">
    <div class="window">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Dealer's Ticket Details
            </div>
        </div>
        <div class="innerWindow">
            <div class="content" style="overflow-x: auto;">
                <div class="listDetails">
                    <div id="divDetail" class="ldSection" style="border-top: 0;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@*added on 28-03-2020*@
<div id="divVanDealerList" style="display: none; width: 75%; position: absolute; bottom: 1%; height: 40%; top: 59.6%;" class="right">
    <div class="window">
        <div class="titlebar titilebar-blue">
            <div class="title color-white">
                Van/Dealer List
            </div>
        </div>
        <div class="innerWindow">
            <div class="content overflow" id="tableVansDealers">
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="hdnVanDealerIndex" />
<input type="hidden" id="hdnVanDealerIndexReassign" />
@*Popup dialog box div *@
<div id="divAddCustomer" style="display: none;"></div>
<div id="divAddCustomerForExistingVehicle" style="display: none;"></div>
<div id="divReassignTicket" style="display: none;"></div>
<div id="divUpdateFeedback" style="display: none;"></div>
<div id="divReasonForTicketAssignToDealer" style="display: none;"></div>


<div id="divReasonForTicketReAssignToDealer" style="display: none;"></div>




<link href="~/Content/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

@*<script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery.alerts.js"></script>*@
@*<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>*@
@Scripts.Render("~/bundles/jsTicketAdminstrationDealer")
@*<script type="text/javascript" src="@Url.Content("~/Scripts/TicketAdministration_Dealer/ticketAdministrationDealer.js")"></script>*@
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/HighwayPath.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/TicketAdministration_Dealer/PaymentDetails.js")"></script>
<link href="~/Content/css/EditVanDetails.css" rel="stylesheet" type="text/css" media="screen" />
<style>
    table.modalTable, .modalTable th, .modalTable td {
        border: 1px solid #c5c5c5;
        border-collapse: collapse;
    }

    .modalTable th, .modalTable td {
        padding: 4px 5px;
        font-weight: normal;
    }

    .modalTable th {
        text-align: left;
        background: #f7f7f7;
        background: url("/Content/css/images/inner.gif") repeat-x scroll center bottom !important;
    }

    .modalTable {
        border-spacing: 5px;
    }

        .modalTable tbody tr:nth-child(even) { /*background: #f7f7f7;*/
        }

    tr.showMarked {
        background-color: lightgray !important;
    }

    .k-add {
        width: 0 !important;
    }

    input, select {
        width: 164px;
    }

    .MapBox { /*top: 6% !important;*/
        top: 0;
        left: 0.5%;
        right: 0.5%;
        bottom: 0.85%;
        border: 1px solid #dedede;
    }

    .themeTable td { /*line-height: 32px;*/
    }

    .red-circle {
        width: 16px;
        height: 16px;
        position: absolute;
        margin-left: 2.35%;
        margin-top: -0.5%;
    }

    .green-circle {
        width: 16px;
        height: 16px;
        position: absolute;
        margin-left: 2.35%;
        margin-top: -0.5%;
    }

    #searchLocationTool {
        background-color: #fff;
        font-family: 'Hermes_FB';
        font-size: 13px;
        font-weight: 300;
        margin-left: -200px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 100%;
        max-width: 400px;
        position: absolute !important;
        left: 50% !important;
        top: 5px !important;
    }

        #searchLocationTool:focus {
        }

    #div_loading {
        display: none;
        background-color: white;
        opacity: 0.65;
        z-index: 9999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #divMapContainer { /*top: 5.5% !important;*/
    }

    .requiredField {
        border-color: #ee1d23;
        border-style: groove;
        border-width: 1px;
    }



    .sugList-holder {
        position: relative;
        z-index: 1;
        margin: auto;
        width: 425px;
    }

    .sugList {
        width: 99%;
        background: #fff;
        position: absolute;
        left: 14px;
        top: 24px;
        padding: 0px;
    }

        .sugList li {
            padding: 6px 10px;
            border-top: 1px #e6e1e1 solid;
            font-size: 12px;
        }

            .sugList li i {
                position: relative;
                width: 15px;
                height: 27px;
                background: transparent url('../../content/css/images/tracking.png');
                background-repeat: no-repeat;
                background-position: -1px 1px;
                opacity: 0.5;
                float: left;
                margin-right: 7px;
            }

            .sugList li:hover, .sugList li.key-highlight {
                background: #efecec;
            }

                .sugList li:hover i, .sugList li.key-highlight i {
                    opacity: 1;
                    background-color: transparent;
                }
</style>
<script>

    var securityToken = '@ViewBag.SecurityToken';
    var userId = '@ViewBag.Userid';
    var userName = '@ViewBag.UserName';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var dealerId = '@ViewBag.DealerId ';
    onclickLabelRoute();
    onclickLabelActivity();

    $("#dealerTotalTicket").text(" [" + '@ViewBag.DealerTotalTicket' + "] ");
    $("#vanTotalTicket").text(" [" + '@ViewBag.VanTotalTicket' + "] ");
    $("#totalTicket").text(" [Total - " + '@ViewBag.TotalTicket' + "] ");
    $("#allocatedEPSTicket").text(" [" + '@ViewBag.epsTotalTicket' + "] ");
</script>

<script>

    var securityToken = '@ViewBag.SecurityToken';
    var userId = '@ViewBag.Userid';
    var userName = '@ViewBag.UserName';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var dealerId = '@ViewBag.DealerId ';
    var istitanuser = "";
    var allocatedclick = "";
    //onclickLabelRoute();
    //onclickLabelActivity();

    $("#dealerTotalTicket").text(" [" + '@ViewBag.DealerTotalTicket' + "] ");
    $("#vanTotalTicket").text(" [" + '@ViewBag.VanTotalTicket' + "] ");
    $("#totalTicket").text(" [Total - " + '@ViewBag.TotalTicket' + "] ");
     $("#allocatedEPSTicket").text(" [" + '@ViewBag.epsTotalTicket' + "] ");
    $(document).ready(function () {
        gettitanuser();
        $('#tabMyEPSTickets').attr("style", "background:#ee2e22 !important;color:#fff");
		
    });

    function gettitanuser() {

        var apiUrl = url + "Api/TitanDealer";
        $.ajax({
            url: apiUrl,
            type: 'POST',
            dataType: 'json',
            data: { DealerCode: dealerId },
            success: function (data) {

                if (data.istitan == 'true') {
				if(data.Count > 0){
                    var strcount = "[";
                    strcount += data.Count;
                    strcount += "]";
                    $("#tabMyAllocatedTickets").show();
                    $("#allocatedTotalTicket").html(strcount);
                     istitanuser = "yes";

					 $('#tabMyAllocatedTickets').attr("style","background:#ee2e22 !important;color:#fff");
}

                }
            },
            error: function (xhr, textStatus, errorThrown) {

            }
        });
    }


</script>

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

    .modalTable th, .modalTable td {
        padding: 4px 5px;
        font-weight: normal;
    }

    .modalTable th {
        text-align: left;
        background: #f7f7f7;
        background: url("/Content/css/images/inner.gif") repeat-x scroll center bottom !important;
    }

    .modalTable {
        border-spacing: 5px;
    }

        .modalTable tbody tr:nth-child(even) {
            background: #f7f7f7;
        }

    tr.showMarked {
        background-color: lightgray !important;
    }

    .k-add {
        width: 0 !important;
    }

    input, select {
        width: 164px;
    }

    .MapBox {
        top: 6% !important;
        left: 0.5%;
        right: 0.5%;
        bottom: 0.85%;
        border: 1px solid #dedede;
    }

    .themeTable td {
    }

    .red-circle {
        width: 16px;
        height: 16px;
        position: absolute;
        margin-left: 2.35%;
        margin-top: -0.5%;
    }

    .green-circle {
        width: 16px;
        height: 16px;
        position: absolute;
        margin-left: 2.35%;
        margin-top: -0.5%;
    }

    .tabs {
        width: 100%;
        float: left;
        position: absolute;
        background: #fff;
        border-bottom: 0;
    }

        .tabs ul {
            margin: 1px 0 0 2px;
            padding: 0;
        }

            .tabs ul li {
                text-align: center;
                display: inline-block;
                border-radius: 4px 4px 0px 0px;
                background: #fff;
                color: #505050;
                margin-top: 3px;
                position: relative;
                bottom: 0;
                border-bottom: 0;
                padding: 4px 18px 4px 14px;
                border: 1px solid;
                border-bottom: 0;
                border-color: #dedede;
                background: rgba(0, 0, 0, 0.05);
                border-top: 1px solid #dedede !important;
                text-align: left;
                height: 15px;
                width: 84px;
            }

    li {
        display: list-item;
        border: none;
        cursor: pointer;
        outline: none;
    }

    ul {
        list-style-type: none;
    }

    .Tab {
        width: 20%;
        margin-left: -1px;
    }

        .Tab:hover, .ActiveTab {
            padding-bottom: 4px !important;
            background: #fff !important;
        }

    #div_loading {
        display: none;
        background-color: white;
        opacity: 0.65;
        z-index: 9999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .Tab:hover, .ActiveTab {
        margin-bottom: -1px;
        border-bottom: 1px solid #fff !important;
    }

    .tabs ul li {
        width: auto !Important;
        height: auto !Important;
    }
	
#totalTicket{display: block;width: 100%;text-align: center;}

	#tabGroup{display: flex;margin-bottom: 0px;}
	#tableTicketHistory{margin-top: 15px;}
	div#divDealerOpenCloseTickets>div {
    margin-top: 60px;
}


select#ddlvandetails {width: 355px;}
.tableCellinfo span, #spntdno span, #spntdname  span{display: flex;align-items: center;width: 100%;gap: 8px;position: inherit;}
.tableCellinfo span input, #spntdno span input, #spntdname span input {margin: 0 !important;width:100%}
.tableCellinfo span img, #spntdno span img, #spntdname span img {order: 1; margin-left: 0 !important; width: 20px !important; height: 22px !important;}
 
</style>