@extends('layouts.master')

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

    <!-- Page Header -->
    <x-page-header title="House">
        <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 House</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>{{ $column === 'cordinator_id' ? 'Cordinator Name' : ucwords(str_replace('_', ' ', $column)) }}</th>
                        @endforeach
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('modals')
@livewire('house', ['initialFields' => $columns])
@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 = 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 === 'created_at' || 
                key === 'updated_at'|| 
                key === 'address' || key === 'zip_code' || 
                key === 'cordinator_id' ||
                key === 'manager_id' || 
                key === 'client_id') {
                    
                isSortable = true;
                isFilterable = true;
            }

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

            };
        });
        console.log(columnsConfig);
        columnsConfig.forEach(function(column) {
            if (column.name === 'name' || column.name === 'created_at' || column.name === 'updated_at') {
                column.searchable = true;
                
            }
        });

        columnsConfig.push(actionColumnConfig);

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


        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,
            ajax: "{{route('houses.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);
                    },

                });

            }
        });
    });

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

        $.ajax({
            url: '{{ route("houses.cells" )}}',
            type: 'POST',
            data: {
                row_id: rowData.id,
                column_name: columnName,
                new_value: updatedCell.data(),
                _token: csrfToken
            },
            success: function(response) {
                console.log("Changes saved successfully!");
            },
            error: function(xhr, status, error) {
                console.error("Error saving changes:", error);
            }
        });
    }
</script>
@endpush