@extends('layouts.app')

@section('title', 'Support & Ticketing')

@section('content')
<div class="container-fluid">

    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="jumbotron jumbotron-fluid custom-header-bg text-white rounded-lg">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center mb-3">
                                <div class="mr-3">
                                    <i class="fas fa-question-circle fa-3x text-warning"></i>
                                </div>
                                <div>
                                    <h1 class="display-5 font-weight-bold mb-0">Support & Ticketing</h1>
                                    <p class="lead mb-0">Daily Support Ticket Management System</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-3 mt-lg-0">
                            <div class="action-buttons-small">
                                <a href="{{ route('tickets.create') }}" class="action-btn-small btn-new-ticket">
                                    <i class="fas fa-plus"></i>Open New Ticket
                                </a>
                                <button class="action-btn-small btn-refresh-data" onclick="location.reload()">
                                    <i class="fas fa-sync-alt"></i>Refresh Data
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0">
                <div class="card-body p-3">
                    <ul class="nav nav-pills nav-fill" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active d-flex align-items-center justify-content-center" href="#">
                                <i class="fas fa-check-circle mr-2"></i>
                                Accepted (Client's)
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link d-flex align-items-center justify-content-center" href="#">
                                <i class="fas fa-clock mr-2"></i>
                                Pending (Client's)
                                <span class="badge badge-danger badge-pill ml-2">0</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link d-flex align-items-center justify-content-center" href="#">
                                <i class="fas fa-network-wired mr-2"></i>
                                MAC Reseller's
                                <span class="badge badge-danger badge-pill ml-2">0</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link d-flex align-items-center justify-content-center" href="#">
                                <i class="fas fa-tachometer-alt mr-2"></i>
                                Bandwidth Reseller's
                                <span class="badge badge-danger badge-pill ml-2">0</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card-small">
                <div class="metric-icon-small bg-primary">
                    <i class="fas fa-ticket-alt"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-number text-primary">{{ $stats['total'] }}</div>
                    <div class="metric-label">Total tickets of Current Month</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card-small">
                <div class="metric-icon-small bg-warning">
                    <i class="fas fa-hourglass-half"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-number text-warning">{{ $stats['open'] }}</div>
                    <div class="metric-label">Total pending tickets for filtered data</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card-small">
                <div class="metric-icon-small bg-info">
                    <i class="fas fa-cog"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-number text-info">{{ $stats['in_progress'] }}</div>
                    <div class="metric-label">Total processing tickets for filtered data</div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="metric-card-small">
                <div class="metric-icon-small bg-success">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-number text-success">{{ $stats['resolved'] }}</div>
                    <div class="metric-label">Total solved tickets for filtered data</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0">
                <div class="card-header bg-light border-0">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-filter text-primary fa-lg mr-3"></i>
                        <h5 class="card-title mb-0 font-weight-bold">Filter Tickets</h5>
                    </div>
                </div>
                <div class="card-body p-4">
                    <form method="GET" action="{{ route('tickets.index') }}">
                        <div class="row">
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-tag mr-1"></i>Support Category
                                    </label>
                                    <select class="form-control" name="category">
                                        <option value="">Select Category</option>
                                        <option value="technical" {{ request('category') == 'technical' ? 'selected' : '' }}>Technical</option>
                                        <option value="billing" {{ request('category') == 'billing' ? 'selected' : '' }}>Billing</option>
                                        <option value="service" {{ request('category') == 'service' ? 'selected' : '' }}>Service</option>
                                        <option value="complaint" {{ request('category') == 'complaint' ? 'selected' : '' }}>Complaint</option>
                                        <option value="other" {{ request('category') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-info-circle mr-1"></i>Status
                                    </label>
                                    <select class="form-control" name="status">
                                        <option value="">Select Status</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-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-map-marker-alt mr-1"></i>Zone
                                    </label>
                                    <select class="form-control" name="zone">
                                        <option value="">Select Zone</option>
                                        <!-- Zones will be populated dynamically -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>Priority
                                    </label>
                                    <select class="form-control" name="priority">
                                        <option value="">Select Priority</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>
                        <div class="row">
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-user mr-1"></i>Assigned To
                                    </label>
                                    <select class="form-control" name="assigned_to">
                                        <option value="">Select Employee</option>
                                        <!-- Users will be populated dynamically -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-calendar mr-1"></i>From Date
                                    </label>
                                    <input type="date" class="form-control" name="from_date" value="{{ request('from_date') }}">
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-user-plus mr-1"></i>Created By
                                    </label>
                                    <select class="form-control" name="created_by">
                                        <option value="">Select User</option>
                                        <!-- Users will be populated dynamically -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="form-group">
                                    <label class="form-label font-weight-bold text-muted small text-uppercase">
                                        <i class="fas fa-calendar mr-1"></i>To Date
                                    </label>
                                    <input type="date" class="form-control" name="to_date" value="{{ request('to_date') }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-search mr-2"></i>Apply Filters
                                </button>
                                <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary btn-lg ml-2">
                                    <i class="fas fa-times mr-2"></i>Clear Filters
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- Table Controls -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0">
                <div class="card-body p-3">
                    <div class="row align-items-center">
                        <div class="col-lg-6 mb-2 mb-lg-0">
                            <div class="d-flex align-items-center">
                                <span class="font-weight-bold text-muted mr-3">Show</span>
                                <select class="form-control form-control-sm" id="entriesPerPage" style="width: auto;">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100" selected>100</option>
                                </select>
                                <span class="font-weight-bold text-muted ml-2">entries</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex align-items-center justify-content-lg-end">
                                <span class="font-weight-bold text-muted mr-3">Search:</span>
                                <div class="input-group" style="max-width: 300px;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" id="tableSearch" placeholder="Search tickets...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tickets Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-bordered" id="ticketsTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col" class="text-center" style="font-size: 0.8rem;">Ticket</th>
                                    <th scope="col" class="text-center">Client ID</th>
                                    <th scope="col" class="text-center">Customer Name</th>
                                    <th scope="col" class="text-center">Mobile(Existing)</th>
                                    <th scope="col" class="text-center">Complained Number</th>
                                    <th scope="col" class="text-center">Zone</th>
                                    <th scope="col" class="text-center">Problem</th>
                                    <th scope="col" class="text-center">Priority</th>
                                    <th scope="col" class="text-center">Complain Time <i class="fas fa-sort"></i></th>
                                    <th scope="col" class="text-center">CreatedBy</th>
                                    <th scope="col" class="text-center">Status</th>
                                    <th scope="col" class="text-center">Assign To</th>
                                    <th scope="col" class="text-center">Solved Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($tickets as $ticket)
                                <tr>
                                    <td class="text-center">
                                        <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-link text-primary font-weight-bold" style="font-size: 0.8rem;">
                                            {{ $ticket->ticket_number }}
                                        </a>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-outline-secondary btn-sm">{{ $ticket->clientInfo?->client?->username ?? 'N/A' }}</button>
                                    </td>
                                    <td class="text-center">{{ $ticket->clientInfo?->full_name ?? 'N/A' }}</td>
                                    <td class="text-center">{{ $ticket->clientInfo?->mobile_number ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-outline-primary btn-sm">{{ $ticket->complained_number ?? 'N/A' }}</button>
                                    </td>
                                    <td class="text-center">{{ $ticket->clientInfo?->zone ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ $ticket->title }}">
                                            {{ Str::limit($ticket->title, 30) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($ticket->priority === 'urgent')
                                            <button type="button" class="btn btn-danger btn-sm">{{ ucfirst($ticket->priority) }}</button>
                                        @elseif($ticket->priority === 'high')
                                            <button type="button" class="btn btn-warning btn-sm">{{ ucfirst($ticket->priority) }}</button>
                                        @elseif($ticket->priority === 'medium')
                                            <button type="button" class="btn btn-info btn-sm">{{ ucfirst($ticket->priority) }}</button>
                                        @else
                                            <button type="button" class="btn btn-secondary btn-sm">{{ ucfirst($ticket->priority) }}</button>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <small class="text-muted">{{ $ticket->created_at->format('d M Y h:i A') }}</small>
                                    </td>
                                    <td class="text-center">
                                        <small>{{ $ticket->createdBy->name }}</small>
                                    </td>
                                    <td class="text-center">
                                        @if($ticket->status === 'open')
                                            <button type="button" class="btn btn-success btn-sm">Open<br></button>
                                        @elseif($ticket->status === 'in_progress')
                                            <button type="button" class="btn btn-warning btn-sm clickable-status" 
                                                    data-ticket-id="{{ $ticket->id }}" 
                                                    title="Click to mark as solved">
                                                In Progress
                                            </button>
                                        @elseif($ticket->status === 'resolved')
                                            <button type="button" class="btn btn-primary btn-sm">Resolved<br></button>
                                        @else
                                            <span class="badge badge-secondary">{{ ucfirst($ticket->status) }}<br></span>
                                        @endif
                                        <div class="btn-group btn-group-sm mt-1" role="group">
                                            <button type="button" class="btn btn-outline-info btn-sm" title="Comments" onclick="openConversationsModal('{{ $ticket->id }}')">
                                                <i class="fas fa-comment"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-warning btn-sm" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-danger btn-sm" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $assignedEmployees = $ticket->assignedEmployees;
                                            $primaryEmployee = $ticket->assignedTo;
                                        @endphp
                                        
                                        @if($ticket->status === 'resolved')
                                            <button type="button" class="btn btn-secondary btn-sm assign-btn disabled" disabled title="Cannot assign - Ticket is resolved">
                                                Assign
                                            </button>
                                        @elseif($assignedEmployees->count() > 0)
                                            <button type="button" class="btn btn-primary btn-sm assign-btn assigned" 
                                                    data-ticket-id="{{ $ticket->id }}" 
                                                    data-current-assigned="{{ $primaryEmployee->id ?? '' }}"
                                                    data-all-assigned="{{ $assignedEmployees->pluck('id')->join(',') }}"
                                                    title="Reassign Ticket">
                                                Re-Assign
                                            </button>
                                            <div class="assigned-icon-container d-inline-block ml-1">
                                                <i class="fas fa-users text-info assigned-icon" 
                                                   title="{{ $assignedEmployees->pluck('name')->join(', ') }}"
                                                   data-toggle="tooltip" 
                                                   data-placement="top"
                                                   style="font-size: 0.9rem; cursor: help;"></i>
                                            </div>
                                        @else
                                            <button type="button" class="btn btn-success btn-sm assign-btn unassigned" 
                                                    data-ticket-id="{{ $ticket->id }}" 
                                                    data-current-assigned=""
                                                    title="Assign Ticket">
                                                Assign
                                            </button>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($ticket->resolved_at)
                                            <button type="button" class="btn btn-info btn-sm">
                                                <small>{{ $ticket->resolved_at->format('M d, Y h:i A') }}</small>
                                            </button>
                                        @else
                                            <div class="text-muted">
                                                <small class="d-block">Duration</small>
                                                <button type="button" class="btn btn-warning btn-sm">
                                                    @if($ticket->assigned_at)
                                                        @php
                                                            $duration = $ticket->assigned_at->diff(now());
                                                            $days = $duration->days;
                                                            $hours = $duration->h;
                                                            $minutes = $duration->i;
                                                            $seconds = $duration->s;
                                                        @endphp
                                                        {{ $days }}d:{{ $hours }}h:{{ $minutes }}m:{{ $seconds }}s
                                                    @else
                                                        <small class="text-muted">Not Assigned</small>
                                                    @endif
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="13" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-2x mb-2"></i>
                                <br>
                                No tickets found
                            </td>
                        </tr>
                        @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0">
                <div class="card-body p-3">
                    <div class="row align-items-center">
                        <div class="col-lg-6 mb-2 mb-lg-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle text-primary mr-2"></i>
                                <span class="text-muted">
                                    Showing <strong>{{ $tickets->firstItem() ?? 0 }}</strong> to <strong>{{ $tickets->lastItem() ?? 0 }}</strong> of <strong>{{ $tickets->total() }}</strong> entries
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex justify-content-lg-end">
                                @if($tickets->hasPages())
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination pagination-sm mb-0">
                                            @if($tickets->onFirstPage())
                                                <li class="page-item disabled">
                                                    <span class="page-link">
                                                        <i class="fas fa-angle-double-left"></i>
                                                    </span>
                                                </li>
                                                <li class="page-item disabled">
                                                    <span class="page-link">
                                                        <i class="fas fa-angle-left"></i>
                                                    </span>
                                                </li>
                                            @else
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $tickets->url(1) }}">
                                                        <i class="fas fa-angle-double-left"></i>
                                                    </a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $tickets->previousPageUrl() }}">
                                                        <i class="fas fa-angle-left"></i>
                                                    </a>
                                                </li>
                                            @endif
                                            
                                            @if($tickets->hasMorePages())
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $tickets->nextPageUrl() }}">
                                                        <i class="fas fa-angle-right"></i>
                                                    </a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $tickets->url($tickets->lastPage()) }}">
                                                        <i class="fas fa-angle-double-right"></i>
                                                    </a>
                                                </li>
                                            @else
                                                <li class="page-item disabled">
                                                    <span class="page-link">
                                                        <i class="fas fa-angle-right"></i>
                                                    </span>
                                                </li>
                                                <li class="page-item disabled">
                                                    <span class="page-link">
                                                        <i class="fas fa-angle-double-right"></i>
                                                    </span>
                                                </li>
                                            @endif
                                        </ul>
                                    </nav>
                                @else
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination pagination-sm mb-0">
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="fas fa-angle-double-left"></i>
                                                </span>
                                            </li>
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="fas fa-angle-left"></i>
                                                </span>
                                            </li>
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="fas fa-angle-right"></i>
                                                </span>
                                            </li>
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="fas fa-angle-double-right"></i>
                                                </span>
                                            </li>
                                        </ul>
                                    </nav>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Bootstrap Custom Styles */
