@using EBT.Resources;
@using EBT.MVCWebFramework.Controllers.AdminManagement;
@using EBT.MVCWebFramework.Controllers.Dispatch;

@model EBT.WebFramework.UIModels.EBTJqGridModel



@{
    ViewBag.Title = Res.PAGE_CORRIDORING_ALERT_LIST;
}

<style>
    .ui-grid-image img {
        height: 120%;
        vertical-align: middle;
    }
</style>

@Styles.Render(EBT.SystemFramework.Util.ResolveUrl("Skin/Default/Jquery/jquery.layoutChooser.css"))


@Scripts.Render(EBT.SystemFramework.Util.ResolveUrl("Scripts/UserControls/EBTJqGrid.js"))
@Scripts.Render(EBT.SystemFramework.Util.ResolveUrl("Scripts/JQuery/jquery.datetime.js"))



@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="ui-frame panel-content">
        <label for="from">@Res.COM_FROM</label>
        <input id="from" name="fromdate" type="text" class="ui-datetime" />
        <label for="to">@Res.COM_TO</label>
        <input id="to" name="todate" type="text" class="ui-datetime" />
        <label for="alert_Status">@Res.ALERT_STATUS</label>
        <select id="alert" name="alert_status">
            <option value="all">@Res.ALL_ALERT</option>
            <option value="onGoing">@Res.ONGOING_ALERT</option>
            <option value="ended">@Res.ENDED_ALERT</option>
        </select>
    </div>
    <div>
        @{Html.RenderPartial("_JqGrid", Model);
        }
    </div>

    <script language="javascript" type="text/javascript">

    $(document).ready(function () {
        var datetimes = $('#from').dateTime({ type: 'datetime' });
        var datetimess = $('#to').dateTime({ type: 'datetime' });
        var alertStatus = $('#alert');
        var popinMap;

        var corridoringGrid = $('@Model.Selector').toJqGrid({
            externalControls: [datetimes, datetimess, alertStatus]
        });

        corridoringGrid.toJqGrid({
            afterSearch: function () {
                corridoringGrid.toJqGrid('bindEvent', 'view_map', function (e, id) {
                    displayPopinMap(id);
                });
            }
        });

        function displayPopinMap(tripId) {
            if (parseInt(tripId) > 0) {
                var title = '<div>' +
                    translate("TRIP_MAP_TITLE")
                '</div>';

                popinMap = $(this).popin({
                    href: "~/Dispatch/Trip/TripPopin/TripMap",
                    parameters: { "id": tripId },
                    width: '80%',
                    height: '80%'
                });

                popinMap.on('popinopen', function (e, data) {
                    data.popin[0].parentNode.firstChild.firstChild.innerHTML = title;
                });
            }
        };

    });

    </script>
}