@extends('layouts.content')

@section('body_content')
    @php
        $ticketAccess = has_ticket_access();
    @endphp

    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-fluid px-4">
                <div class="page-header-content pt-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto mt-4">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i class="fa-solid fa-ticket fa-fw"></i><i
                                        class="fa-solid fa-circle-exclamation fa-fw"></i></div>
                                Detail Support Ticket
                            </h1>
                            <div class="page-header-subtitle">Your hub for submitting and tracking support inquiries</div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-fluid mt-n10 px-4">
            <div class="row">
                @if ($ticketAccess && !$ticketAccess['error'] && $ticketAccess['access'])
                    <div class="mb-3">
                        <button type="button" class="btn btn-light" onclick="window.location.href='/wait-ticket-list'"><i
                                class="fa-solid fa-arrow-left fa-fw me-2"></i>Back</button>
                    </div>
                @else
                    <div class="mb-3">
                        <button type="button" class="btn btn-light" onclick="window.location.href='/support-tickets'"><i
                                class="fa-solid fa-arrow-left fa-fw me-2"></i>Back</button>
                    </div>
                @endif
                <!-- LEFT SIDE -->
                <div class="col-lg-8">
                    <!-- TICKET INFO -->
                    <div class="card shadow-sm mb-4 border-0">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h5 class="fw-bold mb-1">
                                        <i class="fa-solid fa-hashtag text-primary"></i> {{ $data['ticket_no'] }}
                                    </h5>
                                    <p class="mb-3 text-muted">
                                        <i class="fa-solid fa-calendar-day me-1 text-secondary"></i>
                                        {{ \Carbon\Carbon::parse($data['created_at'])->timezone('Asia/Jakarta')->format('d F Y H:i') }}
                                    </p>

                                    {{-- === RESPONDENT & PIC INFO === --}}
                                    <div class="small text-muted">
                                        <div><strong>Respondent:</strong>
                                            {{ $data['approve_by']['name'] ?? ($data['pic_acc_by_name'] ?? '-') }}</div>
                                        <div><strong>PIC:</strong> {{ $data['pic_dev_by_name'] ?? '-' }}</div>
                                    </div>

                                </div>

                                @php
                                    $priority = $data['priority'];
                                    if ($priority === 'low') {
                                        $badge = 'bg-light-success';
                                        $priorityAliases = 'Low Priority';
                                    } elseif ($priority === 'mid') {
                                        $badge = 'bg-light-warning';
                                        $priorityAliases = 'Medium Priority';
                                    } elseif ($priority === 'high') {
                                        $badge = 'bg-light-danger';
                                        $priorityAliases = 'High Priority';
                                    }

                                    // status
                                    $isStatus = $data['is_status'];
                                    if ($isStatus == 0) {
                                        $statusAliases = 'Submitted';
                                        $badgeStatus = 'bg-light-dark';
                                    } elseif ($isStatus == 1) {
                                        $statusAliases = 'In Queue';
                                        $badgeStatus = 'bg-light-primary';
                                    } elseif ($isStatus == 2) {
                                        $statusAliases = 'In Progress';
                                        $badgeStatus = 'bg-light-warning';
                                    } elseif ($isStatus == 3) {
                                        $statusAliases = 'Rejected';
                                        $badgeStatus = 'bg-light-danger';
                                    } elseif ($isStatus == 4) {
                                        $statusAliases = 'Completed';
                                        $badgeStatus = 'bg-light-success';
                                    } elseif ($isStatus == 5) {
                                        $statusAliases = 'Set Meeting';
                                        $badgeStatus = 'bg-light-primary';
                                    } elseif ($isStatus == 6) {
                                        $statusAliases = 'Set Timeline';
                                        $badgeStatus = 'bg-light-dark';
                                    } elseif ($isStatus == 7) {
                                        $statusAliases = 'On Hold';
                                        $badgeStatus = 'bg-light-danger';
                                    }

                                    $isMajor = $data['is_major'];
                                    if ($isMajor == '0') {
                                        $majorAliases = 'Minor';
                                        $badgeMajor = 'bg-light-warning';
                                    } elseif ($isMajor == '1') {
                                        $badgeMajor = 'bg-light-danger';
                                        $majorAliases = 'Major';
                                    } else {
                                        $badgeMajor = 'bg-light-dark';
                                        $majorAliases = 'Uncategorized';
                                    }

                                @endphp

                                <div>
                                    <span class="badge {{ $badgeMajor }} me-1">{{ $majorAliases }}</span>
                                    <span class="badge {{ $badge }} me-1">{{ $priorityAliases }}</span>
                                    <span class="badge {{ $badgeStatus }} me-1">{{ $statusAliases }}</span>
                                </div>
                            </div>
                            <hr>
                            <div class="row gy-2">
                                <div class="col-md-6">
                                    <strong>Reporter :</strong>
                                    <div>{{ $data['created_by']['name'] }}</div>
                                </div>

                                @php
                                    $categoryLabel = match ($data['category'] ?? null) {
                                        'development' => 'IT Development',
                                        'support' => 'IT Support',
                                        default => '-',
                                    };
                                @endphp

                                <div class="col-md-6">
                                    <strong>Category :</strong>
                                    <div>{{ $categoryLabel }}</div>
                                </div>

                                <div class="col-md-6">
                                    <strong>Application Name :</strong>
                                    <div>{{ $data['application_name']['name'] ?? '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TICKET DETAIL -->
                    <div class="card shadow-sm mb-4 border-0">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3"><i class="fa-solid fa-file-lines text-primary me-2"></i> Ticket Detail
                            </h5>
                            <p><strong>Title:</strong> {{ $data['title'] }}</p>

                            <p><strong>Description:</strong></p>
                            <div class="border rounded p-3 bg-light mb-3" style="white-space: pre-line;">
                                {!! $data['description'] !!}
                            </div>

                            <p><strong>Attachments:</strong></p>
                            <div class="d-flex flex-wrap gap-2">
                                @if (!empty($data['attachments']))
                                    @foreach ($data['attachments'] as $attch)
                                        <a href="/assets/img/support-ticket/{{ $attch['file'] }}" target="_blank"
                                            class="btn btn-outline-secondary btn-sm">
                                            <i class="fa-solid fa-paperclip me-2"></i>
                                            {{ $attch['file'] ?? 'attachment' }}
                                        </a>
                                    @endforeach
                                @else
                                    <span class="text-muted fs-6">No attachments available.</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- DISCUSSION SECTION -->
                    <div class="card shadow-sm mb-4 border-0">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3"><i class="fa-solid fa-comments text-primary me-2"></i> Discussion</h5>

                            <div class="mb-3" style="max-height: 300px; overflow-y: auto;" id="discussion_container">
                            </div>

                            <form method="post" id="discussion_form" onsubmit="sendDiscussion(event)">
                                @csrf
                                <div class="input-group">
                                    <textarea class="form-control" placeholder="Write a comment..." id="message_discussion" name="message"
                                        style="min-height: 50px; overflow: hidden; resize: none;" oninput="autoResize(this)"></textarea>
                                    <button class="btn btn-primary" type="submit"><i
                                            class="fa-solid fa-paper-plane"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- TIMELINE / ACTION PLAN -->
                    @if ($data['scheduled_timeline_at'])
                        <div class="card shadow-sm mb-4 border-0">
                            <div class="card-body">
                                <h5 class="fw-bold mb-3">
                                    <i class="fa-solid fa-calendar-days text-primary me-2"></i> Action Plan Timeline
                                </h5>

                                {{-- SUPPORT VIEW --}}
                                {{-- USER VIEW --}}
                                <div class="alert alert-light border d-flex align-items-center" role="alert">
                                    <i class="fa-solid fa-user me-2 text-primary"></i>
                                    <div>User Mode — Anda hanya dapat melihat progress Action Plan.</div>
                                </div>

                                <div class="timeline-view mt-3">
                                    <div class="timeline-item border-start border-4 border-primary ps-3 mb-3">
                                        <div class="fw-bold text-dark">HRIS Employee</div>
                                        <div class="small text-muted">Task: Fix bug pada controller</div>
                                        <div class="small mt-1"><i class="fa-solid fa-calendar-day me-1 text-primary"></i>
                                            25 Okt 2025, 15:00 — 17:00</div>
                                    </div>

                                    <div class="timeline-item border-start border-4 border-success ps-3 mb-3">
                                        <div class="fw-bold text-dark">HRIS Payroll</div>
                                        <div class="small text-muted">Task: Testing modul slip gaji</div>
                                        <div class="small mt-1"><i class="fa-solid fa-calendar-day me-1 text-success"></i>
                                            26 Okt 2025, 09:00 — 12:00</div>
                                    </div>

                                    <div class="timeline-item border-start border-4 border-warning ps-3">
                                        <div class="fw-bold text-dark">HRIS Attendance</div>
                                        <div class="small text-muted">Task: Review log absen mobile</div>
                                        <div class="small mt-1"><i class="fa-solid fa-calendar-day me-1 text-warning"></i>
                                            27 Okt 2025, 10:00 — 15:00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif


                </div>

                <!-- RIGHT SIDE -->
                <div class="col-lg-4">
                    @if ($ticketAccess && $ticketAccess['access'] && $ticketAccess['category'] !== 'controlling')
                        {{-- === CARD: ACTIONS === --}}
                        <div class="card shadow-sm border-0 mb-3">
                            <div class="card-header bg-light fw-bold">
                                <i class="fa-solid fa-gears me-2 text-primary"></i> Actions
                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-wrap gap-2">
                                    {{-- Ubah Status --}}
                                    <button class="btn btn-sm btn-outline-primary w-100" type="button"
                                        onclick="changeStatus('{{ $uid }}', '{{ $data['ticket_no'] }}', '{{ $data['is_status'] }}')">
                                        <i class="fa-solid fa-arrows-rotate me-1"></i> Change Status
                                    </button>

                                    {{-- Set Major / Minor --}}
                                    <button class="btn btn-sm btn-outline-warning w-100" type="button"
                                        onclick="editCategory('{{ $uid }}', '{{ $data['ticket_no'] }}', '{{ $data['is_major'] }}')">
                                        <i class="fa-solid fa-triangle-exclamation me-1"></i> Set Major / Minor
                                    </button>

                                    {{-- Set Tanggal Meeting --}}
                                    <button class="btn btn-sm btn-outline-success w-100" type="button"
                                        onclick="setScheduleMeeting('{{ $uid }}','{{ $data['ticket_no'] }}')">
                                        <i class="fa-solid fa-calendar-days me-1"></i> Scheduling Meeting
                                    </button>

                                    {{-- Set Timeline --}}
                                    <button class="btn btn-sm btn-outline-secondary w-100" type="button"
                                        onclick="setTimeline('{{ $uid }}', '{{ $data['ticket_no'] }}')">
                                        <i class="fa-solid fa-timeline me-1"></i> Set Timeline
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- === CARD: Action === --}}
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-header bg-light fw-bold">
                            <i class="fa-solid fa-list-check me-2"></i>Action Summary
                        </div>

                        <div class="card-body">
                            {{-- === ACTION SUMMARY / TIMELINE === --}}
                            @if (!empty($data))
                                <div class="mb-3 border-bottom pb-3">
                                    <ul class="list-unstyled small mb-0 lh-sm">
                                        <li class="mb-3">
                                            <strong>Response Time:</strong>
                                            {{ $data['response_at']
                                                ? \Carbon\Carbon::parse($data['response_at'])->timezone('Asia/Jakarta')->format('d M Y H:i')
                                                : '-' }}
                                        </li>
                                        <li class="mb-3">
                                            <strong>PIC Approved:</strong>
                                            {{ $data['pic_acc_at']
                                                ? \Carbon\Carbon::parse($data['pic_acc_at'])->timezone('Asia/Jakarta')->format('d M Y H:i')
                                                : '-' }}
                                            @if (!empty($data['pic_acc_by_name']))
                                                <span class="text-muted">by {{ $data['pic_acc_by_name'] }}</span>
                                            @endif
                                        </li>
                                        <li class="mb-3">
                                            <strong>Meeting Set:</strong>
                                            {{ $data['meeting_at']
                                                ? \Carbon\Carbon::parse($data['meeting_at'])->timezone('Asia/Jakarta')->format('d M Y H:i')
                                                : '-' }}
                                        </li>
                                        <li class="mb-3">
                                            <strong>Scheduled Meeting:</strong>
                                            {{ $data['scheduled_meeting_at']
                                                ? \Carbon\Carbon::parse($data['scheduled_meeting_at'])->format('d M Y H:i')
                                                : '-' }}
                                        </li>
                                        <li class="mb-3">
                                            <strong>Timeline Set:</strong>
                                            {{ $data['timeline_at']
                                                ? \Carbon\Carbon::parse($data['timeline_at'])->timezone('Asia/Jakarta')->format('d M Y H:i')
                                                : '-' }}
                                            @if (!empty($data['timeline_by_name']))
                                                <span class="text-muted">by {{ $data['timeline_by_name'] }}</span>
                                            @endif
                                        </li>
                                        <li class="mb-3">
                                            <strong>Scheduled Timeline:</strong>
                                            {{ $data['scheduled_timeline_at']
                                                ? \Carbon\Carbon::parse($data['scheduled_timeline_at'])->timezone('Asia/Jakarta')->format('d M Y H:i')
                                                : '-' }}
                                        </li>
                                    </ul>
                                </div>
                            @endif
                            {{-- === END SUMMARY === --}}
                        </div>


                    </div>

                    {{-- === CARD: HISTORY === --}}
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-light fw-bold">
                            <i class="fa-solid fa-clock-rotate-left me-2 text-primary"></i> History
                        </div>

                        <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                            {{-- === HISTORY === --}}
                            @if (!empty($data['history']))
                                @foreach ($data['history'] as $history)
                                    <div class="mb-3 border-bottom pb-2">
                                        <div class="fw-semibold text-dark">{{ $history['title'] }}</div>
                                        <div class="small text-muted">
                                            {{ \Carbon\Carbon::parse($history['created_at'])->timezone('Asia/Jakarta')->format('d F Y H:i') }}
                                        </div>
                                        <div class="small">{{ $history['comment'] }}</div>
                                    </div>
                                @endforeach
                            @else
                                <span class="text-muted fs-6">No history available.</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('support_tickets.modals.change_category_modal')
    @include('support_tickets.modals.schedule_meeting')
    @include('support_tickets.modals.action_modal')
    @include('support_tickets.modals.create_timeline_modal')

    @push('scripts')
        <script>
            const uid = @json($uid)
        </script>
        <script src="{{ assetTemp('/js/functions/textarea.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/fetchData.js') }}"></script>
        <script src="{{ assetTemp('/js/datepicker.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/index.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/category.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/schedule_meeting.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/change_status.js') }}"></script>
        <script src="{{ assetTemp('/js/support_tickets/details/timeline.js') }}"></script>
    @endpush
@endsection