@extends('layouts.app')
@section('content')
    <!-- Chapter Information Box -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2>Modules Information</h2>
                    <div>
                        <a href="{{ route('chapter.index', ['program_id' => $programId]) }}" class="btn btn-primary">
                            <i class="fa fa-arrow-left"></i> Back to Chapters
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <strong>Day:</strong> {{ $day ? $day->vDay . ' - ' . $day->vName : 'N/A' }}
                        </div>
                        <div class="col-md-4">
                            <strong>Number:</strong> {{ $chapter->iNum ?? 'N/A' }}
                        </div>
                        <div class="col-md-4">
                            <strong>Title:</strong> {{ $chapter->vTitle ?? 'N/A' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- SubModules and Form -->
    <div class="row">
        <!-- SubModules List -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h2>SubModules <small>List</small></h2>
                </div>
                <div class="card-body table-responsive">
                    <table id="datatableSubModules" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Type</th>
                                <th>Prev SubModule</th>
                                <th>Next SubModule</th>
                                <th>Num</th>
                                <th>Action</th>
                                <th>Alternate</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($subModules as $subModule)
                                <tr>
                                    <td>{{ $subModule->iSubModuleId }}</td>
                                    <td>{{ $subModule->vType }}</td>
                                    <td>{{ $subModule->iPrevSubModule }}</td>
                                    <td>{{ $subModule->iNextSubModule }}</td>
                                    <td>{{ $subModule->iNum }}</td>
                                    <td>
                                        <div>
                                            @if (Auth::guard('admin')->user()->bContent == 1)
                                                <a href="{{ route('submodule.edit-content', ['program_id' => $programId, 'chapter_id' => $chapterId, 'id' => $subModule->iSubModuleId]) }}"
                                                    class="btn btn-primary btn-xs text-nowrap mb-1 d-block" target="_blank">
                                                    <i class="fa fa-edit"></i> Edit Content
                                                </a>
                                            @endif
                                            <a href="{{ config('app.web_base_url') }}submodules/{{ $programId }}/{{ $chapterId }}/{{ $subModule->iSubModuleId }}?admin={{ Auth::guard('admin')->user()->iAdminId }}&at={{ Auth::guard('admin')->user()->vPassword }}"
                                                class="btn btn-secondary btn-xs text-nowrap view-html mb-1 d-block"
                                                target="_blank"><i class="fa fa-code"></i> View HTML</a>
                                            @if (Auth::guard('admin')->user()->bContent == 1)
                                                <button type="button"
                                                    class="btn btn-info btn-xs text-nowrap edit-submodule mb-1 d-block"
                                                    data-id="{{ $subModule->iSubModuleId }}"
                                                    data-type="{{ $subModule->vType }}"
                                                    data-prevsubmodule="{{ $subModule->iPrevSubModule }}"
                                                    data-nextsubmodule="{{ $subModule->iNextSubModule }}"
                                                    data-num="{{ $subModule->iNum }}"
                                                    data-buttontext="{{ $subModule->vButtonText }}"
                                                    data-button2text="{{ $subModule->vButton2Text }}"
                                                    data-button2submodule="{{ $subModule->iButton2SubModule }}">
                                                    <i class="fa fa-pencil"></i> Edit
                                                </button>

                                                <button type="button"
                                                    class="btn btn-danger btn-xs text-nowrap submoduledelete d-block"
                                                    data-type="{{ $subModule->vType }}"
                                                    data-id="{{ $subModule->iSubModuleId }}">
                                                    <i class="fa fa-trash-o"></i> Delete
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        @if ($subModule->iAlternateId == 0)
                                            @if (Auth::guard('admin')->user()->bContent == 1)
                                                <form
                                                    action="{{ route('submodule.create-alternate', ['program_id' => $programId, 'chapter_id' => $chapterId, 'id' => $subModule->iSubModuleId]) }}"
                                                    method="POST">
                                                    @csrf
                                                    <button type="submit" class="btn btn-success btn-xs text-nowrap">
                                                        <i class="fa fa-plus"></i> Add Alternate
                                                    </button>
                                                </form>
                                            @endif
                                        @else
                                            <div>
                                                @if (Auth::guard('admin')->user()->bContent == 1)
                                                    <a href="{{ route('submodule.edit-content', ['program_id' => $programId, 'chapter_id' => $chapterId, 'id' => $subModule->iSubModuleId, 'alternate' => 1]) }}"
                                                        class="btn btn-primary btn-xs text-nowrap mb-1 d-block">
                                                        <i class="fa fa-edit"></i> Alternate Content
                                                    </a>
                                                @endif
                                                <a href="{{ config('app.web_base_url') }}submodules/{{ $programId }}/{{ $chapterId }}/{{ $subModule->iAlternateId }}?admin={{ Auth::guard('admin')->user()->iAdminId }}&at={{ Auth::guard('admin')->user()->vPassword }}"
                                                    class="btn btn-secondary btn-xs text-nowrap alternate-html mb-1 d-block"
                                                    target="_blank"><i class="fa fa-code"></i> Alternate HTML</a>
                                                @if (Auth::guard('admin')->user()->bContent == 1)
                                                    <button type="button"
                                                        class="btn btn-info btn-xs text-nowrap edit-alternate mb-1 d-block"
                                                        data-id="{{ $subModule->iAlternateId }}">
                                                        <i class="fa fa-pencil"></i> Edit
                                                    </button>

                                                    <button type="button"
                                                        class="btn btn-danger btn-xs text-nowrap delete-alternate mb-1 d-block"
                                                        data-id="{{ $subModule->iAlternateId }}"
                                                        data-type="Alternate SubModule">
                                                        <i class="fa fa-trash-o"></i> Delete
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- SubModule Form -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2 id="submodule-title">{{ isset($selectedSubModule) ? 'Edit' : 'Create' }} <small>SubModule</small>
                    </h2>
                </div>
                <div class="card-body" id="createSubModuleForm">
                    <form id="frmsubmodule" name="frmsubmodule" method="post"
                        action="{{ route('submodule.store', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}">
                        @csrf
                        <input type="hidden" name="_method" id="submodule-method" value="POST">
                        <input type="hidden" name="submodule_id" id="submodule_id" value="">
                        <input type="hidden" id="submodule-mode" value="create">

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

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Previous SubModule</label>
                            <div class="col-md-9">
                                <select id="iPrevSubModule" name="iPrevSubModule" class="form-control">
                                    <option value="">Select Previous SumModule</option>
                                    @foreach ($subModules as $sm)
                                        <option value="{{ $sm->iSubModuleId }}"
                                            {{ old('iPrevSubModule') == $sm->iSubModuleId ? 'selected' : '' }}>
                                            {{ $sm->iSubModuleId }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('iPrevSubModule')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Next SubModule</label>
                            <div class="col-md-9">
                                <select id="iNextSubModule" name="iNextSubModule" class="form-control">
                                    <option value="">Select Next SubModule</option>
                                    @foreach ($subModules as $sm)
                                        <option value="{{ $sm->iSubModuleId }}"
                                            {{ old('iNextSubModule') == $sm->iSubModuleId ? 'selected' : '' }}>
                                            {{ $sm->iSubModuleId }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('iNextSubModule')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

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

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Button Text</label>
                            <div class="col-md-9">
                                <input id="vButtonText" name="vButtonText" type="text" class="form-control"
                                    placeholder="Button Text" value="{{ old('vButtonText', 'NEXT') }}">
                                @error('vButtonText')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

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

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Button 2 SubModule</label>
                            <div class="col-md-9">
                                <select id="iButton2SubModule" name="iButton2SubModule" class="form-control">
                                    <option value="">Select SubModule</option>
                                    @foreach ($subModules as $sm)
                                        <option value="{{ $sm->iSubModuleId }}"
                                            {{ old('iButton2SubModule') == $sm->iSubModuleId ? 'selected' : '' }}>
                                            {{ $sm->iSubModuleId }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('iButton2SubModule')
                                    <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="submoduleType"></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>
        // 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) {
                // Initialize DataTable
                if (!$.fn.DataTable.isDataTable('#datatableSubModules')) {
                    $("#datatableSubModules").DataTable({
                        "pageLength": 50,
                        "order": [
                            [1, "asc"]
                        ],
                        columnDefs: [{
                            targets: '_all',
                            orderSequence: ['asc', 'desc']
                        }],
                    });
                }

                // Edit button functionality
                $('.edit-submodule').off('click').on('click', function() {
                    // Update form title
                    $('#submodule-title').html('Edit <small>SubModule</small>');
                    $('#submodule-mode').val('edit');

                    // Get data attributes
                    var id = $(this).data('id');
                    var type = $(this).data('type');
                    var prevSubModule = $(this).data('prevsubmodule');
                    var nextSubModule = $(this).data('nextsubmodule');
                    var num = $(this).data('num');
                    var buttonText = $(this).data('buttontext');
                    var button2Text = $(this).data('button2text');
                    var button2SubModule = $(this).data('button2submodule');


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

                    // Update form action URL
                    var updateUrl =
                        "{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}/" +
                        id;
                    $('#frmsubmodule').attr('action', updateUrl);

                    // Set form values
                    $('#vType').val(type);
                    $('#iPrevSubModule').val(prevSubModule);
                    $('#iNextSubModule').val(nextSubModule);
                    $('#iNum').val(num);
                    $('#vButtonText').val(buttonText);
                    $('#vButton2Text').val(button2Text);
                    $('#iButton2SubModule').val(button2SubModule);


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

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

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

                    // Reset form method and action
                    $('#submodule-method').val('POST');
                    $('#submodule_id').val('');
                    $('#frmsubmodule').attr('action',
                        "{{ route('submodule.store', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}");
                    document.querySelectorAll('.text-danger').forEach(function(element) {
                        element.style.display = 'none';
                    });

                    // Clear form values
                    $('#vType').val('1');
                    $('#iPrevSubModule').val('');
                    $('#iNextSubModule').val('');
                    $('#iNum').val('');
                    $('#vButtonText').val('NEXT');
                    $('#vButton2Text').val('');
                    $('#iButton2SubModule').val('');


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

                // Set up delete confirmation modal
                $('.submoduledelete').off('click').on('click', function() {
                    var id = $(this).data('id');
                    var type = $(this).data('type');
                    $('#submoduleType').text(type);
                    $('#deleteForm').attr('action',
                        "{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}/" +
                        id);
                    $('#deleteModal').modal('show');
                });

                // Edit Content functionality is now handled by direct link


                // Alternate Content functionality is now handled by direct link

                // Edit Alternate button functionality
                $('.edit-alternate').off('click').on('click', function() {
                    var id = $(this).data('id');

                    // Show loading indicator
                    $('#btn-submit').prop('disabled', true).text('Loading...');

                    // Make an AJAX request to get the submodule data
                    $.ajax({
                        url: "{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}/" +
                            id + "/edit",
                        type: 'GET',
                        dataType: 'json',
                        success: function(response) {
                            if (response && response.submodule) {
                                var submodule = response.submodule;

                                // Update form title
                                $('#submodule-title').html('Edit <small>Alternate SubModule</small>');
                                $('#submodule-mode').val('edit');

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

                                // Update form action URL
                                var updateUrl =
                                    "{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}/" +
                                    id;
                                $('#frmsubmodule').attr('action', updateUrl);

                                // Set form values
                                $('#vType').val(submodule.vType);
                                $('#iPrevSubModule').val(submodule.iPrevSubModule);
                                $('#iNextSubModule').val(submodule.iNextSubModule);
                                $('#iNum').val(submodule.iNum);
                                $('#vButtonText').val(submodule.vButtonText);
                                $('#vButton2Text').val(submodule.vButton2Text);
                                $('#iButton2SubModule').val(submodule.iButton2SubModule);

                                // Change submit button text
                                $('#btn-submit').prop('disabled', false).text('Update Alternate');

                                // Scroll to the form
                                $('html, body').animate({
                                    scrollTop: $("#createSubModuleForm").offset().top - 100
                                }, 500);
                            } else {
                                alert('Failed to load Alternate SubModule data.');
                                $('#btn-submit').prop('disabled', false).text('Create');
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('Error loading Alternate SubModule data: ' + error);
                            $('#btn-submit').prop('disabled', false).text('Create');
                        }
                    });
                });

                // Delete Alternate button functionality
                $('.delete-alternate').click(function() {
                    var id = $(this).data('id');
                    var type = $(this).data('type');
                    $('#submoduleType').text(type + ' #' + id);
                    $('#deleteForm').attr('action',
                        "{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}/" +
                        id);
                    $('#deleteModal').modal('show');
                });
            } else {
                console.error('jQuery is not loaded properly');
            }
        }
    </script>
@endpush