@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Open Ticket</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Search for a customer and create a support ticket</p>
    </div>

    <!-- Success Message -->
    @if(session('success'))
    <div class="mb-6 bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded-lg">
        <div class="flex">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            <div>
                <strong class="text-green-800 dark:text-green-200">Success:</strong>
                <span class="text-green-700 dark:text-green-300">{{ session('success') }}</span>
            </div>
        </div>
    </div>
    @endif

    <!-- Validation Errors -->
    @if($errors->any())
    <div class="mb-6 bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-lg">
        <div class="flex">
            <svg class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="flex-1">
                <strong class="text-red-800 dark:text-red-200">Please fix the following errors:</strong>
                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside space-y-1">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <!-- Test Data Info -->
    <div class="mb-6 bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded-lg">
        <div class="flex items-start">
            <svg class="w-5 h-5 text-blue-500 mr-3 mt-0.5 flex-shrink-0" 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>
            <div class="flex-1">
                <strong class="text-blue-800 dark:text-blue-200">Test Customers Available</strong>
                <p class="text-blue-700 dark:text-blue-300 text-sm mt-1">Try: <code class="bg-white dark:bg-gray-800 px-1 rounded">johndoe</code>, <code class="bg-white dark:bg-gray-800 px-1 rounded">sarahjane</code>, <code class="bg-white dark:bg-gray-800 px-1 rounded">ahmadali</code>, <code class="bg-white dark:bg-gray-800 px-1 rounded">lisawong</code>, <code class="bg-white dark:bg-gray-800 px-1 rounded">davidtan</code></p>
            </div>
        </div>
    </div>

    <!-- Search Section -->
    <div class="card mb-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Search Customer</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="md:col-span-3">
                <input type="text" id="customerSearch" placeholder="Enter username, email, or phone number..."
                    class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"/>
            </div>
            <div>
                <button type="button" id="searchBtn" class="w-full h-full btn btn-primary text-base">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    Search
                </button>
            </div>
        </div>
        <div id="errorMessage" class="hidden mt-4 bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-lg">
            <div class="flex">
                <svg class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <div>
                    <strong class="text-red-800 dark:text-red-200">Error:</strong>
                    <span id="errorText" class="text-red-700 dark:text-red-300"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 text-center">
            <div class="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Searching customer...</p>
        </div>
    </div>

    <!-- Customer Info Section -->
    <div id="customerInfo" class="hidden card mb-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Customer Information</h2>
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Name</p>
                    <p class="font-semibold text-gray-900 dark:text-white" id="customerName"></p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Username</p>
                    <p class="font-semibold text-gray-900 dark:text-white" id="customerUsername"></p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Phone</p>
                    <p class="font-semibold text-gray-900 dark:text-white" id="customerPhone"></p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Email</p>
                    <p class="font-semibold text-gray-900 dark:text-white" id="customerEmail"></p>
                </div>
            </div>
        </div>

        <!-- Previous Tickets Section -->
        <div id="ticketHistorySection" class="hidden">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-yellow-800 dark:text-yellow-200 font-medium" id="ticketNoticeText"></span>
                </div>
                <button type="button" id="toggleHistoryBtn" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
                    Show History
                </button>
            </div>

            <!-- Ticket History Accordion -->
            <div id="ticketHistoryAccordion" class="hidden space-y-2 max-h-96 overflow-y-auto">
                <!-- Tickets will be inserted here by JS -->
            </div>
        </div>
    </div>

    <!-- Ticket Form -->
    <div id="ticketForm" class="hidden card">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Ticket Details</h2>
        <form action="{{ route('tickets.store') }}" method="POST">
            @csrf
            <input type="hidden" name="customer_pid" id="formCustomerPid" value="{{ old('customer_pid') }}">
            <input type="hidden" name="customer_name" id="formCustomerName" value="{{ old('customer_name') }}">
            <input type="hidden" name="customer_phone" id="formCustomerPhone" value="{{ old('customer_phone') }}">
            <input type="hidden" name="customer_email" id="formCustomerEmail" value="{{ old('customer_email') }}">

            <!-- Priority -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    Priority <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    @foreach(['low' => ['Low', 'gray'], 'medium' => ['Medium', 'blue'], 'high' => ['High', 'orange'], 'urgent' => ['Urgent', 'red']] as $value => $config)
                    <label class="priority-option flex items-center justify-center p-3 border-2 rounded-lg cursor-pointer transition
                        {{ old('priority', 'medium') === $value ? 'border-'.$config[1].'-500 bg-'.$config[1].'-50 dark:bg-'.$config[1].'-900/20' : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
                        <input type="radio" name="priority" value="{{ $value }}" class="hidden" {{ old('priority', 'medium') === $value ? 'checked' : '' }}>
                        <span class="px-3 py-1 rounded-full text-sm font-medium
                            @if($config[1] === 'gray') bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200
                            @elseif($config[1] === 'blue') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                            @elseif($config[1] === 'orange') bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200
                            @else bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                            @endif">
                            {{ $config[0] }}
                        </span>
                    </label>
                    @endforeach
                </div>
            </div>

            <!-- Product Types -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    Product Type <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    @foreach($productTypes as $product)
                    <label class="flex items-center p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <input type="checkbox" name="product_types[]" value="{{ $product->id }}" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"/>
                        <span class="ml-2 text-gray-900 dark:text-white">{{ $product->value }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            <!-- Issue Types -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    Issue Type <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach($issueTypes as $issue)
                    <label class="flex items-center p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <input type="checkbox" name="issue_types[]" value="{{ $issue->id }}" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"/>
                        <span class="ml-2 text-gray-900 dark:text-white">{{ $issue->value }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            <!-- Issue Explanation -->
            <div class="mb-6">
                <label for="issue_explanation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Issue Explanation <span class="text-red-500">*</span>
                </label>
                <textarea name="issue_explanation" id="issue_explanation" rows="4"
                    class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                    placeholder="Describe the issue in detail...">{{ old('issue_explanation') }}</textarea>
            </div>

            <!-- Action -->
            <div class="mb-6">
                <label for="action_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Action <span class="text-red-500">*</span>
                </label>
                <select name="action_id" id="action_id"
                    class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="">Select an action...</option>
                    @foreach($actions as $action)
                    <option value="{{ $action->id }}" data-action-value="{{ $action->value }}" {{ old('action_id') == $action->id ? 'selected' : '' }}>
                        {{ $action->value }}
                    </option>
                    @endforeach
                </select>
            </div>

            <!-- Solution Explanation (for Settle action) -->
            <div id="solutionExplanationField" class="mb-6 hidden">
                <label for="solution_explanation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Solution Explanation <span class="text-red-500">*</span>
                </label>
                <textarea name="solution_explanation" id="solution_explanation" rows="4"
                    class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                    placeholder="Describe how the issue was resolved...">{{ old('solution_explanation') }}</textarea>
            </div>

            <!-- Assignment Section (for non-Settle actions) -->
            <div id="assignmentSection" class="mb-6 hidden">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    Assign To (Optional)
                </label>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                    <div class="flex items-center gap-4 mb-4">
                        <label class="flex items-center">
                            <input type="radio" name="assign_type" value="" checked class="w-4 h-4 text-blue-600">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">No assignment</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assign_type" value="department" 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="departmentSelect" class="hidden">
                        <select name="assigned_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="userSelect" class="hidden">
                        <select name="assigned_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>
            </div>

            <!-- Submit -->
            <div class="flex justify-end gap-4">
                <button type="button" id="resetBtn" class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition">
                    Reset Form
                </button>
                <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    Create Ticket
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchBtn = document.getElementById('searchBtn');
    const searchInput = document.getElementById('customerSearch');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const errorMessage = document.getElementById('errorMessage');
    const errorText = document.getElementById('errorText');
    const customerInfo = document.getElementById('customerInfo');
    const ticketForm = document.getElementById('ticketForm');
    const resetBtn = document.getElementById('resetBtn');
    const ticketHistorySection = document.getElementById('ticketHistorySection');
    const ticketHistoryAccordion = document.getElementById('ticketHistoryAccordion');
    const toggleHistoryBtn = document.getElementById('toggleHistoryBtn');

    let currentCustomer = null;
    let historyVisible = false;

    // Search
    searchBtn.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', e => { if (e.key === 'Enter') performSearch(); });

    function performSearch() {
        const searchValue = searchInput.value.trim();
        if (!searchValue) {
            showError('Please enter a username, email, or phone number');
            return;
        }

        loadingOverlay.classList.remove('hidden');
        errorMessage.classList.add('hidden');

        fetch('{{ route("tickets.search") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ search: searchValue })
        })
        .then(response => response.json())
        .then(data => {
            loadingOverlay.classList.add('hidden');
            if (data.error) {
                showError(data.error);
                hideCustomerInfo();
            } else {
                currentCustomer = data.customer;
                showCustomerInfo(data.customer, data.ticket_count);
            }
        })
        .catch(error => {
            loadingOverlay.classList.add('hidden');
            showError('An error occurred. Please try again.');
        });
    }

    function showError(message) {
        errorText.textContent = message;
        errorMessage.classList.remove('hidden');
    }

    function showCustomerInfo(customer, ticketCount) {
        document.getElementById('customerName').textContent = customer.name || 'N/A';
        document.getElementById('customerUsername').textContent = customer.username || 'N/A';
        document.getElementById('customerPhone').textContent = customer.phone || 'N/A';
        document.getElementById('customerEmail').textContent = customer.email || 'N/A';

        document.getElementById('formCustomerPid').value = customer.pid;
        document.getElementById('formCustomerName').value = customer.name;
        document.getElementById('formCustomerPhone').value = customer.phone;
        document.getElementById('formCustomerEmail').value = customer.email;

        // Show ticket history if any
        if (ticketCount > 0) {
            document.getElementById('ticketNoticeText').textContent = `This customer has ${ticketCount} previous ticket${ticketCount > 1 ? 's' : ''}`;
            ticketHistorySection.classList.remove('hidden');
            loadTicketHistory(customer.pid);
        } else {
            ticketHistorySection.classList.add('hidden');
        }

        customerInfo.classList.remove('hidden');
        ticketForm.classList.remove('hidden');
        errorMessage.classList.add('hidden');
    }

    function loadTicketHistory(pid) {
        fetch(`/tickets/customer-history/${pid}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderTicketHistory(data.tickets);
            }
        });
    }

    function renderTicketHistory(tickets) {
        const statusColors = {
            'green': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
            'yellow': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
            'blue': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
            'orange': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
            'red': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
            'indigo': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
            'gray': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
        };

        ticketHistoryAccordion.innerHTML = tickets.map((ticket, idx) => `
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                <button type="button" onclick="toggleAccordion(${idx})" 
                    class="w-full px-4 py-3 flex items-center justify-between bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                    <div class="flex items-center gap-3">
                        <span class="font-medium text-blue-600 dark:text-blue-400">${ticket.ticket_number}</span>
                        <span class="text-sm text-gray-500">${ticket.created_at}</span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[ticket.status_color]}">${ticket.status_label}</span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[ticket.priority_color]}">${ticket.priority.charAt(0).toUpperCase() + ticket.priority.slice(1)}</span>
                    </div>
                    <svg id="chevron-${idx}" class="w-5 h-5 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div id="content-${idx}" class="hidden px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-600">
                    <div class="space-y-3 text-sm">
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Products:</span>
                            <span class="text-gray-900 dark:text-white">${ticket.product_types.join(', ') || 'N/A'}</span>
                        </div>
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Issues:</span>
                            <span class="text-gray-900 dark:text-white">${ticket.issue_types.join(', ') || 'N/A'}</span>
                        </div>
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Issue:</span>
                            <p class="text-gray-900 dark:text-white mt-1">${ticket.issue_explanation}</p>
                        </div>
                        ${ticket.solution_explanation ? `
                        <div>
                            <span class="text-gray-500 dark:text-gray-400">Solution:</span>
                            <p class="text-gray-900 dark:text-white mt-1">${ticket.solution_explanation}</p>
                        </div>
                        ` : ''}
                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-600">
                            <span>Created by: ${ticket.creator}</span>
                            ${ticket.resolved_at ? `<span>Resolved: ${ticket.resolved_at}</span>` : ''}
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }

    toggleHistoryBtn.addEventListener('click', () => {
        historyVisible = !historyVisible;
        ticketHistoryAccordion.classList.toggle('hidden', !historyVisible);
        toggleHistoryBtn.textContent = historyVisible ? 'Hide History' : 'Show History';
    });

    function hideCustomerInfo() {
        customerInfo.classList.add('hidden');
        ticketForm.classList.add('hidden');
        currentCustomer = null;
    }

    // Reset
    resetBtn.addEventListener('click', () => {
        if (confirm('Are you sure you want to reset the form?')) {
            document.querySelector('form').reset();
            document.getElementById('solutionExplanationField').classList.add('hidden');
            document.getElementById('assignmentSection').classList.add('hidden');
            document.getElementById('departmentSelect').classList.add('hidden');
            document.getElementById('userSelect').classList.add('hidden');
            updatePriorityStyles();
        }
    });

    // Action change handler
    const actionSelect = document.getElementById('action_id');
    const solutionField = document.getElementById('solutionExplanationField');
    const assignmentSection = document.getElementById('assignmentSection');

    actionSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const actionValue = selectedOption.getAttribute('data-action-value');

        if (actionValue === 'Settle') {
            solutionField.classList.remove('hidden');
            assignmentSection.classList.add('hidden');
        } else if (this.value) {
            solutionField.classList.add('hidden');
            assignmentSection.classList.remove('hidden');
        } else {
            solutionField.classList.add('hidden');
            assignmentSection.classList.add('hidden');
        }
    });

    // Assignment type handler
    document.querySelectorAll('input[name="assign_type"]').forEach(radio => {
        radio.addEventListener('change', function() {
            document.getElementById('departmentSelect').classList.toggle('hidden', this.value !== 'department');
            document.getElementById('userSelect').classList.toggle('hidden', this.value !== 'user');
        });
    });

    // Priority selection
    document.querySelectorAll('.priority-option').forEach(option => {
        option.addEventListener('click', function() {
            document.querySelectorAll('.priority-option').forEach(o => {
                o.classList.remove('border-gray-500', 'border-blue-500', 'border-orange-500', 'border-red-500', 'bg-gray-50', 'bg-blue-50', 'bg-orange-50', 'bg-red-50', 'dark:bg-gray-900/20', 'dark:bg-blue-900/20', 'dark:bg-orange-900/20', 'dark:bg-red-900/20');
                o.classList.add('border-gray-300', 'dark:border-gray-600');
            });
            
            const radio = this.querySelector('input');
            radio.checked = true;
            updatePriorityStyles();
        });
    });

    function updatePriorityStyles() {
        const colors = { low: 'gray', medium: 'blue', high: 'orange', urgent: 'red' };
        document.querySelectorAll('.priority-option').forEach(option => {
            const radio = option.querySelector('input');
            const color = colors[radio.value];
            option.classList.remove('border-gray-300', 'dark:border-gray-600');
            if (radio.checked) {
                option.classList.add(`border-${color}-500`, `bg-${color}-50`, `dark:bg-${color}-900/20`);
            } else {
                option.classList.add('border-gray-300', 'dark:border-gray-600');
            }
        });
    }
});

function toggleAccordion(idx) {
    const content = document.getElementById(`content-${idx}`);
    const chevron = document.getElementById(`chevron-${idx}`);
    content.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
}
</script>
@endsection