@extends('layouts.app')

@section('title', 'List Karyawan')
@section('breadcrumb', 'Manage Karyawan')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Karyawan
    </a>

@endsection
@section('admin', 'kt-menu__item--open kt-menu__item--here')
@section('karyawan', 'kt-menu__item--open kt-menu__item--here')
@section('list-karyawan', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: Search form --}}

                <div class="row m--margin-bottom-20">
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>User:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div>
                            <input type="text" id="name" class="form-control m-input" placeholder="Name, Email, Phone" data-col-index="0"">
                        </div>
                    </div>

                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label for="">Outlet :</label>
                        <div class="input-group">
                            <select name="searchOutlet" id="searchOutlet" class="js-example-basic-single"  style="width:100%!important;">
                                <option value="">--Search Outlet--</option>
                                @foreach ($outlet['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label for="">User Group :</label>
                        <div class="input-group">
                            <select name="searchGroup" id="searchGroup" class="js-example-basic-single"  style="width:100%!important;">
                                <option value="">--Search User Group--</option>
                                @foreach ($user_group['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row mt-2 pull-right">
                    <div class="col-lg-12">
                        <div class="pull-right">
                            <button class="btn btn-primary filter" id='filter'><i class="fa fa-search"></i> Search</button>
                            &nbsp;&nbsp;
                            <input class="btn btn-secondary reset" id="reset" type="reset">
                            &nbsp;&nbsp;
                            <a href="{{route('karyawan.force-logout')}}" class="btn btn-danger force"><i class="fa fa-sign-out-alt"></i> Force Logout</a>
                        </div>
                    </div>
                </div>

           {{-- end: Search form --}}

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Users</th>
                        <th>Outlets</th>
                        <th>User Groups</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}
            @foreach($data as $key => $value)

           <div class="modal fade" id="view{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLongTitle">Outlet</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @foreach($value['user_karyawan'] as $key1 => $val)
                        @foreach($val['user_karyawan_outlets'] as $key2 => $va)
                        <input type="text" class="form-control" value="{{$va['brand_outlet']['name']}}" disabled>
                        @endforeach
                        @endforeach
                    </div>

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

        <div class="modal fade" id="vie{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLongTitle">User Group</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @foreach($value['user_groups'] as $key1 => $val)

                        <input type="text" class="form-control" value="{{$val['user_group']['name']}}" disabled>

                        @endforeach
                    </div>

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

        @endforeach

        </div>
    </div>
@endsection

@section('custom-script')
<script>
     $(document).ready(function() {
        $('#datatable').DataTable().state.clear(); //untuk clear session if refresh
     });
    $.fn.dataTable.ext.errMode = 'none';
    $('#datatable').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        stateSave : true,
        "bFilter": false,
        "lengthChange": false,
        ajax: "{{ route('karyawan.table') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
            {data: 'user', name: 'user'},
            {data: 'outlet', name: 'outlet'},
            {data: 'user_group', name: 'user_group'},
            {data: 'level', name: 'level'},
            {data: 'action', name: 'action', searchable: false, orderable: false}
        ]
    }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

    $(document).on('click', '#filter', function() {
        var name      = $('#name').val();
        var searchOutlet = $('#searchOutlet').val();
        var searchGroup = $('#searchGroup').val();
        filter(name, searchOutlet, searchGroup);
    });

    $(document).on('click', '#reset', function() {
            reset();
            filter();
        });

    function filter(name='', searchOutlet='', searchGroup='') {
        // var name      = $('#name').val();
        // var email      = $('#email').val();
        // var searchOutlet = $('#searchOutlet').val();
        // var searchGroup = $('#searchGroup').val();
        // var phone   = $('#phone').val();
        $.fn.dataTable.ext.errMode = 'none';

        var table = $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave : true,
            destroy: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: {
                url: "{{ route('karyawan.table') }}",
                type: 'get',
                data: function(d) {
                    d.name = name;
                    // d.email = email;
                    d.searchOutlet = searchOutlet;
                    d.searchGroup = searchGroup;
                    // d.phone = phone;
                }
            },
            columns: [
                {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                {data: 'user', name: 'user'},
                {data: 'outlet', name: 'outlet', orderable:false},
                {data: 'user_group', name: 'user_group', orderable: false},
                {data: 'level', name: 'level'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ]
        });
    }

    function reset() {
            $('#name').val('');
            $('#searchOutlet').val('').trigger('change');
            $('#searchGroup').val('').trigger('change');
        }



    $('body').on('click', '.btn-delete', function (event) {
        event.preventDefault();

        var me = $(this),
            url = me.attr('href'),
            title = me.attr('title'),
            csrf_token = $('meta[name="csrf-token"]').attr('content');

        // console.log('url',url)

        swal.fire({
            title: 'Are you sure want to delete ' + title + ' ?',
            text: 'You won\'t be able to revert this!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_method': 'DELETE',
                        '_token': csrf_token
                    },
                    success: function (response) {
                        $('#loading').hide();
                        console.log("resp" ,response)
                        if (response.status == "fail") {
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                        if (response.status == "success") {
                            $('#datatable').DataTable().ajax.reload();
                            swal.fire({
                                type: 'success',
                                title: 'Success!',
                                text: 'Data has been deleted!'
                            });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!'
                        });
                    }
                });
            }
        });
    });

    $('body').on('click', '.btn-email', function (event) {
        event.preventDefault();

        swal.fire({
            type: 'error',
            title: 'Oops...',
            text: 'Under Development!'
        });
    });

    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>
<script>
    $('body').on('click', '.force', function (event) {
        event.preventDefault();

        var me = $(this),
            url = me.attr('href'),
            csrf_token = $('meta[name="csrf-token"]').attr('content');

        swal.fire({
            title: 'Are you sure want to Force Logout all Karyawan?',
            text: 'You won\'t be able to revert this!',
            type: 'warning',
            input: 'password',
            inputAttributes: {
                autocapitalize: 'off',
                placeholder: "Masukan Master PIN",
                maxlength: 6,
                autocomplete: "new-password"
            },
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Force Logout!'
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_token': csrf_token,
                        'pin': result.value
                    },
                    success: function (response) {
                        $('#loading').hide();
                        // console.log(response)
                        if (response.status == "fail") {
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: response.messages
                            });
                        }
                        if (response.status == "success") {
                            $('#datatable').DataTable().ajax.reload();
                            swal.fire({
                                type: 'success',
                                title: 'Success!',
                                text: 'Semua karyawan berhasil di Force Logout!'
                            });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Terjadi kesalahan sistem!'
                        });
                    }
                });
            }
        });
    });
</script>
@endsection