{{View::make('layout.header')}}

    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Send/Edit Message</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                    <div class="row">
                      <div class="col-12 col-md-8">
                        
                      </div>
                    </div>
                    <div class="row" style="margin:0px;">
                        <div class="card col-md-12" style="">
                            <div class="card-body">
                                <ul class="nav nav-tabs nav-justified" id="myTab2" role="tablist" style="border-bottom: 1px solid #ebe9f1; border-radius: 0px;">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="home-tab-justified" data-toggle="tab" href="#home-just" role="tab" aria-controls="home-just" aria-selected="true">Send Message</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab-justified" data-toggle="tab" href="#profile-just" role="tab" aria-controls="profile-just" aria-selected="true">Edit Message</a>
                                    </li>
                                </ul>
        
                                <!-- Tab panes -->
                                <div class="tab-content pt-1">
                                    <div class="tab-pane active" id="home-just" role="tabpanel" aria-labelledby="home-tab-justified">
                                        <div class="card"  style="margin-bottom:0px; border: 0px;"> 
                                            <div class="card-header" style="padding-top:0px;">
                                                <h4 class="card-title" >Sent Message</h4>
                                            </div>
                                            <div class="card-body" style="padding-top:0px;">
                                                
                                                <form  id="all-filter11"  enctype="multipart/form-data">
                                                    <div class="row" id="leave">
                                                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Select Branch :*</label>
                                                                <select class="form-control" name="branch" id="branch" onchange="empselect();"></select>
                                                                
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Select Department :*</label>
                                                                <select class="form-control" name="department" id="department" onchange="empselect();"></select>
                                                                
                                                            </div>
                                                        </div>
                                                    
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Select Category :*</label>
                                                                <select class="form-control" name="category" id="category" onchange="empselect();"></select>
                                                                
                                                            </div>
                                                        </div>
        
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Expiry Date :*</label>
                                                                <input type="date" name="date" id="date" class="form-control flatpickr-basic" placeholder="DD-MM-YYYY" data-dateformat="dd-mm-yy" value="" />
                                                            </div>
                                                        </div>
        
                                                        <div class="col-md-12 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Email :*</label>
                                                                <input type="checkbox" id="is_email" />
                                                            </div>
                                                        </div>
        
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Employee :*</label>
                                                                <select class="form-control" id="list_emp" multiple></select>
                                                            </div>
                                                        </div>
        
                                                        <div class="col-md-6 col-12">
                                                            <div class="form-group">
                                                                <label class="form-label" for="payment-date">Message :*</label>
                                                                <textarea name="message" id="message" class="form-control" rows="3" ></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12 col-12">
                                                            <div class="form-group d-flex flex-wrap mb-0">
                                                                <button type="button" onclick="sendmsg()" class="btn btn-info mr-1" id="apply">Apply</button>
                                                                <button type="button" onclick="clear_form('#leave')" class="btn btn-danger mr-1" id="apply">Cancel</button>
                                                                
                                                            </div>
                                                            <div id="msg" style="margin-top:15px;"></div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="card"  style="border: 0px; margin-bottom:0px;">
                                            <div class="card-header " style="padding-top:0px;">
                                                <h4 class="card-title" style="">Message sending instructions (symbols)</h4>
                                            </div>
                                            <div class="card-body" style="padding:0px; ">
                                                    <div class="col-md-12">
                                                        <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                            <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >
                                                                <thead>
                                                                    <tr style="">
                                                                        <th width="70%" style="text-align:left;text-transform: capitalize;">Text</th>
                                                                        <th width="10%" style="text-align:center; text-transform: capitalize;">Equal </th>
                                                                        
                                                                        <th width="20%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Symbols</th> 
                                                                                    
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="profile-just" role="tabpanel" aria-labelledby="profile-tab-justified">
                                        
                                        <div class="card" style="border: 0px; margin-bottom:0px;">
                                            <div class="card-header " style="padding-top:0px;">
                                                <div class="d-flex align-items-center">
                                                    <h4 class="card-title">Sent Messages List</h4>
                                                </div>
                                                <div class="btn-group">
                                                    <div class="">
                                                        <button type="button" class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn" disabled data-toggle="modal" data-target="#rejectModal">Delete</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body" style="padding:0px; ">
                                                    <div class="col-md-12">
                                                        <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                            <table class="table table-striped  my-leave-summary-entitle" id="example12" style="font-size:12px;" >
                                                                <thead>
                                                                    <tr style="">
                                                                        <th width="58%" style="text-transform: capitalize;">Message Content</th>
                                                                        <th width="20%" style="text-transform: capitalize;">Recipient</th>
                                                                        <th width="10%" style="text-transform: capitalize;">Date of Post</th>
                                                                        <th width="10%" style="text-align:center;text-transform: capitalize;">Action</th>
                                                                        <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;" width="2%"><input type="checkbox" id="checkAll" ></th>
                                                                                    
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                            
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this Race ?</h5>
                        <div id="delete-modal">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
    
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this Message ?</h5>
                        <div id="delete-modal1">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn1">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    @include('inc.editmessage-model')
    <script>
         $(document).ready(function() {
            getempdata();
            getcategorydata();
            getDepartment();
         });
    
        function getcategorydata(){
             $('#example12').DataTable({
                 "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
                 "order": [],
    		        "processing": true,
                    "destroy": true,
    		        "serverSide": true,
    		        "ajax": "{!! route('getSentMessages') !!}",
                   
                    "columns": [
                        
                        { data: 'message', name: 'message' },
                        { data: 'recipients', name: 'recipients' },
                        { data: 'time', name: 'time' },
                        { data: 'id', name: 'id',
    		            "render": function (data,type,row,meta){ 
                            var edit = '<a class="appDialog-model text-success" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
    
                            return edit;
                        }
                        },
                        { "render": function (data,type,row,meta){
                            
                            var dlt = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.id+'"/>';
                            return dlt;
    
                       } },
         
                    ],
                    'columnDefs': [{
                        "targets": [3],
                        "orderable": false
                    }],
                    'rowCallback': function(row, data, index){
                        $(row).find('td:eq(3)').css('text-align', 'center');
                        $(row).find('td:eq(0)').css('word-break', 'break-all');
                        $(row).find('td:eq(1)').css('word-break', 'break-all');
                        
                    },
                    "language": {
                        "paginate": {
                        // remove previous & next text from pagination
                        "previous": '&nbsp;',
                        "next": '&nbsp;'
                        }
                    },
             });
        }
    
    
    
        $(document).on('click', '.yes-btn1', function() {
            var count = $('input[name="inlineRadioOptions"]:checked').length;
                
                $.each($('input[name="inlineRadioOptions"]:checked'), function(){
                    var str =$(this).val();
                    var url = '{{route('deleteSentMessage')}}';
                        $.ajax({
                            url:url,
                            type:'POST',
                            data:{
                                '_token' : "{{ csrf_token() }}",
                                'msg_id' : str,
                            },
                            success:function(e){
                            
                            },
                            error:function(w){
                            }
                        });
                  });
               
                window.location.reload();
            });
    
        function getempdata(){
            var dataSource = [  
                { text: 'Username', equal: '=', operator: '%u%' },  
                { text: 'Name', equal: '=', operator: '%n%' }, 
                { text: 'Bf', equal: '=', operator: '%bf%' }, 
                { text: 'BF Adj', equal: '=', operator: '%bfadj%' }, 
                { text: 'Adj', equal: '=', operator: '%adj%' }, 
                { text: 'BF Forfeit', equal: '=', operator: '%bf_f%' }, 
                { text: 'BF Adj Forfeit', equal: '=', operator: '%bfadj_f%' }, 
                { text: 'Adj Forfeit', equal: '=', operator: '%adj_f%' }, 
                { text: 'BF Balance', equal: '=', operator: '%bf_b%' }, 
                { text: 'BF Adj Balance', equal: '=', operator: '%bfadj_b%' }, 
                { text: 'Adj Balance', equal: '=', operator: '%adj_b%' }, 
                { text: 'Balance', equal: '=', operator: '%bal%' },  
            ] 
            $('#example11').DataTable({
                 "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
                 "order": [],
                    
    		        data: dataSource,  
                    "columns": [
                        
                        { data: 'text' },
                        { data: 'equal' },
                        { data: 'operator' },
    		            
                    ],
                    'rowCallback': function(row, data, index){
                        $(row).find('td:eq(1)').css('text-align', 'center');
                        $(row).find('td:eq(2)').css('text-align', 'center');
                        $(row).find('td:eq(0)').css('word-break', 'all');
                        
                    },
                 "language": {
                        "paginate": {
                        // remove previous & next text from pagination
                        "previous": '&nbsp;',
                        "next": '&nbsp;'
                        }
                    },
            });
        }
    
        function clear_form(ele) {
    
            $(ele).find(':input').each(function(){
    
                switch(this.type) {
    
                    case 'password':
    
                    case 'select-multiple':
    
                    case 'select-one':
    
                    case 'text':
    
                    case 'textarea':
    
                        $(this).val('');
    
                        break;
    
                    case 'checkbox':
    
                    case 'radio':
    
                        this.checked = false;
    
                }
                $("#emplylist").val($("#emplylist option:first").val());
                $("#leavetype").val($("#leavetype option:first").val());
                var html="";
                $("#print").html(html);
    
            });
            //fuday();
    
        }
    
        function getDepartment(){
            $.ajax({
                type:'get',
                url:'{{ route('getdepartmentList')}}',
                success:function(resObj) {
                    var html1 = "";
                    html1 += '<option value="">Click to Choose one</option>';
                    for(var i = 0; i < resObj.length; i++){
                        html1 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                    }
                    $("#department").html(html1);
                    $("#edepartment").html(html1);
                    getCategory();
                }
    
            });	
        }
        function getCategory(){
            $.ajax({
                type:'get',
                url:'{{ route('getcategoryList')}}',
                success:function(resObj) {
                    var html2 = "";
                    html2 += '<option value="">Click to Choose one</option>';
                    for(var i = 0; i < resObj.length; i++){
                        html2 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                    }
                    $("#category").html(html2);
                    $("#ecategory").html(html2);
                    getBranch();
                }
    
            });	
        }
        function getBranch(){	
            $.ajax({
                type:'get',
                url:'{{ route('getbranchList')}}',
                success:function(resObj) {
                    var html3 = "";
                    html3 += '<option value="">Click to Choose one</option>';
                    for(var i = 0; i < resObj.length; i++){
                        html3 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                    }
                    $("#branch").html(html3);
                    $("#ebranch").html(html3);
                    onloadusers();
                }
    
            });	
        }
    
        function empselect(){
            $.ajax({
                type:'get',
                url:'{{ route('getGroupedUsers')}}',
                data:{
                    department_id:$("#department").val(),
                    branch_id:$("#branch").val(),
                    categoryId:$("#category").val(),
                },
                success:function(resObj) {
                    var html = "";
                    for(var i = 0; i < resObj.length; i++)
                        html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
                    $("#list_emp").html(html);
                }
    
            });	
        }
    
        function onloadusers(){
            $.ajax({
                type:'get',
                url:'{{ route('getAllUsers')}}',
                data:{
                    department_id:$("#department").val(),
                    branch_id:$("#branch").val(),
                    categoryId:$("#category").val(),
                },
                success:function(resObj) {
                    var html = "";
                    for(var i = 0; i < resObj.length; i++)
                        html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
                    $("#list_emp").html(html);
                }
    
            });	
        }
    
        function sendmsg(){	
            if(validate()){
            var recipients = "";
            var options = document.getElementById("list_emp").options;
    
            for(var i = 0; i < options.length; i++){
                if(options[i].selected){
                if(recipients == "")
                    recipients = options[i].value;
                else
                    recipients = recipients + ","+ options[i].value;
                }
            }
            
                $.ajax({
                    type:'post',
                    data: {
                        '_token' : "{{ csrf_token() }}",
                        recipients: recipients,
                        expiry_date: $("#date").val(),
                        message: $("#message").val(),
                        is_email:$('#is_email:checked').val(),
                        
                    },
                    url:'{{ route('sendMessage')}}',
                        success:function(resObj) {
                            var messege = resObj.result;
                            if(messege ==  true){
                                showMessage("Message added successfully");
                                getcategorydata();
                                //setInterval(redirect,1500);
                                clear_form('#leave');
                            }	
                            else
                                showError("Error Occured");
                        }
    
                });	
            }	
        }
    
        function validate(){
            var message = $("#message").val();
            var options = $("#list_emp").val();
            if(message == ""){
                displayred();
                return false;
            }
            else if(options == ""){
                displayred();
                return false;
            }
            else
                return true;
        }
        function displayred(){
            $(".red").css("display", "inline");
        }
        function showMessage(messagexxx){
            $("#msg").html("<span style='color:green;'>" + messagexxx + "</span>");
        }
    
        function showError(messagexxx){
            $("#msg").html("<span style='color:red;'>" + messagexxx + "</span>");
        }
    
        function update(){	
            var recipients = "";
                var options = document.getElementById("list_emp").options;
    
                for(var i = 0; i < options.length; i++){
                    if(options[i].selected){
                    if(recipients == "")
                        recipients = options[i].value;
                    else
                        recipients = recipients + ","+ options[i].value;
                    }
                }
    
                $.ajax({
                type:'post',
                
                data: {
                        '_token' : "{{ csrf_token() }}",
                        recipients: $("#recipients11").val(),
                        expiry_date: $("#date11").val(),
                        message: $("#message11").val(),
                        
                    },
                    url:'{{ route('sendMessage')}}',
                    success:function(data) {
                        //console.log(data);
                       window.location.reload();
                    }
                        
                });
            	
        }
    
    
        $("#checkAll").click(function(){
            $('.reject-visible-btn').attr('disabled', false);
            $('input:checkbox').not(this).not(":disabled").prop('checked', this.checked);
        });
    
        $(document).on('click', 'input[name="inlineRadioOptions"]', function() {
            $('.reject-visible-btn').attr('disabled', false);
        });
    </script>