<?php 
 session_start();  
ob_start(); //এটা এবং এর ইনড-ফ্লাস না দিলে; যদি নেট গতি কম হয় তাহলে ডাটাবেজ পাবে না।
include("configa.php");
//$mobile = $_SESSION['mobile'];
ob_end_flush();
?>


<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>হোল্ডিং তথ্য আপডেট ফর্ম</title>
  <style>
    /* তোমার আগের CSS */
    input, select, textarea {
      font-size: 16px; /* 12px এর নিচে না হওয়া নিশ্চিত করো */
    }
    /* বাকী CSS... */
  
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h2 {
      color: #333;
    }
    .record {
      background: #fff;
      padding: 15px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
      overflow-x: hidden; /* ডিফল্ট স্ক্রল বন্ধ */
      overflow-y: hidden;
    }
    .record.active-scroll {
      overflow-x: auto; /* স্ক্রল চালু */
      overflow-y: auto;
    }
    .record h3 {
      margin-top: 0;
      color: #005c7a;
    }
    .form-inline {
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
      min-width: 1300px;
      align-items: flex-start;
    }
    .form-inline label {
      display: flex;
      flex-direction: column;
      font-size: 13px;
      color: #333;
      min-width: 160px;
      position: relative;
    }
    input, select {
      padding: 6px 8px;
      font-size: 14px;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      padding: 10px 25px;
      background: green;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      margin-top: 10px;
      margin-right: 10px;
    }
    button:hover {
      background: darkgreen;
    }
    #holdingNoResults {
      position: absolute;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border: 1px solid #ccc;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 9999999;
      font-size: 14px;
      display: none;
      width: 300px;
    }
    #holdingNoResults div {
      padding: 6px 10px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }
    #holdingNoResults div:hover {
      background-color: #f0f0f0;
    }
    #messageBox {
      margin-top: 15px;
      font-weight: bold;
      color: green;
    }
  </style>
</head>
<body>

<h2>হোল্ডিং তথ্য আপডেট ফর্ম (সার্চসহ)</h2>

<button id="addNewButton">নতুন যোগ করুন</button>
<button id="updateButton">আপডেট করুন</button>

<div id="messageBox"></div>

<div id="recordsContainer">
  <!-- প্রথম রেকর্ড ডিফল্ট -->
  <div class="record active-scroll" data-index="0">
    <h3>রেকর্ড ১</h3>

    <div class="form-inline">
      <input type="hidden" id="id_0" name="data[0][id]">
      <label>হোল্ডিং নং
        <input type="text" id="holdingNo_0" name="data[0][holdingNo]" autocomplete="off" />
      </label>
      <label>ওয়ার্ড নং
        <input type="text" id="ward_0" name="data[0][ward]" autocomplete="off" />
      </label>
      <label>নাম
        <input type="text" id="name_0" name="data[0][name]" />
      </label>
      <label>পিতা/স্বামী
        <input type="text" id="fatherHusband_0" name="data[0][fatherHusband]" />
      </label>
      <label>বাড়ীর নাম
        <input type="text" id="homeName_0" name="data[0][homeName]" />
      </label>
      <label>ঠিকানা
        <input type="text" id="address_0" name="data[0][address]" />
      </label>
      <label>মোবাইল নং
        <input type="text" id="mobile_0" name="data[0][mobile]" />
      </label>
      <label>পেশা
        <input type="text" id="pesha_0" name="data[0][pesha]" />
      </label>
      <label>খানার ধরণ
        <select id="khanarDhoron_0" name="data[0][khanarDhoron]">
          <option value="">-- নির্বাচন করুন --</option>
          <option value="ছাপড়া">ছাপড়া</option>
          <option value="দো-চালা">দো-চালা</option>
          <option value="চৌ-চালা">চৌ-চালা</option>
          <option value="আধা পাকা">আধা পাকা</option>
          <option value="পাকা">পাকা</option>
          <option value="বহুতল">বহুতল</option>
        </select>
      </label>
      <label>খানার মূল্য
        <input type="number" step="0.01" id="khanarMullo_0" name="data[0][khanarMullo]" />
      </label>
      <label>প্রাপ্ত বয়স্ক পুরুষ
        <input type="number" id="purus_0" name="data[0][purus]" />
      </label>
      <label>অপ্রাপ্ত বয়স্ক ছেলে
        <input type="number" id="chele_0" name="data[0][chele]" />
      </label>
      <label>প্রাপ্ত বয়স্ক মহিলা
        <input type="number" id="mohila_0" name="data[0][mohila]" />
      </label>
      <label>অপ্রাপ্ত বয়স্ক মেয়ে
        <input type="number" id="meye_0" name="data[0][meye]" />
      </label>
      <label>কর আরোপযোগ্য মূল্য
        <input type="number" step="0.01" id="korAropMullo_0" name="data[0][korAropMullo]" />
      </label>
      <label>ধার্যকৃত কর
        <input type="number" step="0.01" id="tofsileeKor_0" name="data[0][tofsileeKor]" />
      </label>
      <label>পুরাতন বকেয়া
        <input type="number" step="0.01" id="bokeya_0" name="data[0][bokeya]" />
      </label>
      <label>বকেয়া পরিশোধ
        <input type="number" step="0.01" id="bokeyaPorishod_0" name="data[0][bokeyaPorishod]" />
      </label>
    </div>
  </div>
