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

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

    <style>
        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .table-custom {
            table-layout: fixed;
            width: 100%;
            min-width: 1100px;
            font-size: 12px;
            margin-bottom: 0;
        }

        .table-custom th,
        .table-custom td {
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            vertical-align: top;
            padding: 6px;
            line-height: 1.4;
        }

        .table-custom thead th {
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            background-color: #006a60;
            color: white;
            font-size: 11px;
        }

        .col-no {
            width: 60px;
        }

        .col-dept {
            width: 140px;
        }

        .col-klausul {
            width: 180px;
        }

        .col-status {
            width: 90px;
        }



        .text-long {
            line-height: 1.4;
        }

        .badge-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: bold;
            white-space: nowrap;
        }

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

        /* === BARIS GRUP ISO & DEPT === */
        .iso-row {
            background: #a3d2d2;
            /* hijau muda khas header */
            font-weight: bold;
            text-align: left;
            font-size: 13px;
        }

        .dept-row {
            background: #e6f2f2;
            /* lebih muda untuk departemen */
            font-weight: bold;
            text-align: left;
        }

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

        .report-info {
            line-height: 1.5;
        }

        .report-info small {
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .table-custom {
                font-size: 11px;
                min-width: 950px;
            }

            .table-custom th,
            .table-custom td {
                padding: 5px;
            }

            .badge-status {
                font-size: 9px;
                padding: 3px 6px;
            }

            .report-info small {
                display: block;
                margin-bottom: 4px;
            }
        }
    </style>

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

        @if (!empty($grouped) && count($grouped))
            <div class="card shadow-lg">
                <div class="card-body">

                    {{-- HEADER REPORT --}}
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <div class="report-info">
                            <h5 class="mb-1 text-uppercase text-sm">
                                Report Closing Audit {{ strtoupper($audit_type) }})
                            </h5>
                            <small class="text-muted d-block mb-1">
                                ISO:
                                @if (!empty($grouped))
                                    {{ $list->pluck('iso_code')->unique()->implode(', ') }}
                                @else
                                    -
                                @endif
                            </small>

                            @if (!empty($periode_awal) && !empty($periode_akhir))
                                <small class="text-muted d-flex align-items-center gap-2 flex-wrap mb-1">
                                    <span>Periode :</span>
                                    @if ($audit_type == 'external')
                                        <input type="date" name="custom_periode_awal" class="form-control form-control-sm"
                                            style="width:170px;" value="{{ $periode_awal }}">
                                        <span>-</span>
                                        <input type="date" name="custom_periode_akhir"
                                            class="form-control form-control-sm" style="width:170px;"
                                            value="{{ $periode_akhir }}">
                                    @else
                                        <span>
                                            {{ \Carbon\Carbon::parse($periode_awal)->format('d M Y') }} -
                                            {{ \Carbon\Carbon::parse($periode_akhir)->format('d M Y') }}
                                        </span>
                                    @endif
                                </small>
                            @endif

                            <small class="text-muted">
                                OPEN : {{ $totalOpen }} &nbsp;&nbsp;
                            </small>
                        </div>

                        {{-- TOMBOL EXPORT --}}
                        <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
                            {{-- PDF --}}
                            <form method="POST" action="{{ url($url_menu) }}" target="_blank" class="m-0">
                                @csrf
                                <input type="hidden" name="action" value="pdf">
                                <input type="hidden" name="execute" value="1">
                                <input type="hidden" name="audit_type" value="{{ $audit_type }}">
                                <input type="hidden" name="periode" value="{{ $periode }}">
                                <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
                                <button type="submit" class="btn btn-danger btn-sm mb-0">
                                    <i class="fas fa-file-pdf me-1"></i> Export PDF
                                </button>
                            </form>

                            {{-- EXCEL --}}
                            <form method="POST" action="{{ url($url_menu) }}" target="_blank" class="m-0">
                                @csrf
                                <input type="hidden" name="action" value="excel">
                                <input type="hidden" name="execute" value="1">
                                <input type="hidden" name="audit_type" value="{{ $audit_type }}">
                                <input type="hidden" name="periode" value="{{ $periode }}">
                                <input type="hidden" name="year" value="{{ $year ?? '' }}">
                                @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" class="btn btn-success btn-sm mb-0">
                                    <i class="fas fa-file-excel me-1"></i> Export Excel
                                </button>
                            </form>
                        </div>
                    </div>

                    {{-- TABEL DATA --}}
                    <div class="table-wrapper">
                        <table class="table table-bordered table-custom">
                            <thead>
                                <tr>

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

                                    <th class="col-dept">
                                        Departemen
                                    </th>

                                    <th style="width:220px;">
                                        Standar ISO
                                    </th>
                                    <th style="width:10%;">
                                        Kategori
                                    </th>

                                    <th class="col-klausul">
                                        Klausul
                                    </th>

                                    <th>
                                        Temuan
                                    </th>

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

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($list as $row)
                                    <tr>
                                        <td class="text-center">

                                            {{ $list->firstItem() + $loop->index }}

                                        </td>

                                        <td>

                                            {{ $row->department }}

                                        </td>

                                        <td>

                                            <strong>

                                                {{ $row->iso_code }}

                                            </strong>

                                            <br>

                                            <small class="text-muted">

                                                {{ $row->iso_name }}

                                            </small>

                                        </td>
                                        <td>

                                            {{ $row->category }}

                                        </td>

                                        <td>

                                            {!! nl2br(str_replace('; ', "\n", $row->clause_text ?? '-')) !!}

                                        </td>

                                        <td class="text-long">

                                            @if (!empty($row->problem))
                                                <b>P :</b>
                                                {{ $row->problem }}
                                                <br>
                                            @endif

                                            @if (!empty($row->analysis))
                                                <b>L :</b>
                                                {{ $row->analysis }}
                                                <br>
                                            @endif

                                            @if (!empty($row->correction))
                                                <b>O :</b>
                                                {{ $row->correction }}
                                                <br>
                                            @endif

                                            @if (!empty($row->corrective_action))
                                                <b>R :</b>
                                                {{ $row->corrective_action }}
                                            @endif

                                        </td>

                                        <td class="text-center">

                                            <span class="badge-status status-open">

                                                OPEN

                                            </span>

                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if ($list->hasPages())
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
                            <small class="text-muted">
                                Menampilkan {{ $list->firstItem() }}–{{ $list->lastItem() }}
                                dari {{ $list->total() }} NCR
                            </small>
                            <div>
                                {{ $list->links() }}
                            </div>
                        </div>
                    @endif

                </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>
        document.addEventListener('DOMContentLoaded', function() {
            const periodeAwal = document.querySelector('input[name="custom_periode_awal"]');
            const periodeAkhir = document.querySelector('input[name="custom_periode_akhir"]');

            // PDF
            const pdfForm = document.querySelector('form[target="_blank"]');
            if (pdfForm) {
                pdfForm.addEventListener('submit', function() {
                    if (periodeAwal && periodeAkhir) {
                        document.getElementById('pdf_custom_periode_awal').value = periodeAwal.value;
                        document.getElementById('pdf_custom_periode_akhir').value = periodeAkhir.value;
                    }
                });
            }

            // EXCEL
            const formExcel = document.querySelector('form button.btn-success')?.closest('form');
            if (formExcel) {
                formExcel.addEventListener('submit', function() {
                    if (periodeAwal && periodeAkhir) {
                        document.getElementById('excel_custom_periode_awal').value = periodeAwal.value;
                        document.getElementById('excel_custom_periode_akhir').value = periodeAkhir.value;
                    }
                });
            }
        });
    </script>
@endsection