{% extends "pos/base.html" %}
{% load static %}

{% block title %}{{ is_edit|yesno:"Edit Shop Details,Add Shop Details" }}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
<style>
  .logo-preview {
    border: 1px dashed #cfd8dc;
    border-radius: .5rem;
    padding: .5rem;
    display: inline-block;
    max-width: 180px;
    max-height: 180px;
    background: #fafafa;
  } 
  .helper {
    font-size: .875rem;
    color: #666;
  }
  .breadcrumb-custom {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
  }
</style>
{% endblock %}

{% block heading %}
  {{ is_edit|yesno:"Edit Shop Details,Add New Shop" }}
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom">
    <li class="breadcrumb-item">
      <a href="{% url 'pos:shop_details_list' %}"><i class="fas fa-store mr-1"></i>Shop Details</a>
    </li>
    <li class="breadcrumb-item active">{{ is_edit|yesno:"Edit,Add New" }}</li>
  </ol>
</nav>

<div class="card shadow-sm">
  <div class="card-header">
    <i class="fas fa-{{ is_edit|yesno:'edit,plus' }} mr-2"></i>
    {{ is_edit|yesno:"Edit Shop Details,Add New Shop Details" }}
  </div>
  <div class="card-body">
    <form id="main-form" method="post" enctype="multipart/form-data" class="needs-validation">
      {% csrf_token %}

      <div class="alert alert-info py-2">
        <i class="fas fa-info-circle mr-1"></i>
        <strong>Logo rule:</strong> Please upload a <u>square</u> image (width = height), 
        and ideally <u>&lt; 2&nbsp;MB</u>. If it isn't square, we'll auto-square it for you.
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label><i class="fas fa-store text-muted mr-1"></i>Shop Name <span class="text-danger">*</span></label>
          {{ form.shop_name }}
          {% if form.shop_name.errors %}<div class="text-danger small">{{ form.shop_name.errors }}</div>{% endif %}
        </div>
        <div class="form-group col-md-6">
          <label><i class="fas fa-map-marker-alt text-muted mr-1"></i>Address</label>
          {{ form.address }}
          {% if form.address.errors %}<div class="text-danger small">{{ form.address.errors }}</div>{% endif %}
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label><i class="fas fa-phone text-muted mr-1"></i>Phone 1</label>
          {{ form.phone_1 }}
          {% if form.phone_1.errors %}<div class="text-danger small">{{ form.phone_1.errors }}</div>{% endif %}
        </div>
        <div class="form-group col-md-6">
          <label><i class="fas fa-phone text-muted mr-1"></i>Phone 2</label>
          {{ form.phone_2 }}
          {% if form.phone_2.errors %}<div class="text-danger small">{{ form.phone_2.errors }}</div>{% endif %}
        </div>
      </div>

      <div class="form-group">
        <label><i class="fas fa-align-left text-muted mr-1"></i>Description</label>
        {{ form.descp_1 }}
        {% if form.descp_1.errors %}<div class="text-danger small">{{ form.descp_1.errors }}</div>{% endif %}
      </div>

      <hr>

      <div class="form-group">
        <label><i class="fas fa-image text-muted mr-1"></i>Logo (optional)</label>
        <input type="file" id="logo_picker" accept="image/*" class="form-control-file">
        <input type="file" name="logo_file" id="logo_file_hidden" style="display:none">
        {% if form.errors.logo_file %}<div class="text-danger small">{{ form.errors.logo_file }}</div>{% endif %}
        <div class="helper mt-1">
          <i class="fas fa-info-circle"></i> After choosing a file you'll crop it yourself — any width/height, square or rectangle, whatever you drag.
        </div>
        <div id="crop_preview_wrap" class="mt-2" style="display:none">
          <label class="d-block">Cropped Preview</label>
          <img id="crop_preview_img" class="logo-preview" style="max-width:200px;max-height:200px;">
          <button type="button" id="recrop_btn" class="btn btn-outline-secondary btn-sm ml-2">Re-crop</button>
        </div>
      </div>

      {% if is_edit and instance and instance.logo_image %}
        <div class="form-group">
          <label>Current Logo</label><br>
          <div class="d-flex align-items-start">
            <div class="logo-preview mr-3">
              {% get_media_prefix as MEDIA_PREFIX %}
              <img src="{{ MEDIA_PREFIX }}{{ instance.logo_image }}" alt="Logo" style="max-width:160px; max-height:160px;">
            </div>
            <button type="submit" class="btn btn-outline-danger btn-sm" form="delete-logo-form">
              <i class="fas fa-trash-alt mr-1"></i> Delete Logo
            </button>
          </div>
        </div>
      {% endif %}

      <hr>

      <div class="d-flex justify-content-between">
        <a href="{% url 'pos:shop_details_list' %}" class="btn btn-secondary">
          <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
        <button type="submit" class="btn btn-success">
          <i class="fas fa-save mr-1"></i> {{ is_edit|yesno:"Update,Save" }}
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Crop Modal -->
<div class="modal fade" id="cropModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-crop-alt mr-1"></i> Crop Logo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="crop_cancel_x">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="helper mb-2">
          <i class="fas fa-info-circle"></i> Drag the box freely — any width/height, square or rectangle, is fine.
        </div>
        <div style="max-height:60vh; overflow:hidden;">
          <img id="crop_target_img" style="max-width:100%; display:block;">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="crop_cancel_btn">Cancel</button>
        <button type="button" class="btn btn-success" id="crop_apply_btn">
          <i class="fas fa-check mr-1"></i> Apply Crop
        </button>
      </div>
    </div>
  </div>
