@extends('layouts.master')
@php
    $viewportWidthPercentage = 0.8; // 80% of the viewport width
    $thresholdWidth = round($viewportWidthPercentage * 100) . 'vw';
@endphp
@section('content')
<div class="content container-fluid">
    <!-- Page Header -->
    <x-page-header title="Department">
        <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 Department</a>
        </div>
    </x-page-header>
    <!-- /Page Header -->

    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped custom-table mb-0 datatable">
                <thead>
                    <tr>
                        @foreach($columns as $column)
                            <th>{{ ucwords(str_replace('_', ' ', $column)) }}</th>
                        @endforeach
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('modals')
@livewire('department', [
    '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 };

        // Prepare the columns configuration for DataTables
        var columnsConfig = prepareColumnsConfig(columns, columnDetails, actionColumnConfig);
        var editableColumnIndexes = columnsConfig.reduce(function(acc, column, index) {
            if (index === 1 || column.editable) {
                acc.push(index);
            }
            return acc;
        }, []);

        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,
            ajax: "{{route('departments.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 prepareColumnsConfig(columns, columnDetails, actionColumnConfig) {
        return columns.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;
            
            if (key === 'name') {
                isSortable = true;
            }

            var columnConfig = {
                data: key,
                name: key,
                orderable: isSortable,
                searchable: isFilterable,
                visible: !isHidden,
                editable: isEditable
            };

            if (columnConfig.name === 'name' || columnConfig.name === 'created_at' || columnConfig.name === 'updated_at') {
                columnConfig.searchable = true;
            }

            return columnConfig;
        }).concat(actionColumnConfig);
    }

    function myCallbackFunction(updatedCell, updatedRow, oldValue, columnsConfig, columnDetails) {

        var rowData = updatedRow.data();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        console.log(csrfToken);
        var columnIndex = updatedCell.index().column;
        var columnConfig = columnsConfig[columnIndex];
        var columnName = columnConfig ? columnConfig.data : null;
        var columnType = "";
        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("departments.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 {
            // Handle invalid input
            console.error("Invalid input for column:", columnName);
            // Display error message
            alert(errorMessage);
            // Restore old value in the cell
            updatedCell.data(oldValue);
        }
    }
</script>
@endpush