<?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">searchPermitsBySubdivision</xsl:param>
    
    <!-- Variables --> 

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

    <xsl:template match="/">
    
        <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>   
        <script src="js/bootstrap-autocomplete.min.js?version={$VERSION}"/>   
        
        <link href="css/{$PAGE-NAME}.css"   rel="stylesheet" media="screen"/>
        
        
        <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="PermitsBySubdivision.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="rdi_county">County</label>
                                <select class="form-control form-control-sm multiple-dropdown" multiple="multiple" name="rdi_county" id="rdi_county" size="1">
                                    <xsl:apply-templates select="//counties"/>
                                </select>
                            </div>
                            
                            <div class="col-lg-1 mb-3">
                                <label class="form-label" for="rdi_and_or">And/Or</label>
                                <select class="form-select form-select-sm" name="rdi_and_or" id="rdi_and_or" size="1">
                                    <option value="and">And</option>
                                    <option value="or">Or</option>
                                </select>
                            </div>

                        </div>
                        
                        <div class="row">
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="rdi_company">Company/Builder</label>
                                <input type="text" class="form-control form-control-sm" name="rdi_company" id="rdi_company" maxlength="120" autocomplete="off" autofocus="autofocus"/>
                            </div>
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="rdi_sub_div_name">Subdivision</label>
                                <input type="text" class="form-control form-control-sm subdivision-autocomplete" autocomplete="chrome-off" name="rdi_sub_div_name" id="rdi_sub_div_name" maxlength="100"/>
                            </div>
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="rdi_project_city">City</label>
                                <input type="text" class="form-control form-control-sm city-autocomplete" autocomplete="chrome-off" name="rdi_project_city" id="rdi_project_city" maxlength="100"/>
                            </div>
                            
                            <div class="col-lg-3 mb-3">
                                <label class="form-label" for="rdi_project_addr">Street Name</label>
                                <input type="text" class="form-control form-control-sm street-autocomplete" autocomplete="chrome-off" name="rdi_project_addr" id="rdi_project_addr" maxlength="100"/>
                            </div>
                            
                        </div>
                        
                        <div class="row">    
                            <div class="col-lg-2 mb-3">
                                <label class="form-label" for="rdi_entry_start_date">Entry Start Date</label>
                                <div class="input-group input-group-sm rdi_entry_start_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="rdi_entry_start_date" id="rdi_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="rdi_entry_end_date">Entry End Date</label>
                                <div class="input-group input-group-sm rdi_entry_end_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="rdi_entry_end_date" id="rdi_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="rdi_permit_start_date">Permit Start Date</label>
                                <div class="input-group input-group-sm rdi_permit_start_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="rdi_permit_start_date" id="rdi_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="rdi_permit_end_date">Permit End Date</label>
                                <div class="input-group input-group-sm rdi_permit_end_date">
                                    <input type="text" class="form-control form-control-sm date-mask" name="rdi_permit_end_date" id="rdi_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"/>Done</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</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(//rdis/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="rdis_per_page" id="rdis_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(//rdis/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 btnExportSelectedExcel">
                                                <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(//rdis/record) = 0">
          
                                    
              
                                </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="rdis-table">
                  
                                            <thead class="sticky-header" data-theme="{$THEME}">

                                                <th class="text-center">Select</th>
                                                <th class="sortable text-nowrap"      data-order-by="rdi_county"      >County</th>
                                                <th class="sortable text-nowrap"      data-order-by="rdi_sub_div_name">Subdivison/Project Name</th>
                                                <th class="sortable text-nowrap"      data-order-by="rdi_project_addr">Address</th>
                                                <th class="text-nowrap"               data-order-by="rdi_project_city">City</th>
                                                <th class="text-nowrap"               data-order-by="rdi_state"       >State</th>
                                                <th class="text-nowrap"               data-order-by="rdi_zip"         >Zip</th>
                                                <th class="text-nowrap"                                               >Builder</th>
                                                <th class="sortable text-nowrap"      data-order-by="rdi_permit_date" >Permit Date</th>
                                                <th class="text-nowrap"                                               >Sq. Ft. </th>
                                                <th class="text-nowrap"                                               >Value</th>
                    
                                            </thead>
                  
                                            <tbody>
                    
                                                <xsl:apply-templates select="//rdis"/>
                    
                                            </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="PrintAllPermitsBySubdivisionPDFForm" method="post" action="" target="PrintTab">

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

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

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

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

    <xsl:template match="rdis/record">
    
        <tr class="hoverable rdi-row text-nowrap" data-rdi-serial="{rdi_serial}">
            
            <td class="checkbox text-center selection-checkboxes selection-area">
                <input type="checkbox" class="selection-checkbox selection-area" name="selected[]" value="{rdi_serial}">
                </input>
                <span class="selection-area user-select-none">&#160;</span>
            </td>
            
            <td class="rdi_county filterable">
                <xsl:value-of select="rdi_county_name_verbose"/>
            </td>
            
            <td class="rdi_sub_div_name text-nowrap filterable">
                <xsl:value-of select="rdi_sub_div_name"/>
            </td>
            
            <td class="rdi_address text-nowrap filterable">
                <xsl:value-of select="rdi_project_addr"/>
            </td>
            
            <td class="rdi_address text-nowrap">
                <xsl:value-of select="rdi_project_city"/>
            </td>

            <td class="rdi_address text-nowrap">
                <xsl:value-of select="rdi_state"/>
            </td>

            <td class="rdi_address text-nowrap">
                <xsl:value-of select="rdi_zip"/>
            </td>

            <td class="rdi_company filterable">
                <xsl:value-of select="rdi_company"/>
            </td>

            <td class="rdi_permit_date filterable">
                <xsl:value-of select="rdi_permit_date_verbose"/>
            </td>

            <td class="rdi_value filterable">
                <xsl:value-of select="rdi_size_verbose"/>
            </td>

            <td class="rdi_value filterable">
                <xsl:value-of select="rdi_value_verbose"/>
            </td>
        </tr>
    
    </xsl:template>

    <!-- Template for Counties dropdown -->

    <xsl:template match="counties">
    
        <xsl:for-each select="record">
      
            <option value="{county_serial}" data-tokens="{county_serial}">
                
                <!--                <xsl:if test="//searchhistory/record/searchhistory_parameters/permitfact_county/id = subscriptioncounty_county">
                    <xsl:attribute name="selected">selected</xsl:attribute>
                </xsl:if>-->
                
                <xsl:value-of select="county_name"/>
            </option>
      
        </xsl:for-each>
    
    </xsl:template>

</xsl:stylesheet>
