postal code search tool

+<?php
+/**
+ * Quotes Block Template.
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+// Create id attribute allowing for custom "anchor" value.
+$id = 'postal-search-' . $block['id'];
+if( !empty($block['anchor']) ) {
+    $id = $block['anchor'];
+}
+
+// Create class attribute allowing for custom "className" and "align" values.
+$className = 'postal-search';
+if( !empty($block['className']) ) {
+    $className .= ' ' . $block['className'];
+}
+if( !empty($block['align']) ) {
+    $className .= ' align' . $block['align'];
+}
+if( $is_preview ) {
+    $className .= ' is-admin';
+}
+
+$postal_lookup = [];
+$row = 0;
+if (($handle = fopen(wp_get_upload_dir()['basedir']."/terriroties.csv", "r")) !== FALSE) {
+    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
+
+        $row++;
+
+        if($row == 1) {
+            continue;
+        }
+        
+        $postal_lookup[] = ['GEOKEY'=>$data[0],'TERRITORY'=>$data[1],'1ST'=>$data[2],'PREFERRED'=>$data[3],'REGION'=>$data[4]];
+        
+    }
+    fclose($handle);
+}
+
+
+?>
+<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
+
+    <h2>Preferred Property Risk Territory Lookup</h2>
+
+    <input type='hidden' class='postal-search-data' value='<?= json_encode($postal_lookup) ?>' />
+
+    <table class='postal-search-results'>
+        <thead>
+            <tr class="header"><td>GEOKEY</td><td>TERRITORY</td><td>1ST</td><td>PREFERRED</td><td>REGION</td></tr>
+        </thead>
+        <tbody>
+            <?php foreach($postal_lookup as $pl) { ?>
+                <tr data-preferred="<?= $pl['PREFERRED']  ?>" class="header"><td><?= $pl['GEOKEY'] ?></td><td><?= $pl['TERRITORY'] ?></td><td><?= $pl['1ST'] ?></td><td><?= $pl['PREFERRED'] ?></td><td><?= $pl['REGION'] ?></td></tr> 
+            <?php } ?>
+        </tbody>
+    </table>
+ 
+</div>
+

@@ -14522,6 +14522,146 @@ a.pdf:hover, a.extern:hover, a.xls:hover, a.mailto:hover {
   font-family: "Helvetica-Bold";
   font-family: "Helvetica-Bold";
 }
 }
 
 
+.dataTables_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.dataTables_wrapper table {
+  flex-basis: 100%;
+  width: 100%;
+}
+.dataTables_wrapper table tr td {
+  padding-left: 0;
+}
+.dataTables_wrapper .header td {
+  cursor: pointer;
+}
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
+  width: 300px;
+}
+.dataTables_wrapper .dataTables_filter label {
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-size: 20px;
+  line-height: 25px;
+  color: #68696d;
+  text-transform: uppercase;
+  font-weight: 800;
+  padding-bottom: 1rem;
+  margin-bottom: 0;
+  display: flex;
+  position: relative;
+}
+.dataTables_wrapper .dataTables_filter label:after {
+  content: "";
+  background: url('data:image/svg+xml,<svg id="Component_13_1" data-name="Component 13 – 1" xmlns="http://www.w3.org/2000/svg" width="30.108" height="30.012" viewBox="0 0 30.108 30.012"><line id="Line_1" data-name="Line 1" x2="12.53" y2="12.53" transform="translate(16.517 16.421)" fill="none" stroke="%23949598" stroke-width="3"/><g id="Ellipse_1" data-name="Ellipse 1" fill="%23fff" stroke="%23949598" stroke-width="3"><circle cx="11.513" cy="11.513" r="11.513" stroke="none"/><circle cx="11.513" cy="11.513" r="10.013" fill="none"/></g></svg>');
+  width: 25px;
+  height: 25px;
+  display: block;
+  background-size: 25px 25px;
+  position: absolute;
+  right: 0;
+  bottom: 1.5rem;
+}
+.dataTables_wrapper input {
+  flex: 1;
+  padding-right: 1rem;
+  border: 1px solid #fff;
+  font-size: 1rem;
+  border-bottom: 2px solid #54565a !important;
+  font-family: Helvetica;
+  padding: 0.5rem 0;
+}
+
+.sorting_asc {
+  position: relative;
+}
+.sorting_asc:after {
+  content: "";
+  background: url(/wp-content/themes/commonwell-broker/images/arrow.png);
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  transform: rotate(90deg);
+  position: relative;
+  top: 4px;
+  left: 5px;
+}
+
+.sorting:after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  position: relative;
+  top: 4px;
+  left: 5px;
+}
+
+#DataTables_Table_0_length {
+  display: none;
+}
+
+.sorting_desc {
+  position: relative;
+}
+.sorting_desc:after {
+  content: "";
+  background: url(/wp-content/themes/commonwell-broker/images/arrow.png);
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  transform: rotate(-90deg);
+  position: relative;
+  top: 4px;
+  left: 5px;
+}
+
+.postal-search-results tbody tr:first-of-type {
+  background: rgba(84, 86, 90, 0.1490196078);
+}
+.postal-search-results tbody tr:first-of-type td {
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  padding: 9px 0 !important;
+  color: #54565a !important;
+  font-weight: normal !important;
+}
+
+.postal-label {
+  color: black;
+}
+
+.search-postal-preferred tr.hidden {
+  display: none;
+}
+
+.postal-code-search, .search-postal-preferred {
+  font-size: 18px;
+}
+
+.postal-search {
+  padding-top: 3rem;
+}
+
+.postal-search label {
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+}
+
+.postal-code-inputs {
+  display: flex;
+}
+.postal-code-inputs > div {
+  padding-right: 3rem;
+}
+.postal-code-inputs > input {
+  font-size: 1rem;
+}
+
 .strategic-child-page {
 .strategic-child-page {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;

@@ -80,6 +80,7 @@
     "terser": "^5.15.1"
     "terser": "^5.15.1"
   },
   },
   "dependencies": {
   "dependencies": {
-    "datatables.net-dt": "^1.13.5"
+    "datatables.net-dt": "^1.13.8",
+    "fuse.js": "^7.0.0"
   }
   }
 }
 }

+// import Fuse from 'fuse.js'
+import DataTable from 'datatables.net-dt';
+
+(function( $ ) {
+
+    // var list = JSON.parse($('.postal-search-data').val());
+    
+    // const fuseOptions = {
+    //     // isCaseSensitive: false,
+    //     // includeScore: false,
+    //     // shouldSort: true,
+    //     // includeMatches: false,
+    //     // findAllMatches: false,
+    //     // minMatchCharLength: 1,
+    //     // location: 0,
+    //     threshold: 0.2,
+    //     // distance: 100,
+    //     // useExtendedSearch: false,
+    //     // ignoreLocation: false,
+    //     // ignoreFieldNorm: false,
+    //     // fieldNormWeight: 1,
+    //     keys: [
+    //         "GEOKEY",
+    //         "TERRITORY"
+    //     ]
+    // };
+
+    // const fuse = new Fuse(list, fuseOptions);
+
+    var table = new DataTable('.postal-search-results',
+    {
+        responsive: true,
+        paging:true,
+        "lengthMenu":-1,
+        "oLanguage": {
+            "sSearch": "Enter Full Postal Code:"
+        }
+    }
+    );
+    
+    // function searchFuse(searchPattern) {
+    //     return fuse.search(searchPattern);
+    // }
+
+    // $('.search-postal-preferred').on('change', function() {
+    //     var preferred = $(this).find('option:selected').val();
+    //     $('.postal-search-results tr').removeClass('hidden');
+    //     if(preferred == 'YES' || preferred == 'NO') {
+    //         $('.postal-search-results tr').each(function() {
+    //             if(!$(this).hasClass('header')) {
+    //                 var _preferred = $(this).data('preferred');
+    //                 console.log(_preferred);
+    //                 if(preferred != _preferred) {
+    //                     $(this).addClass('hidden');
+    //                 }
+    //             }
+    //         });
+    //     }
+    // });
+
+    // $('.postal-code-search').on('keyup', function() {
+
+    //    var results = searchFuse($(this).val());
+
+    //    $('.postal-search-results tr').remove();
+    //    $('.postal-search-results').append(
+    //     '<tr class="header"><td>GEOKEY</td><td>TERRITORY</td><td>1ST</td><td>PREFERRED</td><td>REGION</td></tr>'
+    //     );
+
+    //    if(results.length > 200) {
+    //     $('.postal-search-results').append("<tr><td>Result set to large</td><td></td><td></td><td></td><td></td></tr>");
+    //    } else {
+    //     if(results.length == 0) {
+    //         $('.postal-search-results').append("<tr><td>No Results Found</td><td></td><td></td><td></td><td></td></tr>");
+    //     } else {
+    //         for(var i = 0;i < results.length;++i) {
+    //             $('.postal-search-results').append(
+    //                 '<tr data-preferred="'+results[i].item['PREFERRED']+'"><td>'+results[i].item.GEOKEY+'</td><td>'+results[i].item.TERRITORY+'</td><td>'+results[i].item['1ST']+'</td><td>'+results[i].item['PREFERRED']+'</td><td>'+results[i].item['REGION']+'</td></tr>'
+    //             );
+    //         }
+    //     }
+    //    }
+
+    // });
+ 
+}( jQuery ));
\ No newline at end of file

@@ -14,6 +14,7 @@ import "./_resources_list";
 import "./_custom_select";
 import "./_custom_select";
 import "./_accordion";
 import "./_accordion";
 import "./_responsive";
 import "./_responsive";
+import "./_postal_search";
 
 
 function checkOffsetForTopper() {
 function checkOffsetForTopper() {
     if(jQuery('.the-toppe').length > 0) {
     if(jQuery('.the-toppe').length > 0) {

@@ -304,6 +304,153 @@ a.pdf, a.extern, a.xls, a.mailto {
     }
     }
 }
 }
 
 
+.dataTables_wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    table {
+        flex-basis: 100%;
+        width: 100%;
+    }
+    table tr td {
+        padding-left:0;
+    }
+    .header td {
+        cursor: pointer;
+    }
+    .dataTables_length, .dataTables_filter {
+        width: 300px;
+    }
+    .dataTables_filter {
+        label {
+            font-family: HelveticaNeue,Helvetica,Arial,sans-serif;
+            font-size: 20px;
+            line-height: 25px;
+            color: #68696d;
+            text-transform: uppercase;
+            font-weight: 800;
+            padding-bottom: 1rem;
+            margin-bottom: 0;
+            display: flex;
+            position: relative;
+            &:after {
+                content: "";
+                background: url('data:image/svg+xml,<svg id="Component_13_1" data-name="Component 13 – 1" xmlns="http://www.w3.org/2000/svg" width="30.108" height="30.012" viewBox="0 0 30.108 30.012"><line id="Line_1" data-name="Line 1" x2="12.53" y2="12.53" transform="translate(16.517 16.421)" fill="none" stroke="%23949598" stroke-width="3"/><g id="Ellipse_1" data-name="Ellipse 1" fill="%23fff" stroke="%23949598" stroke-width="3"><circle cx="11.513" cy="11.513" r="11.513" stroke="none"/><circle cx="11.513" cy="11.513" r="10.013" fill="none"/></g></svg>');
+                width: 25px;
+                height: 25px;
+                display: block;
+                background-size: 25px 25px;
+                position: absolute;
+                right:0;
+                bottom:1.5rem;
+            }
+        }
+    }
+    input {
+        flex: 1;
+        padding-right: 1rem;
+        border: 1px solid #fff;
+        font-size: 1rem;
+        border-bottom: 2px solid #54565a!important;
+        font-family: Helvetica;
+        padding: 0.5rem 0;
+    }
+}
+
+.sorting_asc {
+    position: relative;
+    &:after {
+        content: "";
+        background: url(/wp-content/themes/commonwell-broker/images/arrow.png);
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-size: contain;
+        transform: rotate(90deg);
+        position: relative;
+        top: 4px;
+        left: 5px;
+    }
+}
+
+.sorting {
+    &:after {
+        content: "";
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-size: contain;
+        position: relative;
+        top: 4px;
+        left: 5px; 
+    }
+}
+
+#DataTables_Table_0_length {
+    display: none;
+}
+
+.sorting_desc {
+    position: relative;
+    &:after {
+        content: "";
+        background: url(/wp-content/themes/commonwell-broker/images/arrow.png);
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-size: contain;
+        transform: rotate(-90deg);
+        position: relative;
+        top: 4px;
+        left: 5px;
+    }
+}
+
+.postal-search-results tbody tr:first-of-type {
+    background:rgba(84,86,90,.1490196078);
+    td {
+        font-size: 12px !important;
+        font-weight: 400 !important;
+        padding: 9px 0 !important;
+        color:#54565a !important;
+        font-weight: normal !important;
+    }
+}
+
+.postal-label {
+    color:black;
+}
+
+.search-postal-preferred {
+    tr.hidden {
+        display: none;
+    }
+}
+
+
+.postal-code-search, .search-postal-preferred {
+    font-size: 18px;
+}
+
+.postal-search {
+    padding-top:3rem;
+}
+
+.postal-search label {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+}
+
+.postal-code-inputs {
+    display: flex;
+    & > div {
+        padding-right:3rem;
+    }
+    & > input {
+        font-size: 1rem;
+    }
+}
+
 .strategic-child-page {
 .strategic-child-page {
     display: flex;
     display: flex;
     flex-direction: row;
     flex-direction: row;

@@ -18,5 +18,16 @@ function my_acf_init_block_types() {
             ]
             ]
         ));
         ));
 
 
+        // register a portfolio item block
+		acf_register_block(array(
+			'name'				=> 'postal',
+			'title'				=> __('Postal Code Lookup'),
+			'description'		=> __('A form for postal code lookup.'),
+			'render_template'	=> 'blocks/postal-search-tool/postal-search-tool.php',
+			'category'			=> 'layout',
+			'icon'				=> 'excerpt-view',
+			'keywords'			=> array( 'postal' ),
+		));
+
     }
     }
 }
 }
\ No newline at end of file