@extends('admin.layout.main')
@section('title',$header['title'])
@section('content')

<style>
    .user_drop_sel .multipleUsers{
        padding: 0;
        width: 100% !important;
    }

    .user_drop_sel .dropdown-toggle{
        height: 100%;
        border-color: #343a401f !important;
    }

    .user_drop_sel .dropdown-toggle:focus{
        outline: 0px auto -webkit-focus-ring-color!important;
    }
    
    .user_drop_sel .form-control{
        height: 35px !important;
        background-color: #fff !important;
        color: #000 !important;
    }
    

    .user_drop_sel .form-control:focus{
        box-shadow: none !important;
    }

    .user_drop_sel .inner li .dropdown-item{
        color: #000;
    }

    .user_drop_sel .inner li .dropdown-item:hover span{
        color: #ee3137 !important;
    }

    .user_drop_sel .show-tick .dropdown-menu{
        background-color: #fff !important;
        color: #fff !important;
    }

</style>

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-4 mt-2">
            <div class="col-sm-12 align-items-center d-flex breadcrumb-style">
                <h1 class="m-0">Notification Types</h1>
                <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item active">Notification Types</li>
                </ol>
                <div class="breadcrumb-btn">
                
                </div>
            </div><!-- /.col -->

            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <section class="content">
        <div class="card">
              <div class="card-body">
                <table id="dataList" class="table table-head-fixed text-nowrap">
                    <thead class="td-data-color">
                        <tr>
                            <th class="table-head-notify">Entity</th>
                            <th class="table-head-notify">Entity Type</th>
                            <th class="table-head-notify">Message</th>
                            <th class="table-head-notify">Users</th>
                            <th class="table-head-notify">Status</th>
                        </tr>
                    </thead>
                    <tbody class="td-data-color">
                        @foreach($data as $notificationEntity)
                        <tr>
                            <td class="table-data-notify">{{$notificationEntity->entity}}</td>
                            <td class="table-data-notify">{{$notificationEntity->entity_type}}</td>
                            <td class="table-data-notify" style="text-transform: none">{{$notificationEntity->text}}</td>
                            @if(hasPermission('NOTIFICATION_TYPE','update')){
                            <td class="user_drop_sel">
                                                                <select data-live-search="true" data-id="{{$notificationEntity->id}}" name="users[]" id="multipleUsers" class="js-select2 select-text multipleUsers select-text height_drp is-valid" multiple tabindex="2" onchange="updateUser(this)">
                                    @foreach($adminUsers AS $user)
                                        <option value="{{$user['id']}}" @if(in_array($user['id'],$notified_users)) selected @endif>{{$user['name']}}</option>
                                    @endforeach
                                </select>                                
                            </td>
                            }@else{
                            <td class="user_drop_sel">
                                                                <select data-live-search="true" data-id="{{$notificationEntity->id}}" name="users[]" id="multipleUsers" class="js-select2 select-text multipleUsers select-text height_drp is-valid" multiple tabindex="2" onchange="updateUser(this)" disabled>
                                    @foreach($adminUsers AS $user)
                                        <option value="{{$user['id']}}" @if(in_array($user['id'],$notified_users)) selected @endif>{{$user['name']}}</option>
                                    @endforeach
                                </select>                                
                            </td>
                            }@endif

                            @if(hasPermission('NOTIFICATION_TYPE','update')){
                            <td class="table-data-notify">
                                <input data-id="{{$notificationEntity->id}}" id="toggle{{$notificationEntity->id}}" type="checkbox" value="{{$notificationEntity->status}}" data-bootstrap-switch data-off-color="danger" data-on-color="success" {{ $notificationEntity->status == "1" ? 'checked' : '' }}>                                              
                            </td>
                            }@else{
                            <td class="table-data-notify">
                                <input data-id="{{$notificationEntity->id}}" id="toggle{{$notificationEntity->id}}" type="checkbox" value="{{$notificationEntity->status}}" data-bootstrap-switch data-off-color="danger" data-on-color="success" {{ $notificationEntity->status == "1" ? 'checked' : '' }} disabled>                                              
                            </td>
                            }@endif
                        </tr>
                        @endforeach
                    </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
    </section>
@endsection

@section('js')
<!-- Bootstrap Switch -->
<script src="{{ URL::asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

<!-- Bootstrap Select -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script>
    
    $(document).ready(function () {  
        $(".multipleUsers").selectpicker();      
    /*    $(".js-select2").select2({
            //placeholder: "Admin Users",
           // theme: "material"
        }); */
    });
    $(function () {
        
        $("input[data-bootstrap-switch]").each(function(){
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });
        
        $('input[data-bootstrap-switch]').on('switchChange.bootstrapSwitch', function (event, state) {
            entityId = $(this).attr("data-id");
            statusValue=$(this).val();
            if(statusValue==1){
                statusValue=0;
            }else{
                statusValue=1;
            }
            $.post("{{route('admin.notificationEntity.changeStatus')}}",
                {
                  _token:"{{csrf_token()}}",
                  enitity_id: entityId,
                  statusValue: statusValue
                },
                function(data, status){
                    $("#toggle"+entityId).val(statusValue);
                });

        });
       
    })

    function updateUser(sel){
        var opts = [],
            opt;
        var len = sel.options.length;
        for (var i = 0; i < len; i++) {
            opt = sel.options[i];

            if (opt.selected) {
            opts.push(opt.value);
            //alert(opt.value);
            }
        }

        var selected = opts;
        var entityId = $(sel).attr("data-id");

        if(selected.length > 0){
            $.post("{{route('admin.notificationEntity.changeStatus')}}",
            {
                _token:"{{csrf_token()}}",
                enitity_id: entityId,
                admin_users: selected.toString(),
            },
            function(data, status){
                $(".multipleUsers").selectpicker('destroy');
                $(".multipleUsers").selectpicker();
            });
        }else{
            alert("At lease one user required");
            return false;
        }
    }
</script>
    
@append