@extends('form.app')

@section('styles')
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
    {{-- navbar --}}
    @include('content::form.navbar')

    <form class="row" id="{{ $method }}_frm" method="POST" enctype="multipart/form-data">
        @csrf
        <input id="id" name="id" type="hidden" value="{{ $data->id ?? '0' }}">
        @php
            $_formContentId = $module === 'period'
                ? ($parentContentId ?? request()->route('content_id') ?? request()->get('content_id') ?? ($data->content_id ?? ''))
                : (request()->route('id') ?? request()->get('content_id') ?? ($data->content_id ?? ''));
        @endphp
        <input id="content_id" name="content_id" type="hidden" value="{{ $_formContentId }}">
        <input id="parent_id" name="parent_id" type="hidden"
            value="{{ request()->get('parent_id') ?? ($data->parent_id ?? '') }}">
        @if ($module === 'period' && !empty($periodParentHiddenId ?? null))
            <input type="hidden" name="parent_period_id" value="{{ (int) $periodParentHiddenId }}">
        @endif
        @php
            $_formNavActive = 0;
            foreach ($config['form']['navbar'] ?? [] as $_n) {
                if (!empty($_n['status'])) {
                    $_formNavActive++;
                }
            }
            $_periodChildLayout = $module === 'period' && !empty($mainTopicReadonly) && $_formNavActive === 0;
        @endphp
        @if ($module === 'period' && !empty($mainTopicReadonly))
            @php
                $_mainTopicLang = $mainTopicReadonly->local ?? ($mainTopicReadonly->langs->first() ?? null);
                $_mainDetailRaw = $_mainTopicLang->detail ?? '';
                $_mainDetailDecoded = (string) $_mainDetailRaw;
                for ($__i = 0; $__i < 5; $__i++) {
                    $__next = html_entity_decode($_mainDetailDecoded, ENT_QUOTES | ENT_HTML5, 'UTF-8');
                    if ($__next === $_mainDetailDecoded) {
                        break;
                    }
                    $_mainDetailDecoded = $__next;
                }
            @endphp
            <div class="col-12 {{ $_periodChildLayout ? 'col-xl-5' : '' }} order-xl-1">
                <div class="card border mb-3">
                    <div class="card-header bg-light py-2">
                        <strong class="text-muted">หัวข้อหลัก</strong>
                        <span class="badge bg-secondary ms-1">อ่านอย่างเดียว</span>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">ชื่อ</label>
                            <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                                {{ $_mainTopicLang->name ?? '—' }}
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label text-muted small mb-1">รายละเอียด</label>
                            <div class="border rounded px-3 py-2 bg-white period-main-topic-detail"
                                style="max-height: 280px; overflow-y: auto;">
                                @if ($_mainDetailDecoded !== '')
                                    {!! $_mainDetailDecoded !!}
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <style>
                    .period-main-topic-detail img,
                    .period-main-topic-detail table {
                        max-width: 100%;
                        height: auto;
                    }

                    .period-main-topic-detail p:last-child {
                        margin-bottom: 0;
                    }
                </style>
            </div>
        @endif
        @if ($_formNavActive > 0)
            <div class="col-lg-9">
                <div class="tab-content">
                    @php
                        $active = -1;
                    @endphp
                    @foreach ($config['form']['navbar'] as $k_n => $n)
                        @if (!empty($n['status']))
                            <div class="tab-pane {{ ++$active == 0 ? 'active' : '' }}" id="{{ $k_n }}">
                                @include("content::form.{$k_n}")
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
        <div class="{{ $_periodChildLayout ? 'col-12 col-xl-7' : 'col-lg-3' }}">
            @if (!empty($config['form']['sidebar']))
                @foreach ($config['form']['sidebar'] as $k_s => $s)
                    @if (!empty($s['status']))
                        @include("content::form.{$k_s}")
                    @endif
                @endforeach
            @endif
        </div>
    </form>
@endsection

@section('scripts')
    <!-- File uploads multiple js -->
    <script src="{{ asset('assets/libs/dropzone/dropzone.min.js') }}"></script>
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
    </script>

    <!-- Jquery UI-->
    <script src="{{ asset('assets/libs/jquery-ui/jquery-ui.min.js') }}"></script>

    <script>
        const $_module = '';
        const $_method = '';
        const $_config = $.parseJSON('null');

        // link action
        const $_link_save = '{{ route("admin.{$module}.{$method}.save") }}';
    </script>

    {{ module_vite('build-content', "resources/assets/js/{$method}.js") }}
@endsection