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

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

    @component('components.breadcrumb')
      @slot('title') Ticket Department Roles @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
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="row">
      <div class="col-xl-5">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0">Map Ticket Assignee / Resolver</h5>
          </div>
          <div class="card-body">
            <form action="{{ route('ticket-roles.store') }}" method="POST">
              @csrf

              <div class="mb-3">
                <label class="form-label">User</label>
                <select name="user_id" class="form-control select2" required>
                  <option value="">Select User</option>
                  @foreach($users as $u)
                    <option value="{{ $u->id }}" @selected(old('user_id') == $u->id)>
                      {{ $u->name }} ({{ $u->email }})
                    </option>
                  @endforeach
                </select>
              </div>

              <div class="mb-3">
                <label class="form-label">Department</label>
                <select name="department_id" class="form-control" required>
                  <option value="">Select Department</option>
                  @foreach($departments as $d)
                    <option value="{{ $d->id }}" @selected(old('department_id') == $d->id)>
                      {{ $d->name }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div class="mb-3">
                <label class="form-label">Role</label>
                <select name="role" class="form-control" required>
                  <option value="">Select Role</option>
                  <option value="ASSIGNEE" @selected(old('role') == 'ASSIGNEE')>Ticket Assignee</option>
                  <option value="RESOLVER" @selected(old('role') == 'RESOLVER')>Ticket Resolver</option>
                </select>
              </div>

              <div class="text-center">
                <button class="btn btn-primary">Save Mapping</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="col-xl-7">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Existing Mappings</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive custom-table">
              <table class="table" id="TicketRoleTable">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>User</th>
                    <th>Department</th>
                    <th>Role</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($rows as $row)
                    <tr>
                      <td>{{ $row->id }}</td>
                      <td>{{ $row->user->name ?? '—' }} <br>
                          <small class="text-muted">{{ $row->user->email ?? '' }}</small>
                      </td>
                      <td>{{ $row->department->name ?? '—' }}</td>
                      <td>
                        <span class="badge {{ $row->role === 'ASSIGNEE' ? 'bg-info' : 'bg-success' }}">
                          {{ $row->role }}
                        </span>
                      </td>
                      <td>
                        <form action="{{ route('ticket-roles.destroy', $row->id) }}" method="POST"
                              onsubmit="return confirm('Remove this mapping?')">
                          @csrf
                          @method('DELETE')
                          <button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>

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

    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  initDataTableWithFilters && initDataTableWithFilters('TicketRoleTable');
</script>
@endpush