@extends('layouts.app')

@section('title', 'My Assigned Tickets')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <i class="fas fa-user-check fa-2x text-info"></i>
                                </div>
                                <div>
                                    <h3 class="font-weight-bold mb-0 text-dark">My Assigned Tickets</h3>
                                    <p class="mb-0 text-muted small">View all tickets assigned to you</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-2 mt-lg-0">
                            <button type="button" onclick="history.back()" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Tickets
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-2 col-md-6 mb-3 stat-card">
            <div class="card bg-primary text-white w-100">
                <div class="card-body">
                    <h4>{{ $stats['total'] }}</h4>
                    <p class="mb-0">Total Assigned</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-6 mb-3 stat-card">
            <div class="card bg-success text-white w-100">
                <div class="card-body">
                    <h4>{{ $stats['open'] }}</h4>
                    <p class="mb-0">Open</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-6 mb-3 stat-card">
            <div class="card bg-warning text-white w-100">
                <div class="card-body">
                    <h4>{{ $stats['in_progress'] }}</h4>
                    <p class="mb-0">In Progress</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-6 mb-3 stat-card">
            <div class="card bg-info text-white w-100">
                <div class="card-body">
                    <h4>{{ $stats['resolved'] }}</h4>
                    <p class="mb-0">Resolved</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-6 mb-3 stat-card">
            <div class="card bg-secondary text-white w-100">
                <div class="card-body">
                    <h4>{{ $stats['closed'] }}</h4>
                    <p class="mb-0">Closed</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('reseller-tickets.assigned-tickets') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Search</label>
                                    <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Ticket number, subject, reseller...">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Status</label>
                                    <select name="status" class="form-control">
                                        <option value="">All</option>
                                        <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Priority</label>
                                    <select name="priority" class="form-control">
                                        <option value="">All</option>
                                        <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Category</label>
                                    <select name="category_id" class="form-control">
                                        <option value="">All</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">Filter</button>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('reseller-tickets.assigned-tickets') }}" class="btn btn-secondary btn-block">Reset</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Assigned Tickets Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">My Assigned Tickets ({{ $stats['total'] }})</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Ticket #</th>
                                    <th>Reseller</th>
                                    <th>Subject</th>
                                    <th>Category</th>
                                    <th>Sub Category</th>
                                    <th>Priority</th>
                                    <th>Status</th>
                                    <th>Assign To</th>
                                    <th>Assigned At</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($assignedTickets as $ticket)
                                    @php
                                        // Current active assignment for this employee
                                        $currentAssignment = DB::table('reseller_ticket_employee_assignments')
                                            ->where('reseller_ticket_id', $ticket->id)
                                            ->where('employee_id', $currentEmployee->id)
                                            ->where('is_active', true)
                                            ->first();
                                        
                                        // Was it forwarded (previous inactive assignment exists for someone else)?
                                        $hasPreviousAssignment = DB::table('reseller_ticket_employee_assignments')
                                            ->where('reseller_ticket_id', $ticket->id)
                                            ->where('employee_id', '!=', $currentEmployee->id)
                                            ->where('is_active', false)
                                            ->exists();
                                        
                                        $assignedBy = null;
                                        if ($currentAssignment && $currentAssignment->assigned_by) {
                                            $assignedByUser = \App\Models\User::find($currentAssignment->assigned_by);
                                            $assignedBy = $assignedByUser ? $assignedByUser->name : 'N/A';
                                        }
                                    @endphp
                                    <tr>
                                        <td>
                                            <a href="{{ route('reseller-tickets.show', $ticket) }}" class="btn btn-link text-primary font-weight-bold">
                                                {{ $ticket->ticket_number }}
                                            </a>
                                        </td>
                                        <td>
                                            @if($ticket->user)
                                                @if($ticket->user->reseller && $ticket->user->reseller->name)
                                                    {{ $ticket->user->reseller->name }}
                                                @elseif($ticket->user->company_name)
                                                    {{ $ticket->user->company_name }}
                                                @else
                                                    {{ $ticket->user->name ?? 'N/A' }}
                                                @endif
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td>{{ Str::limit($ticket->subject ?? $ticket->description, 50) }}</td>
                                        <td>{{ $ticket->category->name ?? 'N/A' }}</td>
                                        <td>{{ $ticket->subcategory->name ?? 'N/A' }}</td>
                                        <td>
                                            @php
                                                $priorityColors = [
                                                    'low' => '#6c757d',
                                                    'medium' => '#17a2b8',
                                                    'high' => '#ffc107',
                                                    'urgent' => '#dc3545'
                                                ];
                                                $priorityColor = $priorityColors[$ticket->priority] ?? '#6c757d';
                                            @endphp
                                            <span style="display: inline-block; padding: 4px 12px; background-color: {{ $priorityColor }}; color: white; border-radius: 12px; font-size: 0.85em;">
                                                {{ ucfirst($ticket->priority) }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $statusLabel = in_array($ticket->status, ['resolved', 'closed'])
                                                    ? 'Solved'
                                                    : ucfirst(str_replace('_', ' ', $ticket->status));
                                                $clickableStatuses = ['in_progress', 'upstream_issues', 'pop_issues', 'transmission_issues'];
                                                $isClickable = in_array($ticket->status, $clickableStatuses);
                                                $isSolved = $ticket->resolved_at || $ticket->status === 'resolved' || $ticket->status === 'closed';
                                                $statusColors = [
                                                    'in_progress' => '#ffc107',
                                                    'upstream_issues' => '#007bff',
                                                    'pop_issues' => '#fd7e14',
                                                    'transmission_issues' => '#6f42c1'
                                                ];
                                                $statusColor = $statusColors[$ticket->status] ?? '#6c757d';
                                            @endphp
                                            @if($isClickable && !$isSolved)
                                                <span style="display: inline-block; padding: 4px 12px; background-color: {{ $statusColor }}; color: white; border-radius: 12px; font-size: 0.85em; cursor: pointer;" 
                                                      onclick="openSolvedModal({{ $ticket->id }})">
                                                    {{ $statusLabel }}
                                                </span>
                                            @elseif($isClickable && $isSolved)
                                                <span style="display: inline-block; padding: 4px 12px; background-color: {{ $statusColor }}; color: white; border-radius: 12px; font-size: 0.85em; cursor: not-allowed; opacity: 0.6;" 
                                                      title="Ticket is already solved"
                                                      onclick="return false;">
                                                    {{ $statusLabel }}
                                                </span>
                                            @else
                                                <span style="display: inline-block; padding: 4px 12px; background-color: {{ $ticket->status == 'open' ? '#28a745' : '#6c757d' }}; color: white; border-radius: 12px; font-size: 0.85em;">
                                                    {{ $statusLabel }}
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($currentAssignment)
                                                @if($ticket->resolved_at)
                                                    {{-- Ticket is solved, show Solved instead of Forwarded --}}
                                                    <button type="button"
                                                            class="btn btn-sm"
                                                            style="padding: 4px 10px; background:#6c757d; color:#fff; border-radius:4px; font-size:0.85em;"
                                                            title="Solved"
                                                            disabled>
                                                        <i class="fas fa-check"></i> Solved
                                                    </button>
                                                @elseif($hasPreviousAssignment)
                                                    <button type="button"
                                                            class="btn btn-sm"
                                                            style="padding: 4px 10px; background:#6c757d; color:#fff; border-radius:4px; font-size:0.85em;"
                                                            title="Forwarded"
                                                            data-target="#assignModal{{ $ticket->id }}"
                                                            data-toggle="modal">
                                                        <i class="fas fa-share-alt"></i> Forwarded
                                                    </button>
                                                @else
                                                    <button type="button"
                                                            class="btn btn-sm"
                                                            style="padding: 4px 10px; background:#007bff; color:#fff; border-radius:4px; font-size:0.85em;"
                                                            title="Re-Assign{{ $assignedBy ? ' | Assigned By: ' . $assignedBy : '' }}"
                                                            data-target="#assignModal{{ $ticket->id }}"
                                                            data-toggle="modal">
                                                        <i class="fas fa-user-check"></i> Re-Assign
                                                    </button>
                                                @endif
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($currentAssignment && $currentAssignment->assigned_at)
                                                {{ \Carbon\Carbon::parse($currentAssignment->assigned_at)->format('Y-m-d H:i') }}
                                                <br><small class="text-muted">{{ \Carbon\Carbon::parse($currentAssignment->assigned_at)->diffForHumans() }}</small>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td>
                                            {{ $ticket->created_at->format('Y-m-d H:i') }}
                                            <br><small class="text-muted">{{ $ticket->created_at->diffForHumans() }}</small>
                                        </td>
                                        <td>
                                            <a href="{{ route('reseller-tickets.show', $ticket) }}" class="btn btn-sm btn-info" title="View">
                                                <i class="fas fa-eye"></i> View
                                            </a>
                                            <a href="{{ route('reseller-tickets.edit', $ticket) }}" class="btn btn-sm btn-warning" title="Edit">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center">No assigned tickets found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $assignedTickets->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Solved Modal for each ticket -->
@foreach($assignedTickets as $ticket)
@php
    $clickableStatuses = ['in_progress', 'upstream_issues', 'pop_issues', 'transmission_issues'];
    $shouldShowModal = in_array($ticket->status, $clickableStatuses);
@endphp
@if($shouldShowModal)
<div class="modal fade" id="solvedModal{{ $ticket->id }}" tabindex="-1" role="dialog" aria-labelledby="solvedModalLabel{{ $ticket->id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="solvedModalLabel{{ $ticket->id }}">Press Yes if solved</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="solvedForm{{ $ticket->id }}">
                    @csrf
                    <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">
                    <div class="form-group">
                        <label><strong>Duration Time:</strong></label>
                        <input type="text" class="form-control" id="uptime{{ $ticket->id }}" name="uptime" readonly style="background-color: #e9ecef;">
                    </div>
                    <div class="form-group">
                        <label for="status{{ $ticket->id }}"><strong>Status:</strong></label>
                        <select class="form-control" id="status{{ $ticket->id }}" name="status">
                            @php
                                $restrictedStatuses = ['upstream_issues', 'pop_issues', 'transmission_issues'];
                                $isRestricted = in_array($ticket->status, $restrictedStatuses);
                            @endphp
                            @if($isRestricted)
                                {{-- If ticket is in restricted status, default to current status, then allow resolved or closed --}}
                                <option value="{{ $ticket->status }}" selected>{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</option>
                                <option value="resolved">Resolved</option>
                                <option value="closed">Closed</option>
                            @else
                                {{-- Normal status options --}}
                                <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                <option value="upstream_issues">Upstream Issues</option>
                                <option value="pop_issues">POP Issues</option>
                                <option value="transmission_issues">Transmission Issues</option>
                            @endif
                        </select>
                    </div>
                    
                    <div class="form-group" id="issueFieldGroup{{ $ticket->id }}" style="display: none;">
                        <label for="issue_id{{ $ticket->id }}"><strong>Issue:</strong></label>
                        <div class="input-group">
                            <select class="form-control" id="issue_id{{ $ticket->id }}" name="issue_id">
                                <option value="">Select Issue</option>
                                @if(isset($issues))
                                    @foreach($issues as $issue)
                                        <option value="{{ $issue->id }}" data-ticket-status="{{ $issue->ticket_status ?? '' }}" {{ old('issue_id', $ticket->issue_id) == $issue->id ? 'selected' : '' }}>
                                            {{ $issue->name }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#addIssueModal{{ $ticket->id }}" title="Add New Issue">
                                    <i class="fas fa-plus"></i> Add
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="resolution_notes{{ $ticket->id }}"><strong>Resolution Notes <span class="text-danger">*</span></strong></label>
                        <textarea class="form-control" id="resolution_notes{{ $ticket->id }}" name="resolution_notes" rows="3" placeholder="Add any notes about the resolution..." required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="markAsSolved({{ $ticket->id }})">Yes, Solved</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Issue Modal -->
<div class="modal fade" id="addIssueModal{{ $ticket->id }}" tabindex="-1" role="dialog" aria-labelledby="addIssueModalLabel{{ $ticket->id }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addIssueModalLabel{{ $ticket->id }}">Add New Issue</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addIssueForm{{ $ticket->id }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="new_issue_name{{ $ticket->id }}">Issue Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="new_issue_name{{ $ticket->id }}" name="name" required placeholder="Enter issue name">
                    </div>
                    <div class="form-group">
                        <label for="new_issue_description{{ $ticket->id }}">Description</label>
                        <textarea class="form-control" id="new_issue_description{{ $ticket->id }}" name="description" rows="3" placeholder="Enter description (optional)"></textarea>
                    </div>
                    <div id="issueError{{ $ticket->id }}" class="alert alert-danger" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Create Issue
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endforeach

<!-- Assign Modal for each ticket -->
@foreach($assignedTickets as $ticket)
@php
    // Current assignment details for preselects
    $currentAssignment = DB::table('reseller_ticket_employee_assignments')
        ->where('reseller_ticket_id', $ticket->id)
        ->where('is_active', true)
        ->first();
    $currentDepartmentId = $currentAssignment ? $currentAssignment->department_id : null;
    $currentEmployeeId = $currentAssignment ? $currentAssignment->employee_id : null;
    $hasExistingAssignment = DB::table('reseller_ticket_employee_assignments')
        ->where('reseller_ticket_id', $ticket->id)
        ->exists();
    
    // Department options
    $currentUser = auth()->user();
    $checkSuperAdmin = $currentUser->role === 'super_admin' || 
                       in_array(strtolower($currentUser->role), ['super_admin', 'super-admin', 'super admin']) ||
                       in_array($currentUser->email, ['mkzwasim@gmail.com', 'sahrior@gmail.com', 'wasim@mkz.com.bd']);
    if ($checkSuperAdmin || (isset($isSuperAdmin) && $isSuperAdmin)) {
        $departments = \App\Models\Department::where('is_active', true)
            ->orderBy('name')
            ->get();
    } else {
        if ($currentUser->branch_id) {
            $departments = \App\Models\Department::where('is_active', true)
                ->where('isp_id', '=', $currentUser->branch_id)
                ->whereNotNull('isp_id')
                ->orderBy('name')
                ->get();
        } else {
            $departments = collect();
        }
        if ($departments->isEmpty() && !empty($ticket->isp_id)) {
            $departments = \App\Models\Department::where('is_active', true)
                ->where('isp_id', '=', $ticket->isp_id)
                ->whereNotNull('isp_id')
                ->orderBy('name')
                ->get();
        }
        if ($departments->isEmpty()) {
            $departments = \App\Models\Department::where('is_active', true)
                ->orderBy('name')
                ->get();
        }
    }
    $employees = $currentDepartmentId
        ? \App\Models\Employee::where('department_id', $currentDepartmentId)->where('status', true)->orderBy('name')->get()
        : collect();
@endphp
<div class="modal fade" id="assignModal{{ $ticket->id }}" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel{{ $ticket->id }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignModalLabel{{ $ticket->id }}">Assign Ticket: {{ $ticket->ticket_number }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller-tickets.assign', $ticket->id) }}" method="POST" id="assignForm{{ $ticket->id }}">
                @csrf
                @method('POST')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="assigned_department_id{{ $ticket->id }}">Assign To Department <span class="text-danger">*</span></label>
                        <select name="assigned_department_id" id="assigned_department_id{{ $ticket->id }}" class="form-control" required onchange="loadEmployeesByDepartment({{ $ticket->id }}, this.value)">
                            <option value="">Select Department</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" {{ $currentDepartmentId == $department->id ? 'selected' : '' }}>
                                    {{ $department->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="assigned_employee_id{{ $ticket->id }}">Assign To Employee</label>
                        <select name="assigned_employee_id" id="assigned_employee_id{{ $ticket->id }}" class="form-control">
                            <option value="">Select Employee</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ $currentEmployeeId == $employee->id ? 'selected' : '' }}>
                                    {{ $employee->name }} ({{ $employee->employee_id ?? 'N/A' }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @if($hasExistingAssignment)
                    <div class="form-group">
                        <label for="notes{{ $ticket->id }}">Note <span class="text-danger">*</span></label>
                        <textarea name="notes" id="notes{{ $ticket->id }}" class="form-control" rows="3" placeholder="Add a note about this reassignment or forwarding..." required></textarea>
                        <small class="form-text text-muted">This note will be saved with the assignment record.</small>
                    </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Assign</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<script>
// Load employees by department
function loadEmployeesByDepartment(ticketId, departmentId) {
    const employeeSelect = document.getElementById('assigned_employee_id' + ticketId);
    
    employeeSelect.innerHTML = '<option value="">Select Employee</option>';
    
    if (!departmentId) {
        return;
    }
    
    fetch(`/api/departments/${departmentId}/employees`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.employees) {
                data.employees.forEach(employee => {
                    const option = document.createElement('option');
                    option.value = employee.id;
                    option.textContent = `${employee.name} (${employee.employee_id || 'N/A'})`;
                    employeeSelect.appendChild(option);
                });
            }
        })
        .catch(error => {
            console.error('Error loading employees:', error);
        });
}

// Handle form submission via AJAX
document.addEventListener('DOMContentLoaded', function() {
    @foreach($assignedTickets as $ticket)
    $('#assignModal{{ $ticket->id }}').on('shown.bs.modal', function() {
        const departmentSelect = document.getElementById('assigned_department_id{{ $ticket->id }}');
        if (departmentSelect && departmentSelect.value) {
            loadEmployeesByDepartment({{ $ticket->id }}, departmentSelect.value);
        }
    });
    
    const assignForm{{ $ticket->id }} = document.getElementById('assignForm{{ $ticket->id }}');
    if (assignForm{{ $ticket->id }}) {
        assignForm{{ $ticket->id }}.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    $('#assignModal{{ $ticket->id }}').modal('hide');
                    location.reload();
                } else {
                    alert(data.message || 'Failed to assign ticket');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while assigning the ticket');
            });
        });
    }
    @endforeach
});

// Load ticket data when modal opens
// Open solved modal and load ticket data
function openSolvedModal(ticketId, complainedNumber) {
    // Load ticket data first
    loadTicketData(ticketId);
    
    // Open modal using jQuery/Bootstrap
    if (typeof jQuery !== 'undefined') {
        jQuery('#solvedModal' + ticketId).modal('show');
    } else if (typeof $ !== 'undefined') {
        $('#solvedModal' + ticketId).modal('show');
    } else {
        // Fallback if jQuery not available
        const modal = document.getElementById('solvedModal' + ticketId);
        if (modal) {
            modal.style.display = 'block';
            modal.classList.add('show');
            document.body.classList.add('modal-open');
            
            // Add backdrop
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.id = 'solved-modal-backdrop-' + ticketId;
            document.body.appendChild(backdrop);
        }
    }
}

function loadTicketData(ticketId) {
    if (typeof jQuery === 'undefined' && typeof $ === 'undefined') {
        return;
    }
    
    const $jq = typeof jQuery !== 'undefined' ? jQuery : $;
    
    $jq.ajax({
        url: '/api/get-ticket-duration',
        method: 'GET',
        data: { ticket_id: ticketId },
        success: function(response) {
            if (response.success && response.duration) {
                $jq('#uptime' + ticketId).val(response.duration);
            } else {
                $jq('#uptime' + ticketId).val('N/A');
            }
        },
        error: function() {
            $jq('#uptime' + ticketId).val('N/A');
        }
    });
}

// Mark ticket as solved
function markAsSolved(ticketId) {
    const form = $('#solvedForm' + ticketId);
    const resolutionNotes = $('#resolution_notes' + ticketId).val().trim();
    
    // Validate Resolution Notes is required
    if (!resolutionNotes) {
        alert('Resolution Notes is required. Please fill out this field.');
        $('#resolution_notes' + ticketId).focus();
        return false;
    }
    
    // Check HTML5 validation
    if (!form[0].checkValidity()) {
        form[0].reportValidity();
        return false;
    }
    
    const formData = form.serialize();
    
    $.ajax({
        url: '/reseller-tickets/' + ticketId + '/mark-solved',
        method: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                $('#solvedModal' + ticketId).modal('hide');
                location.reload();
            } else {
                alert('Error: ' + (response.message || 'Failed to mark as solved'));
            }
        },
        error: function(xhr) {
            const errorMsg = xhr.responseJSON?.message || 'Failed to mark as solved';
            alert('Error: ' + errorMsg);
        }
    });
}

