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

@section('content')

    @include('layouts.navbars.auth.topnav', ['title' => 'View Form NCR'])

    <div class="container-fluid py-4 ncr-view-layout">

        <div class="card shadow-lg border-0 mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-file-alt me-2 text-primary"></i>Detail Temuan NCR External
                </h5>
                <div>
                    <a href="{{ url($url_menu) }}" class="btn btn-sm btn-outline-secondary mb-0">
                        <i class="fas fa-arrow-left me-1"></i>Kembali
                    </a>
                </div>
            </div>
            <hr class="horizontal dark mt-0">
            <div class="card-body pt-0">

                <div class="row info-table mt-3">

                    <div class="col-md-3 label">No NCR</div>
                    <div class="col-md-3 value">{{ \App\Helpers\NcrAuditHelper::displayReportNumber($ncr, 'external') }}</div>

                    <div class="col-md-3 label">Tanggal Temuan</div>
                    <div class="col-md-3 value">{{ date('d F Y', strtotime($ncr->audit_date)) }}</div>


                    <div class="col-md-3 label">Standar ISO</div>
                    <div class="col-md-3 value">{{ $ncr->iso_code }} : {{ $ncr->iso_name }}</div>

                    <div class="col-md-3 label">Kategori</div>
                    <div class="col-md-3 value">{{ $ncr->category }}</div>


                    <div class="col-md-3 label">Departemen</div>
                    <div class="col-md-3 value">{{ $ncr->department_label ?? $ncr->department }}</div>

                    <div class="col-md-3 label">Auditor</div>
                    <div class="col-md-3 value">{{ $ncr->actual_submitter_name }}</div>


                    <div class="col-md-3 label">Klausul</div>
                    <div class="col-md-9 value">
                        {{ $ncr->clause_number }} – {{ $ncr->clause_name }}
                    </div>

                </div>

            </div>
        </div>


        <div class="card shadow-lg border-0 mb-4">
            <div class="card-body">

                <h5 class="mb-3">PLOR</h5>

                <div class="row info-table">

                    <div class="col-md-3 label">Problem (P)</div>
                    <div class="col-md-9 value">{{ $finding->problem }}</div>

                    <div class="col-md-3 label">Location (L)</div>
                    <div class="col-md-9 value">{{ $finding->location }}</div>

                    <div class="col-md-3 label">Objective Evidence (O)</div>
                    <div class="col-md-9 value">{{ $finding->objective }}</div>

                    <div class="col-md-3 label">Reference (R)</div>
                    <div class="col-md-9 value">{{ $finding->reference }}</div>

                </div>

            </div>
        </div>

        <div class="card shadow-lg border-0 mb-4">
            <div class="card-body">

                <h5 class="mb-3">Tindak Lanjut Auditee</h5>

                <div class="row info-table">

                    <div class="col-md-3 label">Analisa Penyebab</div>
                    <div class="col-md-9 value">
                        {{ $finding->analysis ?? 'Belum diisi oleh auditee' }}
                    </div>

                    <div class="col-md-3 label">Fishbone Root Cause</div>
                    <div class="col-md-9 value">
                        @if(!empty($fishbone))
                            @foreach($fishbone as $f)
                                <span class="badge rounded-pill bg-success me-1">
                                    {{ $f }}
                                </span>
                            @endforeach
                        @else
                            <span class="text-muted">Belum diisi oleh auditee</span>
                        @endif
                    </div>

                    <div class="col-md-3 label">Corrective Action</div>
                    <div class="col-md-9 value">
                        {{ $finding->corrective_action ?? 'Belum diisi oleh auditee' }}
                    </div>


                    <div class="col-md-3 label">Corrections</div>
                    <div class="col-md-9 value">
                        {{ $finding->correction ?? 'Belum diisi oleh auditee' }}
                    </div>


                    <div class="col-md-3 label">Evaluasi Efektivitas</div>
                    <div class="col-md-9 value">
                        {{ $finding->evaluation ?? 'Belum diisi oleh auditee' }}
                    </div>

                </div>

            </div>
        </div>

        <div class="card shadow-lg border-0 mb-4">
            <div class="card-body">

                <h5 class="mb-3">Penanggung Jawab</h5>

                <div class="row info-table">

                    <div class="col-md-3 label">Auditor</div>
                    <div class="col-md-3 value">{{ $ncr->actual_submitter_name }}</div>

                    <div class="col-md-3 label">Auditee</div>
                    <div class="col-md-3 value">{{ $ncr->auditee_name }}</div>

                    <div class="col-md-3 label">Management Representative</div>
                    <div class="col-md-3 value">{{ $ncr->mr_name }}</div>

                </div>

            </div>
        </div>

        <div class="card shadow-lg border-0 mb-4">
            <div class="card-body">

                <h5 class="mb-3">Bukti Pendukung</h5>

                @if (count($evidences) > 0)
                    <ul class="list-group">

                        @foreach ($evidences as $file)
                            <li class="list-group-item d-flex justify-content-between align-items-center">

                                {{ $file->file_name }}

                                <button class="btn btn-sm btn-info"
                                    onclick="previewFile('{{ asset('storage/' . $file->file_path) }}','{{ $file->file_type }}')">

                                    <i class="fas fa-eye"></i> View

                                </button>

                            </li>
                        @endforeach

                    </ul>
                @else
                    <p class="text-muted">Belum ada bukti</p>
                @endif

            </div>
        </div>


        <div class="card shadow-lg border-0 mb-4">
            <div class="card-body">

                <h6>Status NCR</h6>

                <span class="badge bg-primary">
                    {{ $ncr->status }}
                </span>

            </div>
        </div>



    </div>


    <style>
        .ncr-view-layout {
            display: flex;
            flex-direction: column;
            max-width: calc(100% - 3rem);
            padding: 0 !important;
            margin: 1.5rem auto;
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 1rem 3rem rgba(50, 50, 93, 0.12);
            overflow: hidden;
        }

        .ncr-view-layout > .card:nth-of-type(1) { order: 1; }
        .ncr-view-layout > .card:nth-of-type(2) { order: 2; }
        .ncr-view-layout > .card:nth-of-type(3) { order: 3; }
        .ncr-view-layout > .card:nth-of-type(4) { order: 5; }
        .ncr-view-layout > .card:nth-of-type(5) { order: 4; }
        .ncr-view-layout > .card:nth-of-type(6) { order: 6; }

        .ncr-view-layout > .card {
            margin: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background: transparent;
        }

        .ncr-view-layout > .card:not(:first-of-type) {
            border-top: 1px solid #e9ecef !important;
        }

        .ncr-view-layout > .card .card-header {
            padding: 2rem 3rem 1.25rem;
            background: #fff;
            border: 0;
        }

        .ncr-view-layout > .card .card-body {
            padding: 1.75rem 3rem;
        }

        .ncr-view-layout > .card:first-of-type .card-body {
            padding-top: .5rem;
        }

        .ncr-view-layout h5,
        .ncr-view-layout h6 {
            color: #344767;
            font-weight: 600;
        }

        .info-table {

            font-size: 14px;

        }

        .label {
            background: #f8f9fa;
            padding: 12px 14px;
            font-weight: 600;
            border: 1px solid #e9ecef;

        }

        .value {

            padding: 12px 14px;
            border: 1px solid #e9ecef;
            min-height: 46px;

        }

        @media (max-width: 767.98px) {
            .ncr-view-layout {
                max-width: calc(100% - 1.5rem);
            }

            .ncr-view-layout > .card .card-header,
            .ncr-view-layout > .card .card-body {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            .info-table .label {
                margin-top: .5rem;
                border-radius: .5rem .5rem 0 0;
            }

            .info-table .value {
                border-radius: 0 0 .5rem .5rem;
            }

        }

        .preview-modal {

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 9999;

        }

        .preview-modal img {

            max-width: 80%;
            max-height: 80%;

            border-radius: 10px;

        }

        .preview-modal iframe {

            width: 80%;
            height: 90%;

            background: white;

        }
    </style>

    <!-- UNTUK PREVIEW BUKTI -->

    <script>
        function previewFile(url, type) {

            let modal = document.createElement("div")

            modal.className = "preview-modal"

            if (type.includes("image")) {

                let img = document.createElement("img")

                img.src = url

                modal.appendChild(img)

            } else {

                let iframe = document.createElement("iframe")

                iframe.src = url

                modal.appendChild(iframe)

            }

            modal.onclick = function() {

                modal.remove()

            }

            document.body.appendChild(modal)

        }
    </script>


@endsection