@extends('admin/layouts/admin')
@section('title',  __($translatePrefix . '.show.title', ['name' => $item->name]))
@section('styles')
    <link rel="stylesheet" href="{{ Vite::asset('resources/global/css/editor.scss') }}">
    <link rel="stylesheet" href="{{ Vite::asset('resources/global/css/monaco-editor.main.css') }}">
@endsection
@section('scripts')
    <script src="{{ Vite::asset('resources/global/js/editor.js') }}" type="module"></script>
    <script src="{{ Vite::asset('resources/global/js/admin/page.js') }}" type="module"></script>
    <script>
        window.page = {
            value: @json(old('html', $item->html)),
            theme: {!! !is_darkmode(true) ? '"vs"' : '"vs-dark"' !!}
        }
    </script>
@endsection
@section('content')
    <div class="container mx-auto">

    <div class="mx-auto">
        @include('admin/shared/alerts')
        <form method="POST" class="card" action="{{ route($routePath . '.update', ['page' => $item]) }}" id="page-form">
            <div class="card-heading">
                <div>
                    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                        {{ __($translatePrefix . '.show.title', ['name' => $item->name]) }}
                    </h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ __($translatePrefix. '.show.subheading', ['date' => $item->created_at == null ? 'None' : $item->created_at->format('d/m/y')]) }}
                    </p>
                </div>

                <div class="mt-4 flex items-center space-x-4 sm:mt-0">
                    <button class="btn btn-primary">
                        {{ __('admin.updatedetails') }}
                    </button>

                    <a href="{{ route('page.show', ['page' => $item]) }}" target="_blank" class="btn btn-white text-sm">
                        {{ __($translatePrefix . '.see_page') }}
                    </a>
                </div>
            </div>
            @method('PUT')
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="flex flex-col">
                    @include('admin/shared/input', ['name' => 'title', 'label' => __('global.title'), 'value' => old('title', $item->title)])
                </div>
                <div class="flex flex-col">
                    @include('admin/shared/input', ['name' => 'slug', 'label' => __('global.slug'), 'value' => old('slug', $item->slug)])
                </div>
                <div class="flex flex-col">
                    @include('admin/shared/status-select', ['value' => $item->status])
                </div>

                <div class="flex flex-col">
                    @include('admin/shared/select', ['name' => 'type', 'label' => __('page::messages.type'), 'options' => $types, 'value' => old('type', $item->type)])
                </div>
            </div>

            <div class="flex flex-col mt-4" id="page-type">
                @include('admin/shared/editor', ['name' => 'content', 'label' => __('global.content'), 'value' => old('content', $item->content)])
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        @include('admin/shared/textarea', ['name' => 'style', 'label' => __('page::messages.style'), 'value' => old('style', $item->style)])
                    </div>
                    <div>
                        @include('admin/shared/textarea', ['name' => 'script', 'label' => __('page::messages.script'), 'value' => old('script', $item->script)])
                    </div>
                    <div>
                        @include('admin/shared/textarea', ['name' => 'meta', 'label' => __('page::messages.meta'), 'value' => old('meta', $item->meta)])
                    </div>
                </div>
            </div>
            <div class="flex flex-col mt-4" id="html-type">

                <div id="monaco-editor" style="height: 400px;"></div>
                <input type="hidden" name="html" value="{{ old('html', $item->html) }}">
            </div>
            <div class="flex flex-col mt-4" id="redirect-type">
                @include('admin/shared/input', ['name' => 'redirect', 'label' => __('page::messages.redirect'), 'value' => old('redirect', $item->redirect)])
            </div>
            <div class="flex flex-col mt-4" id="pdf-type">
                @include('admin/shared/file', ['name' => 'pdf', 'label' => __('page::messages.pdf'), 'value' => old('pdf', $item->pdf), 'extensions' => 'pdf'])
            </div>
            <div>
                @include('admin/shared/select', ['name' => 'locale', 'label' => __('global.locale'), 'options' => $locales, 'value' => old('locale', $item->locale)])
            </div>
            <div class="mt-4">
                @include('admin/shared/checkbox', ['name' => 'logged_only', 'label' => __('page::messages.logged_only'), 'checked' => old('logged_only', $item->logged_only)])
            </div>
                <input type="hidden" name="id" value="{{ $item->id }}">
        </form>
    </div>
</div>
@endsection