.rounded-lg {
    border-radius: 1rem !important;
}

/* Table Font Size */
#ticketsTable {
    font-size: 0.85rem;
}

#ticketsTable th {
    font-size: 0.8rem;
    font-weight: 600;
}

#ticketsTable td {
    font-size: 0.8rem;
}

#ticketsTable .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}


/* Metric Icon Styles */
.metric-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Badge Pill Styles */
.badge-pill {
    border-radius: 50rem !important;
}

/* Button Group Styles */
.btn-group-vertical .btn {
    border-radius: 0.5rem !important;
}

.btn-group-vertical .btn:not(:last-child) {
    margin-bottom: 0.5rem !important;
}

/* Form Label Styles */
.form-label {
    margin-bottom: 0.5rem !important;
}

/* Custom Spacing */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

/* Table Styles */
.table-responsive {
    border-radius: 0.5rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Clickable Status */
.clickable-status {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-status:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Assign Button Styles */
.assign-btn {
    transition: all 0.2s ease;
}

.assign-btn:hover {
    transform: translateY(-1px);
}

/* Assigned Icon Styles */
.assigned-icon-container {
    position: relative;
    display: inline-block;
}

.assigned-icon {
    transition: all 0.2s ease;
    opacity: 0.8;
}

.assigned-icon:hover {
    opacity: 1;
    transform: scale(1.1);
    color: #007bff !important;
}

/* Tooltip Styles */
.tooltip {
    font-size: 0.8rem;
}

.tooltip-inner {
    background-color: #2c3e50;
    color: white;
    border-radius: 6px;
    padding: 8px 12px;
    max-width: 300px;
    text-align: left;
    white-space: pre-wrap;
}

/* Employee Checkbox Styles */
.employee-checkbox-container {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
}

.employee-checkbox-container .form-check {
    margin-bottom: 8px;
}

.employee-checkbox-container .form-check-input {
    margin-top: 0.25rem;
}

.employee-checkbox-container .form-check-label {
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
    margin-left: 5px;
}

.employee-checkbox-container .form-check-input:checked + .form-check-label {
    color: #007bff;
    font-weight: 500;
}

/* Action Button Styles */
.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Pagination Styles */
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Alert Styles */
.alert {
    border: none !important;
    border-radius: 0.5rem !important;
}

/* Input Group Styles */
.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .btn-group-vertical {
        width: 100% !important;
    }
    
    .btn-group-vertical .btn {
        width: 100% !important;
    }
    
    .metric-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .display-4 {
        font-size: 2rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .jumbotron {
        padding: 1.5rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .metric-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .table-responsive {
        font-size: 0.75rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Additional Custom Styles */

/* Custom Header Background */
.custom-header-bg {
    background-color: #2E4153 !important;
}

/* Small Action Buttons */
.action-buttons-small {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.action-btn-small {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    min-width: 140px;
    justify-content: center;
}

.btn-new-ticket {
    background: #ffc107;
    color: #212529;
}

.btn-new-ticket:hover {
    background: #e0a800;
    color: #212529;
    transform: translateY(-1px);
}

.btn-refresh-data {
    background: white;
    color: #212529;
    border: 1px solid #dee2e6;
}

.btn-refresh-data:hover {
    background: #f8f9fa;
    color: #212529;
    transform: translateY(-1px);
}

/* Small Metric Cards */
.metric-card-small {
    background: white;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    height: 80px;
}

.metric-card-small:hover {
    transform: translateY(-2px);
}

.metric-icon-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
    min-width: 0;
}

.metric-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-label {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.2;
    font-weight: 500;
}

/* Tickets Table Styles */
.tickets-table-container {
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.tickets-table {
    margin: 0;
    border-collapse: collapse;
}

.tickets-thead {
    background: #2E4153;
    color: white;
}

.tickets-thead th {
    padding: 12px 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    text-align: left;
    white-space: nowrap;
}

.tickets-thead th i {
    margin-left: 5px;
    opacity: 0.7;
}

.tickets-tbody {
    background: white;
}

.tickets-tbody td {
    padding: 10px 8px;
    font-size: 0.8rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
}

.tickets-tbody tr:hover {
    background: #f8fafc;
}

.tickets-tbody tr:last-child td {
    border-bottom: none;
}

/* Priority Badge Styles */
.priority-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.priority-low {
    background: #6c757d;
}

.priority-medium {
    background: #17a2b8;
}

.priority-high {
    background: #dc3545;
}

.priority-urgent {
    background: #dc3545;
}

/* Status Badge Styles */
.status-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.status-open {
    background: #28a745;
}

.status-in_progress {
    background: #ffc107;
    color: #212529;
}

.status-resolved {
    background: #17a2b8;
}

.status-closed {
    background: #6c757d;
}

.status-pending {
    background: #dc3545;
}

/* Clickable Status */
.clickable-status {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-status:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Action Icons */
.action-icons {
    display: flex;
    gap: 4px;
}

.action-btn {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.75rem;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #e9ecef;
    color: #495057;
}

/* Assign Button Styles */
.assign-btn {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assign-btn.assigned {
    background: #007bff;
    color: white;
}

.assign-btn.unassigned {
    background: #28a745;
    color: white;
}

.assign-btn.disabled {
    background: #6c757d;
    color: white;
    cursor: not-allowed;
    opacity: 0.6;
}

.assign-btn:hover:not(.disabled) {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* Duration Styles */
.duration-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.duration-label {
    font-size: 0.7rem;
    color: #6c757d;
    text-decoration: underline;
    margin-bottom: 2px;
}

.duration-time {
    font-size: 0.75rem;
    color: #495057;
    font-weight: 500;
}

/* Responsive Design for Small Action Buttons */
@media (max-width: 768px) {
    .action-buttons-small {
        align-items: center;
        width: 100%;
    }
    
    .action-btn-small {
        width: 100%;
        min-width: auto;
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

@media (max-width: 576px) {
    .action-btn-small {
        font-size: 0.7rem;
        padding: 5px 10px;
        gap: 4px;
    }
}

/* Responsive Design for Small Metric Cards */
@media (max-width: 768px) {
    .metric-card-small {
        height: 70px;
        padding: 12px;
        gap: 10px;
    }
    
    .metric-icon-small {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .metric-number {
        font-size: 1.5rem;
    }
    
    .metric-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .metric-card-small {
        height: 60px;
        padding: 10px;
        gap: 8px;
    }
    
    .metric-icon-small {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .metric-number {
        font-size: 1.3rem;
    }
    
    .metric-label {
        font-size: 0.65rem;
    }
}

/* Conversations Modal Styles */
.conversations-modal {
    border-radius: 8px;
    overflow: hidden;
    z-index: 1050;
}

#conversationsModal {
    z-index: 1050;
}

#conversationsModal .modal-dialog {
    z-index: 1051;
}

.conversations-header {
    background: #2E4153;
    color: white;
    border-bottom: none;
    padding: 15px 20px;
}

.conversations-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}

.conversations-close {
    color: white;
    opacity: 1;
    font-size: 1.5rem;
}

.conversations-close:hover {
    color: white;
    opacity: 0.8;
}

.conversations-body {
    padding: 20px;
    background: white;
}

/* New Comment Section */
.new-comment-section {
    margin-bottom: 20px;
}

.formatting-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.toolbar-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 3px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: #e9ecef;
    color: #212529;
}

.toolbar-select {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.8rem;
    color: #495057;
}

.comment-input-container {
    margin-bottom: 15px;
}

.comment-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 12px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 120px;
}

.comment-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attachment-section {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #007bff;
    font-size: 0.85rem;
    font-weight: 500;
}

.attachment-icon {
    font-size: 1.1rem;
}

.btn-submit-comment {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-comment:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

/* Conversation Separator */
.conversation-separator {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 20px 0;
}

/* Previous Discussion Section */
.previous-discussion-section {
    max-height: 300px;
    overflow-y: auto;
}

.discussion-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
    font-size: 1rem;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.conversation-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.conversation-avatar {
    width: 40px;
    height: 40px;
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.conversation-user {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
}

.conversation-time {
    color: #28a745;
    font-size: 0.8rem;
    font-weight: 500;
}

.conversation-message {
    color: #495057;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Modal Footer */
.conversations-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-cancel {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.btn-view-details {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-details:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

.btn-refresh {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

/* Responsive Design for Conversations Modal */
@media (max-width: 768px) {
    .conversations-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .conversations-body {
        padding: 15px;
    }
    
    .formatting-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .toolbar-btn {
        padding: 3px 5px;
        font-size: 0.8rem;
    }
    
    .comment-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .btn-submit-comment {
        width: 100%;
    }
    
    .conversations-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .conversations-footer button {
        width: 100%;
    }
}
</style>

<!-- Assignment Modal -->
<div class="modal fade" id="assignmentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Ticket (Multiple Employees)</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="assignmentForm">
                    @csrf
                    <input type="hidden" id="ticket_id" name="ticket_id">
                    
                    <div class="form-group">
                        <label for="employee_ids">Select Employees:</label>
                        <div class="mb-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="selectAllBtn">
                                <i class="fas fa-check-square"></i> Select All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="clearAllBtn">
                                <i class="fas fa-square"></i> Clear All
                            </button>
                        </div>
                        <div class="employee-checkbox-container" style="max-height: 200px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 0.375rem; padding: 10px;">
                            @foreach($employees as $employee)
                                <div class="form-check mb-2">
                                    <input class="form-check-input employee-checkbox" type="checkbox" 
                                           name="employee_ids[]" 
                                           value="{{ $employee->id }}" 
                                           id="employee_{{ $employee->id }}">
                                    <label class="form-check-label" for="employee_{{ $employee->id }}">
                                        {{ $employee->name }} ({{ $employee->designation ?? 'Employee' }})
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <small class="form-text text-muted">
                            <i class="fas fa-info-circle"></i> 
                            Select one or more employees by checking the boxes
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label for="assignment_note">Assignment Note (Optional):</label>
                        <textarea class="form-control" id="assignment_note" name="assignment_note" rows="3" 
                                  placeholder="Add any notes about this assignment..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveAssignmentBtn">
                    <i class="fas fa-users"></i> Assign to Selected Employees
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Solved Modal -->
<div class="modal fade" id="solvedModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Press Yes if solved</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="solvedForm">
                    @csrf
                    <input type="hidden" id="solved_ticket_id" name="ticket_id">
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>CONNECTIVITY STATUS</label>
                                <div class="d-flex align-items-center">
                                    <input type="text" class="form-control mr-2" value="Connected" readonly>
                                    <button type="button" class="btn btn-success btn-sm">Online</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>UPTIME</label>
                                <input type="text" class="form-control" id="uptime" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>LAST LOGOUT TIME</label>
                                <input type="text" class="form-control" id="last_logout" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>MAC ADDRESS/CALLER ID</label>
                                <input type="text" class="form-control" id="mac_address" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>IP ADDRESS</label>
                                <input type="text" class="form-control" id="ip_address" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="resolution_notes">Resolution Notes (Optional):</label>
                        <textarea class="form-control" id="resolution_notes" name="resolution_notes" rows="3" 
                                  placeholder="Add any notes about the resolution..."></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" id="markSolvedBtn">
                    Yes, Solved
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Ticket Conversations Modal -->
<div class="modal fade" id="conversationsModal" tabindex="-1" role="dialog" aria-labelledby="conversationsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content conversations-modal">
            <div class="modal-header conversations-header">
                <h5 class="modal-title conversations-title">
                    <i class="fas fa-comments mr-2"></i>
                    Ticket's Conversations (Employee2Employee)
                </h5>
                <button type="button" class="close conversations-close" onclick="closeConversationsModal()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body conversations-body">
                <!-- New Comment Input Area -->
                <div class="new-comment-section">
                    <!-- Formatting Toolbar -->
                    <div class="formatting-toolbar">
                        <button type="button" class="toolbar-btn" title="Undo" onclick="formatText('undo')">
                            <i class="fas fa-undo"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Redo" onclick="formatText('redo')">
                            <i class="fas fa-redo"></i>
                        </button>
                        <select class="toolbar-select" onchange="formatText('format', this.value)">
                            <option value="">Formats</option>
                            <option value="paragraph">Paragraph</option>
                            <option value="h1">Heading 1</option>
                            <option value="h2">Heading 2</option>
                        </select>
                        <button type="button" class="toolbar-btn" title="Bold" onclick="formatText('bold')">
                            <i class="fas fa-bold"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Italic" onclick="formatText('italic')">
                            <i class="fas fa-italic"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Align Left" onclick="formatText('align-left')">
                            <i class="fas fa-align-left"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Bullet List" onclick="formatText('bullet')">
                            <i class="fas fa-list-ul"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Numbered List" onclick="formatText('number')">
                            <i class="fas fa-list-ol"></i>
                        </button>
                    </div>
                    
                    <!-- Comment Input -->
                    <div class="comment-input-container">
                        <textarea class="comment-input" id="newComment" placeholder="Type your comment here..." rows="6"></textarea>
                    </div>
                    
                    <!-- Attachment and Submit -->
                    <div class="comment-actions">
                        <div class="attachment-section">
                            <i class="fas fa-cloud-upload-alt attachment-icon"></i>
                            <span class="attachment-text">ATTACH IMAGES ONLY</span>
                        </div>
                        <button type="button" class="btn-submit-comment" onclick="submitComment()">
                            <i class="fas fa-file-alt mr-1"></i>
                            Submit Your Comments
                        </button>
                    </div>
                </div>
                
                <!-- Separator -->
                <hr class="conversation-separator">
                
                <!-- Previous Discussion Section -->
                <div class="previous-discussion-section">
                    <h6 class="discussion-title">Previous Discussion</h6>
                    <div class="conversation-list" id="conversationList">
                        <!-- Sample conversation items -->
                        <div class="conversation-item">
                            <div class="conversation-avatar">
                                <i class="fas fa-user-circle"></i>
                            </div>
                            <div class="conversation-content">
                                <div class="conversation-header">
                                    <span class="conversation-user">mkz24</span>
                                    <span class="conversation-time">Posted On: 23-Sep-2025 12:19 PM</span>
                                </div>
                                <div class="conversation-message">hi</div>
                            </div>
                        </div>
                        
                        <div class="conversation-item">
                            <div class="conversation-avatar">
                                <i class="fas fa-user-circle"></i>
                            </div>
                            <div class="conversation-content">
                                <div class="conversation-header">
                                    <span class="conversation-user">mkz24</span>
                                    <span class="conversation-time">Posted On: 22-Sep-2025 09:41 PM</span>
                                </div>
                                <div class="conversation-message">00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer conversations-footer">
                <button type="button" class="btn-cancel" onclick="closeConversationsModal()">
                    <i class="fas fa-times mr-1"></i>
                    Cancel
                </button>
                <button type="button" class="btn-view-details" onclick="viewTicketDetails()">
                    <i class="fas fa-eye mr-1"></i>
                    View Details
                </button>
                <button type="button" class="btn-refresh" onclick="refreshConversations()">
                    <i class="fas fa-sync-alt mr-1"></i>
                    Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Ticket Conversations Modal -->
<div class="modal fade" id="conversationsModal" tabindex="-1" role="dialog" aria-labelledby="conversationsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content conversations-modal">
            <div class="modal-header conversations-header">
                <h5 class="modal-title conversations-title">
                    <i class="fas fa-comments mr-2"></i>
                    Ticket's Conversations (Employee2Employee)
                </h5>
                <button type="button" class="close conversations-close" onclick="closeConversationsModal()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body conversations-body">
                <!-- New Comment Input Area -->
                <div class="new-comment-section">
                    <!-- Formatting Toolbar -->
                    <div class="formatting-toolbar">
                        <button type="button" class="toolbar-btn" title="Undo" onclick="formatText('undo')">
                            <i class="fas fa-undo"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Redo" onclick="formatText('redo')">
                            <i class="fas fa-redo"></i>
                        </button>
                        <select class="toolbar-select" onchange="formatText('format', this.value)">
                            <option value="">Formats</option>
                            <option value="paragraph">Paragraph</option>
                            <option value="h1">Heading 1</option>
                            <option value="h2">Heading 2</option>
                        </select>
                        <button type="button" class="toolbar-btn" title="Bold" onclick="formatText('bold')">
                            <i class="fas fa-bold"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Italic" onclick="formatText('italic')">
                            <i class="fas fa-italic"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Align Left" onclick="formatText('align-left')">
                            <i class="fas fa-align-left"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Bullet List" onclick="formatText('bullet')">
                            <i class="fas fa-list-ul"></i>
                        </button>
                        <button type="button" class="toolbar-btn" title="Numbered List" onclick="formatText('number')">
                            <i class="fas fa-list-ol"></i>
                        </button>
                    </div>
                    
                    <!-- Comment Input -->
                    <div class="comment-input-container">
                        <textarea class="comment-input" id="newComment" placeholder="Type your comment here..." rows="6"></textarea>
                    </div>
                    
                    <!-- Attachment and Submit -->
                    <div class="comment-actions">
                        <div class="attachment-section">
                            <i class="fas fa-cloud-upload-alt attachment-icon"></i>
                            <span class="attachment-text">ATTACH IMAGES ONLY</span>
                        </div>
                        <button type="button" class="btn-submit-comment" onclick="submitComment()">
                            <i class="fas fa-file-alt mr-1"></i>
                            Submit Your Comments
                        </button>
                    </div>
                </div>
                
                <!-- Separator -->
                <hr class="conversation-separator">
                
                <!-- Previous Discussion Section -->
                <div class="previous-discussion-section">
                    <h6 class="discussion-title">Previous Discussion</h6>
                    <div class="conversation-list" id="conversationList">
                        <!-- Sample conversation items -->
                        <div class="conversation-item">
                            <div class="conversation-avatar">
                                <i class="fas fa-user-circle"></i>
                            </div>
                            <div class="conversation-content">
                                <div class="conversation-header">
                                    <span class="conversation-user">mkz24</span>
                                    <span class="conversation-time">Posted On: 23-Sep-2025 12:19 PM</span>
                                </div>
                                <div class="conversation-message">hi</div>
                            </div>
                        </div>
                        
                        <div class="conversation-item">
                            <div class="conversation-avatar">
                                <i class="fas fa-user-circle"></i>
                            </div>
                            <div class="conversation-content">
                                <div class="conversation-header">
                                    <span class="conversation-user">mkz24</span>
                                    <span class="conversation-time">Posted On: 22-Sep-2025 09:41 PM</span>
                                </div>
                                <div class="conversation-message">00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer conversations-footer">
                <button type="button" class="btn-cancel" onclick="closeConversationsModal()">
                    <i class="fas fa-times mr-1"></i>
                    Cancel
                </button>
                <button type="button" class="btn-view-details" onclick="viewTicketDetails()">
                    <i class="fas fa-eye mr-1"></i>
                    View Details
                </button>
                <button type="button" class="btn-refresh" onclick="refreshConversations()">
                    <i class="fas fa-sync-alt mr-1"></i>
                    Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Conversations Modal Styles */
.conversations-modal {
    border-radius: 8px;
    overflow: hidden;
    z-index: 1050;
}

#conversationsModal {
    z-index: 1050;
}

#conversationsModal .modal-dialog {
    z-index: 1051;
}

.conversations-header {
    background: #2E4153;
    color: white;
    border-bottom: none;
    padding: 15px 20px;
}

.conversations-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}

.conversations-close {
    color: white;
    opacity: 1;
    font-size: 1.5rem;
}

.conversations-close:hover {
    color: white;
    opacity: 0.8;
}

.conversations-body {
    padding: 20px;
    background: white;
}

/* New Comment Section */
.new-comment-section {
    margin-bottom: 20px;
}

.formatting-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.toolbar-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 3px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: #e9ecef;
    color: #212529;
}

.toolbar-select {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.8rem;
    color: #495057;
}

.comment-input-container {
    margin-bottom: 15px;
}

.comment-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 12px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 120px;
}

.comment-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attachment-section {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #007bff;
    font-size: 0.85rem;
    font-weight: 500;
}

.attachment-icon {
    font-size: 1.1rem;
}

.btn-submit-comment {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-comment:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

/* Conversation Separator */
.conversation-separator {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 20px 0;
}

/* Previous Discussion Section */
.previous-discussion-section {
    max-height: 300px;
    overflow-y: auto;
}

.discussion-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 15px;
    font-size: 1rem;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.conversation-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.conversation-avatar {
    width: 40px;
    height: 40px;
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.conversation-user {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
}

.conversation-time {
    color: #28a745;
    font-size: 0.8rem;
    font-weight: 500;
}

.conversation-message {
    color: #495057;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Modal Footer */
.conversations-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-cancel {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.btn-view-details {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-details:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

.btn-refresh {
    background: #2E4153;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover {
    background: #1e2a3a;
    transform: translateY(-1px);
}

/* Responsive Design for Conversations Modal */
@media (max-width: 768px) {
    .conversations-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .conversations-body {
        padding: 15px;
    }
    
    .formatting-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .toolbar-btn {
        padding: 3px 5px;
        font-size: 0.8rem;
    }
    
    .comment-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .btn-submit-comment {
        width: 100%;
    }
    
    .conversations-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .conversations-footer button {
        width: 100%;
    }
}
</style>

<script>

// Global function to open conversations modal
function openConversationsModal(ticketId) {
    console.log('Opening conversations modal for ticket:', ticketId);
    
    // Set current ticket ID
    window.currentTicketId = ticketId;
    
    // Clear comment input
    const commentInput = document.getElementById('newComment');
    if (commentInput) {
        commentInput.value = '';
    }
    
    // Show modal
    const modal = document.getElementById('conversationsModal');
    console.log('Modal element:', modal);
    
    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 = 'conversations-modal-backdrop';
        document.body.appendChild(backdrop);
        
        console.log('Modal opened successfully');
    } else {
        console.error('Modal element not found!');
        alert('Modal not found!');
    }
}

// Global function to close conversations modal
function closeConversationsModal() {
    const modal = document.getElementById('conversationsModal');
    if (modal) {
        modal.style.display = 'none';
        modal.classList.remove('show');
        document.body.classList.remove('modal-open');
        
        // Remove backdrop
        const backdrop = document.getElementById('conversations-modal-backdrop');
        if (backdrop) {
            backdrop.remove();
        }
    }
}

// View ticket details function
function viewTicketDetails() {
    if (window.currentTicketId) {
        window.location.href = `/tickets/${window.currentTicketId}`;
    }
}

// Refresh conversations function
function refreshConversations() {
    if (window.currentTicketId) {
        console.log('Refreshing conversations for ticket:', window.currentTicketId);
        alert('Conversations refreshed!');
    }
}

// Submit comment function
function submitComment() {
    const commentText = document.getElementById('newComment').value.trim();
    
    if (!commentText) {
        alert('Please enter a comment before submitting.');
        return;
    }
    
    if (!window.currentTicketId) {
        alert('No ticket selected.');
        return;
    }
    
    console.log('Submitting comment:', commentText, 'for ticket:', window.currentTicketId);
    
    // Add new comment to conversation list
    const conversationList = document.getElementById('conversationList');
    const newConversationItem = document.createElement('div');
    newConversationItem.className = 'conversation-item';
    newConversationItem.innerHTML = `
        <div class="conversation-avatar">
            <i class="fas fa-user-circle"></i>
        </div>
        <div class="conversation-content">
            <div class="conversation-header">
                <span class="conversation-user">Current User</span>
                <span class="conversation-time">Posted On: ${new Date().toLocaleDateString('en-GB')} ${new Date().toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true})}</span>
            </div>
            <div class="conversation-message">${commentText}</div>
        </div>
    `;
    conversationList.insertBefore(newConversationItem, conversationList.firstChild);
    
    // Clear input
    document.getElementById('newComment').value = '';
    
    // Show success message
    console.log('Comment submitted successfully!');
    
    // Send comment to server
    const formData = new FormData();
    formData.append('comment', commentText);
    formData.append('ticket_id', window.currentTicketId);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch(`/api/tickets/${window.currentTicketId}/comments`, {
        method: 'POST',
        body: formData,
        headers: {
            'Accept': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Comment saved to database!');
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error submitting comment:', error);
        alert('Error submitting comment. Please try again.');
    });
}

// Format text function
function formatText(action, value = '') {
    const commentInput = document.getElementById('newComment');
    const start = commentInput.selectionStart;
    const end = commentInput.selectionEnd;
    const selectedText = commentInput.value.substring(start, end);
    
    let formattedText = '';
    
    switch(action) {
        case 'bold':
            formattedText = `**${selectedText}**`;
            break;
        case 'italic':
            formattedText = `*${selectedText}*`;
            break;
        case 'bullet':
            formattedText = `• ${selectedText}`;
            break;
        case 'number':
            formattedText = `1. ${selectedText}`;
            break;
        case 'format':
            if (value === 'h1') {
                formattedText = `# ${selectedText}`;
            } else if (value === 'h2') {
                formattedText = `## ${selectedText}`;
            } else {
                formattedText = selectedText;
            }
            break;
        default:
            formattedText = selectedText;
    }
    
    commentInput.value = commentInput.value.substring(0, start) + formattedText + commentInput.value.substring(end);
    commentInput.focus();
    commentInput.setSelectionRange(start + formattedText.length, start + formattedText.length);
}

// Test function for modal
function testModal() {
    console.log('Test modal function called');
    alert('Test modal function called!');
    
    const modal = document.getElementById('conversationsModal');
    console.log('Modal element:', modal);
    
    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 = 'conversations-modal-backdrop';
        document.body.appendChild(backdrop);
        
        console.log('Modal opened successfully');
    } else {
        console.error('Modal element not found!');
        alert('Modal element not found!');
    }
}

// Simple modal open function
function openModal() {
    console.log('Opening modal...');
    alert('Opening modal...');
    
    const modal = document.getElementById('conversationsModal');
    console.log('Modal element:', modal);
    
    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 = 'conversations-modal-backdrop';
        document.body.appendChild(backdrop);
        
        console.log('Modal opened successfully');
        alert('Modal opened successfully!');
    } else {
        console.error('Modal element not found!');
        alert('Modal element not found!');
    }
}

// Global function to open conversations modal
function openConversationsModal(ticketId) {
    console.log('Opening conversations modal for ticket:', ticketId);
    
    // Set current ticket ID
    window.currentTicketId = ticketId;
    
    // Clear comment input
    const commentInput = document.getElementById('newComment');
    if (commentInput) {
        commentInput.value = '';
    }
    
    // Show modal
    const modal = document.getElementById('conversationsModal');
    console.log('Modal element:', modal);
    
    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 = 'conversations-modal-backdrop';
        document.body.appendChild(backdrop);
        
        console.log('Modal opened successfully');
    } else {
        console.error('Modal element not found!');
        alert('Modal not found!');
    }
}

// Global function to close conversations modal
function closeConversationsModal() {
    const modal = document.getElementById('conversationsModal');
    if (modal) {
        modal.style.display = 'none';
        modal.classList.remove('show');
        document.body.classList.remove('modal-open');
        
        // Remove backdrop
        const backdrop = document.getElementById('conversations-modal-backdrop');
        if (backdrop) {
            backdrop.remove();
        }
    }
}

// View ticket details function
function viewTicketDetails() {
    if (window.currentTicketId) {
        window.location.href = `/tickets/${window.currentTicketId}`;
    }
}

// Refresh conversations function
function refreshConversations() {
    if (window.currentTicketId) {
        console.log('Refreshing conversations for ticket:', window.currentTicketId);
        alert('Conversations refreshed!');
    }
}

// Submit comment function
function submitComment() {
    const commentText = document.getElementById('newComment').value.trim();
    
    if (!commentText) {
        alert('Please enter a comment before submitting.');
        return;
    }
    
    if (!window.currentTicketId) {
        alert('No ticket selected.');
        return;
    }
    
    console.log('Submitting comment:', commentText, 'for ticket:', window.currentTicketId);
    
    // Add new comment to conversation list
    const conversationList = document.getElementById('conversationList');
    const newConversationItem = document.createElement('div');
    newConversationItem.className = 'conversation-item';
    newConversationItem.innerHTML = `
        <div class="conversation-avatar">
            <i class="fas fa-user-circle"></i>
        </div>
        <div class="conversation-content">
            <div class="conversation-header">
                <span class="conversation-user">Current User</span>
                <span class="conversation-time">Posted On: ${new Date().toLocaleDateString('en-GB')} ${new Date().toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true})}</span>
            </div>
            <div class="conversation-message">${commentText}</div>
        </div>
    `;
    conversationList.insertBefore(newConversationItem, conversationList.firstChild);
    
    // Clear input
    document.getElementById('newComment').value = '';
    
    // Show success message
    console.log('Comment submitted successfully!');
    
    // Send comment to server
    const formData = new FormData();
    formData.append('comment', commentText);
    formData.append('ticket_id', window.currentTicketId);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch(`/api/tickets/${window.currentTicketId}/comments`, {
        method: 'POST',
        body: formData,
        headers: {
            'Accept': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Comment saved to database!');
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error submitting comment:', error);
        alert('Error submitting comment. Please try again.');
    });
}

// Format text function
function formatText(action, value = '') {
    const commentInput = document.getElementById('newComment');
    const start = commentInput.selectionStart;
    const end = commentInput.selectionEnd;
    const selectedText = commentInput.value.substring(start, end);
    
    let formattedText = '';
    
    switch(action) {
        case 'bold':
            formattedText = `**${selectedText}**`;
            break;
        case 'italic':
            formattedText = `*${selectedText}*`;
            break;
        case 'bullet':
            formattedText = `• ${selectedText}`;
            break;
        case 'number':
            formattedText = `1. ${selectedText}`;
            break;
        case 'format':
            if (value === 'h1') {
                formattedText = `# ${selectedText}`;
            } else if (value === 'h2') {
                formattedText = `## ${selectedText}`;
            } else {
                formattedText = selectedText;
            }
            break;
        default:
            formattedText = selectedText;
    }
    
    commentInput.value = commentInput.value.substring(0, start) + formattedText + commentInput.value.substring(end);
    commentInput.focus();
    commentInput.setSelectionRange(start + formattedText.length, start + formattedText.length);
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('Assignment script loaded');
    console.log('Page loaded successfully');
    
    // Initialize tooltips for assigned icons
    if (typeof $ !== 'undefined') {
        $('[data-toggle="tooltip"]').tooltip({
            trigger: 'hover',
            delay: { show: 300, hide: 100 }
        });
    }
    
    // Table search functionality
    const searchInput = document.getElementById('tableSearch');
    const table = document.getElementById('ticketsTable');
    const tableRows = table.querySelectorAll('tbody tr');
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            tableRows.forEach(function(row) {
                const text = row.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
    
    // Entries per page functionality
    const entriesSelect = document.getElementById('entriesPerPage');
    if (entriesSelect) {
        entriesSelect.addEventListener('change', function() {
            const entriesPerPage = parseInt(this.value);
            const url = new URL(window.location);
            url.searchParams.set('per_page', entriesPerPage);
            window.location.href = url.toString();
        });
    }
    
    // Mobile touch scrolling enhancement
    const tableContainer = document.querySelector('.tickets-table-container');
    if (tableContainer && window.innerWidth <= 768) {
        // Add touch-friendly scrolling
        tableContainer.style.webkitOverflowScrolling = 'touch';
        
        // Add momentum scrolling for iOS
        tableContainer.style.overflowX = 'auto';
        tableContainer.style.overflowY = 'hidden';
        
        // Hide scroll indicator after user starts scrolling
        const scrollIndicator = document.querySelector('.mobile-scroll-indicator');
        if (scrollIndicator) {
            let hasScrolled = false;
            tableContainer.addEventListener('scroll', function() {
                if (!hasScrolled) {
                    hasScrolled = true;
                    scrollIndicator.style.opacity = '0';
                    setTimeout(() => {
                        scrollIndicator.style.display = 'none';
                    }, 500);
                }
            });
        }
    }
    
    // Mobile responsive table adjustments
    function adjustTableForMobile() {
        const isMobile = window.innerWidth <= 768;
        const table = document.getElementById('ticketsTable');
        
        if (isMobile && table) {
            // Add mobile-specific classes
            table.classList.add('mobile-table');
            
            // Adjust column widths for mobile
            const headers = table.querySelectorAll('thead th');
            headers.forEach((header, index) => {
                if (index === 0) header.style.minWidth = '80px'; // TicketNo
                else if (index === 1) header.style.minWidth = '70px'; // ClientCode
                else if (index === 2) header.style.minWidth = '120px'; // Customer Name
                else if (index === 3) header.style.minWidth = '100px'; // Mobile
                else if (index === 4) header.style.minWidth = '120px'; // Complained Number
                else if (index === 5) header.style.minWidth = '80px'; // Zone
                else if (index === 6) header.style.minWidth = '80px'; // Problem
                else if (index === 7) header.style.minWidth = '60px'; // Priority
                else if (index === 8) header.style.minWidth = '100px'; // Complain Time
                else if (index === 9) header.style.minWidth = '70px'; // CreatedBy
                else if (index === 10) header.style.minWidth = '100px'; // Status
                else if (index === 11) header.style.minWidth = '70px'; // Assign To
                else if (index === 12) header.style.minWidth = '100px'; // Solved Time
            });
        }
    }
    
    // Run on load and resize
    adjustTableForMobile();
    window.addEventListener('resize', adjustTableForMobile);
    
    // Clickable status functionality
    document.querySelectorAll('.clickable-status').forEach(function(statusBadge) {
        statusBadge.addEventListener('click', function() {
            const ticketId = this.getAttribute('data-ticket-id');
            
            // Set ticket ID in solved form
            document.getElementById('solved_ticket_id').value = ticketId;
            
            // Clear resolution notes
            document.getElementById('resolution_notes').value = '';
            
            // Populate modal with sample data (you can fetch real data from API)
            document.getElementById('uptime').value = '19h58m42s';
            document.getElementById('last_logout').value = '22/09/2025 12:26 PM';
            document.getElementById('mac_address').value = 'D8:07:B6:99:2F:93';
            document.getElementById('ip_address').value = '172.16.103.253';
            
            // Show solved modal
            if (typeof $ !== 'undefined') {
                $('#solvedModal').modal('show');
            } else {
                // Fallback to vanilla JS
                const modal = document.getElementById('solvedModal');
                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';
                    document.body.appendChild(backdrop);
                }
            }
        });
    });
    
    // Mark as solved functionality
    document.getElementById('markSolvedBtn').addEventListener('click', function() {
        const form = document.getElementById('solvedForm');
        const formData = new FormData(form);
        
        // Show loading state
        const solveBtn = this;
        const originalText = solveBtn.innerHTML;
        solveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Solving...';
        solveBtn.disabled = true;
        
        // Add CSRF token to form data
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        console.log('Form data:', Object.fromEntries(formData));
        
        fetch('{{ url("/tickets/solved") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json',
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                // Close modal
                if (typeof $ !== 'undefined') {
                    $('#solvedModal').modal('hide');
                } else {
                    // Fallback to vanilla JS
                    const modal = document.getElementById('solvedModal');
                    if (modal) {
                        modal.style.display = 'none';
                        modal.classList.remove('show');
                        document.body.classList.remove('modal-open');
                        
                        // Remove backdrop
                        const backdrop = document.getElementById('solved-modal-backdrop');
                        if (backdrop) {
                            backdrop.remove();
                        }
                    }
                }
                
                // Show success message
                alert('Ticket marked as solved successfully!');
                
                // Reload page to show updated status
                location.reload();
            } else {
                console.error('Solve failed:', data);
                let errorMessage = 'Error marking ticket as solved: ' + (data.message || 'Unknown error');
                if (data.errors) {
                    errorMessage += '\n\nValidation errors:\n';
                    Object.keys(data.errors).forEach(key => {
                        errorMessage += key + ': ' + data.errors[key].join(', ') + '\n';
                    });
                }
                alert(errorMessage);
            }
        })
        .catch(error => {
            console.error('Network error:', error);
            alert('Network error. Please check your connection and try again.');
        })
        .finally(() => {
            // Restore button state
            solveBtn.innerHTML = originalText;
            solveBtn.disabled = false;
        });
    });
    
    // Assignment button click handler using event delegation
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('assign-btn') && !e.target.classList.contains('disabled')) {
            console.log('Assign button clicked via delegation');
            const ticketId = e.target.getAttribute('data-ticket-id');
            const currentAssigned = e.target.getAttribute('data-current-assigned');
            const allAssigned = e.target.getAttribute('data-all-assigned');
            
            console.log('Ticket ID:', ticketId);
            console.log('Current Assigned:', currentAssigned);
            console.log('All Assigned:', allAssigned);
            
            // Set ticket ID in form
            document.getElementById('ticket_id').value = ticketId;
            
            // Pre-select all assigned employees if reassigning
            if (allAssigned && allAssigned.trim() !== '') {
                const assignedIds = allAssigned.split(',');
                console.log('Assigned IDs:', assignedIds);
                
                // Clear all checkboxes first
                const checkboxes = document.querySelectorAll('.employee-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                // Check all assigned employees
                assignedIds.forEach(employeeId => {
                    const checkbox = document.getElementById('employee_' + employeeId.trim());
                    if (checkbox) {
                        checkbox.checked = true;
                        console.log('Checked employee:', employeeId);
                    }
                });
            } else {
                // Clear all checkboxes for new assignment
                const checkboxes = document.querySelectorAll('.employee-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
            }
            
            // Clear assignment note
            document.getElementById('assignment_note').value = '';
            
            // Show modal
            console.log('Showing modal');
            console.log('jQuery available:', typeof $ !== 'undefined');
            console.log('Modal element:', document.getElementById('assignmentModal'));
            
            // Try both jQuery and vanilla JS
            if (typeof $ !== 'undefined') {
                $('#assignmentModal').modal('show');
            } else {
                // Fallback to vanilla JS
                const modal = document.getElementById('assignmentModal');
                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 = 'modal-backdrop';
                    document.body.appendChild(backdrop);
                }
            }
        }
    });
    
    // Select All and Clear All functionality for checkboxes
    document.getElementById('selectAllBtn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.employee-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    });
    
    document.getElementById('clearAllBtn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.employee-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    });
    
    // Save assignment handler
    document.getElementById('saveAssignmentBtn').addEventListener('click', function() {
        const form = document.getElementById('assignmentForm');
        const formData = new FormData(form);
        
        // Show loading state
        const saveBtn = this;
        const originalText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Assigning...';
        saveBtn.disabled = true;
        
        // Add CSRF token to form data
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        // Get selected employee IDs from checkboxes
        const selectedEmployees = Array.from(document.querySelectorAll('.employee-checkbox:checked')).map(checkbox => checkbox.value);
        console.log('Selected employees:', selectedEmployees);
        
        // Validate at least one employee is selected
        if (selectedEmployees.length === 0) {
            alert('Please select at least one employee');
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
            return;
        }
        
        // Add selected employees to form data
        selectedEmployees.forEach(employeeId => {
            formData.append('employee_ids[]', employeeId);
        });
        
        console.log('Form data:', Object.fromEntries(formData));
        console.log('CSRF token:', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        fetch('{{ url("/api/tickets/assign") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json',
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                // Close modal
                if (typeof $ !== 'undefined') {
                    $('#assignmentModal').modal('hide');
                } else {
                    // Fallback to vanilla JS
                    const modal = document.getElementById('assignmentModal');
                    if (modal) {
                        modal.style.display = 'none';
                        modal.classList.remove('show');
                        document.body.classList.remove('modal-open');
                        
                        // Remove backdrop
                        const backdrop = document.getElementById('modal-backdrop');
                        if (backdrop) {
                            backdrop.remove();
                        }
                    }
                }
                
                // Show success message with employee names and status change
                const employeeNames = data.employees ? data.employees.map(emp => emp.name).join(', ') : 'selected employees';
                let successMessage = `Ticket assigned to ${data.employees ? data.employees.length : 0} employee(s): ${employeeNames}`;
                
                // Add status change information if applicable
                if (data.status_changed) {
                    successMessage += '\n\nStatus automatically changed from "Open" to "In Progress"';
                }
                
                alert(successMessage);
                
                // Reload page to show updated assignment
                location.reload();
            } else {
                console.error('Assignment failed:', data);
                let errorMessage = 'Error assigning ticket: ' + (data.message || 'Unknown error');
                if (data.errors) {
                    errorMessage += '\n\nValidation errors:\n';
                    Object.keys(data.errors).forEach(key => {
                        errorMessage += key + ': ' + data.errors[key].join(', ') + '\n';
                    });
                }
                alert(errorMessage);
            }
        })
        .catch(error => {
            console.error('Network error:', error);
            alert('Network error. Please check your connection and try again.');
        })
        .finally(() => {
            // Restore button state
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
        });
    });
    
    // Modal close handlers
    document.querySelectorAll('[data-dismiss="modal"]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            // Close assignment modal
            const assignmentModal = document.getElementById('assignmentModal');
            if (assignmentModal) {
                assignmentModal.style.display = 'none';
                assignmentModal.classList.remove('show');
                document.body.classList.remove('modal-open');
                
                // Remove backdrop
                const backdrop = document.getElementById('modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }
            }
            
            // Close solved modal
            const solvedModal = document.getElementById('solvedModal');
            if (solvedModal) {
                solvedModal.style.display = 'none';
                solvedModal.classList.remove('show');
                document.body.classList.remove('modal-open');
                
                // Remove backdrop
                const solvedBackdrop = document.getElementById('solved-modal-backdrop');
                if (solvedBackdrop) {
                    solvedBackdrop.remove();
                }
            }
        });
    });
    
    // Close modal when clicking outside
    document.getElementById('assignmentModal').addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
            this.classList.remove('show');
            document.body.classList.remove('modal-open');
            
            // Remove backdrop
            const backdrop = document.getElementById('modal-backdrop');
            if (backdrop) {
                backdrop.remove();
            }
        }
    });
    
    // Close solved modal when clicking outside
    document.getElementById('solvedModal').addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
            this.classList.remove('show');
            document.body.classList.remove('modal-open');
            
            // Remove backdrop
            const backdrop = document.getElementById('solved-modal-backdrop');
            if (backdrop) {
                backdrop.remove();
            }
        }
    });
});
</script>
@endsection