<?php
include_once "global.php";
$pageTitle = "Name Checker - ";
include_once 'header.php';
?>

<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">Name Checker</div>
    <div class="ps-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="javascript:;"></a></li>
                <li class="breadcrumb-item active" aria-current="page">Name Checker</li>
            </ol>
        </nav>
    </div>
</div>

<h6 class="mb-0 text-uppercase">Name Checker</h6>
<hr>

<style>
  .pfa-wrapper{padding:28px;border-radius:14px;}
  .pfa-card{background:#fff;border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.12);padding:34px 34px 28px;}
  .pfa-title{display:flex;gap:14px;align-items:flex-start;}
  .pfa-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px;}
  .pfa-head h2{margin:0;font-weight:800;letter-spacing:.2px;}
  .pfa-search-row{margin-top:26px;display:flex;gap:14px;align-items:stretch;}
  .pfa-search-row .form-control{height:56px;border-radius:10px;font-size:16px;}
  .pfa-search-row .form-select{height:56px;border-radius:10px;min-width:230px;font-size:16px;}
  .pfa-btn{height:56px;border-radius:12px;padding:0 26px;font-weight:700;font-size:18px;background:linear-gradient(135deg,#6f78d7,#6b4bb8);border:0;white-space:nowrap;}

  @media (max-width:992px){
    .pfa-search-row{flex-wrap:wrap;}
    .pfa-search-row .form-select{min-width:180px;flex:1;}
    .pfa-search-row .form-control{flex:1;min-width:260px;}
    .pfa-btn{width:100%;}
  }

  /* Summary (if you return it from ajax) */
  .pfa-summary{background:#f6f8ff;border-radius:12px;padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:22px;}
  .pfa-s-item{min-width:180px;}
  .pfa-s-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;}
  .pfa-s-value{margin-top:6px;font-size:30px;font-weight:800;color:#5b6cff;line-height:1;}
  .pfa-s-value.small{font-size:26px;}
  @media (max-width:768px){ .pfa-summary{flex-direction:column;align-items:flex-start;} }
</style>

<div class="pfa-wrapper">
  <div class="pfa-card">

    <div class="pfa-title">
      <div class="pfa-icon">🔍</div>
      <div class="pfa-head">
        <h2>Search Here</h2>
      </div>
    </div>

    <!-- AJAX form (no page reload) -->
    <form id="pfaSearchForm" method="post" action="javascript:void(0);">
      <div class="pfa-search-row">
        <input type="text" name="term" id="term" class="form-control"
               placeholder="Enter name, nationality, or any search term..." autocomplete="off">

        <select name="search_type" id="search_type" class="form-select">
          <option value="name" selected>Name Search</option>
          <option value="full_name">Full Name</option>
          <option value="nationality">Nationality</option>
          <option value="all">Search All Fields</option>
        </select>

        <button type="submit" class="btn btn-primary pfa-btn" id="pfaSearchBtn">Search</button>
      </div>
    </form>

    <!-- AJAX will inject HTML here -->
    <div class="mt-4" id="pfaResults"></div>

  </div>
</div>

<script>
function initPfaTable(){
  if ($('#pfaTable').length) {
    // if already initialized
    if ($.fn.DataTable.isDataTable('#pfaTable')) {
      $('#pfaTable').DataTable().destroy();
    }
    $('#pfaTable').DataTable({
      pageLength: 25,
      lengthMenu: [10,25,50,100],
      // Your table has 6 columns (0..5). Sorting by External ID by default:
      order: [[0,'asc']],
      responsive: true
    });
  }
}

$(document).on('submit', '#pfaSearchForm', function(e){
  e.preventDefault();

  var term = $('#term').val().trim();
  var type = $('#search_type').val();

  if(!term){
    $('#pfaResults').html('<div class="alert alert-warning mb-0">Please enter a search term.</div>');
    return;
  }

  $('#pfaSearchBtn').prop('disabled', true).text('Searching...');
  $('#pfaResults').html('<div class="alert alert-info mb-0">Loading...</div>');

  $.ajax({
    url: "<?php echo WEB_URL; ?>/ajax_call?page=pfa_search_html",
    type: "POST",
    dataType: "html",
    data: {
      term: term,
      search_type: type
    },
    success: function(html){
      $('#pfaSearchBtn').prop('disabled', false).text('Search');
      $('#pfaResults').html(html);
      initPfaTable();
    },
    error: function(){
      $('#pfaSearchBtn').prop('disabled', false).text('Search');
      $('#pfaResults').html('<div class="alert alert-danger mb-0">Server error.</div>');
    }
  });
});
</script>

<?php include_once 'footer.php'; ?>
