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

@section('content')
    @include('layouts.navbars.auth.topnav', [
        'title' => 'NCR Positive Observation',
    ])

    <style>
        #list_ncrpos {
            width: 100% !important;
        }

        #list_ncrpos th,
        #list_ncrpos td {
            vertical-align: middle;
        }

        .wrap-text {
            max-width: 250px;
            white-space: normal !important;
            word-break: break-word;
        }
    </style>

    <div class="container-fluid">


        <div class="row">

            <div class="col-md-12">

                <div class="row mx-1">

                    <div class="card">

                        {{-- HEADER --}}
                        <div class="row">

                            <div class="card-header col-md-auto">

                                <h5 class="mb-0">

                                    List NCR Positive Observation Dan Kesimpulan

                                </h5>

                                <h6 class="mb-0">

                                    Kelola Positive Observation pada Report Log
                                </h6>

                            </div>

                            <div class="col">

                                @include('components.alert')

                            </div>

                        </div>

                        <hr class="horizontal dark mt-0">

                        {{-- TABLE --}}
                        <div class="row px-4 py-2">

                            <div class="table-responsive">

                                <table id="list_ncrpos"
                                    class="table display table-bordered table-striped align-items-center mb-0"
                                    style="width:100%;">

                                    <thead class="thead-light" style="background-color:#00b7bd4f;">

                                        <tr>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                No
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Jenis NCR
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Nama Periode
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Periode Audit
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Jumlah NCR
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Status
                                            </th>

                                            <th class="text-center text-uppercase text-xs font-weight-bolder">
                                                Aksi
                                            </th>

                                        </tr>

                                    </thead>

                                    <tbody>

                                        @forelse($list as $key => $row)
                                            <tr>

                                                <td class="text-center text-sm">

                                                    {{ $key + 1 }}

                                                </td>

                                                <td class="text-center text-sm">

                                                    @if ($row->audit_type == 'internal')
                                                        <span class="badge bg-info">

                                                            INTERNAL

                                                        </span>
                                                    @else
                                                        <span class="badge bg-primary">

                                                            EXTERNAL

                                                        </span>
                                                    @endif

                                                </td>

                                                <td class="text-sm">

                                                    <div class="wrap-text">

                                                        {{ $row->title }}

                                                    </div>

                                                </td>

                                                <td class="text-sm">

                                                    {{ $row->periode }}

                                                </td>

                                                <td class="text-center text-sm">

                                                    {{ number_format($row->jumlah_ncr) }}

                                                </td>

                                                <td class="text-center text-sm">

                                                    @if ($row->status == 'POSTED')
                                                        <span class="badge bg-success">
                                                            POSTED
                                                        </span>
                                                    @elseif($row->status == 'NO DATA')
                                                        <span class="badge bg-secondary">
                                                            NO DATA
                                                        </span>
                                                    @else
                                                        <span class="badge bg-warning">
                                                            DRAFT
                                                        </span>
                                                    @endif

                                                </td>

                                                <td class="text-center text-sm">

                                                    <div class="btn-group">
                                                        @if ($row->jumlah_ncr > 0)
                                                            <button type="button" class="btn btn-warning btn-sm mb-0 px-3"
                                                                onclick="window.location='{{ url(
                                                                    $url_menu .
                                                                        '/edit/' .
                                                                        encrypt(
                                                                            json_encode([
                                                                                'audit_type' => $row->audit_type,
                                                                                'idschedule' => $row->idschedule ?? null,
                                                                                'audit_year' => $row->audit_year ?? null,
                                                                            ]),
                                                                        ),
                                                                ) }}'">

                                                                <i class="fas fa-edit"></i>

                                                                <span class="font-weight-bold">
                                                                    Edit
                                                                </span>

                                                            </button>
                                                        @else
                                                            <button type="button"
                                                                class="btn btn-secondary btn-sm mb-0 px-3" disabled>

                                                                <i class="fas fa-ban"></i>

                                                                <span class="font-weight-bold">
                                                                    Tidak Ada NCR
                                                                </span>

                                                            </button>
                                                        @endif

                                                    </div>

                                                </td>

                                            </tr>

                                        @empty

                                            <tr>

                                                <td colspan="7" class="text-center">

                                                    Tidak ada data

                                                </td>

                                            </tr>
                                        @endforelse

                                    </tbody>

                                </table>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {

            $('#list_ncrpos').DataTable({

                paging: true,

                searching: true,

                info: true,

                responsive: true,

                autoWidth: false,

                scrollX: false,

                pageLength: 10,

                columnDefs: [

                    {
                        orderable: false,
                        targets: 6
                    }

                ],

                language: {

                    search: "Cari:",

                    lengthMenu: "Tampilkan _MENU_ data",

                    zeroRecords: "Data tidak ditemukan",

                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",

                    infoEmpty: "Tidak ada data",

                    infoFiltered: "(difilter dari _MAX_ total data)",

                    paginate: {

                        previous: "<i class='fas fa-angle-left'></i>",

                        next: "<i class='fas fa-angle-right'></i>"

                    }

                }

            });

        });
    </script>
@endsection