@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-50'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4 workspace-shell min-vh-100">
        <div class="workspace-bg workspace-bg-left"></div>
        <div class="workspace-bg workspace-bg-right"></div>

        @includeIf('master.mstqst.partials.workspace_back_card')

        <div class="container-fluid">
            <div class="row g-4 position-relative">
                @include('master.mstqst.partials.workspace_header_form')
                @include('master.mstqst.partials.workspace_detail_card')
            </div>
        </div>
    </div>

    @include('master.mstqst.partials.workspace_draft_modal')
    @include('trnqsd.partials.modal_add')
    @include('master.mstqst.partials.workspace_import_modal')

    {{-- ===== PREVIEW QUESTION MODAL ===== --}}
    <div class="modal fade" id="previewQuestionModal" tabindex="-1" aria-labelledby="previewQuestionModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content border-0 shadow-lg overflow-hidden">
                <div class="modal-header border-bottom px-4 py-3">
                    <div>
                        <h5 class="modal-title fw-bold text-dark mb-0" id="previewQuestionModalLabel">
                            Preview Question Bank
                        </h5>
                        <p class="text-secondary text-xs mb-0 mt-1">Preview questions before use</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4" id="modal-preview-body" style="max-height: 72vh; overflow-y: auto; background:#f8f9fa;">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status" style="width:3rem;height:3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-secondary fw-semibold">Loading question data...</p>
                    </div>
                </div>
                <div class="modal-footer border-top bg-white px-4 py-3">
                    <button type="button" class="btn btn-secondary mb-0 px-4" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push('addjs')
        @if (Session::has('message'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    if (typeof Swal !== 'undefined') {
                        const sessionClass = '{{ Session::get("class") }}';
                        let iconType = 'info';
                        let titleText = 'Informasi';

                        if (sessionClass === 'danger' || sessionClass === 'error') {
                            iconType = 'error';
                            titleText = 'Gagal';
                        } else if (sessionClass === 'warning') {
                            iconType = 'warning';
                            titleText = 'Peringatan';
                        } else if (sessionClass === 'success') {
                            iconType = 'success';
                            titleText = 'Berhasil';
                        }

                        Swal.fire({
                            title: titleText,
                            text: {!! json_encode(Session::get('message')) !!},
                            icon: iconType,
                            confirmButtonColor: '#008284',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            </script>
        @endif

        @if ($errors->any())
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Validasi Gagal',
                            html: `{!! implode('<br>', $errors->all()) !!}`,
                            icon: 'error',
                            confirmButtonColor: '#008284',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            </script>
        @endif

        @if ($mode !== 'create')
            @include('js.trnqsd')
            @if (request('open_question_modal') == '1')
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const modalElement = document.getElementById('questionModal');
                        if (!modalElement) {
                            return;
                        }

                        const modal = new bootstrap.Modal(modalElement);
                        modal.show();
                    });
                </script>
            @endif
        @else
            @include('master.mstqst.partials.workspace_create_js')
        @endif
    @endpush

    @push('css')
        @include('master.mstqst.partials.workspace_styles')
    @endpush
@endsection