@{
    ViewBag.Title = "Viser infrastruktur";
    Layout = "~/Views/Shared/_SuperOfficeLayout.cshtml";
}

<table class="table table-striped compact hover row-border">
    <thead>
        <tr>
            <th>Produsent</th>
            <th>Modell</th>
            <th>Serienummer</th>
            <th>Firmware</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="manufacturer" placeholder="Produsent" value="" />
                    <input type="hidden" class="autosave new" name="id" value="" />
                    <input type="hidden" class="autosave new" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="model" placeholder="Modell" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="serialNumber" placeholder="Serienummer" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="firmware" placeholder="Firmware" />
                </div>
            </td>
        </tr>
        @foreach (var infrastructure in Model.Infrastructures)
        {
            <tr>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="manufacturer" placeholder="Produsent" value="@infrastructure.Manufacturer" />
                        <input type="hidden" class="autosave" name="id" value="@infrastructure.Id" />
                        <input type="hidden" class="autosave" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="model" placeholder="Modell" value="@infrastructure.Model" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="serialNumber" placeholder="Serienummer" value="@infrastructure.SerialNumber" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="firmware" placeholder="Firmware" value="@infrastructure.Firmware" />
                </div>
            </td>
        </tr>
    }
</tbody>

@section SpecializedScripts
{
    <script type="text/javascript">
        function saveSettings(element, ajaxUrl, ajaxType) {
            var fields = $(element).closest('tr').children('td').children('div').children('.autosave');
            var abort = false;

            var ajaxData = {};
            $(fields).each(function () {
                abort = ($(this).val() == '' || $(this).val() == null);
                backgroundColor = abort == true ? '#d9534f' : '#f9f598';

                $(this).css('background-color', backgroundColor).css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);

                ajaxData[$(this).prop('name')] = $(this).val();
            });

            if (abort == true) {
                return false;
            }

            $.ajax({
                url: ajaxUrl,
                type: ajaxType,
                data: ajaxData
            }).success(function (data, textStatus, jqXHR) {
                $(fields).each(function() {
                    $(this).css('background-color', '#5cb85c').css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
                });

                switch(data.status)
                {
                    case 'Deleted':
                        $(element).closest('tr').remove();
                    break;
                    case 'Added':
                        var tableBody = $('tbody');
                        var html = '<tr>';
                        for (var field in data.result) {
                            if (field == 'id' || field == 'superOfficeCustomerId')
                            {
                                html += '<input type="hidden" class="autosave" name="' + field + '" value="' + data.result[field] + '" />';
                            }
                            else {
                                html += '<td>'
                                        + '<div class="control-group">'
                                            + '<input type="text" class="col-md-12 autosave form-control" name="' + field + '" value="' + data.result[field] + '" />'
                                        + '</div>'
                                    + '</td>';

                                $('input.new[name=' + field + ']').val('');
                            }
                        }
                        html += '</tr>';
                        $(tableBody).append(html);
                    case 'Modified':
                        $(fields).each(function () {
                            $(this).val(data.result[$(this).prop('name')]);
                        });
                    break;
                }
            }).fail(function () {
            });
        }

        $(document).on('blur', 'input.autosave', function () {
            saveSettings($(this), '/Link/SaveInfrastructure', 'POST');
        });

        $(document).on('change', 'input.new', function () {
        });
    </script>
}