</div>

<div id="holdingNoResults"></div>

<script>
  let recordCount = 1; // ডিফল্ট রেকর্ড আছে ১

  // নতুন রেকর্ড তৈরি ফাংশন
  function createRecord(index) {
    const container = document.getElementById('recordsContainer');

    const recordHTML = `
    <div class="record" data-index="${index}">
      <h3>রেকর্ড ${index + 1}</h3>
      <div class="form-inline">
        <input type="hidden" id="id_${index}" name="data[${index}][id]">
        <label>হোল্ডিং নং
          <input type="text" id="holdingNo_${index}" name="data[${index}][holdingNo]" autocomplete="off" />
        </label>
        <label>ওয়ার্ড নং
          <input type="text" id="ward_${index}" name="data[${index}][ward]" autocomplete="off" />
        </label>
        <label>নাম
          <input type="text" id="name_${index}" name="data[${index}][name]" />
        </label>
        <label>পিতা/স্বামী
          <input type="text" id="fatherHusband_${index}" name="data[${index}][fatherHusband]" />
        </label>
        <label>বাড়ীর নাম
          <input type="text" id="homeName_${index}" name="data[${index}][homeName]" />
        </label>
        <label>ঠিকানা
          <input type="text" id="address_${index}" name="data[${index}][address]" />
        </label>
        <label>মোবাইল নং
          <input type="text" id="mobile_${index}" name="data[${index}][mobile]" />
        </label>
        <label>পেশা
          <input type="text" id="pesha_${index}" name="data[${index}][pesha]" />
        </label>
        <label>খানার ধরণ
          <select id="khanarDhoron_${index}" name="data[${index}][khanarDhoron]">
            <option value="">-- নির্বাচন করুন --</option>
            <option value="ছাপড়া">ছাপড়া</option>
            <option value="দো-চালা">দো-চালা</option>
            <option value="চৌ-চালা">চৌ-চালা</option>
            <option value="আধা পাকা">আধা পাকা</option>
            <option value="পাকা">পাকা</option>
            <option value="বহুতল">বহুতল</option>
          </select>
        </label>
        <label>খানার মূল্য
          <input type="number" step="0.01" id="khanarMullo_${index}" name="data[${index}][khanarMullo]" />
        </label>
        <label>প্রাপ্ত বয়স্ক পুরুষ
          <input type="number" id="purus_${index}" name="data[${index}][purus]" />
        </label>
        <label>অপ্রাপ্ত বয়স্ক ছেলে
          <input type="number" id="chele_${index}" name="data[${index}][chele]" />
        </label>
        <label>প্রাপ্ত বয়স্ক মহিলা
          <input type="number" id="mohila_${index}" name="data[${index}][mohila]" />
        </label>
        <label>অপ্রাপ্ত বয়স্ক মেয়ে
          <input type="number" id="meye_${index}" name="data[${index}][meye]" />
        </label>
        <label>কর আরোপযোগ্য মূল্য
          <input type="number" step="0.01" id="korAropMullo_${index}" name="data[${index}][korAropMullo]" />
        </label>
        <label>ধার্যকৃত কর
          <input type="number" step="0.01" id="tofsileeKor_${index}" name="data[${index}][tofsileeKor]" />
        </label>
        <label>পুরাতন বকেয়া
          <input type="number" step="0.01" id="bokeya_${index}" name="data[${index}][bokeya]" />
        </label>
        <label>বকেয়া পরিশোধ
          <input type="number" step="0.01" id="bokeyaPorishod_${index}" name="data[${index}][bokeyaPorishod]" />
        </label>
      </div>
    </div>
    `;

    container.insertAdjacentHTML('beforeend', recordHTML);
  }

  // নতুন রেকর্ড যোগ করার বাটন ক্লিক হ্যান্ডলার
  document.getElementById('addNewButton').addEventListener('click', () => {
    createRecord(recordCount);
    recordCount++;
  });

  // আপডেট বাটন ক্লিক হ্যান্ডলার
  document.getElementById('updateButton').addEventListener('click', function(event) {
    event.preventDefault();

    const messageBox = document.getElementById('messageBox');
    messageBox.textContent = 'দয়া করে অপেক্ষা করুন...';
    messageBox.style.color = 'black';

    const formData = new FormData();

    const fields = [
      'id','holdingNo','ward','name','fatherHusband','homeName','address','mobile','pesha',
      'khanarDhoron','khanarMullo','purus','chele','mohila','meye','korAropMullo',
      'tofsileeKor','bokeya','bokeyaPorishod'
    ];

    for (let i = 0; i < recordCount; i++) {
      fields.forEach(field => {
        const el = document.getElementById(field + '_' + i);
        if (el) {
          formData.append(`data[${i}][${field}]`, el.value);
        }
      });
    }

    fetch('holdin_update.php', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        messageBox.style.color = 'green';
        messageBox.textContent = data.message || 'সফলভাবে আপডেট হয়েছে।';

        // প্রথম রেকর্ড ছাড়া বাকি রেকর্ডগুলো মুছে ফেলুন
        const container = document.getElementById('recordsContainer');
        const records = container.querySelectorAll('.record');
        for(let i = records.length - 1; i >= 1; i--) {
          container.removeChild(records[i]);
        }
        recordCount = 1;

        // প্রথম রেকর্ডের সব ইনপুট ফিল্ড খালি করুন
        const firstRecord = records[0];
        if (firstRecord) {
          const inputs = firstRecord.querySelectorAll('input, select');
          inputs.forEach(input => {
            if(input.tagName.toLowerCase() === 'select') {
              input.selectedIndex = 0;  // ড্রপডাউন রিসেট
            } else {
              input.value = ''; // ইনপুট ফিল্ড খালি
            }
          });
        }

      } else {
        messageBox.style.color = 'red';
        messageBox.textContent = data.message || 'কিছু সমস্যা হয়েছে।';
      }
    })
    .catch(err => {
      console.error('Update error:', err);
      messageBox.style.color = 'red';
      messageBox.textContent = 'আপডেট করার সময় সমস্যা হয়েছে।';
    });
  });

  // সার্চ রেজাল্ট বক্স
  const resultsBox = document.getElementById('holdingNoResults');

  // ইভেন্ট ডেলিগেশন দিয়ে recordsContainer এর ভিতরে 'holdingNo_*' ইনপুটে সার্চ ইভেন্ট হ্যান্ডলিং
  document.getElementById('recordsContainer').addEventListener('input', function(event) {
    const target = event.target;
    if (target && target.id && target.id.startsWith('holdingNo_')) {
      const query = target.value.trim();

      if (query.length < 2) {
        resultsBox.style.display = 'none';
        resultsBox.innerHTML = '';
        return;
      }

      fetch('holding_searchForAlotUpdate.php?q=' + encodeURIComponent(query))
        .then(response => response.json())
        .then(data => {
          if (data.length > 0) {
            resultsBox.innerHTML = '';
            data.forEach(item => {
              const div = document.createElement('div');
              div.textContent = item.holdingNo + ' - ' + item.name;
              div.dataset.record = JSON.stringify(item);
              div.addEventListener('click', () => {
                fillFormWithIndex(target.id, JSON.parse(div.dataset.record));
                resultsBox.style.display = 'none';
              });
              resultsBox.appendChild(div);
            });

            const rect = target.getBoundingClientRect();
            resultsBox.style.top = (window.scrollY + rect.top - 50) + 'px';
            resultsBox.style.left = (window.scrollX + rect.left + 150) + 'px';
            resultsBox.style.width = rect.width + 'px';
            resultsBox.style.display = 'block';
          } else {
            resultsBox.innerHTML = '<div>কোন রেকর্ড পাওয়া যায়নি</div>';
            resultsBox.style.display = 'block';
          }
        })
        .catch(err => {
          console.error('Search error:', err);
          resultsBox.style.display = 'none';
        });
    }
  });

  // সার্চ থেকে ডেটা ফিলাপ করার ফাংশন (যে ইনপুটে ক্লিক করেছে তার ইনডেক্স ধরে)
  function fillFormWithIndex(holdingNoId, record) {
    const index = holdingNoId.split('_')[1];

    const fields = [
      'id','holdingNo','ward','name','fatherHusband','homeName','address','mobile','pesha',
      'khanarDhoron','khanarMullo','purus','chele','mohila','meye','korAropMullo',
      'tofsileeKor','bokeya','bokeyaPorishod'
    ];

    fields.forEach(field => {
      const el = document.getElementById(field + '_' + index);
      if (el) {
        el.value = record[field] || '';
      }
    });
  }

  // ==========================
  // ** স্ক্রল একটিভেশন ** 
  // ==========================
  // যখন ইনপুট ফোকাস বা ক্লিক হবে, তখন কেবল সেই record এর স্ক্রল চালু হবে, অন্যগুলো বন্ধ থাকবে

  const recordsContainer = document.getElementById('recordsContainer');

  recordsContainer.addEventListener('focusin', (e) => {
    let targetRecord = e.target.closest('.record');
    if (!targetRecord) return;

    document.querySelectorAll('.record').forEach(rec => {
      rec.classList.remove('active-scroll');
    });

    targetRecord.classList.add('active-scroll');
  });

  recordsContainer.addEventListener('click', (e) => {
    let targetRecord = e.target.closest('.record');
    if (!targetRecord) return;

    document.querySelectorAll('.record').forEach(rec => {
      rec.classList.remove('active-scroll');
    });

    targetRecord.classList.add('active-scroll');
  });

  // ==========================
  // ** ডিফল্ট ফোকাস বন্ধ করার জন্য কোড **
  // ==========================
  window.addEventListener('load', () => {
    const inputs = document.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      input.blur();
    });
  });
</script>

</body>
</html>
