@extends('page')

@section('title', 'Dashboard')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" integrity="sha512-EaaldggZt4DPKMYBa143vxXQqLq5LE29DG/0OoVenoyxDrAScYrcYcHIuxYO9YNTIQMgD8c8gIUU8FQw7WpXSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />


@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
<section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card card-info card-outline">
            <div class="card-header">
              <!-- <h3 class="card-title">Categories</h3> -->
                  @if(Session::has('company'))
                    @if(Session::get('company')==1)
                        <div class="col-md-8">
                          <div id="tbl_users_filter" class="dataTables_filter company_filter">
                            <label><strong>Company </strong>
                               </label>
                               <div class="col-md-3">
                               {!! Form::select('companies', $companies,Session::get('company'), array('class' => 'form-control  form-control-sm','id' => 'company_id')) !!}
                            {!! Form::close() !!}
                            </div>
                          </div>
                        </div>
                    @else
                    <input type="hidden" id="company_id" value= {{ Session::get('company') }} >
                    @endif
                  @endif
             
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="tbl_categories" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>

@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="{{asset('js/categories/index.js')}}"></script>
    
    <script type="text/javascript">
        /* Formatting function for row details - modify as you need 
            function format(d) {
                // `d` is the original data object for the row
                if(d.data1){
                    subHtml ='';
                    
                    $.each(d.data1, function( index, value) {
                        subHtml += '<tr class="sub-category">';
                        subHtml += '<td style="width:5%"></td>';
                        subHtml += '<td class="sorting_1" style="width:27%">'+value.name+'</td>';
                        subHtml += '<td style="width:25%">'+value.position+'</td>';
                        subHtml += '<td style="width:25%">'+value.office+'</td>';
                        subHtml += '<td style="width:15%">'+value.salary+'</td>';
                        subHtml += '</tr>';
                    });
                    return (subHtml);


                }else{
                    return (
                        '<table style="padding-left:50px;">' +
                            '<tr>' +
                                '<td>Full name:</td>' +
                                '<td>' + d.name + '</td>' + 
                            '</tr>' +
                            '<tr>' +
                                '<td>Extension number:</td>' +
                                '<td>' + d.extn + '</td>' +
                            '</tr>' +
                            '<tr>' +
                                '<td>Extra info:</td>' +
                                '<td>And any further details here (images etc)...</td>' +
                            '</tr>' +
                        '</table>'
                    );
                }
            }
             
            $(document).ready(function () {
                var table = $('#example').DataTable({
                        select: {
                        selector:'td:not(:first-child)',
                        style:    'os'
                    },
                    ajax: {
                            url:  'object-list',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                    },
                    columns: [
                        {
                            className: 'dt-control',
                            orderable: false,
                            data: null,
                            defaultContent: '',
                        },
                        { data: 'name' },
                        { data: 'position' },
                        { data: 'office' },
                        { data: 'salary' },
                    ],
                    order: [[1, 'asc']],
                });
             
                // Add event listener for opening and closing details
                $('#example tbody').on('click', 'td.dt-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
                    $('.sub-category').remove();

                    if (tr.hasClass("dt-hasChild")) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown dt-hasChild');
                        $('.sub-category').remove();
                    } else {
                        $(format(row.data())).insertAfter($(this).closest('tr'));
                        $(this).parent().parent().addClass('shown');
                        tr.addClass('shown dt-hasChild' );
                        $(this).parent().parent().show();                       
                    }
                });
            });
        */
    </script>
@stop