<?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">Search </xsl:param>
    <xsl:param name="PAGE-NAME">searchPermitsByBuilder</xsl:param>
    
    <!-- Variables --> 

    <xsl:variable name="PAGINATION_COUNT" select="//permits/@count"/>
    <xsl:variable name="PAGINATION_START" select="//permits/@start"/>
    <xsl:variable name="PAGINATION_END"   select="//permits/@end"/>
    <xsl:variable name="PAGINATION_PAGE"  select="//permits/@page"/>

    <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-search me-2"/>
                    <xsl:value-of select="$PAGE-TITLE"/>
                    <xsl:value-of select="//subscriptions/record/subscription_title"/>
                    |
                    <xsl:value-of select="//subscriptions/record/subscription_description"/>
          
                </div>
        
                <div class="card-body">
          
                    <form action="" name="{$PAGE-NAME}" method="post" id="{$PAGE-NAME}">

                        <input type="hidden" name="action" value="PermitsByBuilder.searchPermits"/>
                        <input type="hidden" name="subscription_serial" value="{//subscriptions/record/subscription_serial}"/>
            
                        <div class="row">

                            <div class="col-lg-4 mb-3">
                                <label class="form-label" for="permit_company">Builder/Company</label>
                                <input type="text" class="form-control form-control-sm" name="permit_company" id="permit_company" maxlength="120" autocomplete="off" autofocus="autofocus"/>
                            </div>
                            
                            <div class="col-lg-1 mb-3">
                                <label class="form-label" for="permit_and_or">And/Or</label>
                                <select class="form-select form-select-sm" name="permit_and_or" id="permit_and_or" size="1">
                                    <option value="and">And</option>
                                    <option value="or">Or</option>
                                </select>
                            </div>

                        </div>
                        
                        <div class="row">

                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="permit_entry_start_date">Entry Start Date</label>
                                <div class="input-group input-group-sm permit_entry_start_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_entry_start_date" id="permit_entry_start_date" autocomplete="off" value=""/>
                                    <button class="btn btn-sm btn-outline-primary btnEntryStartDateCalendar" 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-2 mb-3">
                                <label class="form-label" for="permit_entry_end_date">Entry End Date</label>
                                <div class="input-group input-group-sm permit_entry_end_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_entry_end_date" id="permit_entry_end_date" autocomplete="off" value=""/>
                                    <button class="btn btn-sm btn-outline-primary btnEntryEndDateCalendar" 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-2 mb-3">
                                <label class="form-label" for="permit_permit_start_date">Permit Start Date</label>
                                <div class="input-group input-group-sm permit_permit_start_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_permit_start_date" id="permit_permit_start_date" autocomplete="off" value=""/>
                                    <button class="btn btn-sm btn-outline-primary btnPermitStartDateCalendar" 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-2 mb-3">
                                <label class="form-label" for="permit_permit_end_date">Permit End Date</label>
                                <div class="input-group input-group-sm permit_permit_end_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="permit_permit_end_date" id="permit_permit_end_date" autocomplete="off"/>
                                    <button class="btn btn-sm btn-outline-primary btnPermitEndDateCalendar" 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>
            
                    </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"/>Return to Subscriptions Page</button>
                        <button type="button" class="btn btn-sm btn-primary me-2 btnSearch">
                            <i class="bi bi-search me-2"/>Search</button>
                        <button type="button" class="btn btn-sm btn-primary me-2 btnReset">
                            <i class="bi bi-arrow-repeat me-2"/>Reset Search</button>
                            
                        <div id="search-form-error" class="search-form-error fs-5 text-danger fw-bold fst-italic mt-3 mb-1 d-none">
                        
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
            <xsl:choose>
            
                <xsl:when test="count(//permits/record) > 0">
          
                    <div class="card mt-3">
        
                        <div class="card-header bg-primary text-white p-1 ps-3">
                            <i class="bi bi-tools me-2"/>
                            Results
                            <xsl:if test="$PAGINATION_COUNT > 0">
                                <xsl:text> | Showing </xsl:text>
                                <xsl:value-of select="format-number($PAGINATION_START, '###,##0')"/>
                                <xsl:text> to </xsl:text>
                                <xsl:value-of select="format-number($PAGINATION_END, '###,##0')"/>
                                <xsl:text> of </xsl:text>
                                <xsl:value-of select="format-number($PAGINATION_COUNT, '###,##0')"/>
                            </xsl:if>
                        </div>
        
                        <div class="card-body">

                            <div class="row align-items-center mt-2 mb-2">
                        
                                <div class="col-lg-4 mb-2">
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control autosave" name="filter" id="filter" maxlength="100" autocomplete="off" placeholder="{//popovers/record[popover_name = 'filter_permits']/popover_placeholder}"/>
                                        <button type="button" class="btn btn-primary fw-bold btnClearFilter" data-bs-toggle="tooltip" data-bs-title="Clear Filter" data-bs-custom-class="custom-tooltip">
                                            <i class="bi bi-arrow-clockwise"/>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-auto mb-2">
                                    <div class="input-group input-group-sm" data-bs-toggle="tooltip" data-bs-title="Show Per Page" data-bs-custom-class="custom-tooltip">
                                        <div class="input-group-text">
                                            <i class="bi bi-list-ol"/>
                                        </div>
                                        <select class="form-select" name="permits_per_page" id="permits_per_page">
                                            <option value="20">20</option>
                                            <option value="40">40</option>
                                            <option value="60">60</option>
                                            <option value="80">80</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
 
                            <!-- Action Buttons --> 
      
                            <div class="buttons mt-1 mb-1">
            
                                <xsl:if test="count(//permits/record) > 0">
                                    <button type="button" class="btn btn-sm btn-primary me-2 mb-2 btnSelectAll">
                                        <i class="bi bi-check2-square me-2"/>Select All</button>
                                </xsl:if>
                        
                                <button type="button" class="btn btn-sm btn-primary me-2 mb-2 btnDeselectAll d-none">
                                    <i class="bi bi-square me-2"/>Deselect All</button>
                        
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-primary me-2 mb-2 dropdown-toggle btnExportSelected d-none" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-download me-2"/>Export Selected
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <button class="dropdown-item btnExportCSV"> 
                                                <i class="bi bi-filetype-csv me-2"/>CSV File</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item btnExportExcel">
                                                <i class="bi bi-filetype-xlsx me-2"/>Excel Spreadsheet</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item btnPrintSelected">
                                                <i class="bi bi-printer me-2"/>PDF</button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-primary me-2 mb-2 dropdown-toggle btnExportAll" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-download me-2"/>Export All
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <button class="dropdown-item btnExportAllCSV"> 
                                                <i class="bi bi-filetype-csv me-2"/>CSV</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item btnExportAllExcel">
                                                <i class="bi bi-filetype-xlsx me-2"/>Excel Spreadsheet</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item btnExportAllPDF">
                                                <i class="bi bi-filetype-pdf me-1"></i>PDF</button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="btn-group ms-2 mb-2" role="group">
                                    <xsl:if test="$PAGINATION_PAGE > 1">
                                        <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="first" data-bs-toggle="tooltip" data-bs-title="First Page" data-bs-custom-class="custom-tooltip">
                                            <i class="bi bi-chevron-bar-left me-1"/>First</button>
                                        <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="previous" data-bs-toggle="tooltip" data-bs-title="Previous Page" data-bs-custom-class="custom-tooltip">
                                            <i class="bi bi-chevron-left me-1"/>Previous</button>
                                    </xsl:if>
                                    <xsl:if test="$PAGINATION_COUNT > $PAGINATION_END">
                                        <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="next" data-bs-toggle="tooltip" data-bs-title="Next Page" data-bs-custom-class="custom-tooltip">
                                            <i class="bi bi-chevron-right me-1"/>Next</button>
                                        <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="last" data-bs-toggle="tooltip" data-bs-title="Last Page" data-bs-custom-class="custom-tooltip">
                                            <i class="bi bi-chevron-bar-right me-1"/>Last</button>
                                    </xsl:if>
                                </div>
                    
                            </div>

                            <hr class="mt-2 mb-2"/> 

                            <xsl:choose>
            
                                <xsl:when test="count(//permits/record) = 0">
          
                                    <div class="filter-error fs-5 text-danger fw-bold fst-italic mt-3 mb-1">
                                        <xsl:text>There are no Permits to view...</xsl:text>
                                    </div>
                                    
              
                                </xsl:when>
            
                                <xsl:otherwise>
                                    <div class="filter-error fs-5 text-danger fw-bold fst-italic mt-3 mb-1 d-none">
                                        <xsl:text>There are no Permits to view...</xsl:text>
                                    </div>

                                    <div class="table-responsive scrollable">
                                                        
                                        <table class="table table-sm table-striped table-hover base-table" id="permits-table">
                  
                                            <thead class="sticky-header" data-theme="{$THEME}">

                                                <th class="text-center"                                                         >Select</th>
                                                <th class="sortable text-nowrap"             data-order-by="permit_company"     >Company</th>
                                                <th class="sortable text-nowrap"             data-order-by="permit_permit_count">Permits</th>
                                                <th class="sortable text-nowrap"             data-order-by="permit_value"       >Value</th>
                                                <th class="sortable text-nowrap text-center" data-order-by="permit_project_type">Current <br />Year YTD</th>
                                                <th class="sortable text-nowrap text-center" data-order-by="permit_company"     >Current<br /> YTD Value</th>
                                                <th class="text-nowrap text-center"                                             >Last <br /> 12 Months</th>
                                                <th class="sortable text-nowrap"             data-order-by="permit_address"     >Address</th>
                                                <th class="text-nowrap"                                                         >Phone</th>
                    
                                            </thead>
                  
                                            <tbody>
                    
                                                <xsl:apply-templates select="//permits"/>
                    
                                            </tbody>
                  
                                        </table>
                
                                    </div>
            
                                </xsl:otherwise>
            
                            </xsl:choose>
          
                        </div>
        
                    </div>
                </xsl:when>
                
                <xsl:otherwise>
                    <div class="card mt-3">
        
                        <div class="card-header bg-primary text-white p-1 ps-3">
                            <i class="bi bi-tools me-2"/>
                            Results
                        </div>
        
                        <div class="card-body">
                            <div class="fs-5 text-danger fw-bold fst-italic mb-1">
                                <xsl:text>There are no Permits to view...</xsl:text>
                            </div>
                                            
                        </div>
                    </div>
                </xsl:otherwise>
            </xsl:choose>
          
        </div>
        
        <!-- Permit Information Modal Dialog -->

        <div class="modal" id="permit-info-dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-primary p-1 ps-3">
                        <h6 class="modal-title text-white"/>
                    </div>
                    <div class="modal-body mt-2"/>
                    <div class="buttons m-3 mt-2">
                        <button type="button" class="btn btn-sm btn-primary me-1 btnClose" data-bs-dismiss="modal">
                            <i class="bi bi-box-arrow-left me-2"/>Close</button>
                    </div>
                </div>    
            </div>
        </div>
        
        <!-- Form to Print All Permits -->
    
        <form style="display:inline;" id="PrintAllPermitsByBuilderPDFForm" method="post" action="" target="PrintTab">

            <input type="hidden" name="action"              value="print"/>
            <input type="hidden" name="report"              value="Print_All_PermitsByBuilder"/>
            <input type="hidden" name="subscription_serial" value="{{//subscriptions/record/subscription_serial}}"/>

        </form>
        
        <!-- Form to Print Selected Permits -->
    
        <form style="display:inline;" id="PrintSelectedPermitsByBuilderForm" method="post" action="" target="PrintTab">

            <input type="hidden" name="action"              value="print"/>
            <input type="hidden" name="report"              value="Print_Selected_PermitsByBuilder"/>
            <input type="hidden" name="selected_permits"    value=""/>
            <input type="hidden" name="subscription_serial" value="{//subscriptions/record/subscription_serial}"/>

        </form>
        
    </xsl:template>
    
    <!-- Template for Permits rows -->

    <xsl:template match="permits/record">
    
        <tr class="hoverable permit-row text-nowrap" data-permit-serial="{permit_serial}">
            
            <td class="checkbox text-center selection-checkboxes selection-area">
                <input type="checkbox" class="selection-checkbox selection-area" name="selected[]" value="{permit_serial}">
                </input>
                <span class="selection-area user-select-none">&#160;</span>
            </td>
            
            <td class="permit_company filterable">
                <xsl:value-of select="permit_company"/>
            </td>
            
            <td class="permit_permit_count text-nowrap filterable">
                <xsl:value-of select="permit_permit_count"/>
            </td>
            
            <td class="permit_value text-nowrap filterable">
                <xsl:value-of select="concat('$', format-number(permit_value_verbose, '###,###'))"/>
            </td>
            
            <td class="ytd_permits text-nowrap filterable text-center">
                <xsl:value-of select="ytd_permits"/>
                <xsl:choose>
                    <xsl:when test="permits_trend = 'up'">
                        <i class="bi bi-arrow-up text-success" data-bs-toggle="tooltip" data-bs-title="{//popovers/record[popover_name = 'builder_arrow_up']/popover_text}" data-bs-html="true" data-bs-custom-class="custom-tooltip"></i>
                    </xsl:when>
                    <xsl:when test="permits_trend = 'down'">
                        <i class="bi bi-arrow-down text-danger" data-bs-toggle="tooltip" data-bs-title="{//popovers/record[popover_name = 'builder_arrow_down']/popover_text}" data-bs-html="true" data-bs-custom-class="custom-tooltip"></i>
                    </xsl:when>
                    <xsl:otherwise>
                        <i class="text-warning me-2" data-bs-toggle="tooltip" data-bs-title="{//popovers/record[popover_name = 'builder_equal_sign']/popover_text}" data-bs-html="true" data-bs-custom-class="custom-tooltip"> =</i>
                    </xsl:otherwise>
                </xsl:choose>
            </td>
            
            <td class="permit_ytd_value filterable text-center">
                <xsl:value-of select="concat('$', format-number(ytd_value, '###,###'))"/>
            </td>
            
            <td class="permit_12mth_prev_permits filterable text-center">
                <xsl:value-of select="previous_ytd_permits"/>
                
            </td>
            
            <td class="permit_address filterable">
                <xsl:value-of select="concat(permit_address, ' ', permit_city, ', ', permit_state, ' ', permit_zip)"/>
            </td>
            
            <td class="permit_phone filterable">
                <xsl:value-of select="permit_phone_verbose"/>
            </td>

        </tr>
    
    </xsl:template>

</xsl:stylesheet>
