@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- Form Section (First Row) -->
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 id="form-title">{{ isset($selectedAction) ? 'Edit' : 'Create' }} <small>Action</small></h2>
                </div>
                <div class="card-body" id="createActionForm">
                    <form id="frmaction" name="frmaction" method="post" enctype="multipart/form-data"
                        action="{{ route('action.store', ['program_id' => $programId]) }}">
                        @csrf
                        <input type="hidden" name="_method" id="form-method" value="{{ old('_method', 'POST') }}">
                        <input type="hidden" name="action_id" id="action_id" value="{{ old('action_id', '') }}">
                        <input type="hidden" id="form-mode" value="{{ old('action_id') ? 'edit' : 'create' }}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label">Day</label>
                                    <div class="col-md-9">
                                        <select id="iDayID" name="iDayID" class="form-control">
                                            <option value="0">Select Day</option>
                                            @php
                                                $activeDays = $days->where('bActive', 1);
                                                $inactiveDays = $days->where('bActive', 0);
                                            @endphp
                                            @if ($activeDays->isNotEmpty())
                                                <optgroup label="Active Days">
                                                    @foreach ($activeDays as $tDay)
                                                        <option value="{{ $tDay->iDayID }}"
                                                            {{ old('iDayId') == $tDay->iDayID ? 'selected' : '' }}>
                                                            {{ $tDay->vDay }} - {{ $tDay->vName }}
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @endif

                                            @if ($inactiveDays->isNotEmpty())
                                                <optgroup label="Inactive Days">
                                                    @foreach ($inactiveDays as $tDay)
                                                        <option value="{{ $tDay->iDayID }}"
                                                            {{ old('iDayId') == $tDay->iDayID ? 'selected' : '' }}>
                                                            {{ $tDay->vDay }} - {{ $tDay->vName }}
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @endif
                                        </select>
                                        @error('iDayID')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

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

                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label">Background Image<span
                                            class="text-danger asterisk">*</span></label>
                                    <div class="col-md-9">
                                        <input type="file" id="vBackgroundImg" name="vBackgroundImg"
                                            class="form-control-file" accept="image/jpeg" required>
                                        <a id="vBackgroundImgLink" href="#" target="_blank"
                                            class="pull-right d-none">Image Link</a>
                                        <small class="form-text text-muted">Must be under 100KB. Only jpg format is
                                            allowed.</small>
                                        <span id="vBackgroundImgError" class="text-danger" style="display:none;"></span>
                                        @error('vBackgroundImg')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label">Num<span
                                            class="text-danger asterisk">*</span></label>
                                    <div class="col-md-9">
                                        <input id="iNum" name="iNum" type="number" class="form-control"
                                            placeholder="Num" value="{{ old('iNum') }}" required>
                                        @error('iNum')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label">A/B Test</label>
                                    <div class="col-md-9">
                                        <input id="iABTest" name="iABTest" type="number" class="form-control"
                                            placeholder="A/B Test" value="{{ old('iABTest') }}">
                                        @error('iABTest')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label">Is Free?</label>
                                    <div class="col-md-9">
                                        <input type="hidden" name="chkbFree" value="0">
                                        <input type="checkbox" class="js-switch" name="chkbFree" id="chkbFree"
                                            value="1" {{ old('chkbFree') == 1 ? 'checked' : '' }} />
                                        @error('chkbFree')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label class="col-md-6 col-form-label">Is Optional?</label>
                                    <div class="col-md-6">
                                        <input type="hidden" name="chkbOptional" value="0">
                                        <input type="checkbox" class="js-switch" name="chkbOptional" id="chkbOptional"
                                            value="1" {{ old('chkbOptional') == 1 ? 'checked' : '' }} />
                                        @error('chkbOptional')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label class="col-md-6 col-form-label">Is Tool?</label>
                                    <div class="col-md-6">
                                        <input type="hidden" name="chkbTool" value="0">
                                        <input type="checkbox" class="js-switch" name="chkbTool" id="chkbTool"
                                            value="1" {{ old('chkbTool') == 1 ? 'checked' : '' }} />
                                        @error('chkbTool')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label class="col-md-6 col-form-label">Is Only Tool?</label>
                                    <div class="col-md-6">
                                        <input type="hidden" name="chkbOnlyTool" value="0">
                                        <input type="checkbox" class="js-switch" name="chkbOnlyTool" id="chkbOnlyTool"
                                            value="1" {{ old('chkbOnlyTool') == 1 ? 'checked' : '' }} />
                                        @error('chkbOnlyTool')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

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

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

                        <!-- Action Cards Section -->
                        <div class="form-group row">
                            <label class="col-md-12 col-form-label">
                                <label>Action Cards</label>
                                <button type="button" id="btn-add-card" class="btn btn-sm btn-primary ml-2">
                                    <i class="fa fa-plus"></i> Add Card
                                </button>
                            </label>
                            <div class="col-md-12">
                                <input type="hidden" name="setActionCards" id="setActionCards" value="{{ old('setActionCards', '') }}">
                                <div id="action-cards-container" class="action-cards-sortable">
                                    <!-- Cards will be added here dynamically -->
                                </div>
                                <small class="form-text text-muted">Hover over the three-line handle to reorder cards. Empty cards are removed when you save.</small>
                            </div>
                        </div>

                        <hr>
                        <div class="form-group row">
                            <div class="col-md-12">
                                @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>

        <!-- List Section (Second Row) -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2>Actions <small>List</small></h2>
                </div>
                <div class="card-body table-responsive">
                    <table id="datatableActions" class="table table-striped table-bordered ">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Day</th>
                                <th>Title</th>
                                <th>Background</th>
                                <th>Num</th>
                                <th>A/B Test</th>
                                <th>Cards</th>
                                <th>Active</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($actions as $action)
                                <tr>
                                    <td>{{ $action->iActionID }}</td>
                                    <td>
                                        @if ($action->day)
                                            {{ $action->day->vDay }}
                                        @endif
                                    </td>
                                    <td>{{ $action->vTitle }}</td>
                                    <td>
                                        @if ($action->vBackgroundImg)
                                            <a data-fancybox="gallery"
                                                data-src="{{ config('constants.backgroundimg.url') . ltrim($action->vBackgroundImg, '/') }}"
                                                data-caption="{{ $action->vTitle }}"
                                                class="position-relative d-inline-block"
                                                title="Click to view full size"><img
                                                    src="{{ config('constants.backgroundimg.url') . ltrim($action->vBackgroundImg, '/') }}"
                                                    width="{{ config('constants.backgroundimg.thumb_width') }}"
                                                    height="{{ config('constants.backgroundimg.thumb_height') }}"
                                                    alt="{{ $action->vTitle }}" class="img-fluid"
                                                    onerror="this.style.display='none'; this.parentElement.textContent='No Image';"></a>
                                        @else
                                            No Image
                                        @endif
                                    </td>
                                    <td>{{ $action->iNum }}</td>
                                    <td>{{ $action->iABTest }}</td>
                                    <td>
                                        @php
                                            // Handle both array and double-encoded string formats
                                            $cardsData = $action->setActionCards;
                                            if (is_string($cardsData)) {
                                                $cardsData = json_decode($cardsData, true) ?: [];
                                            }
                                            $cardsData = is_array($cardsData) ? $cardsData : [];
                                            $cardsCount = count($cardsData);
                                            $cardsJson = json_encode($cardsData);
                                        @endphp
                                        {{ $cardsCount }} card(s)
                                    </td>
                                    <td>
                                        <input type="hidden" class="active-toggle-hidden" value="0"
                                               data-id="{{ $action->iActionID }}">
                                        <input
                                            {{Auth::guard('admin')->user()->bContent == 1 ? '':'disabled'}} type="checkbox"
                                            class="js-switch active-toggle" data-id="{{ $action->iActionID }}"
                                            value="1" {{ $action->bActive ? 'checked' : '' }} />
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-info btn-xs text-nowrap view-action"
                                            data-id="{{ $action->iActionID }}" data-title="{{ $action->vTitle }}"
                                            data-description="{{ $action->tDescription }}"
                                            data-goal="{{ $action->tGoal }}"
                                            data-cards="{{ $cardsJson }}">
                                            <i class="fa fa-eye"></i> View
                                        </button>
                                        @if (Auth::guard('admin')->user()->bContent == 1)
                                            <button type="button"
                                                class="btn btn-primary btn-xs text-nowrap edit-action"
                                                data-id="{{ $action->iActionID }}"
                                                data-dayid="{{ $action->iDayID }}"
                                                data-title="{{ $action->vTitle }}"
                                                data-description="{{ $action->tDescription }}"
                                                data-goal="{{ $action->tGoal }}"
                                                data-cards="{{ $cardsJson }}"
                                                data-bgimg="{{ $action->vBackgroundImg ? config('constants.backgroundimg.url') . ltrim($action->vBackgroundImg, '/') : '' }}"
                                                data-num="{{ $action->iNum }}"
                                                data-abtest="{{ $action->iABTest }}"
                                                data-bfree="{{ $action->bFree }}"
                                                data-boptional="{{ $action->bOptional }}"
                                                data-btool="{{ $action->bTool }}"
                                                data-bonlytool="{{ $action->bOnlyTool }}">
                                                <i class="fa fa-pencil"></i> Edit
                                            </button>
                                            <button type="button"
                                                class="btn btn-danger btn-xs text-nowrap action-delete"
                                                data-title="{{ $action->vTitle }}"
                                                data-id="{{ $action->iActionID }}">
                                                <i class="fa fa-trash-o"></i> Delete
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">Action Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4 id="view-title"></h4>
                    <hr>
                    <h6>Description:</h6>
                    <div id="view-description" class="mb-3"></div>
                    <h6>Goal:</h6>
                    <div id="view-goal" class="mb-3"></div>
                    <h6>Action Cards:</h6>
                    <div id="view-cards"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </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="actionTitle"></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('styles')
