@php use Carbon\Carbon; @endphp
@extends('master')
@section('style')
    <link href="{{asset('assets/custom/css/report-detail.css')}}" rel="stylesheet">
@endsection

@section('content')
    <div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="noteModalLabel">Catatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="noteContent" style="white-space: pre-wrap;"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form id="statusForm" action="{{ route('report.update.status', $id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5  class="modal-title" style="font-weight: bold;" id="modalTitle">Update Status Laporan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="is_reject" id="isReject">
                        <input type="hidden" name="status" id="status" value="{{$last_status + 1}}">
                        <div class="mb-0">
                            <label class="form-label fw-bold">Catatan (Optional)</label>
                            <textarea class="form-control" name="notes" id="noteInput" rows="3" placeholder="Tambahkan alasan atau detail perkembangan..."></textarea>
                        </div>
                    </div>

                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary px-4" id="btnUpdateStatus">
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="container-fluid px-4 py-3">

        <div class="breadcrumb-wrapper">
            Laporan &nbsp;/&nbsp; <span>Pelanggaran SOP</span>
        </div>

        <div class="article-grid">

            <div>
                <div class="slider-wrapper" id="slider">
                    <div class="slides" id="slidesTrack">
                        @php
                            $extension = pathinfo($image, PATHINFO_EXTENSION);
                            $videoExtensions = ['mp4', 'mov', 'ogg', 'webm'];
                        @endphp

                        @if(in_array(strtolower($extension), $videoExtensions))

                            <div class="slide" style="display: flex; justify-content: center; align-items: center; min-height: 400px; background: #222; border-radius: 8px;">
                                <video controls
                                       playsinline
                                       class="proof-img"
                                       style="max-width: 100%; max-height: 500px; width: auto; height: auto; display: block;">
                                    <source src="{{ asset('storage/images/report/'.$image) }}"
                                            type="video/{{ $extension == 'mov' ? 'mp4' : $extension }}">
                                    Your browser does not support the video tag.
                                </video>
                            </div>

                        @else
                            <div class="slide">
                                <img src="{{ asset('storage/images/report/'.$image) }}"
                                     alt="Report Evidence"
                                     class="proof-img"
                                     onclick="window.open(this.src, '_blank')"
                                     style="cursor: pointer;">
                                <div class="slide-caption">Klik untuk memperbesar</div>
                            </div>
                        @endif

                    </div>
                </div>

                <div class="article-card">
                    <div class="article-label">
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
                            <circle cx="5" cy="5" r="5"/>
                        </svg>
                        @if($type_report == 1)
                            Pelanggaran SOP
                        @elseif($type_report == 2)
                            Insiden Keselamatan Petugas
                        @elseif($type_report == 3)
                            @php
                                $listHais = [
                                    1 => 'HAP',
                                    2 => 'VAP',
                                    3 => 'SSI',
                                    4 => 'IADP',
                                    5 => 'CAUTI'
                                ];
                                $namaHais = $listHais[$type_hais] ?? 'Lainnya';
                            @endphp
                            Kejadian HAIs
                        @endif
                    </div>

                    @if($type_report != 1)
                        <h1 class="article-title">
                            @if($type_report == 2)

                            @elseif($type_report >= 1 && $type_report <= 5)
                                @php
                                    $listHais = [
                                        1 => 'HAP',
                                        2 => 'VAP',
                                        3 => 'SSI',
                                        4 => 'IADP',
                                        5 => 'CAUTI'
                                    ];
                                    $namaHais = $listHais[$type_hais] ?? 'Lainnya';
                                @endphp
                                {{$namaHais}}
                            @else
                                {{ $titleMedical['name']}}
                            @endif
                        </h1>
                    @endif

                    <div class="article-meta">
                        <div class="meta-chip">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <rect x="3" y="4" width="18" height="18" rx="2"/>
                                <path d="M16 2v4M8 2v4M3 10h18"/>
                            </svg>
                            {{ $created_at_date }}
                        </div>
                        <div class="meta-chip">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10"/>
                                <path d="M12 6v6l4 2"/>
                            </svg>
                            {{ $created_at_time }}
                        </div>
                        <div class="meta-chip">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            {{ $location['name'] }}
                        </div>
                    </div>

                    <div class="article-divider"></div>

                    <div class="article-body">
                        @if($description)
                            {{ $description }}
                        @else
                            <span style="color: #979797; font-style: italic;">Tidak ada deskripsi</span>
                        @endif
                    </div>
                </div>
            </div>

            <div>
                <div class="sidebar-card">
                    <div class="sidebar-title">Pelapor</div>
                    <div class="reporter">
                        <div class="avatar">
                            @if($user->image ?? false)
                                <img src="{{ asset('storage/images/user/'.$user['image']) }}" alt="Reporter">
                            @else
                                {{ strtoupper(substr($user['name'] ?? 'A', 0, 1)) }}
                            @endif
                        </div>
                        <div>
                            <div class="reporter-name">{{ $user['name'] ?? 'Nama Pelapor' }}</div>
                            <div class="reporter-role">{{ $user['email'] ?? 'pelapor@perusahaan.com' }}</div>
                        </div>
                    </div>
                </div>

                <div class="sidebar-card">
                    <div class="sidebar-title">Departemen</div>
                    <div class="reporter">
                        <div>
                            <div class="reporter-name">{{ $role ?? 'Nama Pelapor' }}</div>
                        </div>
                    </div>
                </div>
                @php
                    $statusesCol = collect($report_statuses)->keyBy('status');
                    $rejected = $statusesCol->get(5);


                    $maxStatusFound = collect($report_statuses)->where('status', '!=', 5)->max('status') ?? 0;

                    $flow = [1 => 'Laporan Baru',  2 => 'Verifikasi',3 => 'Sedang Diproses', 4 => 'Selesai'];
                @endphp

                <div class="sidebar-card">
                    <div class="sidebar-title">Riwayat Status</div>
                    <div class="timeline">
                        @foreach($flow as $id => $label)
                            @php
                                $s = $statusesCol->get($id);
                                $isStopHereByReject = ($rejected && $maxStatusFound == $id);
                                $isDone = $s && !$isStopHereByReject;
                            @endphp

                            <div class="tl-item {{ $isDone ? 'done' : ($isStopHereByReject ? 'rejected' : '') }}">
                                <div class="tl-label">
                                    {{ $isStopHereByReject ? 'Laporan Ditolak' : $label }}
                                </div>

                                <div class="tl-time">
                                    @if($isStopHereByReject)
                                        {{ $rejected['created_at'] }}
                                    @elseif($s)
                                        {{ $s['created_at'] }}
                                    @else
                                        Menunggu
                                    @endif
                                </div>

                                @php
                                    $currentNote = $isStopHereByReject ? ($rejected['notes'] ?? null) : ($s['notes'] ?? null);
                                @endphp

                                @if($currentNote)
                                    <a href="javascript:void(0)"
                                       class="d-block mt-1 text-info"
                                       style="font-size: 10px; text-decoration: underline;"
                                       onclick="showStatusNote('{{ $isStopHereByReject ? 'Penolakan' : $label }}', '{{ addslashes($currentNote) }}')">
                                        Lihat Catatan
                                    </a>
                                @endif
                            </div>


                            @if($isStopHereByReject)
                                @break
                            @endif
                        @endforeach
                    </div>
                </div>

                <div class="sidebar-card">
                    <div class="sidebar-title">Tindakan</div>
                    @if($last_status == 2)
                        <button id="btn-setuju" class="btn-primary">
                            Proses
                        </button>
                    @elseif($last_status == 1)
                        <button id="btn-setuju" class="btn-primary">
                            Verifikasi
                        </button>
                    @elseif($last_status == 3)
                        <button id="btn-setuju" class="btn-primary">
                            Selesai
                        </button>
                    @endif
                    @if($last_status != 5)
                    <button id="btn-tolak" class="btn-secondary">
                        Tolak Laporan
                    </button>
                    @endif
                </div>
            </div>

        </div>
    </div>

    <div id="lightbox" onclick="closeLightbox()"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; cursor:zoom-out; display:none; align-items:center; justify-content:center;">
        <img id="lightboxImg"
             style="max-width:92vw; max-height:92vh; border-radius:8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5);" src=""
             alt="">
    </div>


@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{asset('assets/custom/js/detail-report.js')}}"></script>
@endsection