@extends('layouts.app')

@push('pageTitle')
    {{ __('labels.support_ticket') }}
@endpush

@section('content')
    @include('components.common.page-header', [
        'pageTitle' => __('labels.support_ticket'),
        'actionButton' => [
            'url' => route('support-tickets.index'),
            'text' => __('labels.back_to_list'),
        ],
    ])
    <div class="row">
        <div class="col-xl-12">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 
                            border-start border-4 
                            border-left-{{ \App\Enums\SupportTicketStatus::colorFor($ticket->status) }}
                            border-{{ \App\Enums\SupportTicketStatus::colorFor($ticket->status) }}
                ">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h1 class="view-title mb-0">{{ $ticket->subject }}</h1>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                @if ($ticket->category)
                                    <span class="badge bg-primary px-3 py-2">
                                        <i class="fas fa-folder me-1"></i>{{ $ticket->category->name }}
                                    </span>
                                @endif
                                {{-- Status Badge --}}
                                <span class="badge bg-info px-3 py-2">
                                    <i class="fas fa-circle me-1"></i>
                                    {{ $ticket->status_label }}
                                </span>
                                
                                {{-- Priority Badge --}}
                                <span class="badge bg-warning px-3 py-2">
                                    <i class="fas fa-flag me-1"></i>
                                    {{ $ticket->priority_label }}
                                </span>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            @can('update', $ticket)
                                <a href="{{ route('support-tickets.edit', $ticket) }}" class="btn btn-sm btn-outline-primary"
                                    data-bs-toggle="tooltip" title="{{ __('labels.edit') }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                            @endcan
                            
                            {{-- Change Status Dropdown --}}

                            @can('updateStatus', $ticket)
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-warning dropdown-toggle" type="button" 
                                        data-bs-toggle="dropdown" aria-expanded="false"
                                        data-bs-toggle="tooltip" title="{{ __('labels.change_status') }}">
                                    <i class="fas fa-tag me-1"></i>{{ __('labels.status') }}
                                </button>
                                <ul class="dropdown-menu">
                                    @foreach(\App\Enums\SupportTicketStatus::options() as $statusOption => $statusLabel)
                                        <li>
                                            {{-- <form action="{{ route('support-tickets.update-status', $ticket) }}" method="ticket" class="d-inline">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="status" value="{{ $statusOption }}">
                                                <button type="submit" class="dropdown-item">
                                                    <i class="fas {{ \App\Enums\SupportTicketStatus::iconFor($statusOption) }} me-2"></i>
                                                    {{ $statusLabel }}
                                                </button>
                                            </form> --}}
                                            <button type="button" 
                                                    class="dropdown-item"
                                                    data-action="update-status"
                                                    data-ticket-id="{{ $ticket->id }}"
                                                    data-status="{{ $statusOption }}"
                                                    onclick="updateTicketStatus({{ $ticket->id }}, '{{ $statusOption }}')">
                                                <i class="fas {{ \App\Enums\SupportTicketStatus::iconFor($statusOption) }} me-2"></i>
                                                {{ $statusLabel }}
                                            </button>
                                        </li>
                                        {{-- onclick="updateTicketStatus({{ $ticket->id }}, '{{ $statusOption }}')" --}}
                                    @endforeach
                                </ul>
                            </div>
                            @endcan
    
                            {{-- Change Priority Dropdown --}}
                            @can('updateStatus', $ticket)
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button" 
                                        data-bs-toggle="dropdown" aria-expanded="false"
                                        data-bs-toggle="tooltip" title="{{ __('labels.change_priority') }}">
                                    <i class="fas fa-flag me-1"></i>{{ __('labels.priority') }}
                                </button>
                                <ul class="dropdown-menu">
                                    @foreach(\App\Enums\SupportTicketPriority::options() as $priorityOption => $priorityLabel)
                                        <li>
                                            <button type="button" 
                                                    class="dropdown-item"
                                                    data-action="update-priority"
                                                    data-ticket-id="{{ $ticket->id }}"
                                                    data-priority="{{ $priorityOption }}"
                                                    onclick="updateTicketPriority({{ $ticket->id }}, '{{ $priorityOption }}')">
                                                <i class="fas {{ \App\Enums\SupportTicketPriority::iconFor($priorityOption) }} me-2"></i>
                                                {{ $priorityLabel }}
                                            </button>
                                        </li>

                                        {{-- updateTicketPriority(ticketId, priority)  --}}
                                    @endforeach
                                </ul>
                            </div>
                            @endcan
                            
                            @can('delete', $ticket)
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                    onclick="deleteRecordFrom('{{ route('support-tickets.destroy', $ticket) }}')"
                                    data-bs-toggle="tooltip" title="{{ __('labels.delete') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            @endcan
                            
                            <button id="copyLinkBtnHeader" onclick="copyToClipboard(window.location.href, this)"
                                class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip"
                                title="{{ __('labels.copy_link') }}">
                                <i class="fas fa-link"></i>
                            </button>
                        </div>
                    </div>

                    <div class="view-meta d-flex flex-wrap gap-3 mb-2">
                        <div class="d-flex align-items-center gap-3 p-3 bg-white border rounded shadow-sm">
                            <div class="bg-primary-opacity-10 bg-opacity-10 p-2 rounded">
                                <i class="fas fa-user text-primary fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">{{ __('labels.requested_by') }}</small>
                                <strong class="fs-6 link-primary-color-underline" 
                                onclick="window.open('{{ route('users.show', $ticket->user_id) }}', '_blank')">
                                {{ $ticket->requestedBy?->name ?? 'N/A' }}</strong>
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-3 p-3 bg-white border rounded shadow-sm">
                            <div class="bg-success bg-opacity-10 p-2 rounded">
                                <i class="fas fa-folder text-success fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">{{ __('labels.category') }}</small>
                                <strong class="fs-6">{{ $ticket->category?->name ?? 'N/A' }}</strong>
                            </div>
                        </div>


                        <div class="d-flex align-items-center gap-3 p-3 bg-white border rounded shadow-sm">
                            <div class="
                                    @if(\App\Enums\SupportTicketStatus::colorFor($ticket->status) == 'primary')
                                        bg-primary-opacity-10
                                    @else
                                        bg-{{ \App\Enums\SupportTicketStatus::colorFor($ticket->status) }} bg-opacity-10
                                    @endif 
                                p-2 rounded">
                                <i class="fas {{ \App\Enums\SupportTicketStatus::iconFor($ticket->status) }}
                                    text-{{ \App\Enums\SupportTicketStatus::colorFor($ticket->status) }}
                                    fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">{{ __('labels.status') }}</small>
                                <strong class="fs-6">{{ $ticket->status_label ?? 'N/A' }}</strong>
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-3 p-3 bg-white border rounded shadow-sm">
                            <div class="
                                @if(\App\Enums\SupportTicketPriority::colorFor($ticket->priority) == 'primary')
                                        bg-primary-opacity-10
                                    @else
                                        bg-{{ \App\Enums\SupportTicketPriority::colorFor($ticket->priority) }} bg-opacity-10
                                    @endif p-2 rounded">
                                <i class="fas {{ \App\Enums\SupportTicketPriority::iconFor($ticket->priority) }}
                                    text-{{ \App\Enums\SupportTicketPriority::colorFor($ticket->priority) }}
                                    fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">{{ __('labels.priority') }}</small>
                                <strong class="fs-6">{{ $ticket->priority_label ?? 'N/A' }}</strong>
                            </div>
                        </div>
                        @if($ticket->due_by)
                        <div class="d-flex align-items-center gap-3 p-3 bg-white border rounded shadow-sm">
                            <div class="bg-warning bg-opacity-10 p-2 rounded">
                                <i class="fas fa-hourglass-half text-warning fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">{{ __('labels.due_by') }}</small>
                                <strong class="fs-6">{{ $ticket->due_by?->format('d.m.Y H:i') ?? 'N/A' }}</strong>
                            </div>
                        </div>
                        @endif
                    </div>
                    
                    @if($ticket->resolved_at || $ticket->closed_at)
                    <div class="mt-3 d-flex gap-3">
                        @if($ticket->resolved_at)
                        <small class="text-muted">
                            <i class="fas fa-check-circle text-success me-1"></i>
                            {{ __('labels.resolved_at') }}: {{ $ticket->resolved_at->format('d.m.Y H:i') }}
                        </small>
                        @endif
                        @if($ticket->closed_at)
                        <small class="text-muted">
                            <i class="fas fa-lock text-secondary me-1"></i>
                            {{ __('labels.closed_at') }}: {{ $ticket->closed_at->format('d.m.Y H:i') }}
                        </small>
                        @endif
                    </div>
                    @endif
                    <div class="d-flex justify-content-between align-items-center border-top pt-3">
                        <div>
                            @include('components.common.saveable', [
                                'saveableType' => 'support-ticket',
                                'saveableId' => $ticket->id,
                                'isSaved' => auth()->check() ? $ticket->isSavedByUser(auth()->id()) : false,
                                'saveCounts' => $ticket->saves_count ?? $ticket->saves()->count(),
                            ])
                            @include('components.common.favorable', [
                                'favorableType' => 'support-ticket',
                                'favorableId' => $ticket->id,
                                'isFavorited' => auth()->check() ? $ticket->isFavoritedByUser(auth()->id()) : false,
                                'favoriteCounts' => $ticket->favorites_count ?? $ticket->favorites()->count(),
                            ])
                        </div>
                    </div>

                </div>
            </div>

            @if ($ticket->description)
                <div class="card section-card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent border-bottom py-3">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-align-left me-2 text-primary"></i>
                            {{ __('labels.description') }}
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="view-content">{!! nl2br(e($ticket->description)) !!}</div>
                    </div>
                </div>
            @endif

            @if (isset($ticket) && ($ticket->status === 'open' || $ticket->status === 'in_progress'))
                @include('components.comments.index', [
                    'commentsCount' => $ticket->comments()->approved()->count(),
                    'comments' => $ticket->comments ?? null,
                    'commentableId' => $ticket->id ?? null,
                    'commentableType' => "App\Models\SupportTicket",
                    'loadCommentsUrl' => route('comments.index', ['commentableType' => 'support_tickets', 'commentableId' => $ticket->id]),
                    'isDisabled' =>
                        $ticket->status === 'closed' ||
                        $ticket->status === 'resolved',
                    'disabledMessage' => $ticket->status === 'closed' || $ticket->status === 'resolved'
                        ? __('labels.closed')
                        : ($ticket->status === 'resolved'
                            ? __('labels.resolved')
                            : ''),
                    'isChangeStatusDisabled' => true,
                    'isVotingDisabled' => true,
                    'isMarkAsAnswerDisabled' => true,
                ])
            @endif
        </div>
    </div>
@endsection

@push('js')
<script>
    const lang_open = "@lang('labels.open')";
    const lang_in_progress = "@lang('labels.in_progress')";
    const lang_resolved = "@lang('labels.resolved')";
    const lang_closed = "@lang('labels.closed')";
    const lang_low = "@lang('labels.low')";
    const lang_medium = "@lang('labels.medium')";
    const lang_high = "@lang('labels.high')";
    const lang_urgent = "@lang('labels.urgent')";
    const lang_change_status = "@lang('labels.change_status')?";
    const lang_change_priority = "@lang('labels.change_priority')?";    
    const lang_confirm_change_status_message = "@lang('messages.confirm_change_status_message')";
    const lang_confirm_change_priority_message = "@lang('messages.confirm_change_priority_message')";
    const lang_updating_ticket_status = "@lang('messages.updating_ticket_status')";
    const lang_updating_ticket_priority = "@lang('messages.updating_ticket_priority')";
    const lang_yes_update_it = "@lang('datatable.yes_update_it')";
    const lang_updated = "@lang('datatable.updated')";
    const lang_failed = "@lang('datatable.failed')";
</script>
<script src="{{ asset('assets/custom/js/support-tickets/show.js') }}?v=2"></script>
@endpush