@extends('layouts.default', ['appTopMenu' => true])

@section('title','Project Management Dashboard') 
@push('scripts')
<!--<script src="{{ asset('js/typeahead.js') }}"></script>
<script src="{{ asset('js/bootstrap3-typeahead.min.js') }}"></script

<script src="{{ asset('js/autocomplete.js') }}"></script>-->
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>


<!-- Copy from SCLSC -->

<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" />

<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/plugins/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
<script src="/assets/plugins/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/assets/plugins/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/pdfmake/build/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/build/vfs_fonts.js"></script>
<script src="/assets/plugins/jszip/dist/jszip.min.js"></script>
<script src="{{ asset('js/task/pending_report.js') }}"></script>

<!-- Copy from SCLSC -->

 <!--<script src="{{ asset('js/bootstrap-datetimepicker.fr.js') }}"></script>-->
@endpush

@push('head')


<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>



@endpush

@section('content') 


<script>
@if (Session::has('success'))
        //swal("{{Session::get('success')}}").then(function() {
//window.location = "/project/" + loc;
//});
@endif


</script>

<div class="row">
    <div class="col-12">
        <div class="row">
            <div class="col-xl-12">
                <div class="panel" data-sortable-id="form-stuff-3">

                    <div class="panel-heading card-bg-color text-white">
                        <h4 class="panel-title">Pending Report</h4>
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div> 
                    <div class="panel-body">
                        <div class="row">
                            <div class="card border-0">
                                <!-- <form action="{{url('/task/getPendingReport')}}" method="POST">
                                    @csrf -->

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <center>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" name="pending" value="Project" id="task" checked="checked" />
                                                    <label class="form-check-label" for="rdn_individual">Project</label>
                                                    <span class="help-block"></span>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" name="pending" value="User" id="task"/>
                                                    <label class="form-check-label" for="rdn_individual">User</label>
                                                    <span class="help-block"></span>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" name="pending" value="Target" id="task" />
                                                    <label class="form-check-label" for="rdn_individual">Target Date</label>
                                                    <span class="help-block"></span>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" name="pending" value="Priority" id="task"/>
                                                    <label class="form-check-label" for="rdn_individual">Priority</label>
                                                    <span class="help-block"></span>
                                                </div>

                                                <br/><br/>
                                                
                                                <div class="form-check form-check-inline" style="margin-right: -1rem" id="divproject">
                                                    <select name="ddl_project" id="ddl_project" class="form-select form-select-sm">
                                                        <option value="0">All Projects</option>
                                                        @foreach($projects as $projects1)
                                                            <option value="{{ $projects1->id }}" @if($projects1->id==old('ddl_project')) {{ 'selected' }} @endif>{{ $projects1->project }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('ddl_project')
                                                    <small class="help-block text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                                <div class="form-check form-check-inline" style="margin-right: -1rem" id="divusers">
                                                    <select name="ddl_users" id="ddl_users" class="form-select form-select-sm">
                                                        <option value="0">All Users</option>
                                                        @php
                                                        foreach($allmembers as $pro){
                                                        @endphp    
                                                        <option value="{{ $pro->user_id }}" @if($projects1->id==old('ddl_users')) {{ 'selected' }} @endif>{{ $pro->name }}</option>                                       
                                                        @php
                                                        }
                                                        @endphp
                                                    </select>
                                                    @error('ddl_users')
                                                    <small class="help-block text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                                <div class="form-check form-check-inline" style="margin-right: -1rem" id="divdate">
                                                   <div class="input-group date" data-date-start-date="Date.default">
                                                       <input type="text" size="10" value="{{old('txt_date') ? old('txt_date') : date('d-m-Y')}}" class="form-control txt_date"  id="datepicker-autoClose" name="txt_date" />
                                                        <span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    </div>                                             
                                                </div>
                                                <div class="form-check form-check-inline" style="margin-right: -1rem" id="divpriority">
                                                    <select name="ddl_priority" id="ddl_priority" class="form-select form-select-sm">
                                                        <option value="Normal">Normal</option>
                                                        <option value="Important">Important</option>
                                                        <option value="Most Important">Most Important</option>
                                                    </select>
                                                    @error('ddl_priority')
                                                    <small class="help-block text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                                <div class="form-check form-check-inline" style="margin-right: -1rem" id="divsubmit">
                                                <input type="button" id="submit" style="width:80px;" class="btn-primary form-control" value="Submit">
                                                </div>
                                            </center>
                                        </div>
                                    </div>
                                <!-- </form>      -->
                            </div>
                        </div>
                        <div class="row">
                                        
                            <div id="dv_heading" class="col-sm-6">

                            </div>
                            <div id="dv_heading_c" class="col-sm-6">

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

                
            </div>

        </div>
        <div class="row mb-3">



        </div>

    </div>

</div>    
@endsection

@push('scripts')
<script>
    $(document).ready(function(){

        //loadChat(12);

        $("#datepicker-autoClose").datepicker({
            todayHighlight: true,
            autoclose: true,
            format : "dd-mm-yyyy"
        });

        $("#divusers").hide();
        $("#divdate").hide();  
        $("#divpriority").hide();  

        $('input:radio').click(function () {
            $('#dv_heading').html("");
            $('#dv_heading_c').html("");
            var rad = $("input[name='pending']:checked").val();
            if(rad == "Project"){
                $("#divusers").hide();
                $("#divdate").hide();  
                $("#divpriority").hide();
                $("#divproject").show();
            }
            if(rad == "User"){
                $("#divusers").show();
                $("#divdate").hide();  
                $("#divpriority").hide();
                $("#divproject").hide();
            }
            if(rad == "Target"){
                $("#divusers").show();
                $("#divdate").show();  
                $("#divpriority").hide();
                $("#divproject").hide();
            }
            if(rad == "Priority"){
                $("#divusers").show();
                $("#divdate").hide();  
                $("#divpriority").show();
                $("#divproject").hide();
            }
        });

        $(document).on('click', '.dchat', function () {
            var id = this.id;
            var pidss = $('#ppiidd').val();
            alert(pidss);
            $.ajax({
                url: "/del_chat",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend:function(){
                    
                },
                data: {mid:id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data, status){
                   
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
                
            });
            $.ajax({
                url: "/task/loadChat",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend:function(){
                    $('#chat-'+pidss).html("");
                },
                data: {pid:pidss},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data, status){
                    $('#chat-'+pidss).html(data);
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
                
            });
        });

       
    });
    

    function loadChat(pid){
        //alert(pid);
        $.ajax({
            url: "/task/loadChat",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend:function(){
                $('#chat-'+pid).html("");
            },
            data: {pid:pid},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data, status){
                $('#chat-'+pid).html(data);
                var elem = document.getElementById('scr-'+pid);
                elem.scrollTop = elem.scrollHeight;
            },
            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
            
        });
        
    }

    function sendChat(pid){
            // Get the selected file
            var files = $('#file-'+pid)[0].files;
            var msg = $('#msg-'+pid).val();
           
               var fd = new FormData();

               // Append data 
                
            if(files.length > 0){
                 fd.append('file',files[0]);
            }else{
                fd.append('file','NA');
            } 
              
               fd.append('msg',msg);
               fd.append('pid',pid);
               fd.append('_token',$('meta[name="csrf-token"]').attr('content'));

               // Hide alert 
              // $('#responseMsg').hide();

               // AJAX request 
               $.ajax({
                 url: "/task/sendMsgAjax",
                 method: 'post',
                 data: fd,
                 contentType: false,
                 processData: false,
                 dataType: 'json',
                 success: function(response){

                   // Hide error container
                   
                   if(response.success == 1){ // Uploaded successfully
                     $("#msg-"+pid).val("");
                     $("#file-"+pid).val("");
                     loadChat(pid);

                   }else if(response.success == 2){ // File not uploaded
                     alert(response.message);
                   }else{
                     // Display Error
                     alert(response.error);
                   } 
                 },
                 error: function(response){
                    console.log("error : " + JSON.stringify(response) );
                 }
               });
           

          }



</script>
@endpush