{% extends 'base.html' %}

{% block head %}
    <link href="{{ MEDIA_URL }}/css/forms.css" type="text/css" media="all" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL}}scripts/jquery/jqGrid/themes/basic/grid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL}}scripts/jquery/jqGrid/themes/jqModal.css" />
    <script src="{{ MEDIA_URL}}scripts/jquery/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">var pathtojsfiles = "{{ MEDIA_URL }}scripts/jquery/jqGrid/js/";</script>
    <script src="{{ MEDIA_URL}}scripts/jquery/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="{{ MEDIA_URL}}scripts/jquery/jqGrid/js/jqModal.js" type="text/javascript"></script>
    <script src="{{ MEDIA_URL}}scripts/jquery/jqGrid/js/jqDnR.js" type="text/javascript"></script>
    {{ form.media }}


    <script type="text/javascript">

var lastSel = 0;

function onSelectRow(id)
{    
    if(id && id!==lastSel)
    { 
        jQuery('#grid').restoreRow(lastSel); 
        lastSel=id; 
    }
    
}

function onEditRow(eventObject)
{
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {
        jQuery('#grid').editRow(sr, false); 
    }
    else
    {
        alert("Please Select Row");
    }
}

function deleteRowCallBack(data, testStatus)
{
    var page = jQuery("#grid").getGridParam("page");            
    jQuery("#grid").setGridParam({ "page": page });
    jQuery("#grid").trigger("reloadGrid");    
}

function onDeleteRow(eventObject)
{
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {
        jQuery("#grid").delRowData(sr);
        jQuery.post("{% url bha_component_grid_delete object.pk %}", {'id':sr}, deleteRowCallBack );
    }
    else
    {
        alert("Please Select Row To DELETE.");
    }
}

function onAddRow(eventObject)
{    
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {
        var order = jQuery("#grid").getCell(sr,'order');        
        order = 1+parseInt(order);   
        jQuery("#grid").addRowData('new',{'order':''+order,'description':'','serial_number':'','odia':'0','idia':'0', 'fn_length':'0', 'top_conn': '', 'pb':'', 'length':'0' },'after',sr);
        jQuery("#grid").resetSelection();
        jQuery("#grid").setSelection('new');
        jQuery('#grid').editRow('new', false);            
    }
    else
    {                
        jQuery("#grid").addRowData('new',{'order':'end','description':'','serial_number':'','odia':'0','idia':'0', 'fn_length':'0', 'top_conn': '', 'pb':'', 'length':'0'},'last');
        jQuery("#grid").resetSelection();
        jQuery("#grid").setSelection('new');
        jQuery('#grid').editRow('new', false);
    }
}

function saveRowSuccess(response)
{
    var page = jQuery("#grid").getGridParam("page");            
    jQuery("#grid").setGridParam({ "page": page });
    jQuery("#grid").trigger("reloadGrid");
    return true;
}

function onSaveRow(eventObject)
{
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {
        var order = jQuery("#grid").getCell(sr,'order');
        jQuery("#grid").saveRow(sr, successfunc=saveRowSuccess, url=null, extraparam = {'order': order}); 
    }
    else
    {
        alert("Please Select Row");
    }
        
}


function onMoveRowUp(eventObject)
{
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {
        var order = jQuery("#grid").getCell(sr,'order');
        order -= 1;
        if(order > 0)
        {
            jQuery("#grid").setCell(sr,'order',order);
            jQuery('#grid').editRow(sr, false);            
            jQuery("#grid").saveRow(sr, successfunc=saveRowSuccess, url=null, extraparam = {'order': order}); 
        }
    }
    else
    {
        alert("Please Select Row");
    }
    
}

function onMoveRowDown(eventObject)
{
    var sr = jQuery("#grid").getGridParam("selrow");
    if( sr != null )
    {        
        var order = jQuery("#grid").getCell(sr,'order');
        order = parseInt(order) + 1;
        jQuery("#grid").setCell(sr,'order',order);
        jQuery('#grid').editRow(sr, false);        
        jQuery("#grid").saveRow(sr, successfunc=saveRowSuccess, url=null, extraparam = {'order': order});       
    }
    else
    {
        alert("Please Select Row");
    }
        
}


