<?php
declare(strict_types=1);
?>
<style>
  .rc-box{border:1px solid rgba(0,0,0,.08);border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.04)}
  .rc-help{font-size:13px;color:#6c757d}
  .rc-thumb{max-width:100%;height:auto;border-radius:12px;border:1px solid rgba(0,0,0,.08)}
  .rc-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rc-preview-stat{padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff}
  .rc-subbox{padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fcfcfd}
  .rc-section-title{font-size:14px;font-weight:700;color:#495057;margin-bottom:8px}
  @media (max-width: 575.98px){
    .rc-preview-grid{grid-template-columns:1fr}
  }
</style>

<div class="container py-4">
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
      <h1 class="h3 mb-1"><?= h($pageTitle) ?></h1>
      <div class="text-muted">#<?= (int)$campaignId ?> • <?= h(rc_status_label((string)$campaign['status'])) ?></div>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a class="btn btn-outline-secondary" href="/functional/reclama/view.php?id=<?= (int)$campaignId ?>">← <?= h(rc_t('До кампанії', 'К кампании', 'To campaign')) ?></a>
      <a class="btn btn-outline-secondary" href="/functional/reclama/my.php"><?= h(rc_t('Мої кампанії', 'Мои кампании', 'My campaigns')) ?></a>
    </div>
  </div>

  <?php if ($errors): ?>
    <div class="alert alert-danger">
      <ul class="mb-0 ps-3">
        <?php foreach ($errors as $e): ?>
          <li><?= h((string)$e) ?></li>
        <?php endforeach; ?>
      </ul>
    </div>
  <?php endif; ?>

  <form method="post" enctype="multipart/form-data" class="row g-4">
    <input type="hidden" name="csrf" value="<?= h(rc_csrf_token()) ?>">
    <input type="hidden" name="id" value="<?= (int)$campaignId ?>">

    <div class="col-lg-8">
      <div class="rc-box p-4 mb-4">
        <h2 class="h5 mb-3"><?= h(rc_t('Основне', 'Основное', 'Basics')) ?></h2>
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label"><?= h(rc_t('Тип кампанії', 'Тип кампании', 'Campaign type')) ?></label>
            <select class="form-select" name="campaign_type" id="campaignType">
              <?php if (reclama_allow_post_campaigns($pdo)): ?>
                <option value="post" <?= $form['campaign_type'] === 'post' ? 'selected' : '' ?>><?= h(rc_t('Просування поста', 'Продвижение поста', 'Post promotion')) ?></option>
              <?php endif; ?>
              <?php if (reclama_allow_banner_campaigns($pdo)): ?>
                <option value="banner" <?= $form['campaign_type'] === 'banner' ? 'selected' : '' ?>><?= h(rc_t('Банерна кампанія', 'Баннерная кампания', 'Banner campaign')) ?></option>
              <?php endif; ?>
            </select>
          </div>

          <div class="col-md-6">
            <label class="form-label"><?= h(rc_t('Назва кампанії', 'Название кампании', 'Campaign title')) ?></label>
            <input class="form-control" type="text" name="title" maxlength="190" value="<?= h((string)$form['title']) ?>">
          </div>
        </div>
      </div>

      <div class="rc-box p-4 mb-4" id="postBlock">
        <h2 class="h5 mb-3"><?= h(rc_t('Пост для просування', 'Пост для продвижения', 'Post to promote')) ?></h2>
        <select class="form-select" name="source_post_id">
          <option value=""><?= h(rc_t('— оберіть пост —', '— выбери пост —', '— choose a post —')) ?></option>
          <?php foreach ($posts as $post): ?>
            <option value="<?= (int)$post['id'] ?>" <?= (string)$form['source_post_id'] === (string)$post['id'] ? 'selected' : '' ?>>
              #<?= (int)$post['id'] ?> — <?= h(rc_excerpt((string)($post['body'] ?? ''), 120)) ?>
            </option>
          <?php endforeach; ?>
        </select>
      </div>

      <div class="rc-box p-4 mb-4" id="bannerBlock">
        <h2 class="h5 mb-3"><?= h(rc_t('Банери', 'Баннеры', 'Banners')) ?></h2>
        <div class="row g-3 align-items-start">
          <div class="col-md-6">
            <label class="form-label"><?= h(rc_t('Новий desktop-банер', 'Новый desktop-баннер', 'New desktop banner')) ?></label>
            <input class="form-control" type="file" name="desktop_banner" accept="image/jpeg,image/png,image/webp,image/gif">
            <?php if (!empty($form['desktop_banner_path'])): ?>
              <div class="mt-2"><img class="rc-thumb" src="<?= h((string)$form['desktop_banner_path']) ?>" alt="desktop banner"></div>
              <?php if (!empty($form['desktop_banner_original_name'])): ?>
                <div class="rc-help mt-2"><?= h(rc_t('Поточний файл', 'Текущий файл', 'Current file')) ?>: <?= h((string)$form['desktop_banner_original_name']) ?></div>
              <?php endif; ?>
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="delete_desktop_banner" value="1" id="deleteDesktopBanner" <?= !empty($form['delete_desktop_banner']) ? 'checked' : '' ?>>
                <label class="form-check-label" for="deleteDesktopBanner"><?= h(rc_t('Видалити поточний desktop-банер', 'Удалить текущий desktop-баннер', 'Delete current desktop banner')) ?></label>
              </div>
              <div class="rc-help mt-2"><?= h(rc_t('Якщо завантажиш новий desktop-банер і поставиш цю галочку, старий файл буде видалено після збереження.', 'Если загрузишь новый desktop-баннер и поставишь эту галочку, старый файл будет удалён после сохранения.', 'If you upload a new desktop banner and keep this checked, the old file will be deleted after saving.')) ?></div>
            <?php endif; ?>
          </div>
          <div class="col-md-6">
            <label class="form-label"><?= h(rc_t('Новий mobile-банер', 'Новый mobile-баннер', 'New mobile banner')) ?></label>
            <input class="form-control" type="file" name="mobile_banner" accept="image/jpeg,image/png,image/webp,image/gif">
            <?php if (!empty($form['mobile_banner_path'])): ?>
              <div class="mt-2"><img class="rc-thumb" src="<?= h((string)$form['mobile_banner_path']) ?>" alt="mobile banner"></div>
              <?php if (!empty($form['mobile_banner_original_name'])): ?>
                <div class="rc-help mt-2"><?= h(rc_t('Поточний файл', 'Текущий файл', 'Current file')) ?>: <?= h((string)$form['mobile_banner_original_name']) ?></div>
              <?php endif; ?>
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="delete_mobile_banner" value="1" id="deleteMobileBanner" <?= !empty($form['delete_mobile_banner']) ? 'checked' : '' ?>>
                <label class="form-check-label" for="deleteMobileBanner"><?= h(rc_t('Видалити поточний mobile-банер', 'Удалить текущий mobile-баннер', 'Delete current mobile banner')) ?></label>
              </div>
              <div class="rc-help mt-2"><?= h(rc_t('Можна прибрати mobile-банер окремо або замінити його новим файлом.', 'Можно убрать mobile-баннер отдельно или заменить его новым файлом.', 'You can remove the mobile banner separately or replace it with a new file.')) ?></div>
            <?php endif; ?>
          </div>
        </div>
      </div>

      <div class="rc-box p-4 mb-4">
        <h2 class="h5 mb-3"><?= h(rc_t('Період і бюджет', 'Период и бюджет', 'Period and budget')) ?></h2>
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label"><?= h(rc_t('Дата старту', 'Дата старта', 'Start date')) ?></label>
            <input class="form-control" type="date" name="start_date" id="startDate" value="<?= h((string)$form['start_date']) ?>">
          </div>
          <div class="col-md-4">
            <label class="form-label"><?= h(rc_t('Дата завершення', 'Дата завершения', 'End date')) ?></label>
            <input class="form-control" type="date" name="end_date" id="endDate" value="<?= h((string)$form['end_date']) ?>">
          </div>
          <div class="col-md-4">
            <label class="form-label"><?= h(rc_t('Посилання', 'Ссылка', 'Target URL')) ?></label>
            <input class="form-control" type="text" name="target_url" maxlength="255" value="<?= h((string)$form['target_url']) ?>">
          </div>
        </div>

        <div class="row g-3 mt-1">
          <div class="col-md-4"><div class="rc-help"><?= h(rc_t('Мінімум днів', 'Минимум дней', 'Minimum days')) ?>: <?= h((string)$minDays) ?></div></div>
          <div class="col-md-4"><div class="rc-help"><?= h(rc_t('Максимум днів', 'Максимум дней', 'Maximum days')) ?>: <?= h((string)$maxDays) ?></div></div>
          <div class="col-md-4"><div class="rc-help"><?= h(rc_t('Ціна за день', 'Цена за день', 'Price per day')) ?>: <?= h(rc_num($pricePerDay)) ?> VM Coins</div></div>
        </div>

        <div class="rc-preview-grid mt-3">
          <div class="rc-preview-stat">
            <div class="text-muted small"><?= h(rc_t('Попередньо днів', 'Предварительно дней', 'Estimated days')) ?></div>
            <div class="fw-semibold fs-5" id="previewDays"><?= h((string)$previewDays) ?></div>
          </div>
          <div class="rc-preview-stat">
            <div class="text-muted small"><?= h(rc_t('Попередній бюджет', 'Предварительный бюджет', 'Estimated budget')) ?></div>
            <div class="fw-semibold fs-5"><span id="previewTotal"><?= h(rc_num($previewTotal)) ?></span> VM Coins</div>
          </div>
          <div class="rc-preview-stat">
            <div class="text-muted small"><?= h(rc_t('На балансі', 'На балансе', 'Your balance')) ?></div>
            <div class="fw-semibold fs-5"><?= h(rc_num($userBalance)) ?> VM Coins</div>
          </div>
          <div class="rc-preview-stat">
            <div class="text-muted small"><?= h(rc_t('Не вистачає', 'Не хватает', 'Missing')) ?></div>
            <div class="fw-semibold fs-5" id="previewShort"><?= h(rc_num($previewShort)) ?></div>
          </div>
        </div>
      </div>

      <div class="rc-box p-4">
        <h2 class="h5 mb-3"><?= h(rc_t('Аудиторія і таргетинг', 'Аудитория и таргетинг', 'Audience and targeting')) ?></h2>

        <div class="rc-subbox mb-3">
          <div class="rc-section-title"><?= h(rc_t('Базові фільтри', 'Базовые фильтры', 'Basic filters')) ?></div>
          <div class="row g-3">
            <div class="col-md-3">
              <label class="form-label"><?= h(rc_t('Країна', 'Страна', 'Country')) ?></label>
              <input class="form-control text-uppercase" type="text" name="country_code" maxlength="2" value="<?= h((string)$form['country_code']) ?>" placeholder="UA">
              <div class="rc-help mt-2"><?= h(rc_t('2-символьний код країни, наприклад UA.', '2-символьный код страны, например UA.', '2-letter country code, for example UA.')) ?></div>
            </div>

            <div class="col-md-3">
              <label class="form-label"><?= h(rc_t('Місто', 'Город', 'City')) ?></label>
              <input class="form-control" type="text" name="city" maxlength="120" value="<?= h((string)$form['city']) ?>" placeholder="<?= h(rc_t('Наприклад: Київ', 'Например: Киев', 'Example: Kyiv')) ?>">
            </div>

            <div class="col-md-2">
              <label class="form-label"><?= h(rc_t('Стать', 'Пол', 'Gender')) ?></label>
              <select class="form-select" name="gender">
                <option value="any" <?= $form['gender'] === 'any' ? 'selected' : '' ?>><?= h(rc_t('Будь-яка', 'Любой', 'Any')) ?></option>
                <option value="m" <?= $form['gender'] === 'm' ? 'selected' : '' ?>><?= h(rc_t('Чоловіча', 'Мужской', 'Male')) ?></option>
                <option value="f" <?= $form['gender'] === 'f' ? 'selected' : '' ?>><?= h(rc_t('Жіноча', 'Женский', 'Female')) ?></option>
              </select>
            </div>

            <div class="col-md-2">
              <label class="form-label"><?= h(rc_t('Вік від', 'Возраст от', 'Age from')) ?></label>
              <input class="form-control" type="number" min="13" max="100" name="age_from" value="<?= h((string)$form['age_from']) ?>">
            </div>

            <div class="col-md-2">
              <label class="form-label"><?= h(rc_t('Вік до', 'Возраст до', 'Age to')) ?></label>
              <input class="form-control" type="number" min="13" max="100" name="age_to" value="<?= h((string)$form['age_to']) ?>">
            </div>

            <div class="col-md-3">
              <label class="form-label"><?= h(rc_t('Мова інтерфейсу', 'Язык интерфейса', 'Interface language')) ?></label>
              <select class="form-select" name="lang_code">
                <option value="any" <?= $form['lang_code'] === 'any' ? 'selected' : '' ?>><?= h(rc_t('Будь-яка', 'Любой', 'Any')) ?></option>
                <option value="uk" <?= $form['lang_code'] === 'uk' ? 'selected' : '' ?>>Українська</option>
                <option value="ru" <?= $form['lang_code'] === 'ru' ? 'selected' : '' ?>>Русский</option>
                <option value="en" <?= $form['lang_code'] === 'en' ? 'selected' : '' ?>>English</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label"><?= h(rc_t('Пристрій', 'Устройство', 'Device')) ?></label>
              <select class="form-select" name="device_type">
                <option value="all" <?= $form['device_type'] === 'all' ? 'selected' : '' ?>><?= h(rc_t('Усі', 'Все', 'All')) ?></option>
                <option value="desktop" <?= $form['device_type'] === 'desktop' ? 'selected' : '' ?>>Desktop</option>
                <option value="mobile" <?= $form['device_type'] === 'mobile' ? 'selected' : '' ?>>Mobile</option>
              </select>
            </div>
          </div>
        </div>

        <div class="rc-subbox">
          <div class="rc-section-title"><?= h(rc_t('Розширені умови показу', 'Расширенные условия показа', 'Advanced delivery rules')) ?></div>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label"><?= h(rc_t('Виключити країни', 'Исключить страны', 'Exclude countries')) ?></label>
              <input class="form-control text-uppercase" type="text" name="exclude_countries" maxlength="255" value="<?= h((string)$form['exclude_countries']) ?>" placeholder="RU, BY">
              <div class="rc-help mt-2"><?= h(rc_t('Через кому: RU, BY, PL', 'Через запятую: RU, BY, PL', 'Comma-separated: RU, BY, PL')) ?></div>
            </div>

            <div class="col-md-4">
              <label class="form-label"><?= h(rc_t('Кому показувати', 'Кому показывать', 'Show to')) ?></label>
              <select class="form-select" name="auth_scope">
                <option value="all" <?= (string)$form['auth_scope'] === 'all' ? 'selected' : '' ?>><?= h(rc_t('Усім', 'Всем', 'Everyone')) ?></option>
                <option value="guests" <?= (string)$form['auth_scope'] === 'guests' ? 'selected' : '' ?>><?= h(rc_t('Тільки гостям', 'Только гостям', 'Guests only')) ?></option>
                <option value="users" <?= (string)$form['auth_scope'] === 'users' ? 'selected' : '' ?>><?= h(rc_t('Тільки авторизованим', 'Только авторизованным', 'Logged-in users only')) ?></option>
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label"><?= h(rc_t('Сегменти', 'Сегменты', 'Segments')) ?></label>
              <input class="form-control" type="text" name="segment_codes" maxlength="255" value="<?= h((string)$form['segment_codes']) ?>" placeholder="users, authenticated">
              <div class="rc-help mt-2"><?= h(rc_t('Через кому. Поки що можна використовувати, наприклад: users, authenticated, guests.', 'Через запятую. Пока что можно использовать, например: users, authenticated, guests.', 'Comma-separated. For now you can use values like: users, authenticated, guests.')) ?></div>
            </div>
          </div>

          <div class="rc-help mt-3">
            <?= h(rc_t(
              'Якщо поле не заповнене — воно не обмежує показ. Країну показу не можна одночасно вказувати у виключеннях.',
              'Если поле не заполнено — оно не ограничивает показ. Страну показа нельзя одновременно указывать в исключениях.',
              'If a field is empty, it does not restrict delivery. The main country cannot be listed in excluded countries at the same time.'
            )) ?>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="rc-box p-4 sticky-top" style="top:16px;">
        <h2 class="h5 mb-3"><?= h(rc_t('Поточний стан', 'Текущее состояние', 'Current state')) ?></h2>
        <div class="mb-2"><span class="badge text-bg-<?= h(rc_status_badge((string)$campaign['status'])) ?>"><?= h(rc_status_label((string)$campaign['status'])) ?></span></div>
        <div class="small text-muted mb-3"><?= h(rc_moderation_label((string)$campaign['moderation_status'])) ?></div>

        <div class="alert alert-light border mb-3">
          <div class="small text-muted mb-1"><?= h(rc_t('Поточний попередній бюджет', 'Текущий предварительный бюджет', 'Current estimated budget')) ?></div>
          <div class="fw-semibold fs-5"><span id="sidePreviewTotal"><?= h(rc_num($previewTotal)) ?></span> VM Coins</div>
        </div>

        <div class="d-grid gap-2">
          <button class="btn btn-outline-secondary" type="submit" name="save_draft" value="1"><?= h(rc_t('Зберегти зміни', 'Сохранить изменения', 'Save changes')) ?></button>
          <button class="btn btn-primary" type="submit" name="submit_for_moderation" value="1"><?= h(rc_t('Оновити і відправити на модерацію', 'Обновить и отправить на модерацию', 'Update and submit for moderation')) ?></button>
        </div>
      </div>
    </div>
  </form>
</div>

<script>
(function(){
  const typeEl = document.getElementById('campaignType');
  const postBlock = document.getElementById('postBlock');
  const bannerBlock = document.getElementById('bannerBlock');
  const startDateEl = document.getElementById('startDate');
  const endDateEl = document.getElementById('endDate');
  const previewDaysEl = document.getElementById('previewDays');
  const previewTotalEl = document.getElementById('previewTotal');
  const sidePreviewTotalEl = document.getElementById('sidePreviewTotal');
  const previewShortEl = document.getElementById('previewShort');

  const pricePerDay = <?= json_encode((int)$pricePerDay, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
  const balance = <?= json_encode((int)$userBalance, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;

  function formatNum(value){
    try {
      return new Intl.NumberFormat().format(Number(value || 0));
    } catch (e) {
      return String(value || 0);
    }
  }

  function calcDays(startStr, endStr){
    if (!startStr || !endStr) return 0;

    const start = new Date(startStr + 'T00:00:00');
    const end = new Date(endStr + 'T00:00:00');

    if (isNaN(start.getTime()) || isNaN(end.getTime())) return 0;
    if (end < start) return 0;

    const diffMs = end.getTime() - start.getTime();
    return Math.floor(diffMs / 86400000) + 1;
  }

  function syncType(){
    const type = typeEl ? typeEl.value : 'post';
    if (postBlock) postBlock.style.display = (type === 'post') ? '' : 'none';
    if (bannerBlock) bannerBlock.style.display = (type === 'banner') ? '' : 'none';
  }

  function syncBudget(){
    const days = calcDays(startDateEl ? startDateEl.value : '', endDateEl ? endDateEl.value : '');
    const total = days * pricePerDay;
    const short = Math.max(0, total - balance);

    if (previewDaysEl) previewDaysEl.textContent = String(days);
    if (previewTotalEl) previewTotalEl.textContent = formatNum(total);
    if (sidePreviewTotalEl) sidePreviewTotalEl.textContent = formatNum(total);
    if (previewShortEl) previewShortEl.textContent = formatNum(short);
  }

  if (typeEl){
    typeEl.addEventListener('change', syncType);
  }
  if (startDateEl){
    startDateEl.addEventListener('change', syncBudget);
    startDateEl.addEventListener('input', syncBudget);
  }
  if (endDateEl){
    endDateEl.addEventListener('change', syncBudget);
    endDateEl.addEventListener('input', syncBudget);
  }

  syncType();
  syncBudget();
})();
</script>