// Handle add issue form submission
@foreach($assignedTickets as $ticket)
@php
    $clickableStatuses = ['in_progress', 'upstream_issues', 'pop_issues', 'transmission_issues'];
    $shouldShowModal = in_array($ticket->status, $clickableStatuses);
@endphp
@if($shouldShowModal)
$(document).ready(function() {
    $('#addIssueForm{{ $ticket->id }}').off('submit').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const ticketId = {{ $ticket->id }};
        const form = $(this);
        const errorDiv = $('#issueError' + ticketId);
        const submitBtn = form.find('button[type="submit"]');
        
        // Get form values
        const name = $('#new_issue_name' + ticketId).val().trim();
        const description = $('#new_issue_description' + ticketId).val().trim();
        
        // Validation
        if (!name) {
            errorDiv.text('Issue name is required').show();
            return false;
        }
        
        // Hide previous errors
        errorDiv.hide().text('');
        
        // Disable submit button to prevent double submission
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Creating...');
        
        // Get CSRF token
        const csrfToken = $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val();
        console.log('CSRF Token:', csrfToken);
        
        // Prepare form data
        const formData = {
            name: name,
            description: description || '',
            _token: csrfToken
        };
        
        console.log('Sending data:', formData);
        console.log('API URL: /api/reseller-ticket-issues/quick-create');
        
        $.ajax({
            url: '/api/reseller-ticket-issues/quick-create',
            method: 'POST',
            data: formData,
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                console.log('API Success Response:', response);
                
                if (response.success && response.issue) {
                    // Add new option to select dropdown
                    const select = $('#issue_id' + ticketId);
                    
                    // Check if option already exists
                    const existingOption = select.find('option[value="' + response.issue.id + '"]');
                    if (existingOption.length === 0) {
                        const newOption = $('<option>')
                            .val(response.issue.id)
                            .text(response.issue.name)
                            .prop('selected', true);
                        select.append(newOption);
                    } else {
                        existingOption.prop('selected', true);
                    }
                    
                    // Reset form
                    form[0].reset();
                    
                    // Close modal using Bootstrap 4 method
                    $('#addIssueModal' + ticketId).modal('hide');
                    
                    // Show success message briefly
                    const successMsg = $('<div class="alert alert-success alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 10000;">Issue created successfully!<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $('body').append(successMsg);
                    setTimeout(function() {
                        successMsg.alert('close');
                    }, 3000);
                } else {
                    errorDiv.text(response.message || 'Failed to create issue').show();
                    submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Create Issue');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error Details:');
                console.error('Status:', status);
                console.error('Error:', error);
                console.error('Response:', xhr.responseText);
                console.error('XHR Object:', xhr);
                
                let errorMsg = 'Failed to create issue';
                
                if (xhr.responseJSON) {
                    console.log('Response JSON:', xhr.responseJSON);
                    if (xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseJSON.errors) {
                        const errors = xhr.responseJSON.errors;
                        errorMsg = Object.values(errors).flat().join('<br>');
                    }
                } else if (xhr.responseText) {
                    try {
                        const parsed = JSON.parse(xhr.responseText);
                        if (parsed.message) {
                            errorMsg = parsed.message;
                        }
                    } catch (e) {
                        errorMsg = xhr.responseText.substring(0, 200);
                    }
                }
                
                errorDiv.html('<strong>Error:</strong> ' + errorMsg).show();
                submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Create Issue');
            },
            complete: function() {
                // Re-enable submit button after a delay
                setTimeout(function() {
                    submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Create Issue');
                }, 1000);
            }
        });
        
        return false;
    });
});
@endif
@endforeach
</script>
@endsection

