@extends('layouts.app')

@section('title', 'Ticket ' . $ticket->ticket_number)

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <div class="flex items-center gap-3">
                <a href="{{ route('tickets.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                </a>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $ticket->ticket_number }}</h1>
                @php
                    $priorityColors = [
                        'low' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
                        'medium' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                        'high' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                        'urgent' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                    ];
                    $statusColors = [
                        'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
                        'picked_up' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
                        'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                        'transferred' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                        'resolved' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                        'reopened' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                    ];
                @endphp
                <span class="px-3 py-1 rounded-full text-sm font-medium {{ $priorityColors[$ticket->priority] ?? 'bg-gray-100' }}">
                    {{ ucfirst($ticket->priority) }}
                </span>
                <span class="px-3 py-1 rounded-full text-sm font-medium {{ $statusColors[$ticket->status] ?? 'bg-gray-100' }}">
                    {{ $ticket->status_label }}
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Created {{ $ticket->created_at->diffForHumans() }} by {{ $ticket->creator->name ?? 'Unknown' }}</p>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-wrap gap-2">
            @if($ticket->canBePickedUpBy(auth()->user()))
            <button onclick="pickupTicket()" class="btn btn-primary">
                <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/>
                </svg>
                Pick Up
            </button>
            @endif

            @if($ticket->status !== 'resolved')
            <button onclick="openNoteModal()" class="btn btn-secondary">
                <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Add Note
            </button>
            <button onclick="openAssignModal()" class="btn btn-secondary">
                <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                Assign
            </button>
            <button onclick="openResolveModal()" class="btn bg-green-600 hover:bg-green-700 text-white">
                <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                Resolve
            </button>
            @else
            <button onclick="openReopenModal()" class="btn bg-yellow-600 hover:bg-yellow-700 text-white">
                <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Reopen
            </button>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Customer Info -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Customer Information</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Name</p>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $ticket->customer_name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Email</p>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $ticket->customer_email }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Phone</p>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $ticket->customer_phone }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">PID</p>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $ticket->customer_pid }}</p>
                    </div>
                </div>
            </div>

            <!-- Ticket Details -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Ticket Details</h3>
                
                <div class="space-y-4">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Product Types</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach($ticket->productTypes as $product)
                            <span class="px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                {{ $product->value }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Issue Types</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach($ticket->issueTypes as $issue)
                            <span class="px-3 py-1 rounded-full text-sm bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                {{ $issue->value }}
                            </span>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Issue Description</p>
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <p class="text-gray-900 dark:text-white whitespace-pre-wrap">{{ $ticket->issue_explanation }}</p>
                        </div>
                    </div>

                    @if($ticket->solution_explanation)
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Solution</p>
                        <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                            <p class="text-gray-900 dark:text-white whitespace-pre-wrap">{{ $ticket->solution_explanation }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Timeline -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Timeline</h3>
                
                <div class="flow-root">
                    <ul class="-mb-8">
                        @foreach($ticket->histories as $index => $history)
                        @php
                            $colors = [
                                'created' => ['bg-blue-500', 'bg-blue-100 dark:bg-blue-900/30'],
                                'assigned' => ['bg-purple-500', 'bg-purple-100 dark:bg-purple-900/30'],
                                'picked_up' => ['bg-indigo-500', 'bg-indigo-100 dark:bg-indigo-900/30'],
                                'note_added' => ['bg-gray-500', 'bg-gray-100 dark:bg-gray-700'],
                                'transferred' => ['bg-orange-500', 'bg-orange-100 dark:bg-orange-900/30'],
                                'resolved' => ['bg-green-500', 'bg-green-100 dark:bg-green-900/30'],
                                'reopened' => ['bg-red-500', 'bg-red-100 dark:bg-red-900/30'],
                            ];
                            $color = $colors[$history->action] ?? ['bg-gray-500', 'bg-gray-100'];
                        @endphp
                        <li>
                            <div class="relative pb-8">
                                @if(!$loop->last)
                                <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-700" aria-hidden="true"></span>
                                @endif
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full {{ $color[0] }} flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                            @switch($history->action)
                                                @case('created')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                                    @break
                                                @case('assigned')
                                                @case('transferred')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                                    @break
                                                @case('picked_up')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/></svg>
                                                    @break
                                                @case('note_added')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                                    @break
                                                @case('resolved')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                                    @break
                                                @case('reopened')
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                                    @break
                                                @default
                                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                            @endswitch
                                        </span>
                                    </div>
                                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                        <div class="flex-1">
                                            <p class="text-sm text-gray-900 dark:text-white font-medium">
                                                {{ $history->action_label }}
                                                <span class="text-gray-500 dark:text-gray-400 font-normal">by {{ $history->performer->name ?? 'System' }}</span>
                                            </p>
                                            @if($history->toDepartment || $history->toUser)
                                            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
                                                @if($history->fromDepartment || $history->fromUser)
                                                From: {{ $history->fromDepartment->name ?? '' }} {{ $history->fromUser->name ?? '' }} →
                                                @endif
                                                To: {{ $history->toDepartment->name ?? '' }} {{ $history->toUser->name ?? '' }}
                                            </p>
                                            @endif
                                            @if($history->notes)
                                            <div class="mt-2 p-3 rounded-lg {{ $color[1] }}">
                                                <p class="text-sm text-gray-700 dark:text-gray-200 whitespace-pre-wrap">{{ $history->notes }}</p>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400">
                                            <time datetime="{{ $history->created_at->toIso8601String() }}">
                                                {{ $history->created_at->format('M d, Y') }}
                                                <br>{{ $history->created_at->format('h:i A') }}
                                            </time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Assignment Info -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Assignment</h3>
                <div class="space-y-3">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Department</p>
                        <p class="font-medium text-gray-900 dark:text-white">
                            {{ $ticket->assignedDepartment->name ?? 'Not assigned' }}
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Assigned To</p>
                        <p class="font-medium text-gray-900 dark:text-white">
                            {{ $ticket->assignedUser->name ?? 'Not assigned' }}
                        </p>
                    </div>
                    @if($ticket->pickedUpByUser)
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Picked Up By</p>
                        <p class="font-medium text-gray-900 dark:text-white">
                            {{ $ticket->pickedUpByUser->name }}
                            <span class="text-sm text-gray-500">({{ $ticket->picked_up_at->diffForHumans() }})</span>
                        </p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Timestamps -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Timestamps</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Created</span>
                        <span class="text-gray-900 dark:text-white">{{ $ticket->created_at->format('M d, Y H:i') }}</span>
                    </div>
                    @if($ticket->picked_up_at)
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Picked Up</span>
                        <span class="text-gray-900 dark:text-white">{{ $ticket->picked_up_at->format('M d, Y H:i') }}</span>
                    </div>
                    @endif
                    @if($ticket->resolved_at)
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Resolved</span>
                        <span class="text-gray-900 dark:text-white">{{ $ticket->resolved_at->format('M d, Y H:i') }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400">Last Updated</span>
                        <span class="text-gray-900 dark:text-white">{{ $ticket->updated_at->format('M d, Y H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Note Modal -->
<div id="noteModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Add Note</h3>
        </div>
        <form id="noteForm" method="POST" action="{{ route('tickets.add-note', $ticket) }}">
            @csrf
            <div class="p-6">
                <textarea name="notes" rows="4" required placeholder="Enter your note..."
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                <button type="button" onclick="closeModal('noteModal')" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Note</button>
            </div>
        </form>
    </div>
</div>

<!-- Assign Modal -->
<div id="assignModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Assign Ticket</h3>
        </div>
        <form id="assignForm" method="POST" action="{{ route('tickets.assign', $ticket) }}">
            @csrf
            <div class="p-6 space-y-4">
                <div class="flex gap-4">
                    <label class="flex items-center">
                        <input type="radio" name="assign_type" value="department" checked class="w-4 h-4 text-blue-600">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Department</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="assign_type" value="user" class="w-4 h-4 text-blue-600">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Specific Person</span>
                    </label>
                </div>
                <div id="assignDeptSelect">
                    <select name="department_id" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="">Select department...</option>
                        @foreach($departments as $dept)
                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div id="assignUserSelect" class="hidden">
                    <select name="user_id" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="">Select person...</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->department->name ?? 'No Dept' }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">Notes (optional)</label>
                    <textarea name="notes" rows="2" placeholder="Reason for assignment..."
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                <button type="button" onclick="closeModal('assignModal')" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Assign</button>
            </div>
        </form>
    </div>
</div>

<!-- Resolve Modal -->
<div id="resolveModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Resolve Ticket</h3>
        </div>
        <form method="POST" action="{{ route('tickets.resolve', $ticket) }}">
            @csrf
            <div class="p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Solution Explanation *</label>
                <textarea name="solution_explanation" rows="4" required placeholder="Describe how the issue was resolved..."
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                <button type="button" onclick="closeModal('resolveModal')" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn bg-green-600 hover:bg-green-700 text-white">Resolve Ticket</button>
            </div>
        </form>
    </div>
</div>

<!-- Reopen Modal -->
<div id="reopenModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Reopen Ticket</h3>
        </div>
        <form method="POST" action="{{ route('tickets.reopen', $ticket) }}">
            @csrf
            <div class="p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason for Reopening *</label>
                <textarea name="reason" rows="4" required placeholder="Why does this ticket need to be reopened?"
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                <button type="button" onclick="closeModal('reopenModal')" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn bg-yellow-600 hover:bg-yellow-700 text-white">Reopen Ticket</button>
            </div>
        </form>
    </div>
</div>

<script>
function openNoteModal() { document.getElementById('noteModal').classList.remove('hidden'); }
function openAssignModal() { document.getElementById('assignModal').classList.remove('hidden'); }
function openResolveModal() { document.getElementById('resolveModal').classList.remove('hidden'); }
function openReopenModal() { document.getElementById('reopenModal').classList.remove('hidden'); }
function closeModal(id) { document.getElementById(id).classList.add('hidden'); }

// Close modals on outside click
['noteModal', 'assignModal', 'resolveModal', 'reopenModal'].forEach(id => {
    document.getElementById(id)?.addEventListener('click', function(e) {
        if (e.target === this) closeModal(id);
    });
});

// Assign type toggle
document.querySelectorAll('#assignModal input[name="assign_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('assignDeptSelect').classList.toggle('hidden', this.value !== 'department');
        document.getElementById('assignUserSelect').classList.toggle('hidden', this.value !== 'user');
    });
});

function pickupTicket() {
    fetch('{{ route("tickets.pickup", $ticket) }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Failed to pick up ticket');
        }
    });
}
</script>
@endsection