Group

@extends('layouts.master')

@section('css')
    <style>
        .swal-modal {
            background-color: #FE9508;
        }

        .swal-title {
            color: #ffffff;
        }

        .swal-button--confirm {
            background-color: #064A25;
        }

        .swal-button--cancel {
            background-color: #ff0000;
            color: #ffffff;

        }

        .swal-footer {
            text-align: center;
        }

    </style>

@endsection

@section('title')
    Daftar Group
@endsection

@section('content')

    <!-- Konten Tampilan disini -->
    <div class="row">
        <div class="col-lg-12 margin-tb mt-3 mb-3">

            <div class="text-left mb-3">
                {{-- <a class="btn btn-success btn-sm" href="{{ route('group.create') }}">+</a> --}}
                <a class="btn btn-success btn-sm float-left" href="/group/create" role="button">Tambah Grup</a>
            </div>
        </div>

        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>
                    <p>{{ $message }}</p>
                </strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        <div class="col-lg-12 margin-tb mt-3 mb-3">
            <button onclick="exportExcel()" class="btn btn-outline-success my-2 my-sm-0 float-right aksi"><i
                    class="fas fa-file-export"></i></button>
            <br><br>
            <table id="table" data-url="group/api" data-pagination="true" data-pagination-h-align="left"
                data-pagination-detail-h-align="right" data-search="true" data-show-search-button="true"
                data-show-fullscreen="true" data-show-export="true" data-filter-control="true"
                data-page-list="[10, 20, 50, 100, all]" class="col-lg-12 table table-hover">
                <thead>
                    <tr>
                        <th data-sortable="false" data-field="index" data-formatter="formatUrutan">No</th>
                        <th data-formatter="action">&nbsp;</th>
                        <th data-sortable="true" data-field="nama" data-formatter="detail">Nama Group</th>
                        <th data-sortable="true" data-field="jumlah_karyawan" data-formatter="formatJumlahKaryawan">Jumlah
                        </th>
                        <th data-sortable="true" data-field="jadwals" data-formatter="formatJadwal">Jadwal</th>
                        <th data-sortable="true" data-field="keterangan">Keterangan</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


@endsection

@section('js')
    <script>
        function exportExcel() {
            let table_html = $('#table').bootstrapTable()[0].outerHTML;
            // convert ke json
            let table_json = HtmlTableToJson.parse(table_html).results[0];
            JSONToCSVConvertor(table_json, "Judul", 1);
        }

        function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {

            //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
            var CSV = '';
            //This condition will generate the Label/Header
            if (ShowLabel) {
                var row = "";

                //This loop will extract the label from 1st index of on array
                for (var index in arrData[0]) {
                    //Now convert each value to string and comma-seprated
                    row += index + ',';
                }
                row = row.slice(0, -1);
                //append Label row with line break
                CSV += row + '\r\n';
            }

            //1st loop is to extract each row
            for (var i = 0; i < arrData.length; i++) {
                var row = "";
                //2nd loop will extract each column and convert it in string comma-seprated
                for (var index in arrData[i]) {
                    row += '"' + arrData[i][index] + '",';
                }
                row.slice(0, row.length - 1);
                //add a line break after each row
                CSV += row + '\r\n';
            }

            if (CSV == '') {
                alert("Invalid data");
                return;
            }

            //this trick will generate a temp "a" tag
            var link = document.createElement("a");
            link.id = "lnkDwnldLnk";

            //this part will append the anchor tag and remove it after automatic click
            document.body.appendChild(link);

            var csv = CSV;
            blob = new Blob([csv], { type: 'text/csv' });
            var csvUrl = window.webkitURL.createObjectURL(blob);
            var filename =  (ReportTitle || 'UserExport') + '.csv';
            $("#lnkDwnldLnk")
                .attr({
                    'download': filename,
                    'href': csvUrl
                });

            $('#lnkDwnldLnk')[0].click();
            document.body.removeChild(link);
        }

        $('#table').bootstrapTable();
        $('.delete-confirm').on('click', function(event) {
            event.preventDefault();
            const url = $(this).attr('href');
            swal({
                title: 'Apakah Anda Yakin menghapus grup?',
                text: "",
                type: 'warning',
                icon: 'warning',
                buttons: {
                    confirm: {
                        text: 'Ya, hapus!',
                        className: 'btn btn-success'
                    },
                    cancel: {
                        visible: true,
                        text: 'Tidak',
                        className: 'btn outline-success'
                    }
                },
            }).then(function(value) {
                if (value) {
                    window.location.href = url;
                }
            });
        });

        function detail(value, row) {
            var html = `<a href="/group/:id">` + row.nama + `</a>`;
            html = html.replace(':id', row.id);
            return html;
        }

        function formatUrutan(value, row, index) {
            return index + 1;
        }

        function action(value, row) {
            var html = `<div class="btn-group">
                                        <button class="btn btn-info btn-sm aksi" type="button">
                                        Aksi
                                        </button>
                                        <button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split aksi" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="sr-only"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                        <center>
                                            <li>
                                            <a href="/group/:id_edit/edit" class="btn btn-success btn-sm margin mb-1">Tambah</a>
                                            </li>
                                            <li>
                                            <a href="/group/:id_keluar/keluargrup" class="btn btn-warning btn-sm margin mb-1">Kurang</a>
                                            </li>
                                            <li>
                                            <a href="/group/:id_rolling/rolling" class="btn btn-primary btn-sm margin mb-1">Rolling Jadwal</a>
                                            </li>
                                            <li>
                                            <button class="btn btn-danger btn-sm mb-1" onclick="deleteConfirmation(:id_del)">Hapus</button>
                                            </li>
                                        </center>
                                        </ul>
                                    </div>`;
            html = html.replace(':id_edit', row.id).replace(':id_keluar', row.id).replace(':id_del', row.id).replace(
                ':id_rolling', row.id);
            return html;
        }

        function deleteConfirmation(id) {
            let deleteUri = '{{ route('group.delete', ':id') }}'
            deleteUri = deleteUri.replace(':id', id);
            swal({
                title: 'Apakah Anda Yakin Menghapus Group?',
                text: '',
                icon: 'warning',
                buttons: {
                    confirm: {
                        text: 'Ya, hapus!',
                        className: 'btn btn-success'
                    },
                    cancel: {
                        visible: true,
                        text: 'Tidak',
                        className: 'btn outline-success'
                    }
                },
            }).then(function(value) {
                if (value === true) {
                    window.location.href = deleteUri;
                }
            });
        }

        function formatJumlahKaryawan(value, row) {
            let jumlahkaryawan = 0;
            for (let i = 0; i < row.karyawans.length; i++) {
                if ((row.karyawans[i].status_karyawan != 'nonaktif')) {
                    jumlahkaryawan++;
                }
            }
            return jumlahkaryawan;
        }

        function formatJadwal(value, row) {
            let jadwal = '';
            for (let i = 0; i < row.jadwals.length; i++) {
                jadwal = `<a href="/jadwal/${row.jadwals[i].id}">${row.jadwals[i].nama_jadwal}</a>`;
            }
            return jadwal;
        }

    </script>
@endsection