@extends('layouts.master')

@section('content')
    <!-- Page Content -->
    <div class="content container-fluid">

        <!-- Page Header -->
        <x-page-header title="{{$title}}">
            <div class="col-auto float-right ml-auto">
                <a href="javascript:void(0)" onclick="Livewire.emit('openModal')" class="btn add-btn"><i class="fa fa-plus"></i> Add Client</a>
                <div class="view-icons">
                    <a href="{{route('clients.index')}}" class="grid-view btn btn-link"><i class="fa fa-th"></i></a>
                    <a href="{{route('clients.list')}}" class="list-view btn btn-link active"><i class="fa fa-bars"></i></a>
                </div>
            </div>
        </x-page-header>
        <!-- /Page Header -->

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped custom-table w-100 datatable">
                        <thead>
                            <tr>
                                
                                <!-- <th>Employee ID</th> -->
                                @foreach($listColumns as $column)
                                    <th>{{ ucwords(str_replace('_', ' ', $column)) }}</th>
                                @endforeach
                                <th class="text-right">Action</th>
                            </tr>
                            
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- /Page Content -->
@endsection

@push('modals')
    @livewire('client', [
       'additionalColumns' => $additionalColumns,
        'userAddedColumnsInfo' => $userAddedColumnsInfo
    ])
@endpush

@push('page-scripts')
   <script>
        $(document).ready(function(){
            
            var columns = Object.values(@json($listColumns));
            console.log(columns);
            var columnDetails = Object.values(@json($userAddedColumnsInfo));
            var actionColumnConfig = { data: 'action', name: 'action', orderable: false, searchable: false };

            var columnsConfig = prepareColumnsConfig(columns, columnDetails, actionColumnConfig);
            console.log(columnsConfig);
            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: "{{route('clients.list')}}",
                columns: columnsConfig,
                initComplete: function(){
                    $('tr>td:last-child').addClass('text-right');
                }
            });
        });

        function prepareColumnsConfig(columns, columnDetails, actionColumnConfig) {
            return columns.map(function(column) {
                var key = column.toLowerCase().replace(/\s+/g, '_');
                return { 
                    data: key,
                    name: key,
                    orderable: false,
                    searchable: false,
                };
            }).concat(actionColumnConfig);
        }

    </script>
@endpush