@extends('layouts.master')

@push('page-styles')
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker.min.css') }}">
<!-- Additional styles for responsive and scrollable table -->
<style>
    .table-responsive {
        overflow-x: scroll;
    }
    .datatable input[type="search"] {
        width: 100%; /* Responsive width */
    }

</style>
@endpush

@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)" data-toggle="modal" data-target="#add_ticket" class="btn add-btn"><i class="fa fa-plus"></i> Add Ticket</a>
            <a href="javascript:void(0)" onclick="addColumn()" 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">
            <div class="table-responsive">
                <table class="table table-striped custom-table mb-0 datatable">
                    <thead>
                        <tr>@foreach($allColumns as $column)
                            <th>{{ $column }}</th>
                            @endforeach
                            <th class="text-right">Actions</th>
                        </tr>
                        <tr>
                            @foreach($allColumns as $column)
                            <th><input type="search" class="form-control form-control-sm"></th>
                            @endforeach
                            <th></th> <!-- action column -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Tdhanat  -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('modals')
<x-modals.modal id="add_ticket" type="modal-lg">
    <x-slot:title>
        Add Ticket
    </x-slot>
    <form action="{{route('tickets')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.input name="ticket_subject" label="Ticket Subject"></x-form.input>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.input name="ticket_id" label="Ticket ID" placeholder="leave empty to autogenerate"></x-form.input>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select name="assigned_to" label="Assign Staff">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select name="client" label="Client">
                        @foreach ($users as $client)
                            @if($client->is_client == 1)
                                <option value="{{$client->is_client}}">{{$client->firstname.' '.$client->lastname}}</option>
                             @endif
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select name="priority" label="Priority">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.input name="cc" label="CC"></x-form.input>
                </div>
            </div>
            <div class="col-12">
                <div class="input-block mb-3 wday-box">
                    <x-form.select class="followers" multiple name="followers[]" label="Followers">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>

            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.textarea name="description" label="Description"></x-form.textarea>
                </div>
            </div>
            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.file name="uploaded_files[]" label="Files"></x-form.file>
            </div>
            <div class="col-md-12">
                @foreach($userColumns as $column)
                    <div class="input-block mb-3 wday-box">
                    <div class="input-block mb-3">
                        <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                        <input type="text" class="form-control" id="{{ $column }}" name="{{ $column }}" placeholder="Enter {{ $column }}">
                    </div>
                    </div>
                @endforeach
            </div>
            <div class="submit-section">
                <button class="btn btn-primary submit-btn">Submit</button>
            </div>
        </div>

    </form>
