@extends('master')
@section('style')
    <link href="{{ asset('assets/custom/css/detail-artcile.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container-fluid px-4 py-3">


        <div class="breadcrumb-wrapper">
            Laporan &nbsp;/&nbsp; <span>Pelanggaran SOP</span>
        </div>
        <div class="row justify-content-center">
            <div class="col-8">


                <div>

                    <div class="slider-wrapper" id="slider">
                        <div class="slides" id="slidesTrack">
                            @foreach($article->images as $img)
                                <div class="slide">
                                    <img src="{{ asset('storage/images/article/'.$img->image) }}"
                                         alt="Evidence 1"
                                         onclick="openFull(this.src)">
                                    <div class="slide-caption">Klik untuk memperbesar</div>
                                </div>
                            @endforeach


                        </div>

                        <button class="slider-btn prev" onclick="changeSlide(-1)" aria-label="Previous">
                            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
                        </button>
                        <button class="slider-btn next" onclick="changeSlide(1)" aria-label="Next">
                            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
                        </button>

                        <div class="slide-counter">
                            <span id="currentSlide">1</span> / <span id="totalSlides">{{count($article->images)}}</span>
                        </div>

                        <div class="slider-dots" id="dots"></div>
                    </div>


                    <div class="article-card">


                        <h1 class="article-title">{{ $article->title ?? 'Judul Laporan Pelanggaran' }}</h1>

                        <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>
                                {{ $article->local_created_at }}
                            </div>
                        </div>

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

                        <div class="article-body">
                            {{$article->desc}}
                        </div>
                    </div>
                </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>

    <script src="{{asset('assets/custom/js/article-detail.js')}}"></script>
@endsection