<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="author" content="colorlib.com">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" rel="stylesheet" />
    <title>The Fraternal Order of Eagles</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>
    <style>
      /* Custom CSS for search bar */
      /*body {
        background-image: url('https://source.unsplash.com/random/1920x1080'); 
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        color: rgba(255, 255, 255, 0.9); 
      }*/
      .dataTables_wrapper {
        color: #333; /* DataTable text color */
        background-color: rgba(255, 255, 255, 0.9); /* DataTable background color with some transparency */
        border-radius: 8px; /* Rounded corners for DataTable */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow for DataTable */
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #007bff; /* Pagination button text color */
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        color: #fff; /* Current page button text color */
        background-color: #007bff; /* Current page button background color */
      }
      .table {
        width: 100%; /* Make the table occupy the whole width */
      }
      .additional-fields {
        display: none; /* Hide additional fields by default */
      }
      .modal-body label {
        color: #000 !important; /* Set color to black */
      }
      /* Hide location column on smaller screens */
      @media (max-width: 575.98px) {
        .hide-location th:nth-child(2),
        .hide-location td:nth-child(2) {
          display: none;
        }
      }
      #dataTable span{
       white-space:normal;
       }
      
      
    </style>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="s013">
      <form  id="searchForm" type="get">
        <fieldset>
          <legend>The Fraternal Order of Eagles</legend>
        </fieldset>
        <div class="inner-form">
          <div class="left">
            <div class="input-wrap first">
              <div class="input-field first">
                <label>Search</label>
                <input type="text" name="search" id="inputSearch" placeholder="ex: Store, Branch, Location" />
              </div>
            </div>
              <button class="btn btn-primary" type="button" id="toggleFieldsBtn">Additional Filters</button>
          </div>
          <button class="btn-search" type="submit">SEARCH</button>
        </div>
        <div class="row newline" style="display:block;clear:both;">
        
          <div class="additional-fields">
            <div class="form-row">
              <div class="col-md-6 mb-3">
                <label for="location" style="color: rgba(255, 255, 255, 0.9);">Location</label>
                <input type="text" class="form-control" id="location" name="location" placeholder="Enter location">
              </div>
              <div class="col-md-6 mb-3">
                <label for="category" style="color: rgba(255, 255, 255, 0.9);">Category</label>
                <select class="form-control" id="category" name="category">
                  <option value="">Choose category...</option>
                  <option value="Electronics">Electronics</option>
                  <option value="Clothing">Clothing</option>
                  <option value="Books">Books</option>
                  <!-- Add more options as needed -->
                </select>
              </div>
            </div>
          </div>   




        </div>
      </form>
      <div class="row newline" style="display:block;clear:both;">
        <div class="col-md-12">
                 




          <div class="container col-md-12">
            <div class="row">
              <div class="col-md-12">
                <table class="table table-bordered hide-location" width="90vw" id="dataTable" cellspacing="0">
                  <thead>
                    <tr>
                      <th>Store</th>
                      <th>Location</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Table data will be populated here -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>          



        </div>
      </div>
    </div>


<!-- Updated modal HTML with two columns per row -->
<div class="modal" id="memberDetailsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document" style="width:90vw;">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Member Details</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form id="memberDetailsForm">
        <div class="form-row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="FirstName">First Name</label>
              <input type="text" class="form-control" id="FirstName" readonly>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="Lname">Last Name</label>
              <input type="text" class="form-control" id="Lname" readonly>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="Country">Country</label>
              <input type="text" class="form-control" id="Country" readonly>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="CityMunicipality">City/Municipality</label>
              <input type="text" class="form-control" id="CityMunicipality" readonly>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="Region">Region</label>
              <input type="text" class="form-control" id="Region" readonly>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="Club">Club</label>
              <input type="text" class="form-control" id="Club" readonly>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>
