@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- List Section (First Column) -->
        <div class="col-md-6 col-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h2>TrackerContent <small>List</small></h2>
                </div>
                <div class="card-body table-responsive">
                    <table id="datatableTrackerContent" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Content</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($trackerContents as $trackerContent)
                                <tr>
                                    <td>{{ $trackerContent->iTrackerContentId }}</td>
                                    <td>{!! $trackerContent->vContent !!}</td>
                                    <td>
                                        @if ($trackerContent->vImageLink)
                                            <img src="{{ config('constants.backgroundimg.url') . ltrim($trackerContent->vImageLink, '/') }}"
                                                width="{{ config('constants.backgroundimg.thumb_width') }}"
                                                height="{{ config('constants.backgroundimg.thumb_height') }}"
                                                alt="{{ $trackerContent->iTrackerContentId }}" class="img-fluid"
                                                onerror="this.style.display='none'; this.parentElement.textContent='No Image';">
                                        @else
                                            No Image
                                        @endif
                                    </td>
                                    <td>
                                        @if (Auth::guard('admin')->user()->bContent == 1)
                                            <button type="button"
                                                class="btn btn-info btn-xs text-nowrap edit-tracker-content"
                                                data-id="{{ $trackerContent->iTrackerContentId }}"
                                                data-content="{{ $trackerContent->vContent }}"
                                                data-image="{{ $trackerContent->vImageLink }}">
                                                <i class="fa fa-pencil"></i> Edit
                                            </button>
                                            <button type="button"
                                                class="btn btn-danger btn-xs text-nowrap tracker-content-delete"
                                                data-title="{{ $trackerContent->iTrackerContentId }}"
                                                data-id="{{ $trackerContent->iTrackerContentId }}">
                                                <i class="fa fa-trash-o"></i> Delete
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Form Section (Second Column) -->
        <div class="col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 id="form-title">Create<small>Tracker
                            Contnent</small>
                    </h2>
                </div>
                <div class="card-body" id="createTrackerContentForm">
                    <form id="frmtrackerContent" name="frmtrackerContent" method="post"
                        action="{{ route('trackerContent.store') }}">
                        @csrf
                        <input type="hidden" name="_method" id="form-method" value="POST">
                        <input type="hidden" name="trackerContent_id" id="trackerContent_id" value="">
                        <input type="hidden" id="form-mode" value="create">

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Content</label>
                            <div class="col-md-9">
                                <textarea id="vContent" name="vContent" class="form-control" rows="5">{{ old('vContent') }}</textarea>
                                @error('vContent')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Image Link<span class="text-danger">*</span></label>
                            <div class="col-md-9">
                                <input id="vImageLink" name="vImageLink" type="text" class="form-control"
                                    placeholder="Image Link URL" value="{{ old('vImageLink') }}">
                                @error('vImageLink')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <hr>
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                @if (Auth::guard('admin')->user()->bContent == 1)
                                    <button type="button" id="btn-reset" class="btn btn-secondary">Cancel</button>
                                    <button type="submit" id="btn-submit" class="btn btn-success">Create</button>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete <span id="trackerContentTitle"></span>?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Keep</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/tinymce/tinymce.min.js') }}"></script>
    <script>
        // Wait for the plugins to be loaded
        document.addEventListener('plugins-loaded', function() {
            initializeComponents();
        });

        // Fallback in case the event doesn't fire
        setTimeout(function() {
            initializeComponents();
        }, 2000);

        function initializeComponents() {
            // Check if jQuery is properly loaded
            if (window.jQuery) {
                // Initialize TinyMCE
                tinymce.init({
                    selector: '#vContent',
                    height: 300,
                    menubar: false,
                    plugins: [
                        'paste importcss searchreplace autolink autosave directionality',
                        'code visualblocks visualchars fullscreen image link media template',
                        'codesample table charmap hr pagebreak nonbreaking anchor toc',
                        'insertdatetime advlist lists wordcount imagetools textpattern',
                        'noneditable help charmap emoticons textcolor'
                    ],
                    toolbar: 'bold italic underline strikethrough blockquote forecolor backcolor',
                    toolbar_sticky: true,
                    menubar: false,
                    branding: false,
                    content_style: '@import url("https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Open+Sans&display=swap&"); ' +
                        'body { font-family: "Open Sans"; }' +
                        'h1,h2,h3,h4,h5,h6 { font-family: "Open Sans" }' +
                        'blockquote {' +
                        'border: 0;position: relative; background-color: #FEEBDD;' +
                        'border-radius: 10px;padding: 5px 10px;}' +
                        'blockquote span{background-color: transparent !important;}',
                    paste_retain_style_properties: "text-align color text-decoration background-color",
                    paste_webkit_styles: "text-align color text-decoration background-color",
                    toolbar_mode: 'wrap'
                });
                // Initialize DataTable
                if (!$.fn.DataTable.isDataTable('#datatableTrackerContent')) {
                    $("#datatableTrackerContent").DataTable({
                        "pageLength": 50
                    });
                }

                // Edit button functionality
                $('.edit-tracker-content').click(function() {
                    // Update form title
                    $('#form-title').html('Edit <small>Traacker Content</small>');
                    $('#form-mode').val('edit');

                    // Get data attributes
                    const id = $(this).data('id');
                    const content = $(this).data('content');
                    const image = $(this).data('image');

                    // Change form to PUT method
                    $('#form-method').val('PUT');
                    $('#trackerContent_id').val(id);

                    // Update form action URL
                    const updateUrl = "{{ route('trackerContent.index') }}/" + id;
                    $('#frmtrackerContent').attr('action', updateUrl);

                    // Set form values
                    tinymce.get('vContent').setContent(content);
                    //$('#vContent').val(content);
                    $('#vImageLink').val(image);

                    // Change submit button text
                    $('#btn-submit').text('Save Changes');
                    // Scroll to form and focus
                    $('#createTrackerContentForm')[0].scrollIntoView({
                        behavior: 'smooth'
                    });
                });

                // Reset button functionality
                $('#btn-reset').click(function() {
                    // Reset form to create mode
                    resetForm();
                });

                function resetForm() {
                    // Reset form title
                    $('#form-title').html('Create <small>Tracker Content</small>');
                    $('#form-mode').val('create');

                    // Reset form method and action
                    $('#form-method').val('POST');
                    $('#trackerContent_id').val('');
                    $('#frmtrackerContent').attr('action', "{{ route('trackerContent.store') }}");
                    document.querySelectorAll('.text-danger').forEach(function(element) {
                        element.style.display = 'none';
                    });

                    // Clear form values
                    tinymce.get('vContent').setContent('');
                    //$('#vContent').val('');
                    $('#vImageLink').val('');

                    // Reset submit button text
                    $('#btn-submit').text('Create');
                }

                // Set up delete confirmation modal
                $('.tracker-content-delete').click(function() {
                    const id = $(this).data('id');
                    const title = $(this).data('title');
                    $('#trackerContentTitle').text(title);
                    $('#deleteForm').attr('action', "{{ route('trackerContent.index') }}/" + id);
                    $('#deleteModal').modal('show');
                });
            } else {
                console.error('jQuery is not loaded properly');
            }
        }
    </script>
@endpush