<?php

/* AppBundle:Pack:add.html.twig */
class __TwigTemplate_9b251def5a2a5024d5f6b8818ae6832df2d713c9ccb81a0e0517106b2a4fa39b extends Twig_Template
{
    public function __construct(Twig_Environment $env)
    {
        parent::__construct($env);

        // line 1
        $this->parent = $this->loadTemplate("AppBundle::layout.html.twig", "AppBundle:Pack:add.html.twig", 1);
        $this->blocks = array(
            'body' => array($this, 'block_body'),
        );
    }

    protected function doGetParent(array $context)
    {
        return "AppBundle::layout.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = array())
    {
        $this->parent->display($context, array_merge($this->blocks, $blocks));
    }

    // line 2
    public function block_body($context, array $blocks = array())
    {
        // line 3
        echo "<div class=\"container-fluid\">
  <div class=\"row\">
    <div class=\"col-sm-offset-1 col-md-10\">
      <div class=\"card\">
        <div class=\"card-header card-header-icon\" data-background-color=\"rose\">
          <i class=\"material-icons\">inbox</i>
        </div>
        <div class=\"card-content\">
          <h4 class=\"card-title\">New Pack</h4>

          ";
        // line 14
        echo "          <div id=\"pack-meta\">

            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Pack name <span class=\"text-danger\">*</span></label>
              <input type=\"text\" id=\"f_name\" class=\"form-control\" required>
            </div>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Pack publisher</label>
              <input type=\"text\" id=\"f_publisher\" class=\"form-control\">
            </div>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Publisher E-mail</label>
              <input type=\"email\" id=\"f_publisheremail\" class=\"form-control\">
            </div>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Publisher Website</label>
              <input type=\"text\" id=\"f_publisherwebsite\" class=\"form-control\">
            </div>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Website privacy policy</label>
              <input type=\"text\" id=\"f_privacypolicywebsite\" class=\"form-control\">
            </div>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Website license agreement</label>
              <input type=\"text\" id=\"f_licenseagreementwebsite\" class=\"form-control\">
            </div>

            <br>
            <div class=\"panel-body\">
              <label class=\"panel-title\">Pack infos</label>
              <div><label><input type=\"checkbox\" id=\"f_enabled\"> Enabled</label></div>
              <div><label><input type=\"checkbox\" id=\"f_premium\"> Premium Pack</label></div>
              <div><label><input type=\"checkbox\" id=\"f_animated\"> Animated</label></div>
              <div><label><input type=\"checkbox\" id=\"f_whatsapp\"> Enable WhatsApp Button</label></div>
            </div>

            <div class=\"panel-body\">
              <label class=\"panel-title\">Telegram</label>
              <div><label><input type=\"checkbox\" id=\"f_telegram\"> Enabled</label></div>
              <div class=\"form-group label-floating\">
                <label class=\"control-label\">Telegram store pack url</label>
                <input type=\"text\" id=\"f_telegramurl\" class=\"form-control\">
              </div>
            </div>

            <div class=\"panel-body\">
              <label class=\"panel-title\">Signal</label>
              <div><label><input type=\"checkbox\" id=\"f_signal\"> Enabled Signal Button</label></div>
              <div class=\"form-group label-floating\">
                <label class=\"control-label\">Signal store pack url</label>
                <input type=\"text\" id=\"f_signalurl\" class=\"form-control\">
              </div>
            </div>

            <br>
            ";
        // line 70
        echo "            ";
        echo         $this->env->getExtension('Symfony\Bridge\Twig\Extension\FormExtension')->renderer->renderBlock(($context["form"] ?? null), 'form_start', array("attr" => array("id" => "sym-form", "style" => "display:none")));
        echo "
            ";
        // line 71
        echo         $this->env->getExtension('Symfony\Bridge\Twig\Extension\FormExtension')->renderer->renderBlock(($context["form"] ?? null), 'form_end');
        echo "
            <label style=\"font-size:16px\">Categories :</label>
            <div class=\"row\" id=\"categories-wrap\">
              ";
        // line 74
        $context['_parent'] = $context;
        $context['_seq'] = twig_ensure_traversable($this->getAttribute(($context["form"] ?? null), "categories", array()));
        foreach ($context['_seq'] as $context["_key"] => $context["field"]) {
            // line 75
            echo "                <label style=\"background:#000;border-radius:3px;padding:5px 20px;margin:10px;color:#fff;font-weight:bold;cursor:pointer;\">
                  <input type=\"checkbox\" class=\"cat-cb\" value=\"";
            // line 76
            echo twig_escape_filter($this->env, $this->getAttribute($this->getAttribute($context["field"], "vars", array()), "value", array()), "html", null, true);
            echo "\"> ";
            echo twig_escape_filter($this->env, $this->getAttribute($this->getAttribute($context["field"], "vars", array()), "label", array()), "html", null, true);
            echo "
                </label>
              ";
        }
        $_parent = $context['_parent'];
        unset($context['_seq'], $context['_iterated'], $context['_key'], $context['field'], $context['_parent'], $context['loop']);
        $context = array_intersect_key($context, $_parent) + $_parent;
        // line 79
        echo "            </div>

            <br>
            <div class=\"form-group label-floating\">
              <label class=\"control-label\">Pack tags (comma-separated, e.g. anim,art,hero)</label>
              <input type=\"text\" id=\"f_tags\" class=\"form-control input-tags\">
            </div>
            <script>
              // Selectize tags (if available)
              if (typeof \$.fn.selectize !== 'undefined') {
                \$('.input-tags').selectize({ persist: false, createOnBlur: true, create: true });
              }
            </script>

          </div>";
        // line 94
        echo "
          ";
        // line 98
        echo "          <div class=\"pack-files\" style=\"display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;\">

            ";
        // line 101
        echo "            <div class=\"upload-zone\" id=\"zone-cover\" style=\"flex:0 0 220px;\">
              <div class=\"drop-area\" id=\"drop-cover\"
                   style=\"border:2px dashed #e91e63;border-radius:8px;min-height:160px;
                          display:flex;flex-direction:column;align-items:center;
                          justify-content:center;cursor:pointer;position:relative;
                          background:#fafafa;transition:background .2s;\">
                <img id=\"cover-preview\" src=\"";
        // line 107
        echo twig_escape_filter($this->env, $this->env->getExtension('Symfony\Bridge\Twig\Extension\AssetExtension')->getAssetUrl("img/image_placeholder.jpg"), "html", null, true);
        echo "\"
                     style=\"max-width:180px;max-height:140px;object-fit:contain;border-radius:4px;\">
                <p style=\"margin:8px 0 0;font-size:12px;color:#999;\">Click or drop cover image</p>
                <input type=\"file\" id=\"input-cover\" accept=\"image/*\"
                       style=\"position:absolute;inset:0;opacity:0;cursor:pointer;\">
              </div>
              <p id=\"cover-name\" style=\"font-size:11px;color:#666;margin-top:4px;text-align:center;\"></p>
            </div>

            ";
        // line 117
        echo "            <div class=\"upload-zone\" style=\"flex:1;min-width:260px;\">
              <div class=\"drop-area\" id=\"drop-stickers\"
                   style=\"border:2px dashed #9c27b0;border-radius:8px;min-height:160px;
                          padding:16px;background:#fafafa;cursor:pointer;position:relative;\">
                <div id=\"sticker-previews\"
                     style=\"display:flex;flex-wrap:wrap;gap:8px;min-height:80px;\"></div>
                <p id=\"sticker-hint\" style=\"font-size:12px;color:#999;margin:8px 0 0;text-align:center;\">
                  Click or drop PNG/WEBP stickers (max 30)
                </p>
                <input type=\"file\" id=\"input-stickers\" accept=\"image/png,image/webp\"
                       multiple style=\"position:absolute;inset:0;opacity:0;cursor:pointer;\">
              </div>
              <p id=\"sticker-count\" style=\"font-size:11px;color:#666;margin-top:4px;\"></p>
            </div>

          </div>";
        // line 133
        echo "
          ";
        // line 135
        echo "          <div id=\"progress-wrap\" style=\"display:none;margin-top:20px;\">
            <div style=\"background:#eee;border-radius:4px;overflow:hidden;height:8px;\">
              <div id=\"progress-bar\"
                   style=\"height:100%;width:0;background:linear-gradient(90deg,#e91e63,#9c27b0);
                          transition:width .3s;\"></div>
            </div>
            <p id=\"progress-label\" style=\"font-size:12px;color:#666;margin-top:4px;\"></p>
          </div>

          ";
        // line 145
        echo "          <div id=\"ajax-messages\" style=\"margin-top:12px;\"></div>

          ";
        // line 148
        echo "          <div style=\"margin-top:24px;display:flex;gap:12px;justify-content:flex-end;\">
            <a href=\"";
        // line 149
        echo $this->env->getExtension('Symfony\Bridge\Twig\Extension\RoutingExtension')->getPath("app_pack_index");
        echo "\" class=\"btn btn-fill btn-yellow\">
              <i class=\"material-icons\">arrow_back</i> Cancel
            </a>
            <button id=\"btn-submit\" class=\"btn btn-fill btn-rose\" type=\"button\">
              <i class=\"material-icons\" style=\"vertical-align:middle;\">cloud_upload</i>
              Upload Pack
            </button>
          </div>

        </div>";
        // line 159
        echo "      </div>";
        // line 160
        echo "    </div>
  </div>
</div>

<script>
(function () {
  'use strict';

  /* ── State ───────────────────────────────────────────────────────────── */
  var coverFile    = null;
  var stickerFiles = [];          // max 30

  /* ── DOM refs ──────────────────────────────────────────────────────────*/
  var dropCover     = document.getElementById('drop-cover');
  var inputCover    = document.getElementById('input-cover');
  var coverPreview  = document.getElementById('cover-preview');
  var coverName     = document.getElementById('cover-name');

  var dropStickers  = document.getElementById('drop-stickers');
  var inputStickers = document.getElementById('input-stickers');
  var stickerPreviews = document.getElementById('sticker-previews');
  var stickerHint   = document.getElementById('sticker-hint');
  var stickerCount  = document.getElementById('sticker-count');

  var progressWrap  = document.getElementById('progress-wrap');
  var progressBar   = document.getElementById('progress-bar');
  var progressLabel = document.getElementById('progress-label');
  var msgBox        = document.getElementById('ajax-messages');
  var btnSubmit     = document.getElementById('btn-submit');

  /* ── Helpers ────────────────────────────────────────────────────────── */
  function showMsg(type, text) {
    var cls = type === 'success' ? 'alert-success' : 'alert-danger';
    msgBox.innerHTML = '<div class=\"alert ' + cls + '\">' + text + '</div>';
  }

  function previewCover(file) {
    var reader = new FileReader();
    reader.onload = function (e) { coverPreview.src = e.target.result; };
    reader.readAsDataURL(file);
    coverName.textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
  }

  function addStickerPreviews(files) {
    Array.prototype.forEach.call(files, function (file) {
      if (stickerFiles.length >= 30) return;
      if (file.type !== 'image/png' && file.type !== 'image/webp') return;
      stickerFiles.push(file);

      var reader = new FileReader();
      reader.onload = function (e) {
        var thumb = document.createElement('div');
        thumb.style.cssText = 'position:relative;width:64px;height:64px;';
        var img = document.createElement('img');
        img.src = e.target.result;
        img.style.cssText = 'width:64px;height:64px;object-fit:contain;border-radius:4px;border:1px solid #ddd;';
        var rm = document.createElement('span');
        rm.textContent = '×';
        rm.title = 'Remove';
        rm.style.cssText = 'position:absolute;top:-6px;right:-6px;background:#e91e63;color:#fff;'
          + 'border-radius:50%;width:18px;height:18px;line-height:18px;text-align:center;'
          + 'font-size:13px;cursor:pointer;';
        var idx = stickerFiles.indexOf(file);
        rm.addEventListener('click', function () {
          var i = stickerFiles.indexOf(file);
          if (i > -1) stickerFiles.splice(i, 1);
          thumb.remove();
          updateStickerCount();
        });
        thumb.appendChild(img);
        thumb.appendChild(rm);
        stickerPreviews.appendChild(thumb);
      };
      reader.readAsDataURL(file);
    });
    updateStickerCount();
  }

  function updateStickerCount() {
    var n = stickerFiles.length;
    stickerCount.textContent = n + ' sticker' + (n !== 1 ? 's' : '') + ' selected (max 30)';
    stickerHint.style.display = n > 0 ? 'none' : '';
  }

  /* ── Cover drag & drop ──────────────────────────────────────────────── */
  inputCover.addEventListener('change', function () {
    if (this.files[0]) { coverFile = this.files[0]; previewCover(coverFile); }
  });
  dropCover.addEventListener('dragover',  function (e) { e.preventDefault(); this.style.background = '#fce4ec'; });
  dropCover.addEventListener('dragleave', function ()  { this.style.background = '#fafafa'; });
  dropCover.addEventListener('drop', function (e) {
    e.preventDefault(); this.style.background = '#fafafa';
    var f = e.dataTransfer.files[0];
    if (f) { coverFile = f; previewCover(f); }
  });

  /* ── Sticker drag & drop ────────────────────────────────────────────── */
  inputStickers.addEventListener('change', function () { addStickerPreviews(this.files); });
  dropStickers.addEventListener('dragover',  function (e) { e.preventDefault(); this.style.background = '#f3e5f5'; });
  dropStickers.addEventListener('dragleave', function ()  { this.style.background = '#fafafa'; });
  dropStickers.addEventListener('drop', function (e) {
    e.preventDefault(); this.style.background = '#fafafa';
    addStickerPreviews(e.dataTransfer.files);
  });

  /* ── Submit ──────────────────────────────────────────────────────────── */
  btnSubmit.addEventListener('click', function () {
    msgBox.innerHTML = '';

    // Validate
    var name = document.getElementById('f_name').value.trim();
    if (!name) { showMsg('error', 'Pack name is required.'); return; }
    if (!coverFile) { showMsg('error', 'Please select a cover image.'); return; }
    if (stickerFiles.length === 0) { showMsg('error', 'Please add at least one sticker.'); return; }

    // Build FormData
    var fd = new FormData();
    fd.append('pack_image',              coverFile);
    fd.append('name',                    name);
    fd.append('publisher',               document.getElementById('f_publisher').value);
    fd.append('publisheremail',          document.getElementById('f_publisheremail').value);
    fd.append('publisherwebsite',        document.getElementById('f_publisherwebsite').value);
    fd.append('privacypolicywebsite',    document.getElementById('f_privacypolicywebsite').value);
    fd.append('licenseagreementwebsite', document.getElementById('f_licenseagreementwebsite').value);
    fd.append('telegramurl',             document.getElementById('f_telegramurl').value);
    fd.append('signalurl',               document.getElementById('f_signalurl').value);
    fd.append('enabled',                 document.getElementById('f_enabled').checked  ? '1' : '0');
    fd.append('premium',                 document.getElementById('f_premium').checked  ? '1' : '0');
    fd.append('animated',               document.getElementById('f_animated').checked ? '1' : '0');
    fd.append('whatsapp',               document.getElementById('f_whatsapp').checked ? '1' : '0');
    fd.append('telegram',               document.getElementById('f_telegram').checked ? '1' : '0');
    fd.append('signal',                 document.getElementById('f_signal').checked   ? '1' : '0');

    // Tags (selectize stores value back in the input)
    var tagsEl = document.getElementById('f_tags');
    fd.append('tags', tagsEl.value);

    // Categories
    document.querySelectorAll('.cat-cb:checked').forEach(function (cb) {
      fd.append('categories[]', cb.value);
    });

    // Stickers
    stickerFiles.forEach(function (f) { fd.append('stickers[]', f); });

    // XHR with progress
    btnSubmit.disabled = true;
    progressWrap.style.display = '';
    progressBar.style.width = '0';
    progressLabel.textContent = 'Uploading…';

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '";
        // line 312
        echo $this->env->getExtension('Symfony\Bridge\Twig\Extension\RoutingExtension')->getPath("app_pack_ajax_add");
        echo "', true);

    xhr.upload.addEventListener('progress', function (e) {
      if (e.lengthComputable) {
        var pct = Math.round((e.loaded / e.total) * 100);
        progressBar.style.width = pct + '%';
        progressLabel.textContent = 'Uploading… ' + pct + '%';
      }
    });

    xhr.addEventListener('load', function () {
      btnSubmit.disabled = false;
      progressBar.style.width = '100%';
      try {
        var res = JSON.parse(xhr.responseText);
        if (res.code === 200 && res.pack_id) {
          progressLabel.textContent = 'Upload complete!';
          showMsg('success', res.message);
          // Redirect to sizer (mirrors the normal add flow)
          setTimeout(function () {
            window.location.href = '";
        // line 332
        echo $this->env->getExtension('Symfony\Bridge\Twig\Extension\RoutingExtension')->getPath("app_pack_sizer", array("id" => "__ID__"));
        echo "'.replace('__ID__', res.pack_id);
          }, 1000);
        } else {
          progressLabel.textContent = 'Upload failed.';
          showMsg('error', res.message || 'An error occurred.');
        }
      } catch (ex) {
        showMsg('error', 'Unexpected server response.');
      }
    });

    xhr.addEventListener('error', function () {
      btnSubmit.disabled = false;
      showMsg('error', 'Network error – please try again.');
    });

    xhr.send(fd);
  });

})();
</script>
";
    }

    public function getTemplateName()
    {
        return "AppBundle:Pack:add.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  401 => 332,  378 => 312,  224 => 160,  222 => 159,  210 => 149,  207 => 148,  203 => 145,  192 => 135,  189 => 133,  172 => 117,  160 => 107,  152 => 101,  148 => 98,  145 => 94,  129 => 79,  118 => 76,  115 => 75,  111 => 74,  105 => 71,  100 => 70,  43 => 14,  31 => 3,  28 => 2,  11 => 1,);
    }

    /** @deprecated since 1.27 (to be removed in 2.0). Use getSourceContext() instead */
    public function getSource()
    {
        @trigger_error('The '.__METHOD__.' method is deprecated since version 1.27 and will be removed in 2.0. Use getSourceContext() instead.', E_USER_DEPRECATED);

        return $this->getSourceContext()->getCode();
    }

    public function getSourceContext()
    {
        return new Twig_Source("", "AppBundle:Pack:add.html.twig", "/home/yeticomm12745/public_html/src/AppBundle/Resources/views/Pack/add.html.twig");
    }
}
