@extends('admin.layout.app')
@section('title','Assign Engineers to Ticket')

@section('content')
<div class="container-xxl">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Assign Engineers to Ticket</h5>
      <a href="{{ route('admin.ticket.index') }}" class="btn btn-sm btn-secondary">
        <i class="bx bx-arrow-back"></i> Back
      </a>
    </div>

    <div class="card-body">      
            @if ($errors->any())
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
          @endif
      <form method="POST" action="{{ route('admin.ticketengineer.store') }}">
        @csrf
        <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">
        <div class="mb-3">
          <label>Ticket</label>
          <input type="text" class="form-control" value="{{ $ticket->ticket_number }}" disabled>
        </div>

        <div id="assignmentContainer">
          @include('admin.ticketengineer.partials.assignment-fields', ['engineers' => $engineers, 'index' => 0])
        </div>

        <div class="d-flex justify-content-between mt-3">
          <button type="button" class="btn btn-outline-primary" id="addAssignmentBtn">
            + Assign to Another Engineer
          </button>
          <button type="submit" class="btn btn-success">Submit Assignments</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {

  window.assignmentIndex = window.assignmentIndex || 1;
  const container = $('#assignmentContainer');

  // Init Select2
  $('.searchable-select').select2();

  // ✅ Add assignment (FIXED)
  $(document).on('click', '#addAssignmentBtn', function () {
    fetch(`/admin/ticketengineer/assignment-fields?index=${window.assignmentIndex}`)
      .then(res => res.text())
      .then(html => {
        container.append(html);

        // Re-init Select2
        container.find('.searchable-select').select2();

        window.assignmentIndex++;
      });
  });

  // Engineer change
  $(document).on('change', '.engineer-select', function () {
    let engineerId = $(this).val();
    let block = $(this).closest('.assignment-block');
    let $carSelect = block.find('.car-select');

    if (!engineerId || !$carSelect.length) return;

    fetch(`/car/${engineerId}/getCars`)
      .then(res => res.json())
      .then(cars => {
        $carSelect.empty().append('<option value="">Select Car</option>');

        cars.forEach(car => {
          $carSelect.append(
            `<option value="${car.id}">
              ${car.model} (${car.registration_number})
            </option>`
          );
        });

        $carSelect.trigger('change');
      });
  });

  // Remove assignment
  $(document).on('click', '.remove-assignment-btn', function () {
    $(this).closest('.assignment-block').remove();
  });

});
</script>
@endpush