@extends('layouts.master')

@section('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 Designation</a>
        </div>
    </x-page-header>
    <!-- /Page Header -->

    <div class="row">
        <div class="col-md-12">
                <table class="table table-striped custom-table mb-0 w-100 datatable">
                    <thead>
                    <tr>
                        @foreach($columns as $column)
                            @if($column !== 'id')
                                <th>{{ $column === 'department_id' ? 'Department Name' : ucwords(str_replace('_', ' ', $column)) }}</th>
                            @endif
                        @endforeach
                        <th class="text-right">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                        <!-- Table data -->
                    </tbody>
                </table>
        </div>
    </div>

</div>
@endsection

@push('modals')
@livewire('designation', ['initialFields' => $columns,'userAddedColumnsInfo' => $userAddedColumnsInfo])
@endpush

@push('page-scripts')
<script>

    $(document).ready(function() {
        var columns = Object.values(@json($columns));
        var columnDetails = Object.values(@json($userAddedColumnsInfo));
        var actionColumnConfig = { data: 'action', name: 'action', orderable: false, searchable: false };
        console.log(columnDetails);
        // Prepare the columns configuration for DataTables
        var columnsConfig = columns.filter(function(column) {
            return column.toLowerCase() !== 'id';
        }).map(function(column)  {
            var key = column.toLowerCase().replace(/\s+/g, '_');
            var columnInfo = columnDetails.find(info => info.column_name.toLowerCase() === key);
            var isFilterable = columnInfo ? columnInfo.is_filterable === 1 : false;
            var isSortable = columnInfo ? columnInfo.is_sortable === 1 : false;
            var isHidden = columnInfo ? columnInfo.is_hidden === 1 : false;
            var isEditable = columnInfo ? columnInfo.is_editable === 1 : false;

            return {
                data: key,
                name: key,
                orderable: isSortable,
                searchable: isFilterable,
                visible: !isHidden,
                editable: isEditable

            };
        });

        columnsConfig.forEach(function(column) {
            if (column.name === 'name' ||
                column.name === 'department_id' || 
                column.name === 'created_at' || 
                column.name === 'updated_at') {

                    column.searchable = true;
                    column.orderable = true;
            }
        });

        columnsConfig.push(actionColumnConfig);

        var editableColumnIndexes = [];
        columnsConfig.forEach(function(column, index) {
            if( index === 0 || column.editable){
                editableColumnIndexes.push(index);
            }
        })

        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,
            ajax: "{{route('designations.index')}}",
            columns: columnsConfig,
            initComplete: function() {
                var table = $(this).DataTable();
                var searchRow = $('<tr>').appendTo($(table.table().header()));

                table.columns().every(function() {
                    var column = this;
                    var header = $(column.header());
                    var title = header.text();
                    header.html('<span>' + title + '</span>');

                    var columnConfig = columnsConfig[column.index()];
                    if (columnConfig && columnConfig.searchable ||
                            title === 'Name' ||
                            title === 'Created At' ||
                            title === 'Updated At') {
                        var searchInput = $('<input>', {
                            type: 'text',
                            class: 'form-control form-control-sm',
                            placeholder: 'Search ' + title,
                            on: {
                                keyup: function() {
                                    column.search($(this).val()).draw();
                                },
                                change: function() {
                                    column.search($(this).val()).draw();
                                }
                            }
                        });
                        $('<th>').append(searchInput).appendTo(searchRow);
                    } else {
                        $('<th>').appendTo(searchRow);
                    }
                });

                $('tr>td:last-child').addClass('text-right');

                table.MakeCellsEditable({
                    "columns": editableColumnIndexes,
                    "onUpdate": function(updatedCell, updatedRow, oldValue) {
                        myCallbackFunction(updatedCell, updatedRow, oldValue, columnsConfig, columnDetails);
                    },

                });

            }
        });
    });

    function myCallbackFunction(updatedCell, updatedRow, oldValue, columnsConfig, columnDetails) {
        var rowData = updatedRow.data();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var columnConfig = columnsConfig[updatedCell.index().column];
        var columnName = columnConfig ? columnConfig.data : null;
        var columnType = "";
       // console.log(columnDetails);
        columnDetails.forEach(function(columnDetail) {
            columnType = columnDetail.column_type;
                    
        });

        var newValue = updatedCell.data();
        var isValid = true;
        var errorMessage = "";
        switch (columnType) {
            case 'text':
                isValid = newValue && newValue.trim().length > 0; 
                if (!isValid) {
                    errorMessage = "Please enter text.";
                }
                break;
            case 'number':
                isValid = !isNaN(newValue);
                if (!isValid) {
                    errorMessage = "Please enter a valid number.";
                }
                break;
        }
        
        if (isValid) {
            $.ajax({
                url: '{{ route("designations.cells" )}}',
                type: 'POST',
                data: {
                    row_id: rowData.id,
                    column_name: columnName,
                    new_value: newValue,
                    _token: csrfToken
                },
                success: function(response) {
                    console.log("Changes saved successfully!");
                },
                error: function(xhr, status, error) {
                    console.error("Error saving changes:", error);
                }
            });
        } else {
            console.error("Invalid input for column:", columnName);
            alert(errorMessage);
            updatedCell.data(oldValue);
        }
    }
</script>

@endpush