@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($selectedExercise) ? 'Edit' : 'Create' }} <small>Exercise</small></h2>
                </div>
                <div class="card-body" id="createExerciseForm">
                    <form id="frmexercise" name="frmexercise" method="post" enctype="multipart/form-data"
                        action="{{ route('exercise.store', ['program_id' => $programId]) }}">
                        @csrf
                        <input type="hidden" name="_method" id="form-method" value="POST">
                        <input type="hidden" name="exercise_id" id="exercise_id" value="">
                        <input type="hidden" id="form-mode" value="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>
                                            @foreach ($days as $day)
                                                <option value="{{ $day->iDayID }}"
                                                    {{ old('iDayID') == $day->iDayID ? 'selected' : '' }}>
                                                    {{ $day->vDay }} - {{ $day->vName }}
                                                </option>
                                            @endforeach
                                        </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 class="form-group row">
                                    <label class="col-md-3 col-form-label">AV Content Link<span
                                            class="text-danger asterisk">*</span></label>
                                    <div class="col-md-9">
                                        <input id="vAVContentLink" name="vAVContentLink" type="text" class="form-control"
                                            placeholder="AV Content" value="{{ old('vAVContentLink') }}" required>
                                        @error('vAVContentLink')
                                            <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">Count<span
                                            class="text-danger asterisk">*</span></label>
                                    <div class="col-md-9">
                                        <input id="iCount" name="iCount" type="number" class="form-control"
                                            placeholder="Count" value="{{ old('iCount') }}" required>
                                        @error('iCount')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <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>

                        <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>

                        <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>Exercises <small>List</small></h2>
                </div>
                <div class="card-body table-responsive">
                    <table id="datatableExercises" class="table table-striped table-bordered ">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Day</th>
                                <th>Title</th>
                                <th>Background</th>
                                <th>AV Content</th>
                                <th>Count</th>
                                <th>Num</th>
                                <th>A/B Test</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($exercises as $exercise)
                                <tr>
                                    <td>{{ $exercise->iExerciseID }}</td>
                                    <td>
                                        @if ($exercise->day)
                                            {{ $exercise->day->vDay }}
                                        @endif
                                    </td>
                                    <td>{{ $exercise->vTitle }}</td>
                                    <td>
                                        @if ($exercise->vBackgroundImg)
                                            <a data-fancybox="gallery"
                                                data-src="{{ config('constants.backgroundimg.url') . ltrim($exercise->vBackgroundImg, '/') }}"
                                                data-caption="{{ $exercise->vTitle }}"
                                                class="position-relative d-inline-block"
                                                title="Click to view full size"><img
                                                    src="{{ config('constants.backgroundimg.url') . ltrim($exercise->vBackgroundImg, '/') }}"
                                                    width="{{ config('constants.backgroundimg.thumb_width') }}"
                                                    height="{{ config('constants.backgroundimg.thumb_height') }}"
                                                    alt="{{ $exercise->vTitle }}" class="img-fluid"
                                                    onerror="this.style.display='none'; this.parentElement.textContent='No Image';"></a>
                                        @else
                                            No Image
                                        @endif
                                    </td>
                                    <td>{{ $exercise->vAVContentLink }}</td>
                                    <td>{{ $exercise->iCount }}</td>
                                    <td>{{ $exercise->iNum }}</td>
                                    <td>{{ $exercise->iABTest }}</td>
                                    <td>
                                        <button type="button" class="btn btn-info btn-xs text-nowrap view-description"
                                            data-id="{{ $exercise->iExerciseID }}" data-title="{{ $exercise->vTitle }}"
                                            data-description="{{ $exercise->tDescription }}">
                                            <i class="fa fa-eye"></i> View Description
                                        </button>
                                        @if (Auth::guard('admin')->user()->bContent == 1)
                                            <button type="button"
                                                class="btn btn-primary btn-xs text-nowrap edit-exercise"
                                                data-id="{{ $exercise->iExerciseID }}"
                                                data-dayid="{{ $exercise->iDayID }}"
                                                data-title="{{ $exercise->vTitle }}"
                                                data-description="{{ $exercise->tDescription }}"
                                                data-bgimg="{{ $exercise->vBackgroundImg ? config('constants.backgroundimg.url') . ltrim($exercise->vBackgroundImg, '/') : '' }}"
                                                data-avlink="{{ $exercise->vAVContentLink }}"
                                                data-count="{{ $exercise->iCount }}" data-num="{{ $exercise->iNum }}"
                                                data-abtest="{{ $exercise->iABTest }}"
                                                data-bfree="{{ $exercise->bFree }}">
                                                <i class="fa fa-pencil"></i> Edit
                                            </button>
                                            <button type="button"
                                                class="btn btn-danger btn-xs text-nowrap exercise-delete"
                                                data-title="{{ $exercise->vTitle }}"
                                                data-id="{{ $exercise->iExerciseID }}">
                                                <i class="fa fa-trash-o"></i> Delete
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Description View Modal -->
    <div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descriptionModalLabel">Exercise Description</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="description-title"></h4>
                    <div id="description-content"></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="exerciseTitle"></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() {
            // 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) {
                tinymce.init({
                    selector: '#tDescription',
                    plugins: 'paste',
                    toolbar: 'bold italic underline strikethrough',
                    toolbar_sticky: true,
                    height: 150,
                    menubar: false,
                    branding: false,
                    paste_as_text: true
                });

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

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

                // Edit button functionality
                $('.edit-exercise').off('click').on('click', function() {
                    // Update form title
                    $('#form-title').html('Edit <small>Exercise</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 bgImg = $(this).data('bgimg');
                    const avLink = $(this).data('avlink');
                    const count = $(this).data('count');
                    const num = $(this).data('num');
                    const abTest = $(this).data('abtest');
                    const bFree = $(this).data('bfree');

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

                    // Update form action URL
                    const updateUrl = "{{ route('exercise.index', $programId) }}/" + id;
                    $('#frmexercise').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);
                    }
                    $('#vAVContentLink').val(avLink);
                    $('#iCount').val(count);
                    $('#iNum').val(num);
                    $('#iABTest').val(abTest);
                    if (bFree) {
                        $('#chkbFree').prop('checked', false).trigger('click');
                    } else {
                        $('#chkbFree').prop('checked', true).trigger('click');
                    }
                    // Set TinyMCE content
                    tinymce.get('tDescription').setContent(description || '');

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

                    // Scroll to form
                    $('html, body').animate({
                        scrollTop: $("#createExerciseForm").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>Exercise</small>');
                    $('#form-mode').val('create');

                    // Reset form method and action
                    $('#form-method').val('POST');
                    $('#exercise_id').val('');
                    $('#frmexercise').attr('action', "{{ route('exercise.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');
                    $('#vAVContentLink').val('');
                    $('#iCount').val('0');
                    $('#iNum').val('0');
                    $('#iABTest').val('0');
                    $('#chkbFree').prop('checked', false).trigger('change');

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

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

                // View description button functionality
                $('.view-description').off('click').on('click', function() {
                    const title = $(this).data('title');
                    const description = $(this).data('description');

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

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

                // Delete button functionality
                $('.exercise-delete').off('click').on('click', function() {
                    const id = $(this).data('id');
                    const title = $(this).data('title');

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

                    // Show modal
                    $('#deleteModal').modal('show');
                });
                // 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
            }
        }
    </script>
@endpush