@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 Holiday</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)
                            <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('holiday', ['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 };
    
        var columnsConfig = 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' || 
                key === 'holiday_date' || 
                key === 'completed' || 
                key === 'created_at' || 
                column.name === 'updated_at') {

                isSortable = true;
                isFilterable = true;
            }

            if (['completed'].includes(key)) {
                return {
                    data: key,
                    name: key,
                    orderable: false, 
                    render: function(data, type, row) {
                        var checked = data == 1 ? 'checked' : '';
                        var columnId = key + '_' + row.id; 
                        return '<div class="custom-control custom-checkbox">' +
                                    '<input type="checkbox" class="custom-control-input toggle-checkbox" id="customCheck_' + columnId + '" ' + checked + ' data-column-key="' + key + '">' +
                                    '<label class="custom-control-label" for="customCheck_' + columnId + '"></label>' +
                                '</div>';
                    }

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


        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('holidays.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' || 
                            title === 'Holiday Date' || 
                            title === 'Completed') {
                      
                        var searchInput = $('<input>', {
                            type: 'text',
                            class: 'form-control form-control-sm',
                            placeholder: 'Search ' + title,
                            on: {
                                keyup: function() {
                                    console.log(column.search($(this).val()).draw());
                                    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);
                    },

                });

            }
        });

        $('.datatable').on('change', '.toggle-checkbox', function() {
            var idParts = $(this).attr('id').split('_');
            idParts.shift(); 
            var rowId = idParts.pop(); 
            var columnKey = idParts.join('_'); 
            var isChecked = $(this).is(':checked'); 
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: "{{route('holidays.updateCompleted')}}",
                method: "PUT",
                data: {rowId: rowId, columnKey: columnKey, isChecked: isChecked, _token: csrfToken},
                success: function(response){
                    console.log('success');
                    $('.datatable').DataTable().ajax.reload(); 
                },
                error: function(xhr, status, error){
                    console.error('Error updating checkbox state:', error);
                }
            })
        })
    });

    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 = "";
        columnDetails.forEach(function(columnDetail) {
            columnType = columnDetail.column_type;
                    
        });
        console.log(columnType);


        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("holidays.updateCell" )}}',
                type: 'PUT',
                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