<?php /* pledge_view_modals.php — লকার মোডাল + বন্ধক ফেরত মোডাল */ ?>

<style>
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;overflow-y:auto;padding:12px;align-items:center;justify-content:center}
.modal.show{display:flex}
.mbox{width:100%;max-width:440px;background:#0F1A30;border:1px solid #1A2D50;border-radius:18px;overflow:hidden;margin:auto;position:relative}
#modalLock .mbox::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,#4F8EF7,transparent)}
#modalClose .mbox::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,#10B981,transparent)}

.mhead{border-bottom:1px solid #1A2D50;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
#modalLock .mhead{background:rgba(79,142,247,.08)}
#modalClose .mhead{background:rgba(16,185,129,.08)}
.mht{font-size:16px;font-weight:800}
#modalLock .mht{color:#4F8EF7}
#modalClose .mht{color:#10B981}

.mcl{width:32px;height:32px;border-radius:8px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#EF4444;cursor:pointer;font-size:14px;padding:0;font-family:inherit}
.mcl:hover{background:#EF4444;color:#fff}

.mbody{padding:16px;max-height:75vh;overflow-y:auto}
.mfoot{padding:12px 16px;border-top:1px solid #1A2D50;display:flex;gap:8px;justify-content:flex-end;background:#060E1C}

.msec{margin-bottom:16px}
.mst{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding-bottom:6px;border-bottom:1px solid #1A2D50;margin-bottom:12px;color:#F5B800}

.mf{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.mf label{font-size:11px;color:#5C7DA8;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin:0}
.mf input,.mf select,.mf textarea{background:#060E1C;border:1px solid #1A2D50;color:#E8F0FE;font-size:14px;padding:10px 12px;border-radius:9px;width:100%;outline:none;font-family:'Segoe UI',Arial,sans-serif}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:rgba(245,184,0,.4)}
.mf input[readonly]{color:#F5B800;font-weight:700;background:rgba(245,184,0,.06);cursor:default}
.mf textarea{resize:none;height:64px}
.mf select option{background:#0F1A30}
.mf .hint{font-size:11px;margin-top:3px}
.mf .hint.g{color:#10B981}
.mf .hint.r{color:#EF4444}
.mf .hint.y{color:#F5B800}

.g2m{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.fbox{background:#060E1C;border:1px solid #1A2D50;border-radius:11px;overflow:hidden;margin-top:4px}
.fr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(26,45,80,.5)}
.fr:last-child{border-bottom:none}
.frl{font-size:12px;color:#5C7DA8;font-weight:600}
.frs{font-size:10px;color:#3E5678;margin-top:2px}
.frv{font-size:15px;font-weight:800}
.fo{color:#EF4444}.fi{color:#10B981}.fg{color:#F5B800}.fw{color:#E8F0FE}

.rg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.rc{background:#060E1C;border:1px solid #1A2D50;border-radius:10px;padding:11px;text-align:center}
.rc label{font-size:10px;color:#5C7DA8;display:block;text-align:center;margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.rc input{text-align:center;font-size:18px;font-weight:800;background:transparent;border:none;padding:3px;color:#F5B800;width:100%;outline:none;font-family:inherit}
.rc .unit{font-size:10px;color:#5C7DA8;margin-top:4px}

.pbox{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.04));border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:14px;text-align:center}
.pba{font-size:26px;font-weight:900;color:#10B981;margin-bottom:4px}
.pbox .ptitle{font-size:11px;color:#5C7DA8;margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.pbox .psub{font-size:12px;color:#6EE7B7}
.pbox .pcalc{font-size:11px;color:#5C7DA8;margin-top:6px;padding-top:6px;border-top:1px solid rgba(16,185,129,.2)}

.tbox{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.04));border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:14px;margin-top:12px;text-align:center}
.tbox .tlbl{font-size:11px;color:#5C7DA8;margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.tbox .tamt{font-size:26px;font-weight:900;color:#10B981}
.tbox .thint{font-size:11px;color:#6EE7B7;margin-top:6px}

.mal{padding:11px 13px;border-radius:9px;font-size:13px;margin-bottom:12px;display:none;font-weight:700}
.mal.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#EF4444}
.mal.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#10B981}

.wbox{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:10px;padding:11px;font-size:12px;color:#EF4444;font-weight:600;line-height:1.5}

.bcc{background:rgba(255,255,255,.06);color:#5C7DA8;border:1px solid #1A2D50;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.bcf{color:#fff;border:none;padding:11px 22px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.bcf:disabled{opacity:.5;cursor:not-allowed}
#btnSave{background:linear-gradient(135deg,#4F8EF7,#1E40AF);box-shadow:0 3px 12px rgba(79,142,247,.3)}
#btnClose{background:linear-gradient(135deg,#16A34A,#0F7C3A);box-shadow:0 3px 12px rgba(22,163,74,.3)}

.locker-pick-box{background:rgba(79,142,247,.07);border:1px solid rgba(79,142,247,.3);border-radius:11px;padding:12px;margin-bottom:12px}
.locker-pick-box label{font-size:11px;color:#4F8EF7;font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;display:block}
.locker-pick-box input,
.locker-pick-box select{background:#060E1C;border:1px solid rgba(79,142,247,.35);color:#E8F0FE;font-size:14px;padding:11px 12px;border-radius:9px;width:100%;outline:none;font-family:'Segoe UI',Arial,sans-serif}
.locker-pick-box input{margin-bottom:8px}
.locker-pick-box input:focus,
.locker-pick-box select:focus{border-color:#4F8EF7}
.locker-pick-box .hint{font-size:11px;color:#5C7DA8;margin-top:6px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#1A2D50;border-radius:4px}
</style>

<?php if(!empty($clock)): ?>
<!-- লকারে পাঠান মোডাল -->
<div id="modalLock" class="modal">
<div class="mbox">
  <div class="mhead">
    <div class="mht">🔐 লকারে পাঠান</div>
    <button type="button" class="mcl">✕</button>
  </div>

  <div class="mbody">
    <div class="mal" id="mAl"></div>

    <div class="msec">
      <div class="mst">📊 বর্তমান অবস্থা</div>
      <div class="fbox">
        <div class="fr">
          <div class="frl">গ্রাহক</div>
          <div class="frv fw"><?php echo e2($pledge['party_name']); ?></div>
        </div>
        <div class="fr">
          <div class="frl">বন্ধক কোড</div>
          <div class="frv fg"><?php echo e2($pledge['pledge_code']); ?></div>
        </div>
        <div class="fr">
          <div class="frl">গ্রাহককে দেওয়া ঋণ</div>
          <div class="frv fo"><?php echo tk($loan); ?></div>
        </div>
        <div class="fr">
          <div class="frl">সোনার মূল্য</div>
          <div class="frv fg"><?php echo tk($gval); ?></div>
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">🔐 কোন লকারে পাঠাবেন?</div>
      <div class="locker-pick-box">
        <label>লকার খুঁজুন</label>
        <input
          type="text"
          id="lockerSearch"
          placeholder="নাম / মোবাইল লিখে খুঁজুন..."
          autocomplete="off"
        >

        <label>লকার বেছে নিন *</label>
        <select id="lLockerId">
          <option value="">— লোড হচ্ছে —</option>
        </select>

        <div class="hint" id="lockerSearchHint">
          নাম বা মোবাইল লিখলে লকার list filter হবে
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">📅 তারিখ ও অ্যাকাউন্ট</div>
      <div class="g2m">
        <div class="mf">
          <label>মুভ তারিখ *</label>
          <input type="date" id="lDate" value="<?php echo date('Y-m-d'); ?>">
        </div>

        <div class="mf">
          <label>🏦 কোন অ্যাকাউন্ট-এ? *</label>
          <select id="lAcc">
            <option value="">— লোড হচ্ছে —</option>
          </select>
          <div class="hint g">লকার থেকে আসা টাকা এই অ্যাকাউন্টে IN হবে</div>
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">💵 টাকার হিসাব</div>
      <div class="g2m">
        <div class="mf">
          <label>🏪 গ্রাহককে দেওয়া টাকা</label>
          <input type="number" id="lLoan" value="<?php echo $loan; ?>" readonly>
          <div class="hint r">OUT — গ্রাহককে আগে দেওয়া ঋণ</div>
        </div>

        <div class="mf">
          <label>🔐 লকার থেকে আসা টাকা *</label>
          <input type="number" id="lAmt" placeholder="0" step="1" min="0">
          <div class="hint g">শোরুম/ক্যাশে IN হবে</div>
        </div>
      </div>

      <div class="fbox">
        <div class="fr">
          <div>
            <div class="frl">শোরুম OUT</div>
            <div class="frs">গ্রাহককে দেওয়া ঋণ</div>
          </div>
          <div class="frv fo">-<span id="fO"><?php echo number_format($loan,0); ?></span>৳</div>
        </div>

        <div class="fr">
          <div>
            <div class="frl">শোরুম IN</div>
            <div class="frs">লকার থেকে আসা টাকা</div>
          </div>
          <div class="frv fi">+<span id="fI">০</span>৳</div>
        </div>

        <div class="fr" style="background:rgba(255,255,255,.03)">
          <div class="frl" style="color:#E8F0FE;font-weight:800">নেট পরিবর্তন</div>
          <div class="frv" id="fN" style="color:#EF4444">-<?php echo number_format($loan,0); ?>৳</div>
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">📈 লকার ভাড়া হিসাব</div>

      <div class="rg">
        <div class="rc">
          <label>গ্রাহকের ভাড়ার হার</label>
          <input type="number" id="lCR" value="<?php echo $irate; ?>" step="0.5">
          <div class="unit">%/মাস</div>
        </div>

        <div class="rc">
          <label>লকার ভাড়ার হার</label>
          <input type="number" id="lLR" value="2.5" step="0.5">
          <div class="unit">%/মাস</div>
        </div>

        <div class="rc" style="border-color:rgba(16,185,129,.3)">
          <label style="color:#6EE7B7">ভাড়ার পার্থক্য হার</label>
          <input type="number" id="lPR" readonly style="color:#10B981">
          <div class="unit" style="color:#6EE7B7">%/মাস</div>
        </div>
      </div>

      <div class="pbox">
        <div class="ptitle">✨ প্রতি মাসে ভাড়ার পার্থক্য</div>
        <div class="pba" id="pA">৳০</div>
        <div class="psub" id="pS">ভাড়ার হার দিন</div>
        <div class="pcalc" id="pC">—</div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">📝 নোট</div>
      <div class="mf">
        <label>লকারে কেন পাঠানো হচ্ছে</label>
        <textarea id="lNote" placeholder="লিখুন..."></textarea>
      </div>
    </div>
  </div>

  <div class="mfoot">
    <button type="button" class="bcc">বাতিল</button>
    <button type="button" class="bcf" id="btnSave">✅ লকারে পাঠান নিশ্চিত করুন</button>
  </div>
</div>
</div>

<script>
(function(){
  var allLockers = [];

  function lockerText(l) {
    return (
      (l.name || '') + ' ' +
      (l.phone || '') + ' ' +
      (l.mobile || '') + ' ' +
      (l.address || '')
    ).toLowerCase();
  }

  function renderLockers(keyword) {
    var sel  = document.getElementById('lLockerId');
    var hint = document.getElementById('lockerSearchHint');

    if (!sel) return;

    var q = (keyword || '').trim().toLowerCase();

    sel.innerHTML = '<option value="">— লকার select করুন —</option>';

    var list = allLockers.filter(function(l) {
      if (!q) return true;
      return lockerText(l).indexOf(q) !== -1;
    });

    if (list.length) {
      list.forEach(function(l){
        var o = document.createElement('option');
        o.value = l.id;

        var phone = l.phone || l.mobile || '';
        var count = Number(l.pledge_count || 0);

        o.textContent =
          (l.name || 'নাম নেই') +
          (phone ? ' | ' + phone : '') +
          (count > 0 ? ' (' + count + 'টি বন্ধক)' : '');

        sel.appendChild(o);
      });

      if (hint) {
        hint.textContent = q
          ? 'মোট ' + list.length + 'টি লকার পাওয়া গেছে'
          : 'নাম বা মোবাইল লিখলে লকার list filter হবে';
        hint.style.color = '#5C7DA8';
      }

    } else {
      sel.innerHTML = '<option value="">কোনো লকার মেলেনি</option>';

      if (hint) {
        hint.textContent = 'এই নাম / মোবাইলে কোনো লকার পাওয়া যায়নি';
        hint.style.color = '#EF4444';
      }
    }
  }

  function loadLockers(){
    var sel = document.getElementById('lLockerId');
    var search = document.getElementById('lockerSearch');

    if(!sel) return;

    sel.innerHTML = '<option value="">— লোড হচ্ছে —</option>';

    fetch('/api/lockers/get_lockers.php?status=active', {credentials:'same-origin'})
    .then(function(r){ return r.json(); })
    .then(function(res){
      if(res.success && res.data && res.data.length){
        allLockers = res.data;
        renderLockers(search ? search.value : '');
      } else {
        allLockers = [];
        sel.innerHTML = '<option value="">কোনো সক্রিয় লকার নেই</option>';
      }
    })
    .catch(function(){
      allLockers = [];
      sel.innerHTML = '<option value="">লোড ব্যর্থ</option>';
    });
  }

  document.addEventListener('input', function(e){
    if(e.target && e.target.id === 'lockerSearch'){
      renderLockers(e.target.value);
    }
  });

  document.addEventListener('click', function(e){
    if(e.target && e.target.classList && e.target.classList.contains('btn-lk')){
      setTimeout(loadLockers, 100);
    }
  });

  loadLockers();
})();
</script>
<?php endif; ?>

<?php if(!empty($cpay)): ?>
<!-- বন্ধক ফেরত মোডাল -->
<div id="modalClose" class="modal">
<div class="mbox">
  <div class="mhead">
    <div class="mht">🔓 বন্ধক ফেরত</div>
    <button type="button" class="mcl">✕</button>
  </div>

  <div class="mbody">
    <div class="mal" id="cAl"></div>

    <div class="msec">
      <div class="mst">📊 বর্তমান অবস্থা</div>

      <div class="fbox">
        <div class="fr">
          <div class="frl">গ্রাহক</div>
          <div class="frv fw"><?php echo e2($pledge['party_name']); ?></div>
        </div>

        <div class="fr">
          <div class="frl">বন্ধক কোড</div>
          <div class="frv fg"><?php echo e2($pledge['pledge_code']); ?></div>
        </div>

        <div class="fr">
          <div class="frl">বাকি মূল</div>
          <div class="frv fo"><?php echo tk($out); ?></div>
        </div>

        <div class="fr">
          <div class="frl">লকার ভাড়ার হার</div>
          <div class="frv fw"><?php echo number_format($irate,2); ?>%/মাস</div>
        </div>

        <div class="fr">
          <div class="frl">সোনার মূল্য</div>
          <div class="frv fg"><?php echo tk($gval); ?></div>
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">📅 তারিখ ও অ্যাকাউন্ট</div>

      <div class="g2m">
        <div class="mf">
          <label>ফেরত তারিখ *</label>
          <input type="date" id="cDate" value="<?php echo date('Y-m-d'); ?>">
        </div>

        <div class="mf">
          <label>🏦 কোন অ্যাকাউন্ট-এ? *</label>
          <select id="cAcc">
            <option value="">— লোড হচ্ছে —</option>
          </select>
          <div class="hint g">এই অ্যাকাউন্টে IN হবে</div>
        </div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">💵 পরিশোধের হিসাব</div>

      <div class="g2m">
        <div class="mf">
          <label>💰 মূল পরিমাণ *</label>
          <input type="number" id="cPrin" value="<?php echo $out; ?>" step="1" min="0">
          <div class="hint r">বাকি: ৳<?php echo number_format($out,2); ?></div>
        </div>

        <div class="mf">
          <label>📈 লকার ভাড়ার পরিমাণ</label>
          <input type="number" id="cIntr" value="0" step="1" min="0">
          <div class="hint y">ভাড়ার হার: <?php echo number_format($irate,2); ?>%/মাস</div>
        </div>
      </div>

      <div class="tbox">
        <div class="tlbl">মোট গ্রহণ করা হবে</div>
        <div class="tamt" id="cTotal">৳<?php echo number_format($out,2); ?></div>
        <div class="thint">মূল + লকার ভাড়া = মোট</div>
      </div>
    </div>

    <div class="msec">
      <div class="mst">📝 নোট</div>
      <div class="mf">
        <label>বিশেষ তথ্য</label>
        <textarea id="cNote" placeholder="লিখুন..."></textarea>
      </div>
    </div>

    <div class="wbox">⚠️ একবার বন্ধ করলে আর এডিট করা যাবে না।</div>
  </div>

  <div class="mfoot">
    <button type="button" class="bcc">বাতিল</button>
    <button type="button" class="bcf" id="btnClose">✅ বন্ধক বন্ধ নিশ্চিত করুন</button>
  </div>
</div>
</div>
<?php endif; ?>