@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @php
                            $showEncryptedId = encrypt($ticket->id);
                            $showStatusIt = strtoupper(trim((string) ($ticket->status_it ?? '')));
                            $showReceiverNik = $ticket->jenis === 'H'
                                ? $ticket->hardware_it
                                : $ticket->software_it;
                            $canRespondToTransfer =
                                $showStatusIt === 'T' &&
                                strtoupper(trim((string) $showReceiverNik)) ===
                                    strtoupper(trim((string) ($user_nik ?? session('username'))));
                        @endphp
                        @if ($ticket->status === 'A' && $showStatusIt === '')
                            <button class="btn btn-primary mb-0"
                                onclick="openTransferModal('{{ $showEncryptedId }}', '{{ $ticket->id }}')"><i
                                    class="fas fa-share me-1"></i>Transfer</button>
                        @elseif ($canRespondToTransfer)
                            <button class="btn btn-success mb-0" onclick="openApproveModal('{{ $showEncryptedId }}')"><i
                                    class="fas fa-check-circle me-1"></i>Approve</button>
                            <button class="btn btn-danger mb-0" onclick="openRejectModal('{{ $showEncryptedId }}')"><i
                                    class="fas fa-times-circle me-1"></i>Reject IT</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <!-- LEFT SECTION: FORM -->
            <div class="col-md-6">
                <!-- CARD FORM -->
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-2">
                            <span id="card-title">Detail Ticketing</span>

                            @php
                                $statusIt = strtoupper(trim((string) ($ticket->status_it ?? '')));
                                $statusItText = $statusIt ?: '-';
                                $statusItClass = 'secondary';

                                if ($statusIt === 'T') {
                                    $statusItClass = 'warning';
                                    $statusItText = 'Throwback';
                                } elseif ($statusIt === 'A') {
                                    $statusItClass = 'approve';
                                    $statusItText = 'Approved By IT';
                                } elseif ($statusIt === 'N') {
                                    $statusItClass = 'danger';
                                    $statusItText = 'Reject By IT';
                                }
                            @endphp

                            <span class="badge bg-{{ $statusItClass }} float-end">
                                {{ $statusItText }}
                            </span>
                        </p>

                        <hr class="horizontal dark mt-0">

                        <form role="form" method="POST" id="view-ticketing-form" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="ticket_id" value="{{ $ticket->id }}">
                            <input type="hidden" id="ticket_number_hidden" value="{{ $ticket->id }}">

                            @php
                                $hasUrgency = !empty($ticket->urgency);
                            @endphp

                            <div class="row g-2 align-items-center mb-3">
                                <div class="col-md-4">
                                    <label class="form-label mb-0">Ticket Number</label>
                                    <input type="text" class="form-control form-control-sm" value="{{ $ticket->id }}"
                                        readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label mb-0">Date</label>
                                    <input type="date" class="form-control form-control-sm"
                                        value="{{ $ticket->ticket_date }}" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label mb-0">Jenis</label>
                                    <input type="text" class="form-control form-control-sm" value="{{ $jenis_text }}"
                                        readonly>
                                </div>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-0">Reported By</label>
                                    <input type="text" class="form-control form-control-sm"
                                        value="{{ $reported_by_name }}" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-0">Departemen</label>
                                    <input type="text" class="form-control form-control-sm"
                                        value="{{ $reported_by_dept }}" readonly>
                                </div>
                            </div>

                            @if ($ticket->jenis == 'S')
                                <div id="software-fields">
                                    <div class="row g-3 mb-3">
                                        {{-- <div class="col-md-6">
                                            <label class="form-label mb-0">Jenis Software</label>
                                            <input type="text" class="form-control form-control-sm" value="{{ $jenis_software_text }}" readonly>
                                        </div> --}}

                                        <div class="col-md-6">
                                            <label class="form-label mb-0">Nama Software</label>
                                            <input type="text" class="form-control form-control-sm"
                                                value="{{ $software_detail }}" readonly>
                                        </div>

                                        <div class="col-md-{{ $hasUrgency ? '6' : '12' }}">
                                            <label class="form-label mb-0">Software IT</label>
                                            <input type="text" class="form-control form-control-sm"
                                                value="{{ $it_name }}" readonly>
                                        </div>

                                        @if ($hasUrgency)
                                            <div class="col-md-6">
                                                <label class="form-label mb-0">Urgency</label>
                                                <input type="text" class="form-control form-control-sm"
                                                    value="{{ $ticket->urgency_name ?? $ticket->urgency }}" readonly>
                                            </div>
                                        @endif

                                        <div class="col-md-12">
                                            <label class="form-label mb-0">
                                                Modul/Fitur Bermasalah
                                                <small class="text-muted">(Maks: 50 karakter)</small>
                                            </label>
                                            <input type="text" class="form-control form-control-sm editable-field"
                                                id="modul" name="modul" value="{{ $modul }}" maxlength="50"
                                                readonly>
                                            <div class="form-text text-muted mt-1 edit-only" style="display: none;">
                                                <small class="text-info">
                                                    <span id="modul-counter">{{ strlen($modul) }}</span>/50 karakter
                                                </small>
                                            </div>
                                        </div>

                                        <div class="col-md-12 edit-only" style="display: none;">
                                            <label for="screenshot_software" class="form-label mb-0">
                                                Screenshot Error Baru (Optional)
                                            </label>
                                            <input class="form-control form-control-sm" type="file"
                                                id="screenshot_software" name="screenshot_software"
                                                accept=".jpg,.jpeg,.png" onchange="previewImageView(this, 'software')">
                                            <div class="form-text text-muted mt-1">
                                                <small class="text-primary">Maks: 3 MB | Format: JPG, JPEG, PNG</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if ($ticket->jenis == 'H')
                                <div id="hardware-fields">
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-{{ $hasUrgency ? '6' : '12' }}">
                                            <label class="form-label mb-0">Hardware IT</label>
                                            <input type="text" class="form-control form-control-sm"
                                                value="{{ $it_name }}" readonly>
                                        </div>

                                        @if ($hasUrgency)
                                            <div class="col-md-6">
                                                <label class="form-label mb-0">Urgency</label>
                                                <input type="text" class="form-control form-control-sm"
                                                    value="{{ $ticket->urgency_name ?? $ticket->urgency }}" readonly>
                                            </div>
                                        @endif

                                        <div class="col-md-12">
                                            <label class="form-label mb-0">
                                                Perangkat Bermasalah
                                                <small class="text-muted">(Maks: 50 karakter)</small>
                                            </label>
                                            <input type="text" class="form-control form-control-sm editable-field"
                                                id="perangkat_bermasalah" name="perangkat_bermasalah"
                                                value="{{ $perangkat_bermasalah }}" maxlength="50" readonly>
                                            <div class="form-text text-muted mt-1 edit-only" style="display: none;">
                                                <small class="text-info">
                                                    <span
                                                        id="perangkat-counter">{{ strlen($perangkat_bermasalah) }}</span>/50
                                                    karakter
                                                </small>
                                            </div>
                                        </div>

                                        <div class="col-md-12 edit-only" style="display: none;">
                                            <label for="lampiran_hardware" class="form-label mb-0">
                                                Upload Lampiran Baru (Optional)
                                            </label>
                                            <input class="form-control form-control-sm" type="file"
                                                id="lampiran_hardware" name="lampiran_hardware" accept=".jpg,.jpeg,.png"
                                                onchange="previewImageView(this, 'hardware')">
                                            <div class="form-text text-muted mt-1">
                                                <small class="text-primary">Maks: 3 MB | Format: JPG, JPEG, PNG</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>

                {{-- CARD INFO BERDASARKAN STATUS_IT --}}
                @if ($statusIt === 'T')
                    <div class="card mt-3">
                        <div class="card-body p-3">
                            <div
                                style="background:#fff3cd;border:2px solid #ffc107;border-left:6px solid #ffc107;border-radius:8px;padding:15px;">
                                <h6 class="mb-1" style="color:#856404;font-weight:bold;">
                                    <i class="fas fa-share me-1"></i> Ticket Throwback
                                </h6>
                                <small style="color:#856404;">
                                    Ticket ini sedang dalam proses transfer dan menunggu tindakan dari PIC penerima (Approve
                                    / Reject).
                                </small>
                                @if (!empty($ticket->note_transfer))
                                    <div class="mt-3 p-3 bg-white rounded-3 border shadow-sm">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge bg-warning text-dark">Note Transfer</span>
                                        </div>
                                        <div class="text-dark" style="white-space:pre-wrap;">{{ $ticket->note_transfer }}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @elseif($statusIt === 'A')
                    <div class="card mt-3">
                        <div class="card-body p-3">
                            <div
                                style="background:#d4edda;border:2px solid #28a745;border-left:6px solid #28a745;border-radius:8px;padding:15px;">
                                <h6 class="mb-1" style="color:#155724;font-weight:bold;">
                                    <i class="fas fa-check-circle me-1"></i> Ticket Approved By IT
                                </h6>
                                <small style="color:#155724;">
                                    Ticket ini sudah disetujui oleh IT.
                                </small>
                                @if (!empty($ticket->note_transfer))
                                    <div class="mt-3 p-3 bg-white rounded-3 border shadow-sm">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge bg-success">Note Transfer</span>
                                        </div>
                                        <div class="text-dark" style="white-space:pre-wrap;">{{ $ticket->note_transfer }}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @elseif($statusIt === 'N')
                    <div class="card mt-3">
                        <div class="card-body p-3">
                            <div
                                style="background:#f8d7da;border:2px solid #dc3545;border-left:6px solid #dc3545;border-radius:8px;padding:15px;">
                                <h6 class="mb-2" style="color:#721c24;font-weight:bold;">
                                    <i class="fas fa-times-circle me-1"></i> Ticket Rejected By IT
                                </h6>

                                @if (!empty($ticket->alasan_reject_it))
                                    <div class="mt-3 p-3 bg-white rounded-3 border shadow-sm">
                                        @if (!empty($ticket->alasan_reject_it))
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge bg-danger">Alasan Reject IT</span>
                                            </div>
                                            <div class="text-dark" style="white-space:pre-wrap;">
                                                {{ $ticket->alasan_reject_it }}</div>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @else
                    <div class="card mt-3">
                        <div class="card-body p-3">
                            <div
                                style="background:#e2e3e5;border:2px solid #6c757d;border-left:6px solid #6c757d;border-radius:8px;padding:15px;">
                                <h6 class="mb-1" style="color:#343a40;font-weight:bold;">
                                    <i class="fas fa-info-circle me-1"></i> Ticket Normal
                                </h6>
                                <small style="color:#343a40;">
                                    Ticket ini belum masuk proses transfer IT (status_it masih kosong).
                                </small>
                            </div>
                        </div>
                    </div>
                @endif

            </div>

            <!-- RIGHT SECTION: IMAGE PREVIEW & DESCRIPTION -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-2">Preview & Deskripsi</p>
                        <hr class="horizontal dark mt-0">

                        <div class="mb-3">
                            <label class="form-label mb-2">Preview Gambar</label>
                            <div class="border rounded p-3 text-center" style="min-height: 250px; background: #f8f9fa;">
                                @if ($ticket->gambar)
                                    <img id="image-preview" src="{{ asset('storage/' . $ticket->gambar) }}"
                                        alt="Preview" style="max-width: 100%; max-height: 400px; cursor: pointer;"
                                        class="img-fluid"
                                        onclick="openImage(this.src)">
                                @else
                                    <img id="image-preview" src="" alt="Preview"
                                        style="max-width: 100%; max-height: 400px; display: none; cursor: pointer;"
                                        class="img-fluid" onclick="openImage(this.src)">
                                    <p id="no-image-text" class="text-muted mt-5">
                                        <i class="fas fa-image fa-3x mb-2"></i><br>
                                        Tidak ada gambar
                                    </p>
                                @endif
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="deskripsi" class="form-label mb-0">
                                {{ $ticket->jenis == 'S' ? 'Deskripsi Error' : 'Deskripsi Masalah' }}
                            </label>
                            <textarea name="deskripsi" id="deskripsi" rows="5" class="form-control form-control-sm editable-field"
                                readonly>{{ $ticket->detail_problem }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <style>
        .bg-approve {
            background-color: #1100ffff !important;
            color: #fff !important;
        }
    </style>

    @include('transc.tftick._action_modals')
    @include('js.ticketing-show')
    @include('js.tftick')
@endsection