<div class="ab-card mb-3">
  <div class="ab-card-header">
    <h2>Company Details</h2>
  </div>
  <div class="ab-card-body">
    <p class="ab-cell-sub mb-0">These details are automatically added to the bottom of every email this company sends — campaigns, automation, and personal emails alike. A real phone number, website, and physical address here isn't just professional: email providers use their presence (or absence) as a signal when deciding whether a message is spam, so filling these in helps your emails actually reach the inbox.</p>
  </div>
</div>

<div class="row g-3">
  <?php foreach ($businessLines as $bl): ?>
  <div class="col-lg-6">
    <div class="ab-card h-100">
      <div class="ab-card-header">
        <h2><?= e($bl['name']) ?> <span class="ab-badge bg-secondary-soft ab-mono">id: <?= (int) $bl['id'] ?></span></h2>
      </div>
      <div class="ab-card-body">
        <form class="ab-bl-form" data-bl="<?= (int) $bl['id'] ?>">
          <input type="hidden" name="business_line_id" value="<?= (int) $bl['id'] ?>">

          <div class="mb-3 d-flex align-items-center gap-3">
            <div class="ab-logo-preview d-flex align-items-center justify-content-center" style="width:56px;height:56px;border-radius:8px;background:var(--ab-canvas);border:1px solid var(--ab-gray-line);overflow:hidden;flex-shrink:0;">
              <?php if (!empty($bl['logo_url'])): ?>
                <img src="<?= e($bl['logo_url']) ?>" alt="" style="max-width:100%;max-height:100%;">
              <?php else: ?>
                <i class="bi bi-image ab-text-muted"></i>
              <?php endif; ?>
            </div>
            <div class="flex-fill">
              <label class="form-label small mb-1">Logo (shown in email signatures)</label>
              <input type="file" class="form-control form-control-sm ab-logo-input" accept="image/png,image/jpeg,image/webp" data-bl="<?= (int) $bl['id'] ?>">
              <div class="form-text">PNG, JPEG, or WebP — under 2MB.</div>
            </div>
          </div>

          <div class="mb-2"><label class="form-label small">Legal / Display Name</label><input class="form-control form-control-sm" name="legal_name" value="<?= e($bl['legal_name'] ?? $bl['name']) ?>" placeholder="<?= e($bl['name']) ?>"></div>

          <div class="row g-2 mb-2">
            <div class="col-6"><label class="form-label small">Phone</label><input class="form-control form-control-sm" name="support_phone" value="<?= e($bl['support_phone'] ?? '') ?>" placeholder="289 659 2275"></div>
            <div class="col-6"><label class="form-label small">Support Email</label><input type="email" class="form-control form-control-sm" name="support_email" value="<?= e($bl['support_email'] ?? '') ?>"></div>
          </div>

          <div class="mb-2"><label class="form-label small">Website</label><input type="url" class="form-control form-control-sm" name="website" value="<?= e($bl['website'] ?? '') ?>" placeholder="https://aandbcleaner.org"></div>

          <div class="mb-2"><label class="form-label small">Address</label><input class="form-control form-control-sm mb-2" name="address_line1" value="<?= e($bl['address_line1'] ?? '') ?>" placeholder="Street address"></div>
          <div class="row g-2 mb-3">
            <div class="col-5"><input class="form-control form-control-sm" name="city" value="<?= e($bl['city'] ?? '') ?>" placeholder="City"></div>
            <div class="col-4"><input class="form-control form-control-sm" name="province" value="<?= e($bl['province'] ?? '') ?>" placeholder="Province"></div>
            <div class="col-3"><input class="form-control form-control-sm" name="postal_code" value="<?= e($bl['postal_code'] ?? '') ?>" placeholder="Postal"></div>
          </div>

          <label class="form-label small">Social Media</label>
          <div class="mb-2 input-group input-group-sm"><span class="input-group-text"><i class="bi bi-facebook"></i></span><input type="url" class="form-control" name="facebook_url" value="<?= e($bl['facebook_url'] ?? '') ?>" placeholder="https://facebook.com/..."></div>
          <div class="mb-2 input-group input-group-sm"><span class="input-group-text"><i class="bi bi-instagram"></i></span><input type="url" class="form-control" name="instagram_url" value="<?= e($bl['instagram_url'] ?? '') ?>" placeholder="https://instagram.com/..."></div>
          <div class="mb-2 input-group input-group-sm"><span class="input-group-text"><i class="bi bi-linkedin"></i></span><input type="url" class="form-control" name="linkedin_url" value="<?= e($bl['linkedin_url'] ?? '') ?>" placeholder="https://linkedin.com/company/..."></div>
          <div class="mb-3 input-group input-group-sm"><span class="input-group-text"><i class="bi bi-tiktok"></i></span><input type="url" class="form-control" name="tiktok_url" value="<?= e($bl['tiktok_url'] ?? '') ?>" placeholder="https://tiktok.com/@..."></div>

          <button type="submit" class="btn btn-primary btn-sm w-100">Save</button>
        </form>
      </div>
    </div>
  </div>
  <?php endforeach; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (typeof window.abFetch !== 'function') return;

  document.querySelectorAll('.ab-logo-input').forEach(function (input) {
    input.addEventListener('change', function () {
      var file = input.files[0];
      if (!file) return;

      var fd = new FormData();
      fd.append('logo', file);
      fd.append('business_line_id', input.dataset.bl);

      abFetch('<?= base_url('settings/business-lines/logo') ?>', { method: 'POST', body: fd })
        .then(function (res) {
          abToast('Logo uploaded.');
          var preview = input.closest('.ab-bl-form').querySelector('.ab-logo-preview');
          preview.innerHTML = '<img src="' + res.data.logo_url + '" alt="" style="max-width:100%;max-height:100%;">';
        })
        .catch(function (err) { abToast(err.message || 'Logo upload failed.', 'danger'); });
    });
  });

  document.querySelectorAll('.ab-bl-form').forEach(function (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var data = Object.fromEntries(new FormData(form).entries());
      var btn = form.querySelector('button[type="submit"]');
      btn.disabled = true;

      abFetch('<?= base_url('settings/business-lines') ?>', { method: 'POST', body: data })
        .then(function (res) { abToast(res.message); })
        .catch(function (err) { abToast(err.message || 'Save failed.', 'danger'); })
        .finally(function () { btn.disabled = false; });
    });
  });
});
</script>
