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

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

    <div class="container-fluid">

        @include('master.mstqst.partials.workspace_back_card', ['mode' => 'edit', 'urlMenu' => route('page', ['page' => 'mstqst'])])

        <div class="row">
            <div class="col-12">
                @include('components.alert')
            </div>
        </div>
            <div class="row g-4">
                <div class="col-12">
                    <div class="card workspace-card border-0 shadow-sm">
                        <div class="card-body p-4 p-lg-5">
                            <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4">
                                <div>
                                    <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-1">Question Bank</p>
                                    <h4 class="mb-2 text-dark font-weight-bolder">Manage Question</h4>
                                    <p class="text-sm text-secondary mb-0 workspace-lead">Manage question bank and question details from one page.</p>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-xs text-secondary d-flex align-items-center gap-2 me-3">
                                        Total: <strong class="text-dark" id="stat_total_questions">{{ $total_questions }}</strong> soal
                                        &nbsp;|&nbsp; 
                                        <div class="d-inline-flex align-items-center px-2 py-1 rounded-pill border bg-light-warning border-warning" id="stat_total_points_container">
                                            <span class="text-xs fw-bold text-warning" id="stat_total_points_text">
                                                <i class="fas fa-exclamation-triangle me-1" id="stat_total_points_icon"></i>
                                                Weight Total: <span id="stat_total_points">{{ $total_points }}</span> / 100
                                            </span>
                                        </div>
                                    </span>
                                </div>
                            </div>

                            <form id="mstqst-form" method="POST" action="{{ route('trnqsd.update-header') }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="id_encrypted_header" value="{{ $id_encrypted }}">
                                <input type="hidden" name="draft_questions" id="draft_questions_payload" value="{{ old('draft_questions', '[]') }}">
                                <input type="hidden" id="existing_draft_questions" value="{{ json_encode($questions, JSON_HEX_APOS | JSON_HEX_QUOT) }}">

                                <div class="row g-4 align-items-stretch">
                                    <div class="col-lg-6">
                                        <label class="form-control-label text-dark font-weight-bold mb-2">Question Bank Name</label>
                                        <input type="text" name="title" class="form-control form-control-lg  mb-4"
                                            value="{{ old('title', $header->title ?? '') }}" required
                                            placeholder="Contoh: Tes Kompetensi HRD">

                                        <label class="form-control-label text-dark font-weight-bold mb-2">Description</label>
                                        <textarea name="description" rows="7" class="form-control " required
                                            placeholder="Jelaskan tujuan atau cakupan bank soal ini">{{ old('description', $header->description ?? '') }}</textarea>
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="workspace-info-panel h-100 p-4 border-radius-lg bg-white border d-flex flex-column justify-content-center shadow-sm">
                                            <div class="py-2">
                                                <h6 class="text-dark font-weight-bold mb-1">Quick Info</h6>
                                                <p class="text-sm text-secondary mb-3">Question bank status and availability</p>

                                                <div class="d-flex">
                                                    <span class="badge {{ $header->isactive == '1' ? 'bg-gradient-success' : 'bg-gradient-danger' }} px-4 py-2">
                                                        {{ $header->isactive == '1' ? 'Active' : 'NonActive' }}
                                                    </span>
                                                </div>

                                                <hr class="horizontal dark my-3">
                                                <p class="text-xs text-secondary mb-1">
                                                    Created by: <strong>{{ $header->user_create ?? '-' }}</strong>
                                                </p>
                                                <p class="text-xs text-secondary mb-0">
                                                    Last updated: <strong>{{ date('d/m/Y H:i', strtotime($header->updated_at)) }}</strong>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Draft Questions Component --}}
                @include('master.mstqst.partials.workspace_detail_card', ['mode' => 'create'])
            </div>
    </div>

    {{-- Draft modals needed for detail card --}}
    @include('master.mstqst.partials.workspace_draft_modal')
    @include('master.mstqst.partials.workspace_styles')

    {{-- Import Modal (Trnqsd Specific) --}}
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
                <div class="modal-header border-bottom px-4 py-3">
                    <h6 class="modal-title fw-bold text-dark mb-0" id="importModalLabel">
                        <i class="fas fa-file-import me-2 text-primary"></i>Import Questions from Excel
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <form action="{{ route('trnqsd.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id_encrypted_header" value="{{ $id_encrypted }}">

                        <div class="alert border-0 text-white text-xs mb-4 d-flex align-items-start gap-2"
                             style="background-color:#028284;border-radius:8px;">
                            <i class="fas fa-info-circle mt-1"></i>
                            <span>Download the template first. Make sure the file format matches the template for successful data processing.</span>
                        </div>

                        <div class="form-group mb-4">
                            <label class="form-control-label fw-bold text-dark">Select Excel File <span class="text-secondary fw-normal">(.xlsx, .xls)</span></label>
                            <input type="file" name="import_file" class="form-control mt-1" accept=".xlsx, .xls" required>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm mb-0">
                                <i class="fas fa-upload me-1"></i> Start Import
                            </button>
                        </div>
                    </form>
                </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

        @include('master.mstqst.partials.workspace_create_js')
    @endpush
@endsection