@include('includes.header')

<style>
    .dot {
        height: 8px;
        width: 8px;
        background-color: #d2d2d2;
        border-radius: 50%;
        display: inline-block;
    }
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="row col-sm-6">
                <h1>&nbsp;{{ $workplan->title }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ asset('home') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('projects') }}">Projects</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('view.strategic_plan_profile', $workplan->strategic_plan_id ) }}">Annual Workplans</a></li>
                    <li class="breadcrumb-item"> {{ $workplan->title }}: Quarterly Plans</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Default box -->
                <div class="card card-success card-outline card-tabs">
                    <div class="card-header p-0 pt-1 border-bottom-0">
                        @include('workplans.profile.tabs.tabs')
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-three-tabContent">
 
                        <input id='this_data' >

                            <div class="tab-pane fade active show" id="custom-tabs-shelf" role="tabpanel" aria-labelledby="custom-tabs-shelf-tab">
                                @include('file_manager.index')
                            </div>
  

                        </div> 
                    </div>
               </div>
            </div>
        </div>
    </div>
    
</section>
<!-- /.content -->
@include('includes.footer')
<script>

$('.CurrencyInput').priceFormat();



    jQuery(document).ready(function(){
        
    $('.number_format').priceFormat();
 
 
  
 
        var file_id = 9; 


        var files_table = jQuery('#files_table').DataTable({
        pageResize: true,
        pageLength : 10,
        lengthMenu: [[10, 50], [10, 50]],
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{route("files-datatables")}}',
            data: function (d) {
                d.file_id = $('#this_data').val(); 
            }
        }, 
        columns: [
            {data: 'name'},
            {data: 'size'}, 
            {data: 'type'},
            {data: 'last_modified'},
        ],"drawCallback": function(data) {
 

            console.log(file_id);


            $('#files_div').attr('style', 'overflow:auto; height: 400px !important').trigger('change');
            $('#files_div').find('.dataTables_length').attr('style', 'display: none').trigger('change');
            $('#files_div').find('.ui-corner-bl').attr('style', 'display: none').trigger('change');
            $('#files_div').find('tbody').find('tr').each(function(){
                $(this).find('td').each(function(){
                    $(this).attr('style', 'border-top: 0px').trigger('change');
                });
            })




            $('#files_table').find('tbody').find('tr').each(function(){  
                
                $(this).dblclick(function(){
                    // Handle Double click here; 
                    // hideAll($(this)); 
                    $('#this_data').val(890).trigger('change');
                    alert($('#this_data').val())
                    // file_id = 23;
                    files_table.draw(); 
                });

                $(this).contextmenu(function(e){
                    e.preventDefault();

                    hideAll($(this));
                    $(this).attr('class', 'dropdown more_options_div').trigger('change');
                    var el = document.getElementsByClassName("more_options_div");
                    var rect = el[0].getBoundingClientRect();
                    
                    var x = e.clientX - rect.left;
                    var y = e.clientY - rect.top; 


                    $(this).attr('style', 'position: relative'); 
                    $(this).find('.more_options_list').attr('style', 'position: absolute; top: '+y+'px !important; left: '+x+'px !important;'); 
                    $(this).attr('class', 'dropdown more_options_div show');
                    $(this).find('.more_options_list').attr('class', 'dropdown-menu more_options_list show'); 
                    
                })


            });


                            
        }
            
    }); 
 
    
    function hideAll(tr){
        tr.parent().find('.more_options_div').each(function(){
            $(this).find('.more_options_list').attr('class', 'dropdown-menu more_options_list').trigger('change');;
            $(this).attr('class', 'dropdown').trigger('change');;
            
        });
        
    }

    $('body').click(function(){ 
        hideAll($(this));
    })
 

  
    });


</script>