@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper cardhead">
  <div class="content container-fluid">

    @component('components.breadcrumb')
      @slot('title') Department Tickets @endslot
    @endcomponent

    @if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
    @if (session('error'))   <div class="alert alert-danger">{{ session('error') }}</div>   @endif

    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title mb-0">Tickets for Your Department(s)</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive custom-table">
              <table class="table" id="DeptTicketTable">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Subject</th>
                    <th>Raised By</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Assignee</th>
                    <th>Resolver</th>
                    <th>Created</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($tickets as $t)
                    <tr>
                      <td>#{{ $t->id }}</td>
                      <td>{{ $t->subject }}</td>
                      <td>
                        {{ $t->user->name ?? '—' }}<br>
                        <small class="text-muted">{{ $t->user->email ?? '' }}</small>
                      </td>
                      <td>
                        <span class="badge 
                          @if($t->priority === 'CRITICAL') bg-danger
                          @elseif($t->priority === 'HIGH') bg-warning
                          @elseif($t->priority === 'MEDIUM') bg-info
                          @else bg-secondary @endif">
                          {{ $t->priority }}
                        </span>
                      </td>
                      <td><span class="badge bg-secondary">{{ $t->status }}</span></td>
                      <td>{{ $t->assignee->name ?? '—' }}</td>
                      <td>{{ $t->resolver->name ?? '—' }}</td>
                      <td>{{ $t->created_at->format('d M Y H:i') }}</td>
                      <td>
                        <a href="{{ route('tickets.show', $t->id) }}" class="btn btn-sm btn-outline-primary mb-1">
                          View
                        </a>

                      @canany(['ticket-assign', 'ticket-resolve'])
                          @if(in_array($t->status, ['OPEN','REOPENED']))
                            <button
                              type="button"
                              class="btn btn-sm btn-success"
                              data-bs-toggle="modal"
                              data-bs-target="#assignTicketModal{{ $t->id }}"
                            >
                              Assign
                            </button>
                          @endif
                        @endcan
                      </td>
                    </tr>

                    {{-- Assign Ticket Modal --}}
                  @canany(['ticket-assign', 'ticket-resolve'])
                    @if(in_array($t->status, ['OPEN','REOPENED']))
                      <div class="modal fade" id="assignTicketModal{{ $t->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-md">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title">
                                Assign Ticket #{{ $t->id }}
                              </h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <form action="{{ route('tickets.assign', $t->id) }}" method="POST">
                              @csrf
                              <div class="modal-body">
                                <div class="mb-2">
                                  <strong>Subject:</strong>
                                  <div>{{ $t->subject }}</div>
                                </div>
                                <div class="mb-2">
                                  <strong>Department:</strong>
                                  <div>{{ $t->department->name ?? '—' }}</div>
                                </div>

                                <div class="mb-3">
                                  <label class="form-label">Resolver <span class="text-danger">*</span></label>
                                  <select name="resolver_id" class="form-control" required>
                                    <option value="">Select Resolver</option>
                                    @foreach(
                                      \App\Models\TicketDepartmentRole::where('department_id', $t->department_id)
                                        ->where('role','RESOLVER')
                                        ->with('user')
                                        ->get()
                                      as $map
                                    )
                                      <option value="{{ $map->user_id }}">
                                        {{ $map->user->name ?? 'User #'.$map->user_id }}
                                      </option>
                                    @endforeach
                                  </select>
                                </div>

                                <div class="mb-3">
                                  <label class="form-label">Priority <span class="text-danger">*</span></label>
                                  <select name="priority" class="form-control" required>
                                    <option value="LOW"      {{ $t->priority === 'LOW' ? 'selected' : '' }}>Low</option>
                                    <option value="MEDIUM"   {{ $t->priority === 'MEDIUM' || !$t->priority ? 'selected' : '' }}>Medium</option>
                                    <option value="HIGH"     {{ $t->priority === 'HIGH' ? 'selected' : '' }}>High</option>
                                    <option value="CRITICAL" {{ $t->priority === 'CRITICAL' ? 'selected' : '' }}>Critical</option>
                                  </select>
                                </div>

                                <div class="mb-0">
                                  <label class="form-label">Initial Remark (optional)</label>
                                  <textarea name="remark" rows="2" class="form-control"
                                            placeholder="Any note for resolver..."></textarea>
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Assign Ticket</button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    @endif
                    @endcan

                  @endforeach
                </tbody>
              </table>

              <div class="mt-3">
                {{ $tickets->links() }}
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection

@push('scripts')
<script>
  if (typeof initDataTableWithFilters === 'function') {
    initDataTableWithFilters('DeptTicketTable');
  }
</script>
@endpush