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

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

    @php
        $dataList = [];

        if (isset($list)) {
            $dataList = $list;
        } elseif (isset($result)) {
            $dataList = $result;
        } elseif (isset($query)) {
            $dataList = $query;
        } elseif (isset($data['list'])) {
            $dataList = $data['list'];
        }
    @endphp

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu ?? 'ISO Clauses' }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>

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

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    @if (isset($authorize) && $authorize->add == '1')

                                        <a href="{{ URL::to($url_menu . '/add') }}" class="btn btn-primary mb-0">
                                        <i class="fas fa-plus me-1"></i>
                                        <span class="font-weight-bold">Tambah</span>
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_iso">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <th>Standar ISO</th>
                                            <th>No Klausul</th>
                                            <th>Nama Klausul</th>
                                            <th>Level</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($dataList as $key => $row)
                                            <tr {{ ($row->isactive ?? '0') == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                       <a href="{{ url($url_menu . '/show/' . encrypt($row->idclauses)) }}"
                                                            class="btn btn-primary btn-sm mb-0 px-3"
                                                            title="View Data">
                                                                <i class="fas fa-eye"></i>
                                                                <span class="font-weight-bold"> View</span>
                                                             </a>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if (isset($authorize) && $authorize->edit == '1')
                                                                @if (($row->isactive ?? '0') == '1')
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <a href="{{ url($url_menu . '/edit/' . encrypt($row->idclauses)) }}"
                                                                    class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    title="Edit Data">
                                                                        <i class="fas fa-edit"></i>
                                                                        <span class="font-weight-bold"> Edit</span>
                                                                    </a>
                                                                @endif
                                                            @endif

                                                            @if (isset($authorize) && $authorize->delete == '1')
                                                                <form action="{{ url($url_menu . '/' . encrypt($row->idclauses)) }}"
                                                                    method="POST" style="display: inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="submit"
                                                                    class="btn btn-sm btn-delete ..."
                                                                    data-name="{{ $row->clause_name }}"
                                                                    data-msg="{{ ($row->isactive ?? '0') == '0' ? 'Aktifkan' : 'Non Aktifkan' }}">
                                                                        <i class="fas fa-random"></i><span
                                                                            class="font-weight-bold"> {{ ($row->isactive ?? '0') == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td>{{ $key + 1 }}</td>
                                                <td class="text-sm font-weight-normal">{{ $row->iso_name ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal">{{ $row->clause_number ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal">{{ $row->clause_name ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal">{{ $row->level ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal">
                                                    @if (($row->isactive ?? '0') == '1')
                                                        Active
                                                    @else
                                                        Inactive
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
    <script>
        
$(document).ready(function(){

let table = $('#list_iso').DataTable({

    paging:true,
    info:true,
    searching:true,
    responsive:true,

    language:{
        search:"Cari :",
        lengthMenu:"Tampilkan _MENU_ baris",
        zeroRecords:"Maaf - Data tidak ada",
        info:"Data _START_ - _END_ dari _TOTAL_",
        infoEmpty:"Tidak ada data",
        infoFiltered:"(pencarian dari _MAX_ data)"
    },

    dom:'<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',

    buttons:[

      {
        text:'<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
        action:function(){
            exportExcel();
        }
    },
    {
        text:'<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
        action:function(){
            exportPDF();
        }
    }
]

});


/* =========================
   EXPORT EXCEL
========================= */

function exportExcel(){

    let data = [];
    let headers = ["No","Standar ISO","No Klausul","Nama Klausul","Level","Status"];

    data.push(headers);

    table.rows().every(function(index){

        let row = this.data();

        let tr = $(this.node());

        let cols = tr.find("td");

        data.push([

            cols.eq(1).text().trim(),
            cols.eq(2).text().trim(),
            cols.eq(3).text().trim(),
            cols.eq(4).text().trim(),
            cols.eq(5).text().trim(),
            cols.eq(6).text().trim()

        ]);

    });

    let ws = XLSX.utils.aoa_to_sheet(data);
    let wb = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb,ws,"ISO CLAUSES");

    XLSX.writeFile(wb,"ISO_CLAUSES.xlsx");

}


/* =========================
   EXPORT PDF
========================= */

function exportPDF(){

    const { jsPDF } = window.jspdf;

    let doc = new jsPDF('l','pt','A4');

    let table = $('#list_iso').DataTable();
    let rows = table.rows().nodes();

    let grouped = {};

    /* =========================
       KELOMPOK PER ISO
    ========================= */

    $(rows).each(function(){

        let cols = $(this).find("td");

        let iso = $(cols[2]).text().trim();
        let clause = $(cols[3]).text().trim();
        let name = $(cols[4]).text().trim();
        let level = $(cols[5]).text().trim();
        let status = $(cols[6]).text().trim();

        if(!grouped[iso]){
            grouped[iso] = [];
        }

        /* indentasi berdasarkan level */

        let indent = "";

        for(let i=1;i<level;i++){
            indent += "   ";
        }

        grouped[iso].push([
            clause,
            indent + name,
            level,
            status
        ]);

    });


    /* =========================
       SORT CLAUSE NUMBER
    ========================= */

    for(let iso in grouped){

        grouped[iso].sort(function(a,b){

            let x = a[0].split('.').map(Number);
            let y = b[0].split('.').map(Number);

            for(let i=0;i<Math.max(x.length,y.length);i++){

                if((x[i]||0)!==(y[i]||0)){
                    return (x[i]||0)-(y[i]||0);
                }

            }

            return 0;

        });

    }


    /* =========================
       PRINT PER ISO
    ========================= */

    let y = 40;

    doc.setFontSize(18);
    doc.text("ISO CLAUSES REPORT",40,y);

    y += 30;

    for(let iso in grouped){

        doc.setFontSize(14);
        doc.text("Standar ISO : " + iso,40,y);

        y += 10;

        doc.autoTable({

            startY:y,

            head:[[
                "No Klausul",
                "Nama Klausul",
                "Level",
                "Status"
            ]],

            body:grouped[iso],

            styles:{
                fontSize:9,
                cellPadding:4
            },

            headStyles:{
                fillColor:[40,167,69], // hijau
                textColor:255
            },

            alternateRowStyles:{
                fillColor:[245,250,245]
            },

            margin:{left:40,right:40}

        });

        y = doc.lastAutoTable.finalY + 30;

        if(y > 500){
            doc.addPage();
            y = 40;
        }

    }

    doc.save("ISO_CLAUSES_REPORT.pdf");

}

$('.dt-button').addClass('btn btn-secondary');
$('.dt-button').removeClass('dt-button');


});


/* =========================
   DELETE CONFIRM
========================= */

function deleteData(event,name,msg){

    event.preventDefault();

    Swal.fire({
        title:'Konfirmasi',
        text:`Apakah Anda Yakin ${msg} Data ${name} ini?`,
        icon:'warning',
        showCancelButton:true,
        confirmButtonText:`Ya, ${msg}`,
        cancelButtonText:'Batal',
        confirmButtonColor:'#028284'
    }).then((result)=>{

        if(result.isConfirmed){
            event.target.closest('form').submit();
        }

    });

}

</script>
@endpush