@extends('layouts.admin')

@section('title', 'New fix task')
@section('heading', 'New fix task')
@section('breadcrumb')
  <li class="breadcrumb-item"><a href="{{ route('admin.workflow.index') }}">Fix tasks</a></li>
  <li class="breadcrumb-item active">New</li>
@endsection

@section('content')
  <div class="block">
    <div class="title"><strong>Create a fix task for a customer</strong></div>
    <p>Assign the work in order. Each person can approve, view, or edit. They can also reject and send it back with a document, or escalate it to someone else when their role allows it.</p>
    <form method="post" action="{{ route('admin.workflow.store') }}" enctype="multipart/form-data">
      @csrf
      <div class="form-row">
        <div class="form-group col-md-6">
          <label>Customer</label>
          <select class="form-control" name="customer_id" required>
            <option value="">Select customer</option>
            @foreach($customers as $customer)
              <option value="{{ $customer->id }}" @selected((int) old('customer_id') === (int) $customer->id)>{{ $customer->name }}{{ $customer->phone ? ' — '.$customer->phone : '' }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group col-md-6">
          <label>Title</label>
          <input class="form-control" name="title" value="{{ old('title') }}" required placeholder="What needs to be fixed">
        </div>
      </div>
      <div class="form-group">
        <label>Work details</label>
        <textarea class="form-control" name="description" rows="3">{{ old('description') }}</textarea>
      </div>
      <div class="form-row">
        <div class="form-group col-md-4">
          <label>Priority</label>
          <select class="form-control" name="priority">
            @foreach(['low', 'medium', 'high', 'urgent'] as $priority)
              <option value="{{ $priority }}" @selected(old('priority', 'medium') === $priority)>{{ ucfirst($priority) }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group col-md-4">
          <label>Due date</label>
          <input class="form-control js-date" type="text" name="due_date" value="{{ old('due_date', now()->toDateString()) }}" autocomplete="off" placeholder="YYYY-MM-DD">
        </div>
        <div class="form-group col-md-4">
          <label>Documents</label>
          @include('admin.partials.dropzone')
        </div>
      </div>

      <div class="title"><strong>Assignment chain</strong></div>
      <div class="table-responsive">
        <table class="table" id="steps-table">
          <thead>
            <tr>
              <th style="width:70px;">Order</th>
              <th>Role</th>
              <th>User</th>
              <th>Approve</th>
              <th>View</th>
              <th>Edit</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <button class="btn btn-outline-primary btn-sm" type="button" id="add-step">Add assignee</button>
      <div class="mt-3">
        <button class="btn btn-primary" type="submit">Create task</button>
        <a class="btn btn-secondary" href="{{ route('admin.workflow.index') }}">Cancel</a>
      </div>
    </form>
  </div>
@endsection

@push('scripts')
  @php
    $workflowUsers = $users->map(function ($user) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'role_id' => $user->role_id,
            'role' => $user->role->name ?? '',
        ];
    })->values();
    $workflowRoles = $roles->map(function ($role) {
        return ['id' => $role->id, 'name' => $role->name];
    })->values();
  @endphp
  <script>
    const workflowUsers = @json($workflowUsers);
    const workflowRoles = @json($workflowRoles);
    const oldSteps = @json(old('steps', []));
    const tbody = document.querySelector('#steps-table tbody');

    function userOptions(roleId, selected) {
      if (!roleId) {
        return '';
      }
      return workflowUsers
        .filter(user => String(user.role_id) === String(roleId))
        .map(user => `<option value="${user.id}" ${String(selected) === String(user.id) ? 'selected' : ''}>${user.name}</option>`)
        .join('');
    }

    function fillUsers(row, roleId, selected) {
      const select = row.querySelector('[name*="assignee_id"]');
      const $select = $(select);
      if ($select.hasClass('select2-hidden-accessible')) {
        $select.select2('destroy');
      }
      select.innerHTML = `<option value="">Select user</option>${userOptions(roleId, selected || '')}`;
      window.initFixoFields(select.parentElement);
    }

    function addStep(data) {
      data = data || {};
      const index = tbody.children.length;
      const row = document.createElement('tr');
      row.className = 'step-row';
      const roleOptions = ['<option value="">Select role</option>'].concat(workflowRoles.map(role => `<option value="${role.id}">${role.name}</option>`)).join('');
      row.innerHTML = `
        <td class="step-order">${index + 1}</td>
        <td><select class="form-control role-filter">${roleOptions}</select></td>
        <td><select class="form-control" name="steps[${index}][assignee_id]" required><option value="">Select user</option></select></td>
        <td><input type="checkbox" name="steps[${index}][can_approve]" value="1" ${data.can_approve || !data.assignee_id ? 'checked' : ''}></td>
        <td><input type="checkbox" name="steps[${index}][can_view]" value="1" ${data.can_view || !data.assignee_id ? 'checked' : ''}></td>
        <td><input type="checkbox" name="steps[${index}][can_edit]" value="1" ${data.can_edit ? 'checked' : ''}></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-step">Remove</button></td>
      `;
      tbody.appendChild(row);
      let presetRole = '';
      if (data.assignee_id) {
        const chosen = workflowUsers.find(user => String(user.id) === String(data.assignee_id));
        if (chosen) {
          presetRole = chosen.role_id;
          row.querySelector('.role-filter').value = chosen.role_id;
          fillUsers(row, chosen.role_id, data.assignee_id);
        }
      }
      row.querySelector('.remove-step').addEventListener('click', function () {
        if (tbody.children.length === 1) return;
        $(row).find('select.form-control').each(function () {
          if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
          }
        });
        row.remove();
        renumber();
      });
      window.initFixoFields(row);
      $(row).find('.role-filter').on('select2:select select2:clear', function () {
        fillUsers(row, $(this).val() || '');
      });
      if (presetRole) {
        $(row).find('.role-filter').val(String(presetRole)).trigger('change.select2');
      }
    }

    function renumber() {
      Array.from(tbody.children).forEach((row, index) => {
        row.querySelector('.step-order').textContent = index + 1;
        row.querySelectorAll('[name]').forEach(input => {
          input.name = input.name.replace(/steps\[\d+\]/, `steps[${index}]`);
        });
      });
    }

    document.getElementById('add-step').addEventListener('click', () => addStep());
    if (oldSteps.length) {
      oldSteps.forEach(step => addStep(step));
    } else {
      addStep();
    }
  </script>
@endpush