<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>

    <!-- Parameters -->

    <xsl:param name="VERSION">1.0</xsl:param>
    <xsl:param name="PAGE-TITLE">Add Permit</xsl:param>
    <xsl:param name="PAGE-NAME">addPermit</xsl:param>

    <xsl:template match="/">
    
        <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>   

        <div class="{$PAGE-NAME}">
      
            <div class="card">
        
                <div class="card-header bg-primary text-white p-1 ps-3">
                    <i class="bi bi-buildings me-2"/>
                    <xsl:value-of select="$PAGE-TITLE"/>
          
                </div>
        
                <div class="card-body">
          
                    <form action="" name="{$PAGE-NAME}" method="post" id="{$PAGE-NAME}">

                        <input type="hidden" name="action" value="Permit.addPermit"/>
                        <input type="hidden" name="step"   value="add"/>
            
                        <div class="row">

                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="permit_permit_facts_id">Permit Facts ID</label>
                                <input type="text" class="form-control form-control-sm" name="permit_permit_facts_id" id="permit_permit_facts_id" maxlength="100" autocomplete="off" autofocus="yes"/>
                            </div>
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="permit_permit_number">Permit Number</label>
                                <input type="text" class="form-control form-control-sm" name="permit_permit_number" id="permit_permit_number" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-3 mb-3">
                                
                                <label class="form-label" for="permit_entry_date">Entry Date</label>
                                <div class="input-group input-group-sm permit_entry_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_entry_date" id="permit_entry_date"/>
                                    <button class="btn btn-sm btn-outline-primary btnEntryDateCalendar" type="button" data-bs-toggle="tooltip" data-bs-title="Calendar" data-bs-custom-class="custom-tooltip" tabindex="-1">
                                        <i class="bi bi-calendar3"/>
                                    </button>
                                </div>
                                
                            </div>
                            <div class="col-lg-3 mb-3">
                                
                                <label class="form-label" for="permit_permit_date">Permit Date</label>
                                <div class="input-group input-group-sm permit_permit_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_permit_date" id="permit_permit_date"/>
                                    <button class="btn btn-sm btn-outline-primary btnPermitDateCalendar" type="button" data-bs-toggle="tooltip" data-bs-title="Calendar" data-bs-custom-class="custom-tooltip" tabindex="-1">
                                        <i class="bi bi-calendar3"/>
                                    </button>
                                </div>
                                
                            </div>
                            
                        </div>
                            
                        <div class="row">
                            
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_sub_div_name">Subdivision</label>
                                <input type="text" class="form-control form-control-sm" name="permit_sub_div_name" id="permit_sub_div_name" maxlength="100" autocomplete="off"/>
                            </div>
                        
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="permit_project_type">Project Type</label>
                                <select class="form-control form-control-sm search-dropdown" name="permit_project_type" id="permit_project_type" size="1">
                                    <xsl:apply-templates select="//Constants/ProjectTypes"/>
                                </select>
                            </div>
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="permit_county">County</label>
                                <select class="form-control form-control-sm search-dropdown" name="permit_county" id="permit_county" size="1">
                                    <xsl:apply-templates select="//counties"/>
                                </select>
                            </div>
                            
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-8 mb-3">
                                <label class="form-label" for="permit_company">Company</label>
                                <input type="text" class="form-control form-control-sm" name="permit_company" id="permit_company" autocomplete="off"/>
                            </div>
                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_phone">Phone</label>
                                <input type="text" class="form-control form-control-sm phone-mask" name="permit_phone" id="permit_phone" autocomplete="off"/>
                            </div>
                        </div>
                            
                        <div class="row">

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_project_addr">Project Address</label>
                                <input type="text" class="form-control form-control-sm" name="permit_project_addr" id="permit_project_addr" maxlength="100" autocomplete="off"/>
                            </div>
                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_city">City</label>
                                <input type="text" class="form-control form-control-sm" name="permit_city" id="permit_city" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_state">State</label>
                                <input type="text" class="form-control form-control-sm" name="permit_state" id="permit_state" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_zip">ZIP Code</label>
                                <input type="text" class="form-control form-control-sm zip-mask" name="permit_zip" id="permit_zip" maxlength="100" autocomplete="off"/>
                            </div>
                        </div>
                            
                        <div class="row">
                            

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_project_city">Project City</label>
                                <input type="text" class="form-control form-control-sm" name="permit_project_city" id="permit_project_city" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_project_state">Project State</label>
                                <input type="text" class="form-control form-control-sm" name="permit_project_state" id="permit_project_state" maxlength="100" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-4 mb-3">
                                <label class="form-label" for="permit_value">Project Value</label>
                                <input type="text" class="form-control form-control-sm" name="permit_value" id="permit_value" maxlength="100" autocomplete="off"/>
                            </div>

                            <!-- Empty nodes included -->
                            <div class="col-lg-4 mb-3">
                                <label class="form-label" for="permit_lot">Lot</label>
                                <input type="text" class="form-control form-control-sm" name="permit_lot" id="permit_lot" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-4 mb-3">
                                <label class="form-label" for="permit_dist_ll">District LL</label>
                                <input type="text" class="form-control form-control-sm" name="permit_dist_ll" id="permit_dist_ll" maxlength="100" autocomplete="off"/>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_owner_name">Owner Name</label>
                                <input type="text" class="form-control form-control-sm" name="permit_owner_name" id="permit_owner_name" maxlength="100" autocomplete="off"/>
                            </div>
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_owner_phone">Owner Phone</label>
                                <input type="text" class="form-control form-control-sm phone-mask" name="permit_owner_phone" id="permit_owner_phone" maxlength="100" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="row">
                            
                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="permit_owner_address">Owner Address</label>
                                <input type="text" class="form-control form-control-sm" name="permit_owner_address" id="permit_owner_address" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_owner_city">Owner City</label>
                                <input type="text" class="form-control form-control-sm" name="permit_owner_city" id="permit_owner_city" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_owner_state">Owner State</label>
                                <input type="text" class="form-control form-control-sm" name="permit_owner_state" id="permit_owner_state" maxlength="100" autocomplete="off"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_owner_zip">Owner ZIP</label>
                                <input type="text" class="form-control form-control-sm zip-mask" name="permit_owner_zip" id="permit_owner_zip" maxlength="100" autocomplete="off"/>
                            </div>

                        </div>
                        
                        <div class="row">
                            
                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_size">Size</label>
                                <input type="text" class="form-control form-control-sm" name="permit_size" id="permit_size"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_units">Units</label>
                                <input type="text" class="form-control form-control-sm" name="permit_units" id="permit_units"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_building_type">Building Type</label>
                                <input type="text" class="form-control form-control-sm" name="permit_building_type" id="permit_building_type"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_work_type">Work Type</label>
                                <input type="text" class="form-control form-control-sm" name="permit_work_type" id="permit_work_type"/>
                            </div>
                            
                            <div class="col-lg-1 mb-2">
                                <label class="form-label" for="permit_ct1">CTL</label>
                                <input type="text" class="form-control form-control-sm" name="permit_ct1" id="permit_ct1"/>
                            </div>

                        </div>
                        
                        <div class="row">
                            
                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_ytd_permits">YTD Permits</label>
                                <input type="text" class="form-control form-control-sm" name="permit_ytd_permits" id="permit_ytd_permits"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_ytd_value">YTD Value</label>
                                <input type="text" class="form-control form-control-sm" name="permit_ytd_value" id="permit_ytd_value"/>
                            </div>

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_12mth_prev_permits">12 Month Prev Permits</label>
                                <input type="text" class="form-control form-control-sm" name="permit_12mth_prev_permits" id="permit_12mth_prev_permits"/>
                            </div>
                            
                        </div>
            
                    </form>

                    <div class="buttons mt-1 mb-2">
                        <button type="button" class="btn btn-sm btn-primary me-2 btnCancel">
                            <i class="bi bi-box-arrow-left me-2"/>Cancel</button>
                        <button type="button" class="btn btn-sm btn-primary me-2 btnSave">
                            <i class="bi bi-save me-2"/>Save</button>
                    </div>
          
                </div>
        
            </div>
      
        </div>
          
    </xsl:template>
    
    <!-- Template for Project Type dropdown -->

    <xsl:template match="Constants/ProjectTypes">
    
        <option value="">Choose...</option>
    
        <xsl:for-each select="ProjectType"> 
            <xsl:sort select="."/>
            <option value="{.}" data-tokens="{.}">
                <xsl:value-of select="." />
            </option>
        </xsl:for-each>
    
    </xsl:template>
    
    <!-- Template for Counties dropdown -->

    <xsl:template match="counties">
    
        <option value="">Choose..</option>
    
        <xsl:for-each select="record">
      
            <option value="{county_name}" data-tokens="{county_name}">
                <xsl:value-of select="county_name"/>
            </option>
      
        </xsl:for-each>
    
    </xsl:template>
    
</xsl:stylesheet>
