% layout 'main', navbarPosition=>0, blurred=>0;

% content_for popups => begin
<div class="popup-box" id="popupWindow">
    <h1 class="popupTitle">New Work Order</h1>
    <div class="popupContent" style="margin:6px;">
        <%== Fr::Common->addField(name=>'newWorkOrderCustomer', fieldType=>'readOnly', title=>'Owner Name', icon=>'truck.png', value=>'Jason Del Nero', textLength=>300, class=>'selection pointer out', hasData=>1, data=>{entitytype=>'customer', method=>'select'}); %>
        <%== Fr::Common->addField(name=>'newWorkOrderAddress', fieldType=>'disabled', title=>'Owner Address', icon=>'map.png', textLength=>300, value=>'123 Main St, Anytown, NJ 12345'); %>
        <%== Fr::Common->addField(name=>'newWorkOrderPhone', fieldType=>'disabled', title=>'Phone', icon=>'phone.png', textLength=>200, value=>'123-456-7890'); %>
        <%== Fr::Common->addField(name=>'newWorkOrderEmail', fieldType=>'disabled', title=>'Email', icon=>'pointer.png', textLength=>300, value=>'jason@jason.com'); %>
        <%== Fr::Common->addField(name=>'newWorkOrderNumber', title=>'Ticket Number', icon=>'cube.png', textLength=>100); %>
        <%== Fr::Common->addField(name=>'newWorkOrderNotes', title=>'Work To Be Performed', icon=>'relationship.png', textLength=>500); %>
        
        <div><button class="popupClose" style="float:left;">Cancel</button> <button id="newWorkOrderSave", style="margin-left: 10px;float:left;">Save Work Order and Send to Customer</button></div>
    </div>
</div>
% end

<h1>Welcome, <%= $login_user->{firstName} %></h1>
<div class="command-bar">
    <div class="medium">Quick Commands:</div>
    <a class="button" id="newWorkorder">New Work Order</a>
    <a class="button" id="newCustomer">New Customer</a>
</div>
<div class="content-box" id="welcome-box" style="margin-left: 20px;position:static;">
    <div style="display:flex;">
        <div class="cell" style="border-right:1px solid black;"><img class="home-icon" src="../icons/truck.png"><span class="large-text"></span><br><span class="small-text">Customers</span></div>
        <div class="cell"><img class="home-icon" src="../icons/document.png"><span class="large-text"></span><br><span class="small-text">Work Orders</span></div>
    </div>
</div>
<div class="tabs">
    <ul>
        <li><a href="#home-customer">Customers</a></li>
        <li><a href="#home-workorders">Work Orders</a></li>
    </ul>

    <div id="home-customers" style="padding:10px;">
        <div class="gridList" data-entityType="customer"></div>
        <div class="gridSelection" style="display:none;"></div>
    </div>
    
    <div id="home-workorders" style="padding:10px;">
        <div class="gridList" data-entityType="workorder"></div>
        <div class="gridSelection" style="display:none;"></div>
    </div>
</div>