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

@section('content')

    @include('layouts.navbars.auth.topnav', ['title' => 'LOG STATUS AUDIT'])

    <style>
        .table-ncr {
            table-layout: auto;
            width: 100%;
            font-size: 12px;
        }

        .table-ncr th,
        .table-ncr td {
            word-wrap: break-word;
            white-space: normal;
            vertical-align: top;
            padding: 6px;
        }

        .table-ncr tbody td {
            color: #212529;
        }

        .card-body .text-muted {
            color: #212529 !important;
        }


        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }



        .table-ncr thead th {
            white-space: nowrap;

            vertical-align: middle;

            text-align: center;

            line-height: 1.3;

        }



        .col-no {
            width: 55px;
        }

        .col-dept {
            width: 130px;
        }

        .col-cat {
            width: 48px;
            font-size: 9px;
        }

        .col-status {
            width: 85px;
        }

        .table-ncr th {

            padding-top: 10px !important;

            padding-bottom: 10px !important;
        }


        .col-content {
            min-width: 230px;
        }



        .text-long {
            line-height: 1.45;
            word-break: break-word;
        }



        .badge-status {
            padding: 4px 7px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: bold;
            display: inline-block;
            min-width: 65px;
            white-space: nowrap;
            text-align: center;
        }

        .status-entry {
            background: #dc3545;
            color: white;
        }

        .status-progress {
            background: #ffc107;
            color: black;
        }

        .status-review {
            background: #0dcaf0;
            color: black;
        }

        .status-closed {
            background: #198754;
            color: white;
        }

        .status-open {
            background: #ffc107;
            color: #212529;
        }

        .status-legend {
            margin-top: 8px;
            font-size: 11px;
        }

        .status-legend .badge-status {
            margin-right: 5px;
        }



        .dept-row {
            background: #e6f2f2;
            font-weight: bold;
            text-align: left;
        }



        .table-ncr thead {
            background-color: #006a60;
            color: white;
        }


        .table-bordered tbody tr:last-child td {
            border-bottom: 1px solid #dee2e6 !important;
        }

        textarea {
            resize: vertical;
            line-height: 1.5 !important;
        }


        .custom-box {
            border-radius: 12px;
            overflow: hidden;
        }

        .textarea-wrapper {
            position: relative;
        }

        .textarea-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: #6c757d;
            font-style: italic;
            background: transparent;
            pointer-events: none;
            line-height: 1.7;
        }


        @media (max-width: 768px) {

            .table-ncr {
                min-width: 1550px;
            }

            .table-ncr th,
            .table-ncr td {
                font-size: 11px;
                padding: 5px;
            }


            .card-body {
                padding: 12px !important;
            }

            .text-long {
                max-height: unset;
            }

            textarea.form-control {
                font-size: 12px;
            }

            .badge-status {
                font-size: 9px;
                padding: 3px 5px;
                min-width: 55px;
            }

            h5 {
                font-size: 13px;
            }

            .btn {
                font-size: 11px;
            }

            .mobile-stack {
                flex-direction: column;
                align-items: flex-start !important;
            }
        }
    </style>

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

        @if (!empty($grouped) && count($grouped))

            <div class="card shadow-lg">

                <div class="card-body">






                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2 mobile-stack">

                        <div>

                            <h5 class="mb-1 text-uppercase text-sm">

                                LOG STATUS AUDIT ({{ strtoupper($audit_type) }})

                            </h5>



                            @if (!empty($periode_awal) && !empty($periode_akhir))
                                <small class="text-muted d-flex align-items-center gap-2 flex-wrap">

                                    <span>

                                        Periode Audit :

                                    </span>

                                    @if ($audit_type == 'external')
                                        <input type="date" id="custom_periode_awal" class="form-control form-control-sm"
                                            style="width:170px;" value="{{ $periode_awal ?? '' }}">

                                        <span>-</span>

                                        <input type="date" id="custom_periode_akhir" class="form-control form-control-sm"
                                            style="width:170px;" value="{{ $periode_akhir ?? '' }}">
                                    @else
                                        <span>

                                            {{ \Carbon\Carbon::parse($periode_awal)->translatedFormat('d F Y') }}

                                            -

                                            {{ \Carbon\Carbon::parse($periode_akhir)->translatedFormat('d F Y') }}

                                        </span>
                                    @endif

                                </small>
                            @endif

                        </div>

                        {{-- PDF --}}
                        <form method="POST" action="{{ url($url_menu) }}" id="export-form">

                            @csrf

                            <input type="hidden" name="audit_type" value="{{ $audit_type }}">



                            <input type="hidden" name="periode" value="{{ $periode ?? 'all' }}">

                            <input type="hidden" name="year" value="{{ $year ?? '' }}">

                            @if ($audit_type == 'external')
                                <input type="hidden" name="custom_periode_awal" id="pdf_custom_periode_awal">

                                <input type="hidden" name="custom_periode_akhir" id="pdf_custom_periode_akhir">
                            @endif

                            <input type="hidden" name="positive_observation" id="pdf-positive-observation">

                            <input type="hidden" name="kesimpulan" id="pdf-kesimpulan">

                            <input type="hidden" name="positive_observation" id="excel-positive-observation">

                            <input type="hidden" name="kesimpulan" id="excel-kesimpulan">

                            @if ($audit_type == 'external')
                                <input type="hidden" name="custom_periode_awal" id="excel_custom_periode_awal">
                                <input type="hidden" name="custom_periode_akhir" id="excel_custom_periode_akhir">
                            @endif

                            <button type="submit" name="action" value="pdf" class="btn btn-danger btn-sm mb-0">

                                <i class="fas fa-file-pdf me-1"></i>

                                Export PDF

                            </button>
                            {{-- <button type="submit" name="action" value="excel" class="btn btn-success btn-sm mb-0">

                                <i class="fas fa-file-excel me-1"></i>

                                Export Excel

                            </button> --}}

                        </form>

                    </div>
                    <div class="card border shadow-sm custom-box mb-3">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                                <h6 class="mb-0">Positive Observation</h6>
                                <div class="d-flex align-items-center gap-2 flex-wrap">

                                    @if (!empty($reportLogEditUrl))
                                        <a href="{{ $reportLogEditUrl }}" class="btn btn-sm btn-primary mb-0">

                                            <i class="fas fa-arrow-right me-1"></i>

                                            Input Positive Observation

                                        </a>
                                    @endif


                                </div>
                            </div>

                            @php
                                $observations = array_filter(
                                    array_map('trim', preg_split('/[>\r\n]+/', $positiveObservation ?? '')),
                                );
                            @endphp
                            @forelse ($observations as $observation)
                                <div class="text-sm">&gt; {{ $observation }}</div>
                            @empty
                                <small class="text-muted">Positive Observation masih kosong.</small>
                            @endforelse

                        </div>

                    </div>
                    <input type="hidden" id="positive_observation" value="{{ $positiveObservation }}">
                    <input type="hidden" id="kesimpulan" value="{{ $generatedKesimpulan }}">

                    <div class="table-responsive">

                        <table class="table table-bordered table-ncr">

                            <thead>

                                <tr>

                                    <th class="col-no" rowspan="2">
                                        No
                                    </th>

                                    <th class="col-dept" rowspan="2">
                                        Dept
                                    </th>

                                    <th colspan="{{ count($categories) }}">Kategori</th>

                                    <th class="col-content" rowspan="2">
                                        Uraian
                                    </th>

                                    <th class="col-content" rowspan="2">
                                        Analisa Penyebab
                                    </th>

                                    <th class="col-content" rowspan="2">
                                        Correction
                                    </th>

                                    <th class="col-content" rowspan="2">
                                        Corrective Action
                                    </th>

                                    <th class="col-content" rowspan="2">
                                        Evaluasi Efektivitas
                                    </th>

                                    <th class="col-status" rowspan="2">
                                        Status
                                    </th>

                                </tr>
                                <tr>
                                    @foreach ($categories as $cat)
                                        <th class="col-cat">
                                            {{ str_contains(strtolower($cat->name), 'rekom') ? 'Rekom' : ucfirst(strtolower($cat->name)) }}
                                        </th>
                                    @endforeach
                                </tr>

                            </thead>

                            <tbody>


                                @foreach ($grouped as $isoName => $deptGroup)
                                    <tr style="background:#006a60; font-weight:bold;">
                                        <td colspan="{{ count($categories) + 8 }}" style="color:white;">
                                            {{ $isoName }}
                                        </td>
                                    </tr>

                                    @foreach ($deptGroup as $dept => $rows)
                                        <tr class="dept-row">

                                            <td colspan="{{ count($categories) + 8 }}">
                                                {{ $rows->first()->department_prefix ?? '-' }} {{ $dept }}

                                            </td>

                                        </tr>

                                        @foreach ($rows as $row)
                                            <tr>

                                                {{-- NO --}}
                                                <td class="text-center align-middle">

                                                    {{ $loop->iteration }}

                                                </td>

                                                {{-- DEPT --}}
                                                <td>

                                                    {{ $row->department_prefix ?? '-' }}<br>{{ $dept }}

                                                </td>

                                                {{-- CATEGORY --}}
                                                @foreach ($categories as $cat)
                                                    <td class="text-center align-middle">

                                                        @if (strtoupper($row->category_name) == strtoupper($cat->name))
                                                            <span style="font-size:15px;">✔</span>
                                                        @endif

                                                    </td>
                                                @endforeach

                                                {{-- URAIAN --}}
                                                <td class="text-long">

                                                    {{ $row->problem ?? '-' }}

                                                </td>

                                                {{-- ANALISA --}}
                                                <td class="text-long">

                                                    {{ $row->analysis ?? '-' }}

                                                </td>

                                                {{-- CORRECTION --}}
                                                <td class="text-long">

                                                    {{ $row->correction ?? '-' }}

                                                </td>

                                                {{-- ACTION --}}
                                                <td class="text-long">

                                                    {{ $row->corrective_action ?? '-' }}

                                                </td>

                                                {{-- EVALUASI --}}
                                                <td class="text-long">

                                                    {{ $row->evaluation ?? '-' }}

                                                </td>

                                                {{-- STATUS --}}
                                                <td class="text-center align-middle">

                                                    <span
                                                        class="badge-status {{ $row->report_status === 'Closed' ? 'status-closed' : 'status-open' }}">
                                                        {{ strtoupper($row->report_status) }}
                                                    </span>

                                                </td>

                                            </tr>
                                        @endforeach
                                    @endforeach

                                    @php
                                        $isoRows = $deptGroup->flatten(1);
                                    @endphp
                                    <tr>
                                        <td colspan="{{ count($categories) + 8 }}"
                                            style="border:0 !important; padding:12px 0; background:#fff;">
                                            <strong>Total jumlah temuan ketidaksesuaian {{ $isoName }} sebesar
                                                {{ $isoRows->count() }} yang terdiri dari:</strong>
                                            <div class="row mt-2">
                                                @foreach ($categories as $cat)
                                                    @php $categoryRows = $isoRows->filter(fn($item) => strtoupper($item->category_name) === strtoupper($cat->name)); @endphp
                                                    <div class="col-md-4 mb-2">
                                                        <strong>&gt; Ketidaksesuaian {{ $cat->name }} ada
                                                            {{ $categoryRows->count() }} yaitu:</strong>
                                                        @foreach ($deptGroup as $summaryDept => $summaryRows)
                                                            @php $count = $summaryRows->filter(fn($item) => strtoupper($item->category_name) === strtoupper($cat->name))->count(); @endphp
                                                            @if ($count > 0)
                                                                <div>{{ $summaryRows->first()->department_prefix ?? '-' }}
                                                                    {{ $summaryDept }}: {{ $count }}</div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>

                        </table>

                        <div class="status-legend">
                            <span class="badge-status status-open">OPEN</span>
                            ON PROGRESS atau IN REVIEW
                            &nbsp;&nbsp;
                            <span class="badge-status status-closed">CLOSED</span>
                            NCR telah ditutup
                        </div>
                        <br>
                    </div>




                </div>

            </div>
        @else
            <div class="card shadow-lg">

                <div class="card-body text-center py-5">

                    <h6 class="text-muted mb-2">

                        Data tidak ditemukan

                    </h6>

                    <small class="text-muted">

                        Silakan ubah filter atau pilih data yang tersedia

                    </small>

                </div>

            </div>

        @endif

    </div>


    <script>
        function resetKesimpulan() {

            document.getElementById('kesimpulan').value =
                @json($generatedKesimpulan);
        }


        const formPdf = document.querySelector('form button[value="pdf"]')
            ?.closest('form');

        if (formPdf) {
            formPdf.setAttribute('target', '_blank');
            formPdf.addEventListener('submit', function() {

                // periode
                const awal =
                    document.getElementById(
                        'custom_periode_awal'
                    )?.value;

                const akhir =
                    document.getElementById(
                        'custom_periode_akhir'
                    )?.value;

                const pdfAwal =
                    document.getElementById(
                        'pdf_custom_periode_awal'
                    );

                const pdfAkhir =
                    document.getElementById(
                        'pdf_custom_periode_akhir'
                    );

                if (pdfAwal) {
                    pdfAwal.value = awal;
                }

                if (pdfAkhir) {
                    pdfAkhir.value = akhir;
                }

                // textarea
                document.getElementById(
                        'pdf-positive-observation'
                    ).value =
                    document.getElementById(
                        'positive_observation'
                    ).value;

                document.getElementById(
                        'pdf-kesimpulan'
                    ).value =
                    document.getElementById(
                        'kesimpulan'
                    ).value;

            });

        }

        const formExcel = document.querySelector('form button[value="excel"]')
            ?.closest('form');

        if (formExcel) {

            formExcel.addEventListener('submit', function() {

                const awal =
                    document.getElementById(
                        'custom_periode_awal'
                    )?.value;

                const akhir =
                    document.getElementById(
                        'custom_periode_akhir'
                    )?.value;

                const excelAwal =
                    document.getElementById(
                        'excel_custom_periode_awal'
                    );

                const excelAkhir =
                    document.getElementById(
                        'excel_custom_periode_akhir'
                    );

                if (excelAwal) {
                    excelAwal.value = awal;
                }

                if (excelAkhir) {
                    excelAkhir.value = akhir;
                }

                document.getElementById(
                        'excel-positive-observation'
                    ).value =
                    document.getElementById(
                        'positive_observation'
                    ).value;

                document.getElementById(
                        'excel-kesimpulan'
                    ).value =
                    document.getElementById(
                        'kesimpulan'
                    ).value;

            });

        }
    </script>

@endsection