</div>


{% if is_edit and instance %}
  {# Hidden delete logo form #}
  <form id="delete-logo-form" action="{% url 'pos:shop_logo_delete' instance.pk %}" method="post" style="display:none">
    {% csrf_token %}
  </form>
{% endif %}
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
<script>
(function () {
  var picker = document.getElementById('logo_picker');
  var hiddenInput = document.getElementById('logo_file_hidden');
  var cropImg = document.getElementById('crop_target_img');
  var previewWrap = document.getElementById('crop_preview_wrap');
  var previewImg = document.getElementById('crop_preview_img');
  var recropBtn = document.getElementById('recrop_btn');
  var applyBtn = document.getElementById('crop_apply_btn');
  var cancelBtn = document.getElementById('crop_cancel_btn');
  var cancelX = document.getElementById('crop_cancel_x');
  var cropper = null;
  var lastDataUrl = null;
  var lastFileName = 'logo.png';


  function openModal() {
      var modal = document.getElementById('cropModal');
      modal.classList.add('show');
      modal.style.display = 'block';
      document.body.classList.add('modal-open');
      var backdrop = document.createElement('div');
      backdrop.className = 'modal-backdrop fade show';
      backdrop.id = 'cropModalBackdrop';
      document.body.appendChild(backdrop);
    }

    function closeModal() {
      var modal = document.getElementById('cropModal');
      modal.classList.remove('show');
      modal.style.display = 'none';
      document.body.classList.remove('modal-open');
      var backdrop = document.getElementById('cropModalBackdrop');
      if (backdrop) backdrop.remove();
    }

    function initCropper() {
      if (cropper) { cropper.destroy(); }
      cropper = new Cropper(cropImg, {
        viewMode: 1,
        autoCropArea: 0.9,
        aspectRatio: NaN,   // free crop: any width/height, no forced square
        dragMode: 'move',
        responsive: true,
        background: false
      });
    }

    picker.addEventListener('change', function () {
      var file = picker.files && picker.files[0];
      if (!file) return;
      lastFileName = file.name.replace(/\.[^.]+$/, '') + '_cropped.png';
      var reader = new FileReader();
      reader.onload = function (e) {
        lastDataUrl = e.target.result;
        cropImg.onload = function () {
          openModal();
          // wait one tick so the modal is actually visible/sized before Cropper measures it
          setTimeout(initCropper, 50);
        };
        cropImg.src = lastDataUrl;
      };
      reader.readAsDataURL(file);
      picker.value = ''; // lets the user pick the same file again later if needed
    });

  function cancelCrop() {
    if (cropper) { cropper.destroy(); cropper = null; }
    picker.value = '';
    hiddenInput.value = '';
    closeModal();
  }
  cancelBtn.addEventListener('click', cancelCrop);
  cancelX.addEventListener('click', cancelCrop);

  applyBtn.addEventListener('click', function () {
    if (!cropper) return;
    var canvas = cropper.getCroppedCanvas(); // no width/height forced -> keeps user's exact crop box
    if (!canvas) return;
    canvas.toBlob(function (blob) {
      var file = new File([blob], lastFileName, { type: 'image/png' });
      var dt = new DataTransfer();
      dt.items.add(file);
      hiddenInput.files = dt.files;

      previewImg.src = canvas.toDataURL('image/png');
      previewWrap.style.display = 'block';

      cropper.destroy();
      cropper = null;
      closeModal();
    }, 'image/png');
  });

  recropBtn.addEventListener('click', function () {
    if (!lastDataUrl) return;
    cropImg.onload = function () {
      openModal();
      setTimeout(initCropper, 50);
    };
    cropImg.src = lastDataUrl;
  });
})();
</script>
{% endblock %}