</x-modals.modal>
<x-modals.modal id="edit_ticket" type="modal-lg">
    <x-slot:title>
        Update Ticket
    </x-slot>
    <form action="{{route('tickets')}}" method="POST" enctype="multipart/form-data">
        @csrf
        @method("PUT")
        <input type="hidden" name="id" id="edit_id">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.input name="ticket_subject" label="Ticket Subject"></x-form.input>
                </div>
            </div>


            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select id="edit_assigned" name="assigned_to" label="Assign Staff">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select id="edit_client" name="client" label="Client">
                        @foreach ($clients as $client)
                            <option value="{{$client->id}}">{{$client->user->firstname.' '.$client->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.select id="edit_priority" name="priority" label="Priority">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </x-form.select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-block mb-3">
                    <x-form.input name="cc" label="CC"></x-form.input>
                </div>
            </div>
            <div class="col-12">
                <div class="input-block mb-3 wday-box">
                    <x-form.select id="edit_followers" class="followers" multiple name="followers[]" label="Followers">
                        @foreach ($employees as $employee)
                            <option value="{{$employee->id}}">{{$employee->user->firstname.' '.$employee->user->lastname}}</option>
                        @endforeach
                    </x-form.select>
                </div>
            </div>

            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.textarea name="description" label="Description"></x-form.textarea>
                </div>
            </div>
            <div class="col-md-12">
                <div class="input-block mb-3">
                    <x-form.file name="uploaded_files[]" label="Files"></x-form.file>
            </div>
            <div class="col-md-12">
                @foreach($userColumns as $column)
                    <div class="input-block mb-3 wday-box">
                    <div class="input-block mb-3">
                        <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                        <input type="text" class="form-control" id="{{ $column }}" name="{{ $column }}" placeholder="Enter {{ $column }}">
                    </div>
                    </div>
                @endforeach
            </div>
            <div class="submit-section">
                <button class="btn btn-primary submit-btn">Submit</button>
            </div>
        </div>
    </form>
</x-modals.modal>
<x-modals.modal id="delete_ticket">
    <div class="form-header">
        <h3>Delete Ticket</h3>
        <p>Are you sure want to delete?</p>
    </div>
    <form method="post" action="{{route('tickets')}}">
        @csrf
        @method("DELETE")
        <input type="hidden" name="id" id="delete_id">
        <div class="modal-btn delete-action">
            <div class="row">
                <div class="col-6">
                    <button type="submit"  class="btn btn-primary w-100 continue-btn">Delete</button>
                </div>
                <div class="col-6">
                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</x-modals.modal>

<!--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">Manage Columns</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mt-3">
                    <div class="col-md-12">
                        <input type="hidden" id="csrfToken" value="{{ csrf_token() }}">
                        <input type="text" id="newColumnName" class="form-control" placeholder="Enter new column name">
                        <button id="createColumn" class="btn btn-primary mt-2">Create New Column</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endpush

@push('page-scripts')
<script>
    document.getElementById('createColumn').addEventListener('click', () => {
        const newColumnName = document.getElementById('newColumnName').value;
        const csrfToken = document.getElementById('csrfToken').value;

        // AJAX request using ES6 features
        fetch('{{ route("save-columns") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ newColumnName })
        })
        .then(response => response.json())
        .then(data => {
            $('#addColumnModal').modal('hide');
        })
        .catch(error => {
            console.error('Error:', error);
            // Handle errors here
        });
    });
</script>
@endpush
@push('page-scripts')
<script src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}"></script>
<script>
    $(document).ready(function(){
        var userColumns = Object.values(@json($userColumns));
        var actionColumnConfig = { data: 'action', name: 'action', orderable: false, searchable: false };
        var allColumns = Object.values(@json($allColumns));

        var columnsConfig = allColumns.map(function(columnName) {
            var key = columnName.toLowerCase().replace(/\s+/g, '_');
            return { data: key, name: key, orderable: false, searchable: true };
        });

        columnsConfig.push(actionColumnConfig);

        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,
            ajax: "{{ route('tickets') }}",
            columns: columnsConfig,
            initComplete: function() {
                this.api().columns().every(function() {
                    var column = this;
                    $('input', this.header()).on('keyup change clear', function() {
                        if (column.search() !== this.value) {
                            column.search(this.value).draw();
                        }
                    });
                });
                $('tr>td:last-child').addClass('text-right');
            }
        });

        $('table tbody').on('click', 'td', function() {
            var cellIndex = $(this).index();
            var isActionColumn = cellIndex === $('table thead th').length - 1;
            if (!$(this).hasClass('text-right') && !$(this).find('input').length && !isActionColumn) {
                var currentText = $(this).text();
                $('<input>', {
                    type: 'text',
                    value: currentText,
                    class: 'form-control',
                    keypress: function(e) {
                        if (e.which == 13) {
                            var newValue = $(this).val();
                            var cell = $(this).parent('td');
                            cell.text(newValue);
                            $(this).remove();
                            saveCellData(cell);
                        }
                    },
                    blur: function() {
                        var cell = $(this).parent('td');
                        cell.text(currentText);
                        $(this).remove();
                    }
                }).appendTo($(this).empty()).focus();
            }
        });

        $('table').on('click', '.edit', function(){
            var ticket = $(this).data('ticket').model;

            $('#edit_ticket').modal('show');
            var id = ticket.id;
            var ticket_subject = ticket.ticket_subject;
            var ticket_id = ticket.ticket_id;
            var assigned_to = ticket.assigned_to;
            var client = ticket.client_id;
            var followers = ticket.followers;
            var priority = ticket.priority;
            var cc = ticket.cc;
            var description = ticket.description;
            $('#edit_ticket #edit_id').val(id);
            $('#edit_ticket #id_tk_id').val(ticket_id);
            $('#edit_ticket #id_ticket_subject').val(ticket_subject);
            $('#edit_ticket #edit_assigned').val(assigned_to.id).trigger('change');
            $('#edit_ticket #edit_client').val(client).trigger('change');
            $('#edit_ticket #edit_followers').val(followers).trigger('change');
            $('#edit_ticket #edit_priority').val(priority).trigger('change');
            $('#edit_ticket #id_description').val(description);
            $('#edit_ticket #id_cc').val(cc);

            for (var i = 0; i < userColumns.length; i++) {
                var column = userColumns[i];
                var columnValue = ticket.additional_columns[column];
                $('#edit_ticket #' + column).val(columnValue);
            }
        });

        $('table').on('click', '.trash_', function(){
            $('#delete_ticket').modal('show');
            var id = $(this).data('id');
            $('#delete_id').val(id);
        });

        if($('.timepicker').length > 0) {
            $('.timepicker').datetimepicker({
                format: "hh:mm:ss",
                icons: {
                    up: "fa fa-angle-up",
                    down: "fa fa-angle-down",
                    next: 'fa fa-angle-right',
                    previous: 'fa fa-angle-left'
                }
            });
        }

        $('.multiple').select2({
            width: "100%"
        });

        //Edit Cells

        
    });
</script>


@endpush