{% extends "base.html" %}
{% block title %}{% if ticket %}Edit {{ ticket.uuid }}{% else %}Create Ticket{% endif %}{% endblock %}
{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.default.min.css" rel="stylesheet">
{% include "components/rich_text_editor_assets.html" %}

{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li><a href="{% url 'tickets-list' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Tickets</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    {% if ticket %}
    <li><a href="{% url 'ticket-detail' ticket.id %}" class="hover:text-gray-700 dark:hover:text-gray-300">{{ ticket.name }}</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Edit</li>
    {% else %}
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">New Ticket</li>
    {% endif %}
  </ol>
</nav>
{% endblock %}
{% block content %}
<div class="w-full" x-data="ticketForm()">
  <div class="mb-8 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
    <div>
      <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
        <a href="{% if ticket %}{% url 'ticket-detail' ticket.id %}{% else %}{% url 'tickets-list' %}{% endif %}" class="hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
          <i class="fas fa-arrow-left mr-1"></i>Back
        </a>
      </div>
      {% if ticket %}
      <div class="text-xs font-mono text-gray-400 mb-1">{{ ticket.uuid }}</div>
      {% endif %}
      <h1 class="text-2xl font-bold tracking-tight">{% if ticket %}Edit Ticket{% else %}Create Ticket{% endif %}</h1>
      <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{% if ticket %}Update ticket details and assignment.{% else %}Create a new ticket within a project.{% endif %}</p>
    </div>
    {% if ticket %}
    <div class="flex items-center gap-3 sm:mt-0">
      <!-- View Button -->
      <a href="{% url 'ticket-detail' ticket.id %}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">
        <i class="fas fa-eye"></i> View
      </a>
      <!-- Delete Form & Button -->
      <form method="post" action="{% url 'ticket-delete' ticket.id %}" class="inline-block m-0">
        {% csrf_token %}
        <button type="button" @click="confirmAction({title:'Delete Ticket', message:'Delete this ticket? This cannot be undone.', confirmText:'Delete', danger:true, onConfirm:function(){ $el.closest('form').submit() }})" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-red-600 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors shadow-sm">
          <i class="fas fa-trash"></i> Delete
        </button>
      </form>
    </div>
    {% endif %}
  </div>

  <form method="post">
    {% csrf_token %}

    <div class="space-y-6 w-full">
      <!-- Row 1: Project and Status -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="id_project" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Project <span class="text-red-500">*</span></label>
          <select id="id_project" name="project" required x-model="selectedProjectId"
                  class="w-full text-sm outline-none tom-select-single">
            <option value="">Select a project...</option>
            {% for p in projects %}
            <option value="{{ p.id }}" {% if selected_project_id|add:0 == p.id %}selected{% endif %}>{{ p.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="id_status" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Status <span class="text-red-500">*</span></label>
          <select id="id_status" name="status" required x-model="status"
                  class="w-full text-sm outline-none tom-select-single">
            <option value="">Select status...</option>
            <template x-for="s in filteredStatuses" :key="s.id">
              <option :value="s.id" :selected="status == s.id" x-text="s.name"></option>
            </template>
          </select>
        </div>
      </div>

      <!-- Row 2: Priority and Epic -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="id_priority" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Priority</label>
          <select id="id_priority" name="priority" x-model="priority"
                  class="w-full text-sm outline-none tom-select-single">
            <option value="">No priority</option>
            {% for pr in priorities %}
            <option value="{{ pr.id }}" :selected="priority == {{ pr.id }}">{{ pr.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="id_epic" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Epic</label>
          <select id="id_epic" name="epic" x-model="epic"
                  class="w-full text-sm outline-none tom-select-single">
            <option value="">No epic</option>
            <template x-for="e in filteredEpics" :key="e.id">
              <option :value="e.id" :selected="epic == e.id" x-text="e.name"></option>
            </template>
          </select>
        </div>
      </div>

      <!-- Row 3: Ticket Name -->
      <div>
        <label for="id_name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Name <span class="text-red-500">*</span></label>
        <input type="text" id="id_name" name="name" value="{% if ticket %}{{ ticket.name }}{% endif %}" required placeholder="Enter ticket name"
               class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
      </div>

      <!-- Row 4: Description -->
      <div>
        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Description</label>
        {% include "components/rich_text_editor.html" with input_name="description" alpine_model="description" %}
      </div>

      <!-- Row 5: Assigned to and Start Date -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Assignees</label>
          <select name="assignees" multiple x-ref="assigneesSelect" class="w-full text-sm outline-none" x-init="
              let ts = new TomSelect($el, {
                plugins: ['remove_button'],
                create: false,
                maxOptions: 50,
                valueField: 'id',
                labelField: 'name',
                searchField: 'name'
              });
              $watch('filteredMembers', (members) => {
                ts.clearOptions();
                members.forEach(m => ts.addOption({id: m.id, name: m.name}));
                ts.refreshOptions(false);
              });

              ts.on('change', (val) => {
                selectedAssignees = val.map(Number);
              });
              setTimeout(() => {
                filteredMembers.forEach(m => ts.addOption({id: m.id, name: m.name}));
                ts.setValue(selectedAssignees);
              }, 100);
            ">
          </select>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">Select multiple users to assign this ticket to.</p>
        </div>
        <div>
          <label for="id_start_date" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Start Date</label>
          <input type="date" id="id_start_date" name="start_date" x-model="startDate"
                 onclick="this.showPicker()"
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
        </div>
      </div>

      <!-- Row 6: Due Date and Created By -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="id_due_date" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Due Date</label>
          <input type="date" id="id_due_date" name="due_date" x-model="dueDate"
                 onclick="this.showPicker()"
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
        </div>
        <div>
          <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Created By</label>
          <input type="text" readonly disabled value="{% if ticket %}{{ ticket.created_by.get_full_name|default:ticket.created_by.username }}{% else %}{{ request.user.get_full_name|default:request.user.username }}{% endif %}"
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 px-3 py-2 text-sm cursor-not-allowed">
        </div>
      </div>
    </div>
    <div class="flex items-center gap-3 mt-8">
      <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm px-4 py-2 rounded-lg transition-colors">
        {% if ticket %}Save Changes{% else %}Create{% endif %}
      </button>
      <a href="{% if ticket %}{% url 'ticket-detail' ticket.id %}{% else %}{% url 'tickets-list' %}{% endif %}" class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-900 dark:text-white font-medium text-sm px-4 py-2 rounded-lg transition-colors">
        Cancel
      </a>

    </div>
  </form>

</div>

<script>
const PROJECTS = {{ projects_json|safe }};
const PRIORITIES = {{ priorities_json|safe }};

function ticketForm() {
  return {
    selectedProjectId: '{% if ticket %}{{ ticket.project.id }}{% else %}{{ selected_project_id|default:'' }}{% endif %}',
    status: '{% if ticket %}{{ ticket.status.id }}{% endif %}',
    priority: '{% if ticket %}{{ ticket.priority.id }}{% endif %}',
    epic: '{% if ticket %}{{ ticket.epic.id }}{% endif %}',
    description: '{% if ticket %}{{ ticket.description|escapejs }}{% endif %}',
    selectedAssignees: {{ current_assignee_ids|default:'[]' }},
    startDate: '{% if ticket %}{{ ticket.start_date|date:'Y-m-d' }}{% endif %}',
    dueDate: '{% if ticket %}{{ ticket.due_date|date:'Y-m-d' }}{% endif %}',
    init() {
      this.$watch('filteredStatuses', () => {
        setTimeout(() => {
          let el = document.getElementById('id_status');
          if (el && el.tomselect) el.tomselect.sync();
        }, 50);
      });
      this.$watch('filteredEpics', () => {
        setTimeout(() => {
          let el = document.getElementById('id_epic');
          if (el && el.tomselect) el.tomselect.sync();
        }, 50);
      });
    },
    get selectedProject() {
      return PROJECTS.find(p => p.id == this.selectedProjectId) || null;
    },
    get filteredStatuses() {
      return this.selectedProject ? this.selectedProject.statuses : [];
    },
    get filteredEpics() {
      return this.selectedProject ? this.selectedProject.epics : [];
    },
    get filteredMembers() {
      return this.selectedProject ? this.selectedProject.members : [];
    },
    toggleAssignee(id) {
      const idx = this.selectedAssignees.indexOf(id);
      if (idx > -1) { this.selectedAssignees.splice(idx, 1); }
      else { this.selectedAssignees.push(id); }
    },
  };
}
</script>
{% endblock %}
{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.tom-select-single').forEach((el) => {
      new TomSelect(el, { create: false, maxOptions: 50 });
    });
  });
</script>
{% endblock %}