@extends('master')
@section('title', 'BKK')
@push('script')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/dataTables.bootstrap4.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/responsive.bootstrap4.min.css') }}" />
@endpush
@section('content')


    <div class="card-box mb-30">
        <div class="pd-20">
            <h4 class="h4">Manajemen BKK</h4>
            <p>The standard header size uses length: 1280 pixels and width: 591 pixels</p>
            <p class="mb-0">
                <button type="button" class="btn btn-sm btn-dark addButton"><i class="icon-copy bi bi-plus-circle"></i>
                    Add Data</button>
            </p>
        </div>
        <div class="pb-20 p-4 table-responsive">
            <table class="table hover data" id="data" width="100%">
                <thead style="background-color: #142127!important;color:#fff; ">
                    <tr>
                        <th class="table-plus datatable-nosort">No</th>
                        <th style="width:30px;">Title</th>
                        <th>Author</th>
                        <th>Status</th>
                        <th>Counter Visit</th>
                        <th width="30px">Action</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>



@endsection

@push('javascript')
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/vendors/scripts/datatable-setting.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('body').on('click', '.addButton', function() {
                $('.addButton').removeClass('btn-dark').addClass('btn-dark disabled').text(
                    'Loading....');
                var data = 1;

                $.ajax({
                    url: '{{ route('bkk.store') }}',
                    type: 'post',
                    data: {data:data},
                    success: function(result) {
                        var id_bkk = result.id_news;
                        $('.addButton').removeClass('btn-dark disabled ').addClass(
                                'btn-dark').text('Add Data');
                        if(result.status == 'success'){
                           window.location = 'bkk/' + id_bkk + '/edit';
                        }
                    }
                })
            });

            $('body').on('click', '.edit', function() {
                var id_bkk = $(this).data('id');
                window.location = 'bkk/' + id_bkk + '/edit';
            });

            $('body').on('click', '.delete', function() {
                var id = $(this).data('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('bkk.destroy', '') }}/' + id,
                            type: 'DELETE',
                            cache: false,
                            success: function(result) {
                                if (result.status == 'success') {
                                    Swal.fire({
                                        title: "Info !!",
                                        text: "Your data has been deleted.",
                                        icon: "success"
                                    }).then(function() {
                                        table.draw();
                                    });
                                }else{
                                    Swal.fire({
                                        title: "Info !!",
                                        text: result.message,
                                        icon: "error"
                                    }).then(function() {

                                    });

                                }
                            }
                        });
                    }
                });
            });


            var table = $('.data').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('bkk.create') }}",
                },
                order: [0, 'asc'],
                columns: [
                    {
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'author',
                        name: 'author'
                    },
                    {
                        data: 'status',
                        render: function(data){
                            if(data == 1){
                                return '<span class="badge badge-success">Publish</span>';
                            } else if(data == 0){
                                return '<span class="badge badge-danger">Draft</span>';
                            }  else if(data == 2){
                                return '<span class="badge badge-warning">Pending Approve</span>';
                            }
                        }
                    },
                    {
                        data: 'counter',
                        name: 'counter'
                    },
                    {
                        data: 'id_news',
                        render: function(data) {
                            return '<div class="dropdown"><a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown"><i class="dw dw-more"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list"><a class="dropdown-item edit" href="#" data-id="' +
                                data +
                                '"><i class="dw dw-edit2"></i> Edit</a><a class="dropdown-item delete" href="#" data-id="' +
                                data + '"><i class="dw dw-delete-3"></i> Delete</a></div></div>';
                        },
                    },
                ]
            });


        })
    </script>
@endpush