@extends('layouts.master')

@section('page_title', 'Barcode Match')
@section('title', 'Barcode Match')
@section('main_item', 'Customer Feedback')
@section('sub_item', 'Barcode Match')

@section('content')
    <style>
    input {
      padding: 10px;
      font-size: 18px;
      margin-bottom: 10px;
      display: block;
      width: 300px;
    }
    h1 {
      font-size: 24px;
      margin-top: 20px;
      font-weight: bold;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
    .form-check-label{
        margin-left: 15px;
    }
  </style>
 <div class="col-12 d-flex justify-content-center " style="min-height: 50vh;">
    <div id="barcodeCard" class="card text-center p-4" style="width: 400px;">
        <h2>Barcode Match</h2>

        <label class="mt-3">Scan Barcode 1:</label>
        <input type="text" id="barcode1" class="form-control mb-2" placeholder="Scan or type barcode" autofocus>

        <label>Scan Barcode 2:</label>
        <input type="text" id="barcode2" class="form-control mb-2" placeholder="Scan to match">
        <h1 id="result"></h1>
        <div class="form-check my-2">
            <input class="form-check-input" type="checkbox" id="autoReset">
            <label class="form-check-label" for="autoReset">
                Auto Reset
            </label>
        </div>

        <button id="manualReset" class="btn btn-primary mb-3">Manual Reset</button>

        
    </div>
</div>





  
    
@endsection

@section('scripts')

     <script>
    const barcode1 = document.getElementById('barcode1');
    const barcode2 = document.getElementById('barcode2');
    const autoReset = document.getElementById('autoReset');
    const manualReset = document.getElementById('manualReset');
    const result = document.getElementById('result');

    function checkMatch() {
  const card = document.getElementById('barcodeCard');

  if (barcode2.value === "") return;

  if (barcode1.value === barcode2.value) {
    barcode2.style.backgroundColor = "lightgreen";
    result.textContent = "MATCH";
    result.style.color = "green";
    card.style.backgroundColor = "#d4edda"; // light green
  } else {
    barcode2.style.backgroundColor = "lightcoral";
    result.textContent = "NOT MATCH";
    result.style.color = "red";
    card.style.backgroundColor = "#f8d7da"; // light red
  }

  if (autoReset.checked) {
    setTimeout(resetSecondField, 1500);
  }
}

function resetSecondField() {
  const card = document.getElementById('barcodeCard');
  barcode2.value = "";
  barcode2.style.backgroundColor = "";
  result.textContent = "";
  card.style.backgroundColor = ""; // reset card bg
  barcode2.focus();
}

    // Reset on button click
    manualReset.addEventListener('click', resetSecondField);

    // Trigger check on second field input
    barcode2.addEventListener('input', checkMatch);

    // Optional: clear second field when first changes
    barcode1.addEventListener('input', () => {
      barcode2.value = "";
      barcode2.style.backgroundColor = "";
      result.textContent = "";
    });
  </script>

@endsection