@extends('admin.layout.app')
@section('title','Edit Ticket Engineer Assignments')

@section('content')
<div class="container-xxl">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5>Edit Engineers Assigned 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.updateByTicket', $ticket->id) }}">
        @csrf
        @method('PUT')

        <div class="mb-3">
          <label>Ticket</label>
          <input type="text" class="form-control" value="{{ $ticket->ticket_number }}" disabled>
        </div>

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

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

@push('scripts')
<script>
  let assignmentIndex = {{ count($ticket->Engineers) }};
  // window.assignmentIndex = window.assignmentIndex || {{ count($ticket->engineers) }};

  document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('assignmentContainer');

    document.getElementById('addAssignmentBtn').addEventListener('click', function () {
      fetch(`{{ route('admin.ticketengineer.assignmentFields') }}?index=${assignmentIndex}`)
        .then(res => res.text())
        .then(html => {
          // alert(html);
          container.insertAdjacentHTML('beforeend', html);
          assignmentIndex++;
        });
    });

    document.addEventListener('change', function (e) {
      if (e.target.classList.contains('engineer-select')) {
        const engineerId = e.target.value;
        const block = e.target.closest('.assignment-block');
        const carSelect = block.querySelector('.car-select');
        if (!engineerId || !carSelect) return;

        fetch(`/car/${engineerId}/getCars`)
          .then(res => res.json())
          .then(cars => {
            carSelect.innerHTML = '<option value="">Select Car</option>';
            cars.forEach(car => {
              carSelect.innerHTML += `<option value="${car.id}">${car.model} (${car.registration_number})</option>`;
            });
          });
      }
    });

    document.addEventListener('click', function (e) {
      if (e.target.classList.contains('remove-assignment-btn')) {
        e.target.closest('.assignment-block').remove();
        assignmentIndex--;
      }
    });
  });
</script>
@endpush