<%@ Page Title="" Language="C#" MasterPageFile="~/JobSite/JobSiteMasterPage.master" AutoEventWireup="true" CodeFile="AddScheduler.aspx.cs" Inherits="AddScheduler" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .edit-content table {
            border-collapse: collapse;
            width: 100%;
        }

            .edit-content table td.label {
                width: 200px;
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .edit-content table td input,
            .edit-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 320px;
                height: 18px;
                padding: 1px;
            }

                .edit-content table td input[type="checkbox"] {
                    border: none;
                }

            .edit-content table td textarea {
                height: 100px;
                resize: none;
                /*max-width: 200px;*/
            }

        .a {
            text-decoration: none;
            color: #2140fb;
        }

        .subtitle {
            margin: 20px 40px 5px 0px;
            font-size: 16px;
            color: gray;
        }

            .subtitle span {
                margin-left: 10px;
            }

            .subtitle hr {
                background-color: #d8d8d8;
                border: none;
                height: 1px;
            }


        .machinetd {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        #basemapTitle {
            position: absolute;
            z-index: 2;
            bottom: 0px;
            width: 90%;
            color: #4c4c4c;
            margin: 0;
            font-size: 10px;
            line-height: 12px;
            display: block;
            padding: 2px 5%;
            background: #fff;
            background: rgba(255, 255, 255, 0.80);
            -webkit-border-radius: 0 0 5px 5px;
            -moz-border-radius: 0 0 5px 5px;
            -o-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
            text-align: center;
        }


        #basemapImg {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }



        #basemapgalleryDiv {
            position: absolute;
            right: 30px;
            top: 100px;
            z-index: 199;
            background-color: #EFEFEF;
            height: 75px;
            width: 75px;
            border: solid 1px #57585A;
            border-radius: 5px;
            padding: 1px;
        }

        #basemapGallery {
            position: absolute;
            right: 15px;
            top: 35px;
            width: 370px;
            height: 120px;
            overflow: auto;
            display: none;
            z-index: 200;
            background-color: #EFEFEF;
        }

        .div_filter {
            margin-top: -3px;
        }

            .div_filter .dropdown {
                width: 200px;
                margin: 2px 0 0 0px;
            }

        .div_panel {
            min-width: 200px;
        }

        #machine-name {
            margin: 10px 10px 6px;
            /*color: gray;*/
            font-weight: lighter;
            font-size: 18px;
            width: 770px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .jobsitetitle {
            font-weight: bold;
            font-size: 16px;
            padding-left: 10px;
        }

        #div_jslocation {
            position: absolute;
            background-color: #E8E8E8;
            padding: 5px;
            margin-left: 60px;
        }

        .jslocation_lable {
            text-align: right;
            padding-right: 10px;
            line-height: 24px;
        }

        .machine_filter {
            height: 20px;
            line-height: 20px;
            padding: 5px;
        }

            .machine_filter select {
                height: 23px;
                min-width: 100px;
                max-width: 300px;
            }

        .requireinfo {
            line-height: 30px;
            margin-left: 10px;
        }

        .requireinfospan {
            font-weight: 500;
            margin-left: 20px;
        }

        .quantity {
            padding: 3px 0 3px 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            /*color: gray;*/
            font-weight: 500;
            font-size: 16px;
            /*width: 770px;*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: #f0f0f0;
        }

        .fi-input-wrapper {
            width: 100%;
        }

        .dialog .dialog-func input {
            width: unset;
        }

        .span-caption {
            position: absolute;
        }

        .span-bar {
            position: absolute;
            height: 100%;
            margin: 0;
            vertical-align: bottom;
        }
    </style>

    <script>
        //必须放在地图js之前
        var dojoConfig = {
            paths: {
                extras1: location.pathname.replace(/\/[^/]+$/, "") + "/../js/mapview"
            },
            cacheBust: true
        };
    </script>
    <script src="<%=GetFileUrlWithVersion("../js/components/datagrid.js")%>" type="text/javascript"></script>
    <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" />
    <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("../js/editableselect.js")%>"></script>
    <%--<link rel="stylesheet" type="text/css" href="css/default.css" />--%>
    <link href="<%=GetFileUrlWithVersion("../css/spectrum.css")%>" rel="stylesheet" type="text/css" />
    <script src="../js/spectrum.js?v=1" type="text/javascript"></script>
    <script src="../Maintenance/js/inputdatactr.js"></script>

    <script type="text/javascript">
        var alljobsites;
        var addrequirement = true;
        var _sendType = 0;
        var currentdate = "<%=CurrentDate %>";   


        jobsitequery = function (method, param, callback, error, nolog) {
            _network.request("JobSite/AddRequirements.aspx?tp=ashx", -1, method, param, callback, error, nolog);
        }

        _dialog.showAssetConfirm = function (msg, title, fedit, fcancel, fclose, iniframe, shownote) {
            if (!fclose)
                fclose = fcancel;
            _dialog.showButtonDialog(msg, title, 'question', fclose, [{
                value: GetTextByKey("P_JS_COMPLETEREMAININGREQUIREMENTS", 'Complete Remaining Requirements'),
                func: fedit
            }, {
                value: GetTextByKey("P_JS_SAVEWITHCURRENTSELECTIONS", 'Save with Current Selections'),
                func: fcancel
            }], iniframe, shownote);
        };

        function showAssetConfirm(msg, title, fcancel, fedit, fclose) {
            $("#mask_bg").show();
            _dialog.showAssetConfirm(msg, title, function (e) {
                $("#mask_bg").hide();
                if (typeof fedit === 'function') {
                    fedit(e);
                }
            }, function (e) {
                $("#mask_bg").hide();
                if (typeof fcancel === 'function') {
                    fcancel(e);
                }
            }, function (e) {
                $("#mask_bg").hide();
                if (typeof fclose === 'function') {
                    fclose(e);
                }
            });
        }

        function OnSave(exit, ignorebeginpast) {
            var alerttitle = GetTextByKey("P_JS_ADDSCHEDULER", "Add Scheduler");
            var item = {
                'JobSiteId': $('#dialog_jobsite').val(),
                'BeginDate': $.trim($('#dialog_begindate').val()),
                'EndDate': $.trim($('#dialog_enddate').val()),
                'Quantity': 1,
                'Notes': $('#dialog_notes').val(),
                'PointOfContact': $('#dialog_pointofcontact').val(),
            };

            var machine = editableSelectMachine.selecteditem();
            if (machine == null) {
                showAlert(GetTextByKey("P_FR_ASSETNOTEMPTY", 'Asset cannot be empty.'), alerttitle);
                $('#dialog_machine').focus();
                return;
            }
            else {
                item.AssetType = machine.TypeID;
                var assets = [];
                var asset = {
                    'AssetId': machine.Id,
                    'BeginDate': item.BeginDate,
                    'EndDate': item.EndDate
                };
                assets.push(asset);
                item.Assets = assets;
            }

            if (item.BeginDate.length === 0) {
                showAlert(GetTextByKey("P_JS_PLEASEENTERTHEBEGINDATE", "Please enter the Begin Date."), alerttitle);
                return;
            }
            if (!checkDate(item.BeginDate)) {
                showAlert(GetTextByKey("P_JS_BEGINDATEFORMATERROR", "Begin Date format error."), alerttitle);
                return;
            }
            if (item.EndDate.length === 0) {
                showAlert(GetTextByKey("P_JS_PLEASEENTERTHEENDDATE", "Please enter the End Date."), alerttitle);
                return;
            }
            if (!checkDate(item.EndDate)) {
                showAlert(GetTextByKey("P_JS_ENDDATEFORMATERROR", "End Date format error."), alerttitle);
                return;
            }
            var nowdt = new Date(currentdate.replace("-", "/"));
            var sdate = item.BeginDate;
            var stdt = new Date(sdate.replace("-", "/"));
            var edate = item.EndDate;
            var etdt = new Date(edate.replace("-", "/"));

            if (!ignorebeginpast && stdt < nowdt) {
                var msg = GetTextByKey("P_JS_BEGINDATEPAST", "The begin date for this requirement is in the past, do you want to continue?")
                showConfirm(msg, alerttitle, function () {
                    OnSave(exit, true);
                });
                return;
            }

            //if (etdt < nowdt) {
            //    showAlert(GetTextByKey("P_JS_ENDDATEMUSTBELATERTHANBEGINDATE1", "End Date must be later than Begin Date.  Please select another date range."), alerttitle);
            //    return;
            //}

            if (stdt > etdt) {
                showAlert(GetTextByKey("P_JS_ENDDATEMUSTBELATERTHANBEGINDATE", "End Date must be later than Begin Date."), alerttitle);
                return;
            }

            showloading(true);
            var param = JSON.stringify(item);
            param = htmlencode(param);
            jobsitequery("CreateNewRequirment", param, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, alerttitle);
                } else {
                    if (exit == 0)
                        OnExit(exit);
                    else if (exit == 1)
                        OnAdd();

                }
            }, function (err) {
                console.log(err);
                showloading(false);
                showAlert(GetTextByKey("P_JS_FAILEDTOSAVESCHEDULER", "Failed to save scheduler."), alerttitle);
            });
        }

        function OnExit(msg) {
            window.parent.CloseDialog(msg);
        }

        function OnAdd() {
            editableSelectMachine.val('');
            setMachineInfo();
            $('#dialog_jobsite').val('');
            $('#dialog_begindate').val('');
            $('#dialog_enddate').val('');
            $('#dialog_notes').val('');
            $('#dialog_pointofcontact').val('');
        }

        function init(jss) {
            GetMachines();
            OnAdd();
            if (jss) {
                alljobsites = jss;
                setJobsites();
            }
            else
                getJobsites();

            editableSelectMachine.reload();
        }

        function getJobsites() {
            if (alljobsites)
                return;

            jobsitequery('GetJobsites', '', function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_AM_ERROR", 'Error'));
                    return;
                }
                alljobsites = data;
                setJobsites();
            });
        }

        function setJobsites() {
            if (!alljobsites)
                return;
            $('#dialog_jobsite').empty();
            if (alljobsites && alljobsites.length > 0) {
                var ops = [];
                for (var i = 0; i < alljobsites.length; i++) {
                    var op = $('<option></option>').prop('selected', i == 0).val(alljobsites[i].Key).text(alljobsites[i].Value).data('js', alljobsites[i]);
                    ops.push(op);
                }
                $('#dialog_jobsite').append(ops);
            }
        }

        function GetMachines(next) {
            jobsitequery("GetMachines", "", function (data) {
                if (data && data.length > 0) {
                    machines = data;
                    editableSelectMachine.datasource = machines;
                    editableSelectMachine.valuepath = "Id"
                    editableSelectMachine.displaypath = "DisplayName";
                }
                if (next)
                    next();
            }, function (err) {
            });
        }

        var editableSelectMachine;
        function setMachineInfo() {
            var machine = editableSelectMachine.selecteditem();
            if (machine) {
                $('#dialog_vin').text(machine.VIN);
                $('#dialog_make').text(machine.MakeName);
                $('#dialog_model').text(machine.ModelName);
                $('#dialog_type').text(machine.TypeName);
            }
            else {
                $('#dialog_vin').text('');
                $('#dialog_make').text('');
                $('#dialog_model').text('');
                $('#dialog_type').text('');
            }
        }

        $(function () {
            editableSelectMachine = new $editableselect($("#dialog_machine"));
            editableSelectMachine.tabIndex(1);
            editableSelectMachine.change(function () {
                setMachineInfo();
            });

            if (!alljobsites)
                getJobsites();


            $('#dialog_begindate').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            })
            $('#dialog_enddate').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            })

            $(document).mousedown(function () {
                $('.div_panel').css('display', 'none');
            });
        });

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
        <div class="function_title">
            <span class="sbutton iconsave" onclick="OnSave(0);" data-lgid="P_JS_SAVE">Save</span>
            <span class="sbutton iconsave sbutton-ui" onclick="OnSave(1);" data-lgid="P_FR_SAVE3">Save and Add New</span>
            <span class="sbutton iconexit" onclick="OnExit(0);" data-lgid="P_JS_SAVE2">Exit Without Saving</span>
        </div>

        <div id="div_container" style="height: 100%;">
            <div id="div_content">
                <div class="clear"></div>
                <div id="divcontent" style="overflow: auto;">
                    <div class="edit-content">
                        <div class="subtitle">
                            <span data-lgid="P_FR_ASSETINFORMATION">Asset Information</span>
                            <hr />
                        </div>
                        <table>
                            <tr>
                                <td class="label" data-lgid="P_FR_ASSET_COLON">Asset:</td>
                                <td colspan="4">
                                    <div id="dialog_machine" style="width: 322px; height: 22px;"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="label" data-lgid="P_FR_VIN_COLON">VIN:</td>
                                <td id="dialog_vin" style="width: 200px;"></td>
                                <td class="label" style="width: 60px;" data-lgid="P_FR_ASSETTYPE_COLON">Type:</td>
                                <td id="dialog_type" style="width: 200px;"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="label" data-lgid="P_FR_MAKE_COLON">Make:</td>
                                <td id="dialog_make" style="width: 200px;"></td>
                                <td class="label" style="width: 60px;" data-lgid="P_FR_MODEL_COLON">Model:</td>
                                <td id="dialog_model" style="width: 200px;"></td>
                                <td></td>
                            </tr>
                        </table>

                        <div class="subtitle">
                            <span data-lgid="P_JS_SCHEDULERINFORMATION">Scheduler Information</span>
                            <hr />
                        </div>
                        <table style="line-height: 30px;">
                            <tr>
                                <td class="label" data-lgid="P_JS_JOBSITE_COLON"></td>
                                <td>
                                    <select id="dialog_jobsite" tabindex="1" style="height: 22px;"></select></td>
                            </tr>
                            <tr>
                                <td class="label" data-lgid="P_JS_BEGINDATE_COLON"><span>*</span></td>
                                <td>
                                    <table style="width: 500px;">
                                        <tr>
                                            <td style="padding: 0;">
                                                <input type="text" id="dialog_begindate" maxlength="200" tabindex="1" style="width: 200px;" autocomplete="off" />
                                            </td>
                                            <td style="text-align: right; padding-right: 5px;" data-lgid="P_JS_ENDDATE_COLON"></td>
                                            <td>
                                                <input type="text" id="dialog_enddate" maxlength="200" tabindex="1" style="width: 200px;" autocomplete="off" /></td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                            <tr>
                                <td class="label" data-lgid="P_JS_POINTOFCONTACT">Point Of Contact</td>
                                <td>
                                    <input type="text" id="dialog_pointofcontact" maxlength="100" tabindex="1" autocomplete="off" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label" data-lgid="P_FR_NOTES_COLON">Notes:</td>
                                <td>
                                    <textarea id="dialog_notes" maxlength="1000" tabindex="1" style="width: 582px; height: 120px; margin-top: 5px;"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div id="dialogmask" class="maskbg" style="display: none;">
                <div class="loading_icon icon c-spin"></div>
            </div>
        </div>
    </div>
</asp:Content>