<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Novartis - Регистрация заявки</title>
    <style>
        body { font-family: Tahoma; font-size: 12px; padding: 0; margin: 0;}
        #header{ background: url(img/themes/novartis/header_bg.png) repeat-x; height: 100px; }
        #logo{ background: url(img/themes/novartis/header.png) no-repeat; height: 100px; }
        h1 { font-size: 16px; }
        form { margin: 10px; }
        form div { margin-bottom: 10px; position: relative;}
        form label { display: block;}
        form label.error { color: Red; font-size: 11px; width: 450px; clear: both; }
        input, textarea { width: 450px; }
        select { width: 250px; }
        input.hidden { width: 50px; color: #ccc; }
        input.date { width: 100px;}
        
        /*Calendar*/
        div.calendar{font-size:smaller;color:#3e3e3e;}
        div.calendar.calpopup { margin-left: 0px; margin-top: 26px; z-index: 9999; padding: 5px; border: 1px solid #ccc; border-bottom: 2px solid #ccc; background: #fff; }
        div.calendar table { background-color: #fff; border-collapse: separate; border-spacing: 1px; }
        div.calendar thead { background-color: #fff; }
        div.calendar td,div.calendar th {  padding: 2px; text-align: center; }
        div.calendar td.title { font-weight: bold; color: #369; }
        div.calendar th { font-weight: bold; }
        div.calendar tr.days td { width: 2em; color: #369; text-align: right; cursor: pointer; border: 1px solid #e5e5e5; }
        div.calendar tr.days td:hover, div.calendar td.button:hover { border-color: #369;  background-color: #e5e5e5; cursor: pointer;}
        div.calendar tr.days td:hover{ background-color: #ffffff; }
        div.calendar tr.days td:active, div.calendar td.button:active{ background-color: #369; }
        div.calendar tr.days td.selected { font-weight: bold; background-color: #369 !important; border-color: #369 !important; color: #fff !important; }
        div.calendar tr.days td.weekend { color: #369; }
        div.calendar tr.days td.today { font-weight: bold; border-color: #369; }
        div.calendar tr.days td.otherDay {  background: #e5e5e5 !important; color: #fff; }

    </style>
</head>
<body>
    <div id="header">
    <div id="logo"></div>
    </div>
    <form id="form1" class="validate" action="WebService.ivp/CreateTask">
        <h1>Создать заявку</h1>
        <div>
        <label>Тема заявки</label>
        <input type="text" name="Name" class="required" value="" />
        </div>
        <div>
        <label>Описание заявки</label>
        <textarea rows="3" name="Description" class="required" value=""></textarea>
        </div>
        <div>
        <label>Приоритет</label>
        <select name="PriorityId" class="required">
        <option value="2">Низкий</option>
        <option value="3">Средний</option>
        <option value="4">Высокий</option>
        </select>
        </div>
        <div>
        <label>Срок исполнения</label>
        <input type="text" name="Deadline" class="datePicker date required" value="" />
        </div>
        <div><p>Эти поля должны быть скрыты в продуктиве.</p></div>
        <div>
        <label>Создатель заявки</label>
        <input type="text" name="CreatorId" class="required hidden" value="43" />
        </div>
        <div>
        <label>Сервис</label>
        <input type="text" name="ServiceId" class="required hidden" value="1" />
        </div>
        <div>
        <label>Статус</label>
        <input type="text" name="StatusId" class="required hidden" value="31" />
        </div>
        
        <div>
        <button type="submit">Создать заявку</button>
        </div>
    </form>
</body>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.additional.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages-ru.js"></script>
<script type="text/javascript" src="js/jquery.date.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<script type="text/javascript" src="js/jquery.ajax-form.js"></script>
<!--<script type="text/javascript" src="js/jquery.calendar.ru.js"></script>-->
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript">
    var globalSettings = '';
    $(function() {
        if ($.fn.calendar) {
            $('body').on('hover focus', 'input.datePicker', function () {
                var $self = $(this);

                if ($self.data('initialized') || !$.fn.calendar)
                    return;

                if ($self.hasClass('date'))
                    $self.calendar({ usedatetime: false });
                else
                    $self.calendar();

                $self.data('initialized', true);
            });
        }
        $('form').ajaxForm({
            beforeSend: function(req) { req.setRequestHeader("Authorization", "Basic YWRtaW46ZmVsMjM5aVg="); }, //Здесь должны быть логин и пароль пользователя с минимальными правами, который может создавать заявки. Также лучше делать авторизацию на серверной стороне.
            beforeSubmit: function() { return $('form').valid(); },
            success: function showResponse(responseText, statusText, xhr, $form) {
                if ($(responseText).find('Successful').text() == 'true')
                    document.location.href = 'RegisterTaskSuccessful.aspx';
                else
                    alert($(responseText).find('Message').text());
            }
        });
    });
</script>
</html>
