{% extends "cms/base.html" %}
{% block title %}{% if col %}Edit Collection{% else %}Add Collection{% endif %}{% endblock %}
{% block page_title %}{% if col %}Edit Collection{% else %}Add Collection{% endif %}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
  .img-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .img-preview-box { width:70px;height:70px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .img-preview-box img { width:70px;height:70px;object-fit:cover; }
  .img-preview-box .no-img { color:#cbd5e1;font-size:1.2rem; }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
  .form-label { display:block;font-size:.78rem;font-weight:600;color:var(--cms-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em; }
  .form-control { width:100%;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem .75rem;font-size:.88rem;color:var(--cms-text);background:#fff; }
  .form-control:focus { outline:none;border-color:#033152;box-shadow:0 0 0 3px rgba(3,49,82,.1); }
  textarea.form-control { min-height:80px;resize:vertical; }
  .season-row { display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;border-bottom:1px solid var(--cms-border);font-size:.84rem; }
  .season-row:last-child { border-bottom:none; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{% if col %}{{ col.title }}{% else %}New Collection{% endif %}</h2>
  <a href="{% url 'cms_media_collections' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Collections</a>
</div>

<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">
    <div class="cms-card" style="padding:1.5rem">
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label">Title <span class="req">*</span></label>
          <input name="title" value="{{ col.title|default:'' }}" class="form-control" required>
        </div>
        <div class="col-md-6">
          <label class="form-label">Type <span class="req">*</span></label>
          <select name="collection_type" class="form-control" required>
            <option value="">Select a type</option>
            <option value="series"      {% if col and col.collection_type == 'series'      %}selected{% endif %}>TV Series</option>
            <option value="movie"       {% if col and col.collection_type == 'movie'       %}selected{% endif %}>Movie / Film</option>
            <option value="documentary" {% if col and col.collection_type == 'documentary' %}selected{% endif %}>Documentary</option>
            <option value="podcast"     {% if col and col.collection_type == 'podcast'     %}selected{% endif %}>Podcast</option>
            <option value="audiobook"   {% if col and col.collection_type == 'audiobook'   %}selected{% endif %}>Audiobook</option>
            <option value="album"       {% if col and col.collection_type == 'album'       %}selected{% endif %}>Music Album</option>
            <option value="playlist"    {% if col and col.collection_type == 'playlist'    %}selected{% endif %}>Playlist</option>
            <option value="gallery"     {% if col and col.collection_type == 'gallery'     %}selected{% endif %}>Photo Gallery</option>
          </select>
          <div id="galleryLayoutWrap" style="margin-top:.7rem;display:none">
            <label class="form-label">Gallery Layout</label>
            <select name="gallery_layout" class="form-control" id="galleryLayout">
              <option value="slider"  {% if not col or col.gallery_layout == 'slider'  %}selected{% endif %}>Slider</option>
              <option value="grid"    {% if col and col.gallery_layout == 'grid'    %}selected{% endif %}>Grid</option>
              <option value="masonry" {% if col and col.gallery_layout == 'masonry' %}selected{% endif %}>Masonry</option>
            </select>
            <div id="galleryLayoutHint" style="font-size:.75rem;color:var(--cms-muted);margin-top:.35rem"></div>
            <div style="margin-top:.5rem">
              <button type="button" id="galleryPreviewLink" onclick="openGalleryPopup()" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem;cursor:pointer">
                <i class="fa-solid fa-eye me-1"></i>Preview gallery
              </button>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Category</label>
          <select name="category" class="form-control">
            <option value="">-- None --</option>
            {% for c in cats %}
            <option value="{{ c.pk }}" {% if col and col.category_id == c.pk %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Year</label>
          <input name="year" type="number" min="1900" max="2100" value="{{ col.year|default:'' }}" class="form-control">
        </div>
        <div class="col-md-4">
          <label class="form-label">Language</label>
          <input name="language" value="{{ col.language|default:'' }}" class="form-control" placeholder="Persian, English...">
        </div>
<div class="col-12">
          <label class="form-label">Description</label>
          <textarea name="description" class="form-control">{{ col.description|default:'' }}</textarea>
        </div>
        <div class="col-md-6">
          <label class="form-label">Director / Host</label>
          <input name="director" value="{{ col.director|default:'' }}" class="form-control">
        </div>
        <div class="col-md-6">
          <label class="form-label">Cast (comma-separated)</label>
          <input name="cast" value="{{ col.cast|default:'' }}" class="form-control">
        </div>
      </div>
    </div>

    {% if col %}
    <div class="cms-card mt-3" style="padding:0;overflow:hidden">
      <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted)">
          <i class="fa-solid fa-list-ol me-1"></i>Seasons
        </div>
        <button type="button" class="btn-cms" style="font-size:.78rem;padding:.3rem .75rem" onclick="document.getElementById('addSeasonForm').style.display='block';this.style.display='none'">
          <i class="fa-solid fa-plus me-1"></i>Add Season
        </button>
      </div>

      <div id="addSeasonForm" style="display:none;padding:1rem;border-bottom:1px solid var(--cms-border);background:#f8fafc">
        <form method="post" action="{% url 'cms_media_season_save' col.pk %}">
          {% csrf_token %}
          <div style="display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap">
            <div>
              <label class="form-label">Season #</label>
              <input name="season_number" type="number" min="1" value="{{ seasons|length|add:1 }}" class="form-control" style="width:80px">
            </div>
            <div style="flex:1;min-width:150px">
              <label class="form-label">Title (optional)</label>
              <input name="title" class="form-control" placeholder="Season 1">
            </div>
            <div>
              <label style="display:flex;align-items:center;gap:.4rem;font-size:.83rem;margin-bottom:.6rem">
                <input type="checkbox" name="is_active" checked> Active
              </label>
            </div>
            <button type="submit" class="btn-cms">Save</button>
          </div>
        </form>
      </div>

      {% if seasons %}
        {% for s in seasons %}
        <div class="season-row">
          <span style="font-weight:600;min-width:30px">S{{ s.season_number }}</span>
          <span style="flex:1">{{ s.display_title }}</span>
          <span style="font-size:.75rem;color:var(--cms-muted)">{{ s.items.count }} items</span>
          {% if s.is_active %}<span style="font-size:.7rem;background:#dcfce7;color:#15803d;padding:.1rem .4rem;border-radius:4px">Active</span>
          {% else %}<span style="font-size:.7rem;background:#fee2e2;color:#dc2626;padding:.1rem .4rem;border-radius:4px">Inactive</span>{% endif %}
          <form method="post" action="{% url 'cms_media_season_delete' s.pk %}" onsubmit="return confirm('Delete season?')" style="margin-left:.25rem">
            {% csrf_token %}
            <button type="submit" style="cursor:pointer;padding:.2rem" class="btn-cms-danger"><i class="fa-solid fa-trash fa-xs"></i></button>
          </form>
        </div>
        {% endfor %}
      {% else %}
        <div style="padding:1.5rem;text-align:center;color:var(--cms-muted);font-size:.84rem">No seasons yet.</div>
      {% endif %}
    </div>
    {% endif %}
  </div>

  <div class="col-lg-4">
    <div style="margin-bottom:1rem">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Collection</button>
    </div>
    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="is_active" {% if not col or col.is_active %}checked{% endif %}>
        <label for="is_active">Active, visible on platform</label>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Settings</div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Access</div>
        <select name="access" class="form-control" style="padding:.45rem .65rem">
          <option value="free"         {% if not col or col.access == 'free'    %}selected{% endif %}>Free</option>
          <option value="premium"      {% if col and col.access == 'premium'      %}selected{% endif %}>Premium</option>
          <option value="subscription" {% if col and col.access == 'subscription' %}selected{% endif %}>Subscription</option>
        </select>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="has_seasons" id="has_seasons" {% if col and col.has_seasons %}checked{% endif %}>
        <label for="has_seasons">Has Seasons</label>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Thumbnail</div>
      <div style="padding:.65rem 1rem">
        <input type="hidden" name="thumbnail_b64" id="thumbnail_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="thumb-preview-box">
            {% if col and col.thumbnail and col.thumbnail.name %}
              <img src="{{ col.thumbnail.url }}" id="thumb-preview">
            {% else %}
              <i class="fa-solid fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">1280 x 720 px, 16:9</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if col and col.thumbnail and col.thumbnail.name %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="thumbnail" id="f_thumbnail" accept="image/*">
              </div>
              {% if col and col.thumbnail and col.thumbnail.name %}
              <button type="button" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="if(confirm('Remove this thumbnail?'))document.getElementById('thumbDelForm').submit()">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
            <div id="imgSizeWarning" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div id="imgSizeOk" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
    </div>

    {% if col %}
    <button type="button" class="btn-cms-danger w-100" style="text-align:center;display:block" onclick="if(confirm('Delete this collection?'))document.getElementById('colDelForm').submit()">
      <i class="fa-solid fa-trash me-1"></i>Delete Collection
    </button>
    {% endif %}

  </div>

</div>
</form>

{% if col %}
<form id="thumbDelForm" method="post" action="{% url 'cms_media_collection_thumbnail_delete' col.pk %}" style="display:none">{% csrf_token %}</form>
<form id="colDelForm" method="post" action="{% url 'cms_media_collection_delete' col.pk %}" style="display:none">{% csrf_token %}</form>
{% endif %}

<div id="cropOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:1.5rem;width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <strong style="font-size:1rem">Crop Thumbnail</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem">Aspect ratio locked to 1280 x 720 (16:9)</span>
      </div>
      <button type="button" onclick="closeCropper()" style="background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#666">&times;</button>
    </div>
    <div style="flex:1;overflow:hidden;min-height:0;max-height:60vh">
      <img id="cropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="closeCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="applyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
var THUMB_W = 1280, THUMB_H = 720;
var cropperInstance = null;

document.getElementById('f_thumbnail').addEventListener('change', function () {
  var file = this.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function (ev) {
    var src = ev.target.result;
    var probe = new Image();
    probe.onload = function () {
      var w = this.naturalWidth, h = this.naturalHeight;
      hideImgMessages();
      if (w < THUMB_W || h < THUMB_H) {
        showImgWarning('Image is ' + w + ' x ' + h + 'px. The recommended minimum is ' + THUMB_W + ' x ' + THUMB_H + '.');
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
      } else if (w !== THUMB_W || h !== THUMB_H) {
        openCropper(src);
      } else {
        showImgOk('Image is exactly ' + THUMB_W + ' x ' + THUMB_H + '. Perfect.');
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
      }
    };
    probe.src = src;
  };
  reader.readAsDataURL(file);
});

function showThumbPreview(src) {
  document.getElementById('thumb-preview-box').innerHTML =
    '<img src="' + src + '" style="width:70px;height:70px;object-fit:cover;">';
}
function hideImgMessages() {
  document.getElementById('imgSizeWarning').style.display = 'none';
  document.getElementById('imgSizeOk').style.display = 'none';
}
function showImgWarning(msg) { var el = document.getElementById('imgSizeWarning'); el.textContent = msg; el.style.display = 'block'; }
function showImgOk(msg)      { var el = document.getElementById('imgSizeOk');      el.textContent = msg; el.style.display = 'block'; }

function openCropper(src) {
  var overlay = document.getElementById('cropOverlay');
  var cropImg = document.getElementById('cropImage');
  cropImg.src = src;
  overlay.style.display = 'flex';
  if (cropperInstance) { cropperInstance.destroy(); }
  cropImg.onload = function () {
    cropperInstance = new Cropper(cropImg, { aspectRatio: THUMB_W / THUMB_H, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}
function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  document.getElementById('f_thumbnail').value = '';
  hideImgMessages();
}
function applyCrop() {
  if (!cropperInstance) return;
  var canvas = cropperInstance.getCroppedCanvas({ width: THUMB_W, height: THUMB_H });
  var dataURL = canvas.toDataURL('image/jpeg', 0.92);
  document.getElementById('thumbnail_b64').value = dataURL;
  showThumbPreview(dataURL);
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  hideImgMessages();
  showImgOk('Thumbnail cropped to ' + THUMB_W + ' x ' + THUMB_H + 'px. Ready to save.');
}

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.getElementById('cropOverlay').style.display === 'flex') closeCropper();
});
</script>

<script>
(function () {
  var typeSel   = document.querySelector('select[name="collection_type"]');
  var wrap      = document.getElementById('galleryLayoutWrap');
  var layoutSel = document.getElementById('galleryLayout');
  var hint      = document.getElementById('galleryLayoutHint');
  var link      = document.getElementById('galleryPreviewLink');
  if (!typeSel || !wrap) return;

  var hints = {
    slider:  'One image at a time with arrows, a thumbnail strip, keyboard and swipe support.',
    grid:    'Equal square tiles in a responsive grid. Clicking an image opens it full size.',
    masonry: 'Images keep their natural proportions and stagger across columns.'
  };

  function refresh() {
    var isGallery = typeSel.value === 'gallery';
    wrap.style.display = isGallery ? 'block' : 'none';
    if (hint) hint.textContent = hints[layoutSel.value] || '';
    if (link) {
      {% if col %}link.style.display = '';{% else %}link.style.display = 'none';{% endif %}
    }
  }

  typeSel.addEventListener('change', refresh);
  if (layoutSel) layoutSel.addEventListener('change', refresh);
  refresh();
})();
</script>


{% if col %}
<div id="galPopup" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:12px;width:min(1000px,95vw);overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.4)">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid #e2e8f0">
      <span style="font-weight:600;font-size:.9rem;color:#033152">{{ col.title }}</span>
      <div style="display:flex;align-items:center;gap:.4rem">
        <span id="galPopupLayout" style="font-size:.75rem;color:#64748b"></span>
        <a id="galPopupOpen" href="#" target="_blank" class="btn-cms-ghost" style="padding:.25rem .6rem;font-size:.75rem" title="Open in a new tab"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
        <button type="button" onclick="closeGalleryPopup()" style="background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;line-height:1">&times;</button>
      </div>
    </div>
    <iframe id="galPopupFrame" src="" style="width:100%;height:min(70vh,620px);border:0;display:block;background:#0d0d0d"></iframe>
  </div>
</div>
<script>
function openGalleryPopup() {
  var sel = document.getElementById('galleryLayout');
  var layout = sel ? sel.value : 'slider';
  var url = '/stream/embed/collection/{{ col.pk }}/?layout=' + layout;
  document.getElementById('galPopupFrame').src = url;
  document.getElementById('galPopupOpen').href = url;
  document.getElementById('galPopupLayout').textContent = layout;
  document.getElementById('galPopup').style.display = 'flex';
}
function closeGalleryPopup() {
  document.getElementById('galPopup').style.display = 'none';
  document.getElementById('galPopupFrame').src = '';
}
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') closeGalleryPopup();
});
document.addEventListener('DOMContentLoaded', function () {
  var p = document.getElementById('galPopup');
  if (p) p.addEventListener('click', function (e) { if (e.target === this) closeGalleryPopup(); });
});
</script>
{% endif %}

{% endblock %}