function imready()
{
    $("#grid").jqGrid({
    url:'{% url bha_component_grid object.pk %}',
    datatype: 'json',    
    mtype: 'GET',
    height: 200,  
    colModel :[
      {name:'order', label:'Order', width:70, align:'right', editable:false},
      {name:'description', label:'Description', width:150, align:'left', editable:true},      
      {name:'serial_number', label:'Serial Number', width:150, align:'left', sortable:false, editable:true, edittype:'text'},
      {name:'odia', label:'OD', width:70, align:'right', sortable:false, editable:true, edittype:'text'},
      {name:'idia', label:'ID', width:70, align:'right', sortable:false, editable:true, edittype:'text'},
      {name:'fn_length', label:'FN Length', width:70, align:'right', sortable:false, editable:true, edittype:'text'},
      {name:'top_conn', label:'Top Conn', width:125, align:'left', sortable:false, editable:true, edittype:'text'},
      {name:'pb', label:'PB', width:150, align:'left', sortable:false, editable:true, edittype:'text'},
      {name:'length', label:'Length', width:70, align:'right', sortable:false, editable:true, edittype:'text'},
      ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,50,100],
    sortname: 'order',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '{{ MEDIA_URL}}scripts/jquery/jqGrid/themes/basic/images',
    caption: 'Bottom Hole Assembly Components',
    jsonReader : {
      root: "rows",
      page: "page",
      total: "total",
      records: "records",
      repeatitems: false,      
      id: "id",
        },
    onSelectRow: onSelectRow,
    editurl: '{% url bha_component_grid_edit object.pk %}',
    scrollrows: true
    });

    $("#addrow").click(onAddRow);
    $("#editrow").click(onEditRow);
    $("#saverow").click(onSaveRow);    
    $("#delrow").click(onDeleteRow);
    $("#moveup").click(onMoveRowUp);
    $("#movedown").click(onMoveRowDown);

}

$(document).ready(imready);

</script>

<style type="text/css">
th
{
    color:#000000;
}
</style>
{% endblock head %}

{% block navigation %}
{% include navigation_template %}
{% endblock navigation %}

{% block subtitle %}<h3>{{ subtitle }}</h3>{% endblock subtitle %}

{% block body %}


<table id="grid" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div> 
<button id="editrow">Edit Row</button>  <button id="saverow">Save Row</button>  <button id="addrow">Add Row</button>
<button id="moveup">Up</button>  <button id="movedown">Down</button>  <button id="delrow">Delete Row</button>

<br>
<br>
<form method="POST" action=".">

<table>
    <tr>
        <th colspan="3">Serialized Assets</th>        
    </tr>
    <tr>
        <th>Collar</th>
        <th>Probe</th>
        <th>Surface Gear</th>
    </tr>
    <tr>
        <td valign="top">{{ collar_form.as_p }}</td>
        
        <td valign="top">{{ probe_form.as_p }}</td>
        
        <td valign="top">{{ surface_gear_form.as_p }}</td>
    </tr>
</table>
<table border="1">
    <tr>
        <th>BHA Information</th>
        <th>Pumps</th>
    </tr>
    <tr>
        <td valign="top">
        {{ bha_form.as_p }}
        </td>
        <td>
        <table>        
            <tr>
                {% for form in pump_forms %}
                    <td>
                        <table>
                            <tr>{% if forloop.first %}<td></td>{% endif %}<th valign="top">Pump {{ forloop.counter }}</th></tr>                 
                            {% for field in form %}                                
                            <tr>{% if forloop.parentloop.first %}<td>{{ field.label_tag }}:</td>{% endif %}<td valign="top">{{ field.errors }}{{ field }}</td></tr>
                            {% endfor %}
                        </table>
                    </td>
                {% endfor %}
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <th>Bit</th>
        <th>Bit Jets</th>
    </tr>
    <tr>
        <td>
        {{ bit_form.as_p }}
        </td>
        <td valign="top">
        <table>
        {% for jet_form in jet_forms %}    
            <tr>
                <td>
                    Jet {{ forloop.counter }}:
                </td>
                <td>                    
                    {% for hidden in jet_form.hidden_fields %}
                        {{ hidden }}
                    {% endfor %}
                    
                    {{ jet_form.value.errors }}
                    {{ jet_form.value }}
                </td>
            </tr>
        {% endfor %}
        </table>
        </td>
    </tr>
</table>

<input id="submit" value="Submit" type="submit">
</form>
{% endblock body %}