@extends('layouts.app')
@section('title')Support Tickets @endsection
@section('content')
<style>
    .status-badge {
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: white !important;
    }
    .priority-badge {
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: white !important;
    }
    /* Status Color Overrides */
    .status-open {
        background-color: #007bff !important;
        box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
        border: none !important;
    }
    .status-in_progress {
        background-color: #ffc107 !important;
        color: #212529 !important;
        border: none !important;
    }
    .status-resolved {
        background-color: #28a745 !important;
        box-shadow: 0 0 3px rgba(40, 167, 69, 0.3);
        border: none !important;
    }
    .status-closed {
        background-color: #6c757d !important;
        border: none !important;
    }
    /* Priority Color Overrides */
    .priority-low {
        background-color: #17a2b8 !important;
        border: none !important;
    }
    .priority-medium {
        background-color: #ffc107 !important;
        color: #212529 !important;
        border: none !important;
    }
    .priority-high {
        background-color: #dc3545 !important;
        border: none !important;
    }
    .priority-urgent {
        background-color: #343a40 !important;
        animation: pulse 2s infinite;
        box-shadow: 0 0 5px rgba(52, 58, 64, 0.5);
        border: none !important;
    }
    /* Special styling for urgent priority */
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    .attachment-icon {
        color: #6c757d;
        font-size: 14px;
    }
    .ticket-actions {
        white-space: nowrap;
    }
    .ticket-subject {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Highlighting for new tickets */
    .new-ticket-row {
        background-color: #fff3cd !important;
        border-left: 3px solid #ffc107 !important;
    }
    .new-ticket-row:hover {
        background-color: #ffeaa7 !important;
    }
    .new-badge {
        background-color: #dc3545;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 5px;
    }
</style>

<section class="content top-head">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary border-no">
                <div class="box-header with-border blue-back">
                    <h3 class="box-title">
                        @if(Auth::user()->user_role == 1)
                            {{ __('All Support Tickets') }}
                        @else
                            {{ __('My Support Tickets') }}
                        @endif
                    </h3>
                    <div class="pull-right">
                        <a href="{{ route('support.create') }}" class="btn btn-success btn-sm">
                            <i class="fa fa-plus"></i> Create Ticket
                        </a>
                    </div>
                </div>
                <div class="box-body">
                    <!-- DataTable -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="supportTicketsTable">
                            <thead>
                                <tr>
                                    <th>Ticket #</th>
                                    <th>Subject</th>
                                    <th>Category</th>
                                    @if(Auth::user()->user_role == 1)
                                        <th>Created By</th>
                                    @endif
                                    <th>Status</th>
                                    <th>Priority</th>
                                    <th>Replies</th>
                                    <th>Files</th>
                                    <th>Created</th>
                                    <th>Last Updated</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tickets as $ticket)
                                    @php
                                        $isNewForUser = (Auth::user()->user_role == 1 && $ticket->isNewForAdmin()) || (Auth::user()->user_role != 1 && $ticket->isNewForUser());
                                    @endphp
                                    <tr class="@if($isNewForUser) new-ticket-row @endif">
                                        <td>
                                            <strong>#{{ $ticket->ticket_number }}</strong>
                                            @if($isNewForUser)
                                                <span class="new-badge">New</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="ticket-subject" title="{{ $ticket->subject }}">
                                                {{ $ticket->subject }}
                                            </div>
                                            <small class="text-muted">{{ Str::limit($ticket->description, 50) }}</small>
                                        </td>
                                        @php
                                            $cat = $ticket->category ?? '';
                                            if ($cat === 'it') {
                                                $categoryLabel = 'Technical Support';
                                            } elseif ($cat === 'account') {
                                                $categoryLabel = 'Account Manager';
                                            } elseif ($cat === 'admin') {
                                                $categoryLabel = 'Admin';
                                            } else {
                                                $categoryLabel = $cat ? ucfirst($cat) : '—';
                                            }
                                        @endphp
                                        <td>{{ $categoryLabel }}</td>
                                        @if(Auth::user()->user_role == 1)
                                            <td>{{ $ticket->user->name. ' ' . $ticket->user->last_name }}</td>
                                        @endif
                                        <td>
                                            <span class="badge badge-{{ $ticket->status_color }} status-badge status-{{ $ticket->status }}">
                                                {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $ticket->priority_color }} priority-badge priority-{{ $ticket->priority }}">
                                                {{ ucfirst($ticket->priority) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            @if($ticket->messages->count() > 0)
                                                <span class="badge badge-info">{{ $ticket->messages->count() }}</span>
                                            @else
                                                <span class="text-muted">0</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if($ticket->attachments->count() > 0)
                                                <span class="badge badge-secondary">{{ $ticket->attachments->count() }}</span>
                                            @else
                                                <span class="text-muted">0</span>
                                            @endif
                                        </td>
                                        <td>{{ $ticket->created_at->format('Y-m-d H:i') }}</td>
                                        <td>{{ $ticket->updated_at->format('Y-m-d H:i') }}</td>
                                        <td class="ticket-actions">
                                            <a href="{{ route('support.show', $ticket->id) }}" class="btn btn-sm btn-primary" title="View Ticket">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            @if(Auth::user()->user_role == 1 && $ticket->assignedTo)
                                                <span class="text-muted" title="Assigned to: {{ $ticket->assignedTo->name }}">
                                                    <i class="fa fa-user-md"></i>
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function() {
    $('#supportTicketsTable').DataTable({
        "pageLength": 25,
        "order": [[ @if(Auth::user()->user_role == 1) 7 @else 6 @endif, "desc" ]], // Order by created date
        "columnDefs": [
            { "orderable": false, "targets": [@if(Auth::user()->user_role == 1) 9 @else 8 @endif] }, // Actions column not sortable
            { "searchable": false, "targets": [@if(Auth::user()->user_role == 1) 9 @else 8 @endif] } // Actions column not searchable
        ],
        "responsive": true,
        "dom": '<"row"<"col-sm-6"l><"col-sm-6"f>>rtip',
        "language": {
            "search": "Search Tickets:",
            "lengthMenu": "Show _MENU_ Tickets Per Page",
            "info": "Showing _START_ to _END_ of _TOTAL_ Tickets",
            "infoEmpty": "No Tickets",
            "infoFiltered": "(Filtered from _MAX_ Total Tickets)",
            "emptyTable": "No Support Tickets Found",
            "zeroRecords": "No Matching Tickets Found"
        },
        "createdRow": function(row, data, dataIndex) {
            // Preserve the new-ticket-row class if it exists
            if ($(row).hasClass('new-ticket-row')) {
                $(row).addClass('new-ticket-row');
            }
        }
    });
});
</script>
@endsection