@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="mb-3 d-flex flex-wrap gap-2">
                                <a href="{{ route('tickets.department.index') }}"
                                    class="btn btn-sm {{ ($activeFilter ?? '') === 'OPEN_ASSIGNED' ? 'btn-primary' : 'btn-outline-primary' }}">
                                    Open / Assigned
                                </a>
                                <a href="{{ route('tickets.department.index', ['status' => 'RESOLVED']) }}"
                                    class="btn btn-sm {{ ($activeFilter ?? '') === 'RESOLVED' ? 'btn-success' : 'btn-outline-success' }}">
                                    Resolved
                                </a>
                                <a href="{{ route('tickets.department.index', ['status' => 'REOPENED']) }}"
                                    class="btn btn-sm {{ ($activeFilter ?? '') === 'REOPENED' ? 'btn-warning' : 'btn-outline-warning' }}">
                                    Reopened
                                </a>
                                <a href="{{ route('tickets.department.index', ['status' => 'CLOSED']) }}"
                                    class="btn btn-sm {{ ($activeFilter ?? '') === 'CLOSED' ? 'btn-dark' : 'btn-outline-dark' }}">
                                    Closed
                                </a>
                                <a href="{{ route('tickets.department.index', ['status' => 'ESCALATED']) }}"
                                    class="btn btn-sm {{ ($activeFilter ?? '') === 'ESCALATED' ? 'btn-danger' : 'btn-outline-danger' }}">
                                    Escalated
                                </a>
                            </div>

                            <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>

                                                    @can('assign', $t)
                                                        @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 --}}
                                            @can('assign', $t)
                                                @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('pagination::bootstrap-5') }}
                                </div>

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

        </div>
    </div>
@endsection

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