</div>    
    <script src="js/extention/choices.js"></script>
    <script>
     

    </script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
  $('#toggleFieldsBtn').click(function() {
    $('.additional-fields').slideToggle();
  });


  
  function concatenateUrlParams() {
      var params = {};
      window.location.search.substr(1).split("&").forEach(function(item) {
          var param = item.split("=");
          params[param[0]] = decodeURIComponent(param[1]);
      });
  
      // Concatenate parameters with a string variable
      var get = "";
      for (var key in params) {
          if (params.hasOwnProperty(key)) {
              get += key + "=" + params[key] + "&";
          }
      }
      // Remove the trailing "&"
      get = get.slice(0, -1);
      
      return get;
  }
  // Handle form submission

  var subdomain = window.location.hostname.split('.')[0]; // Get subdomain
  var realSubdomain = '';
  if (subdomain !== 'www') {
      realSubdomain=subdomain;
  }

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// Example of how to use the function to get a specific parameter
var paramSearch = getParameterByName('search');
var paramLocation = getParameterByName('location');


if (paramSearch !== null) {
   $("#inputSearch").val(paramSearch);
    
}
if (paramLocation !== null) {
   $("#location").val(paramLocation);
    
}
  $.ajax({
      url: 'http://' + window.location.hostname + '/eagles/api.php?user=' + realSubdomain,
      type: 'POST',
      dataType: 'json',
      data: { TYPE: 'user' }, // Send TYPE: 'user' as data
      success: function(data) {
          // Print the JSON data to the console
          var member = data[0]; // Assuming you only fetch one member
            $('#FirstName').val(member.FirstName);
            $('#Lname').val(member.Lname);
            $('#Country').val(member.Country);
            $('#CityMunicipality').val(member.CityMunicipality);
            $('#Region').val(member.Region);
            $('#Club').val(member.Club);
      
            // Show the modal
            
            if (paramSearch !== null) {
                // Do something with the parameter value
                
            }else{
              $('#memberDetailsModal').modal('show');
            }
      },
      error: function(xhr, status, error) {
          // Handle errors if any
          console.error("Failed to fetch data:", error);
      }
  });
  
  $.ajax({
      url: 'http://' + window.location.hostname + '/eagles/api.php?user=' + realSubdomain,
        type: 'POST',
        dataType: 'json',
        data: { TYPE: 'establishments' }, // Send TYPE: 'user' as data
        success: function(data) {
            var select = $('#category');
            select.empty();
            select.append($('<option>').text('Select...').attr('value', ''));
            
            data=JSON.parse(data[0].establishment_json)
            data=data.establishments
            //console.log(data);
            // Iterate over each establishment
            $.each(data, function(index, establishment) {
                var category = establishment.category;
                var establishmentType = establishment.establishment_type.name;
                
                // Check if the optgroup already exists
                var optgroup = select.find('optgroup[label="' + category + '"]');
                if (optgroup.length === 0) {
                    optgroup = $('<optgroup>').attr('label', category);
                    select.append(optgroup);
                }
                
                // Add option under the respective optgroup
                optgroup.append($('<option>').text(establishmentType).attr('value', establishmentType));
            });
        },
        error: function(xhr, status, error) {
            // Handle errors if any
            console.error("Failed to fetch data:", error);
        }
    });
    $.ajax({
        url: 'http://' + window.location.hostname + '/eagles/api.php?user=' + realSubdomain + '&' + concatenateUrlParams(),
        type: 'POST',
        dataType: 'json',
        data: { TYPE: 'discounts' }, // Send TYPE: 'user' as data
        success: function(data) {
            
            if ($.fn.DataTable.isDataTable('#dataTable')) {
                // If DataTable is already initialized, destroy it
                $('#dataTable').DataTable().destroy();
            }
        
            $('#dataTable').DataTable({
                data: data,
                responsive: true,
                columns: [
                    { data: 'store_name_with_branch' },
                    { data: 'location' },
                    
                ],
                columnDefs: [
                    { searchable: true, targets: [0, 1] }
                ]
            });
        },
        error: function(xhr, status, error) {
            // Handle errors if any
            console.error("Failed to fetch data:", error);
        }
    });

    
    
    
    


  });
  $(document).ready(function() {
    var table = $('#dataTable').DataTable();

    $('#dataTable').on('page.dt', function () {
        setTimeout(function(){
            adjustColumnWidths();
        }, 100);
    });

    function adjustColumnWidths() {
        $('#dataTable').DataTable().columns.adjust();
    }
});

</script>    
  </body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