@section('styles')
<style>
.issue-dropdown-results {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    background: white !important;
    border: 1px solid #ced4da !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    width: 100% !important;
}

.issue-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.issue-dropdown-item:hover,
.issue-dropdown-item.highlighted {
    background-color: #e9ecef;
}

.issue-dropdown-item:last-child {
    border-bottom: none;
}

.issue-dropdown-item .issue-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.issue-dropdown-item .issue-description {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-dropdown-item.no-results {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    cursor: default;
}

.issue-dropdown-item.no-results:hover {
    background-color: white;
}
.stat-card .card-body{padding:.75rem 1rem}
.stat-card h4{margin:0;font-size:1.25rem}
.stat-card p{margin:0;font-size:.9rem}
</style>
@endsection

@push('scripts')
<script>
// Show/hide Issue field based on Status selection for assigned tickets
@foreach($assignedTickets as $ticket)
@php
    $clickableStatuses = ['in_progress', 'upstream_issues', 'pop_issues', 'transmission_issues'];
    $shouldShowModal = in_array($ticket->status, $clickableStatuses);
@endphp
@if($shouldShowModal)
(function() {
    const ticketId = {{ $ticket->id }};
    
    function initStatusHandler() {
        if (typeof jQuery === 'undefined') {
            setTimeout(initStatusHandler, 100);
            return;
        }
        
        jQuery(document).ready(function($) {
            const statusSelect = $('#status' + ticketId);
            const issueFieldGroup = $('#issueFieldGroup' + ticketId);
            
            if (statusSelect.length === 0 || issueFieldGroup.length === 0) {
                return;
            }
            
            // Function to filter issues based on selected status
            function filterIssues() {
                const selectedStatus = statusSelect.val();
                const issueSelect = $('#issue_id' + ticketId);
                
                if (issueSelect.length === 0) return;
                
                // Show/hide options based on ticket_status match
                issueSelect.find('option').each(function() {
                    const $option = $(this);
                    const optionStatus = $option.data('ticket-status');
                    
                    // Always show "Select Issue" option
                    if ($option.val() === '') {
                        return;
                    }
                    
                    // If status matches or no status filter, show the option
                    if (selectedStatus && optionStatus === selectedStatus) {
                        $option.show();
                    } else if (!selectedStatus) {
                        $option.show();
                    } else {
                        $option.hide();
                    }
                });
                
                // Reset selection if current selection is hidden
                const currentValue = issueSelect.val();
                if (currentValue) {
                    const currentOption = issueSelect.find('option[value="' + currentValue + '"]');
                    if (currentOption.is(':hidden')) {
                        issueSelect.val('');
                    }
                }
            }
            
            // Function to toggle Issue field visibility
            function toggleIssueField() {
                const selectedStatus = statusSelect.val();
                const restrictedStatuses = ['upstream_issues', 'pop_issues', 'transmission_issues'];
                
                // Show Issue field only for restricted statuses
                if (restrictedStatuses.includes(selectedStatus)) {
                    issueFieldGroup.show();
                    filterIssues(); // Filter issues when field is shown
                } else {
                    // Hide Issue field for resolved/closed
                    issueFieldGroup.hide();
                }
            }
            
            // Set initial state
            toggleIssueField();
            
            // Listen for status changes
            statusSelect.on('change', function() {
                toggleIssueField();
            });
        });
    }
    
    initStatusHandler();
})();
@endif
@endforeach
</script>
@endpush