@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)" class="btn add-btn" data-toggle="modal" data-target="#addColumnModal"><i class="fa fa-plus"></i>Add Column</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)
                            @if($column !== 'id')
                                <th>{{ $column === 'user_id' ? 'User Name' : ucwords(str_replace('_', ' ', $column)) }}</th>
                            @endif
                        @endforeach
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

@endsection

@push('modals')

@livewire('column', ['initialFields' => $columns])

@endpush

@push('modals')
<!--Add Column Modal -->
<div id="addColumnModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Column</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @csrf
                <form action="{{route('columns.createColumn')}}" method="POST" id="addColumnForm">
                    <input type="hidden" id="csrfToken" value="{{ csrf_token() }}">
                    <!-- <div class="form-group">
                        <label for="activeToggle">Active</label>
                        <input type="checkbox" id="activeToggle" checked>
                    </div> -->
                    <div class="form-group">
                        <label for="columnName">Column name</label>
                        <input type="text" name="columnName" class="form-control" id="columnName" required>
                    </div>
                    <div class="form-group">
                        <label for="columnConfig">Configuration</label>
                        <select class="form-control" id="columnConfigType" name="columnConfigType">
                            @foreach($modelMappings as $modelMapping)
                                <option value="{{$modelMapping->related_model_type}}">{{$modelMapping->related_model_type}}</option>
                            @endforeach
                        </select>
                        
                    </div>
                    <div class="form-group">
                        <label for="columnType">Type</label>
                        <select class="form-control" id="columnType" name="column_type">
                            <option value="text">Text</option>
                            <option value="number">Number</option>
                            <!-- Add more types as necessary -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="menuEntry">Menu entry</label>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="sortable" class="custom-control-input toggle-switch" id="sortableToggle">
                        <label class="custom-control-label" for="sortableToggle">Sortable</label>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="filterable" class="custom-control-input toggle-switch" id="filterableToggle">
                        <label class="custom-control-label" for="filterableToggle">Filterable</label>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="hidden" class="custom-control-input toggle-switch" id="hiddenToggle">
                        <label class="custom-control-label" for="hiddenToggle">Hidden</label>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="checkbox" name="editable" class="custom-control-input toggle-switch" id="editableToggle">
                        <label class="custom-control-label" for="editableToggle">Editable</label>
                    </div>
                    <button type="submit" class="btn btn-primary mt-2">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush

@push('page-scripts')

<script>
    document.getElementById('addColumnForm').addEventListener('submit', async (event) => {
        event.preventDefault();

        const formData = new FormData(event.target);
        const csrfToken = document.getElementById('csrfToken').value;

        let columnData = Object.fromEntries(formData.entries());

        // Convert checkbox values to boolean
        columnData.is_sortable = formData.get('sortable') === 'on';
        columnData.is_filterable = formData.get('filterable') === 'on';
        columnData.is_hidden = formData.get('hidden') === 'on';
        columnData.is_editable = formData.get('editable') === 'on';

        columnData.related_model_type = formData.get('columnConfigType');
        columnData.column_name = formData.get('columnName');
        
        // Remove unnecessary keys
        delete columnData.sortable;
        delete columnData.filterable;
        delete columnData.hidden;
        delete columnData.editable;

        try {
            const response = await fetch('{{ route("columns.createColumn") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken, 
                    'Accept': 'application/json',
                },
                body: JSON.stringify(columnData)
            });

            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            
            const data = await response.json();
            $('#addColumnModal').modal('hide');
        } catch (error) {
            console.error('Error:', error)
        }
    });

    $(document).ready(function() {
        var columns = Object.values(@json($columns));
        var actionColumnConfig = { data: 'action', name: 'action', orderable: false, searchable: false };
        
        var columnsConfig = columns.filter(function(column) {
            return column.toLowerCase() !== 'id';
        }).map(function(column) {
            var key = column.toLowerCase().replace(/\s+/g, '_');
            
            // Check if the column name matches one of the toggle columns
            if (['is_sortable', 'is_filterable', 'is_hidden', 'is_editable'].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-switch">' +
                                    '<input type="checkbox" class="custom-control-input toggle-switch" id="customSwitch_' + columnId + '" ' + checked + ' data-column-key="' + key + '">' +
                                    '<label class="custom-control-label" for="customSwitch_' + columnId + '"></label>' +
                                '</div>';
                    }

                };
            } else {
                return {
                    data: key,
                    name: key,
                    orderable: true,
                    searchable: true,
                };
            }
        });

        columnsConfig.push(actionColumnConfig);

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

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

            }
        });

        $('.datatable').on('change', '.toggle-switch', 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('columns.updateCell')}}",
                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);
                }
            })
        })
    });

</script>
@endpush