@extends('backend.layout.masterlayout')
@section('content')
    <form action="{{ route('update-asset-file') }}" method="post" enctype="multipart/form-data">
        @csrf
        @include('backend.partial.editor-topbar')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/dracula.min.css">

        <style>
            #editorContainer {
                height: 100%;
            }

            .CodeMirror {
                height: 100%;
            }
        </style>

        <!--page-wrapper-->
        <div class="page-wrapper" style="margin-top:unset;">
            <!--page-content-wrapper-->
            <div class="page-content-wrapper" style="margin-left:unset;margin-top:unset">
                <textarea id="myTextarea" name="filecontents">{!! $file_content !!}</textarea>
            </div>
            <!--end page-content-wrapper-->
        </div>
        <!--end page-wrapper-->
        <!--start overlay-->
        <div class="overlay toggle-btn-mobile"></div>
        <!--end overlay-->
        <!--Start Back To Top Button-->
        <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
    </form>
@endsection
@section('script')
    <script>
        var myTextarea = document.getElementById('myTextarea');
        var editor = CodeMirror.fromTextArea(myTextarea, {
            lineNumbers: true,
            mode: "javascript",
            theme: "dracula",
            matchBrackets: true, // Highlight matching brackets
            autoCloseBrackets: true, // Automatically close brackets
            styleActiveLine: true, // Highlight the active line
            indentUnit: 4, // Set indentation to 4 spaces
            tabSize: 4, // Set tab size to 4 spaces
            smartIndent: true, // Enable smart indentation
            lineWrapping: true // Enable line wrapping
        });
    </script>
@endsection