<style>
    .action-cards-sortable {
        min-height: 50px;
    }
    .action-card-item {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .action-card-item.ui-sortable-helper {
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .action-card-item .card-header-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    .action-card-item .drag-handle {
        cursor: move;
        padding: 5px;
        color: #666;
        margin-right: 10px;
    }
    .action-card-item .card-number {
        font-weight: bold;
        margin-right: 10px;
        color: #495057;
    }
    .action-card-item .btn-remove-card {
        margin-left: auto;
    }
    .view-card-item {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .view-card-item .card-number {
        font-weight: bold;
        color: #495057;
        margin-bottom: 5px;
    }
</style>
@endpush

@push('scripts')
    <script src="{{ asset('assets/tinymce/tinymce.min.js') }}"></script>
    <script>
        let cardCounter = 0;

        // Wait for the plugins to be loaded
        document.addEventListener('plugins-loaded', function() {
            initializeComponents();
        });

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

        function initializeComponents() {
            // Make this function idempotent: prevent double-initialization which can
            // attach duplicate event handlers (causing handlers to run twice).
            if (initializeComponents._initialized) return;
            initializeComponents._initialized = true;

            // Check if jQuery is properly loaded
            if (window.jQuery) {
                // Initialize TinyMCE for Description
                tinymce.init({
                    selector: '#tDescription',
                    plugins: 'paste link lists',
                    toolbar: 'bold italic underline strikethrough | bullist numlist | link',
                    toolbar_sticky: true,
                    height: 150,
                    menubar: false,
                    branding: false,
                    paste_as_text: true
                });

                // Initialize TinyMCE for Goal
                tinymce.init({
                    selector: '#tGoal',
                    plugins: 'paste link lists',
                    toolbar: 'bold italic underline strikethrough | bullist numlist | link',
                    toolbar_sticky: true,
                    height: 150,
                    menubar: false,
                    branding: false,
                    paste_as_text: true
                });

                // Initialize DataTable
                if (!$.fn.DataTable.isDataTable('#datatableActions')) {
                    $("#datatableActions").DataTable({
                        "pageLength": 25,
                        "order": [
                            [4, "asc"]
                        ],
                        columnDefs: [{
                            targets: '_all',
                            orderSequence: ['asc', 'desc']
                        }],
                    });
                }

                validateFileSize('vBackgroundImg', 100, 'vBackgroundImgError', ['image/jpeg']);

                // Initialize sortable for action cards
                $("#action-cards-container").sortable({
                    handle: ".drag-handle",
                    start: function(event, ui) {
                        // Before dragging: save TinyMCE content to textareas and destroy editors
                        $('#action-cards-container .card-body-textarea').each(function() {
                            const editorId = $(this).attr('id');
                            const editor = tinymce.get(editorId);
                            if (editor) {
                                $(this).val(editor.getContent());
                                tinymce.remove('#' + editorId);
                            }
                        });
                    },
                    stop: function(event, ui) {
                        // After dragging: re-initialize TinyMCE editors
                        $('#action-cards-container .card-body-textarea').each(function() {
                            const editorId = $(this).attr('id');
                            initCardTinyMCE(editorId);
                        });
                        updateCardNumbers();
                    }
                });

                // Restore form state from old input (when validation fails)
                const formMode = $('#form-mode').val();
                const actionId = $('#action_id').val();
                if (formMode === 'edit' && actionId) {
                    // Update form title
                    $('#form-title').html('Edit <small>Action</small>');
                    // Update form action URL
                    const updateUrl = "{{ route('action.index', $programId) }}/" + actionId;
                    $('#frmaction').attr('action', updateUrl);
                    // Update submit button text
                    $('#btn-submit').text('Save Changes');
                    // Make background image not required for edit
                    $('#vBackgroundImg').attr('required', false);
                }

                // Restore cards from old input (when validation fails)
                const oldCardsJson = $('#setActionCards').val();
                if (oldCardsJson && oldCardsJson.trim() !== '') {
                    try {
                        const oldCards = JSON.parse(oldCardsJson);
                        if (Array.isArray(oldCards) && oldCards.length > 0) {
                            loadActionCards(oldCards);
                        }
                    } catch (e) {
                        console.error('Failed to parse old action cards:', e);
                    }
                }

                // Add card button
                $('#btn-add-card').off('click').on('click', function() {
                    addActionCard();
                });

                // Remove card button (delegated)
                $(document).off('click', '.btn-remove-card').on('click', '.btn-remove-card', function() {
                    $(this).closest('.action-card-item').remove();
                    updateCardNumbers();
                });

                // Form submission - serialize action cards
                $('#frmaction').off('submit').on('submit', function(e) {
                    serializeActionCards();
                    // Sync TinyMCE content to textareas
                    tinymce.triggerSave();
                });

                // Edit button functionality (using event delegation for DataTables pagination)
                $('#datatableActions').on('click', '.edit-action', function() {
                    // Update form title
                    $('#form-title').html('Edit <small>Action</small>');
                    $('#form-mode').val('edit');

                    // Get data attributes
                    const id = $(this).data('id');
                    const dayId = $(this).data('dayid');
                    const title = $(this).data('title');
                    const description = $(this).data('description');
                    const goal = $(this).data('goal');
                    const cards = $(this).data('cards');
                    const bgImg = $(this).data('bgimg');
                    const num = $(this).data('num');
                    const abTest = $(this).data('abtest');
                    const bFree = $(this).data('bfree');
                    const bOptional = $(this).data('boptional');
                    const bTool = $(this).data('btool');
                    const bOnlyTool = $(this).data('bonlytool');

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

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

                    // Set form values
                    $('#iDayID').val(dayId);
                    $('#vTitle').val(title);
                    if (bgImg) {
                        $('#vBackgroundImgLink').attr('href', bgImg).removeClass('d-none');
                        $('#vBackgroundImg').attr('required', false);
                    } else {
                        $('#vBackgroundImgLink').attr('href', '#').addClass('d-none');
                        $('#vBackgroundImg').attr('required', true);
                    }
                    $('#iNum').val(num);
                    $('#iABTest').val(abTest);

                    // Handle checkboxes
                    if (bFree) {
                        $('#chkbFree').prop('checked', false).trigger('click');
                    } else {
                        $('#chkbFree').prop('checked', true).trigger('click');
                    }

                    if (bOptional) {
                        $('#chkbOptional').prop('checked', false).trigger('click');
                    } else {
                        $('#chkbOptional').prop('checked', true).trigger('click');
                    }

                    if (bTool) {
                        $('#chkbTool').prop('checked', false).trigger('click');
                    } else {
                        $('#chkbTool').prop('checked', true).trigger('click');
                    }

                    if (bOnlyTool) {
                        $('#chkbOnlyTool').prop('checked', false).trigger('click');
                    } else {
                        $('#chkbOnlyTool').prop('checked', true).trigger('click');
                    }

                    // Set TinyMCE content
                    tinymce.get('tDescription').setContent(description || '');
                    tinymce.get('tGoal').setContent(goal || '');

                    // Load action cards
                    loadActionCards(cards);

                    // Change submit button text
                    $('#btn-submit').text('Save Changes');

                    // Scroll to form
                    $('html, body').animate({
                        scrollTop: $("#createActionForm").offset().top - 100
                    }, 500);
                });

                // Reset button functionality
                $('#btn-reset').off('click').on('click', function() {
                    resetForm();
                });

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

                    // Reset form method and action
                    $('#form-method').val('POST');
                    $('#action_id').val('');
                    $('#frmaction').attr('action', "{{ route('action.store', ['program_id' => $programId]) }}");
                    document.querySelectorAll('.text-danger:not(.asterisk)').forEach(function(element) {
                        element.style.display = 'none';
                    });

                    // Clear form values
                    $('#iDayID').val('0');
                    $('#vTitle').val('');
                    $('#vBackgroundImg').val('');
                    $('#vBackgroundImgLink').attr('href', '#').addClass('d-none');
                    $('#vBackgroundImg').attr('required', true);
                    $('#iNum').val('0');
                    $('#iABTest').val('0');

                    $('#frmaction .js-switch').each(function () {
                        if (this.checked) {
                            this.checked = false;
                            this.dispatchEvent(new Event('change'));
                        }
                    });

                    // Clear TinyMCE content
                    tinymce.get('tDescription').setContent('');
                    tinymce.get('tGoal').setContent('');

                    // Clear action cards (remove TinyMCE editors first)
                    removeAllCardEditors();
                    $('#action-cards-container').empty();
                    cardCounter = 0;

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

                // View action button functionality (using event delegation for DataTables pagination)
                $('#datatableActions').on('click', '.view-action', function() {
                    const title = $(this).data('title');
                    const description = $(this).data('description');
                    const goal = $(this).data('goal');
                    const cards = $(this).data('cards');

                    // Set modal content
                    $('#view-title').text(title);
                    $('#view-description').html(description || 'No description available.');
                    $('#view-goal').html(goal || 'No goal available.');

                    // Render cards
                    let cardsHtml = '';
                    if (cards && Array.isArray(cards) && cards.length > 0) {
                        cards.forEach(function(card) {
                            cardsHtml += '<div class="view-card-item">';
                            cardsHtml += '<div class="card-number">Card ' + card.iNum + '</div>';
                            cardsHtml += '<div class="card-body-content">' + (card.tBody || '') + '</div>';
                            cardsHtml += '</div>';
                        });
                    } else {
                        cardsHtml = '<p class="text-muted">No action cards.</p>';
                    }
                    $('#view-cards').html(cardsHtml);

                    // Show modal
                    $('#viewModal').modal('show');
                });

                // Delete button functionality (using event delegation for DataTables pagination)
                $('#datatableActions').on('click', '.action-delete', function() {
                    const id = $(this).data('id');
                    const title = $(this).data('title');

                    // Set modal content
                    $('#actionTitle').text(title);
                    $('#deleteForm').attr('action', "{{ route('action.index', $programId) }}/" + id);

                    // Show modal
                    $('#deleteModal').modal('show');
                });

                // Toggle active status via AJAX (use event delegation for DataTables pagination)
                $('#datatableActions').on('change', '.active-toggle', function(e) {
                    const $checkbox = $(this);

                    if ($checkbox.data('loading')) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        return false;
                    }
                    $checkbox.data('loading', true);

                    const id = $checkbox.data('id');
                    const isChecked = $checkbox.prop('checked');
                    const $switchWrapper = $checkbox.next('.switchery');

                    if ($switchWrapper.length) {
                        $switchWrapper.hide();
                        $switchWrapper.after('<i class="fa fa-spinner fa-spin text-muted switch-spinner" data-id="' + id + '"></i>');
                    }

                    $.ajax({
                        url: "{{ route('action.activeToggle', ['program_id' => $programId, 'id' => '__ID__']) }}".replace('__ID__', id),
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        // Send the desired final state so the endpoint is idempotent
                        data: { bActive: isChecked ? 1 : 0 },
                        dataType: 'json',
                        success: function(response) {
                            if (response.success) {
                                $checkbox.prop('checked', response.bActive ? true : false);
                                showNotification('Action status updated successfully', 'success');
                            } else {
                                $checkbox.prop('checked', !isChecked);
                                showNotification('Unable to update action status', 'danger');
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error toggling action status:', error);
                            $checkbox.prop('checked', !isChecked);
                            showNotification('Error updating action status. Please try again.', 'danger');
                        },
                        complete: function() {
                            $checkbox.data('loading', false);
                            $('.switch-spinner[data-id="' + id + '"]').remove();
                            // Rebuild Switchery so the visual switch matches the checkbox's
                            // current checked state (reverts the toggle on failure/error).
                            refreshSwitchery($checkbox[0]);
                        }
                    });
                });

                // `showNotification` is defined globally in resources/js/app.js.

                // Initialize Fancybox
                Fancybox.bind("[data-fancybox]", {
                    // Custom options if needed
                });
            } else {
                console.error('jQuery is not loaded properly');
                setTimeout(initializeComponents, 1000); // Try again after a delay
            }
        }

        // Helper function to initialize TinyMCE for a card editor
        function initCardTinyMCE(editorId) {
            tinymce.init({
                selector: '#' + editorId,
                plugins: 'paste link lists',
                toolbar: 'bold italic underline strikethrough | bullist numlist | link',
                toolbar_sticky: true,
                height: 120,
                menubar: false,
                branding: false,
                paste_as_text: true
            });
        }

        function addActionCard(content = '') {
            cardCounter++;
            const editorId = 'card-editor-' + cardCounter;

            const cardHtml = `
                <div class="action-card-item" data-card-id="card-${cardCounter}">
                    <div class="card-header-row">
                        <span class="drag-handle"><i class="fa fa-bars"></i></span>
                        <span class="card-number">Card <span class="card-num-display">${cardCounter}</span></span>
                        <button type="button" class="btn btn-sm btn-danger btn-remove-card">
                            <i class="fa fa-times"></i> Remove
                        </button>
                    </div>
                    <div class="card-body-editor">
                        <textarea id="${editorId}" class="card-body-textarea form-control" rows="3">${content}</textarea>
                    </div>
                </div>
            `;

            $('#action-cards-container').append(cardHtml);

            // Initialize TinyMCE for this card's editor
            initCardTinyMCE(editorId);
        }

        // Helper function to remove all card TinyMCE editors
        function removeAllCardEditors() {
            // Get list of editor IDs first (avoid modifying array while iterating)
            const editorIds = [];
            tinymce.editors.forEach(function(editor) {
                if (editor && editor.id && editor.id.startsWith('card-editor-')) {
                    editorIds.push(editor.id);
                }
            });
            // Now remove each editor
            editorIds.forEach(function(id) {
                tinymce.remove('#' + id);
            });
        }

        function loadActionCards(cards) {
            // First remove all existing TinyMCE card editors (before clearing DOM)
            removeAllCardEditors();

            // Clear existing cards from DOM
            $('#action-cards-container').empty();
            cardCounter = 0;

            // Add new cards
            if (cards && Array.isArray(cards) && cards.length > 0) {
                cards.forEach(function(card) {
                    addActionCard(card.tBody || '');
                });
            }
        }

        function updateCardNumbers() {
            let num = 1;
            $('#action-cards-container .action-card-item').each(function() {
                $(this).find('.card-num-display').text(num);
                num++;
            });
        }

        function serializeActionCards() {
            const cards = [];
            let num = 1;

            $('#action-cards-container .action-card-item').each(function() {
                const cardId = $(this).data('card-id');
                const editorId = $(this).find('.card-body-textarea').attr('id');
                const editor = tinymce.get(editorId);

                let content = '';
                if (editor) {
                    content = editor.getContent();
                } else {
                    content = $(this).find('.card-body-textarea').val();
                }

                cards.push({
                    iNum: num,
                    tBody: content
                });
                num++;
            });

            $('#setActionCards').val(JSON.stringify(cards));
        }
    </script>
@endpush