@extends('voyager::master')

@section('page_title', 'Edit Language File')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css">
@stop

@section('content')
<style type="text/css">.CodeMirror {
    font-family: monospace;
    height: 1000px;
    color: #000;
    direction: ltr;
    background-color: #1e1e1e; /* Black background color */
            color: #ffffff; /* Text color */
}</style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">

                        <h2>Edit Language File</h2>
                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <form action="{{ route('languages.update', ['language' => $language]) }}" method="post">
                            @csrf
                            <textarea id="codeMirror" name="file_content">{{ $fileContent }}</textarea>
                            <button type="submit">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.js"></script>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById("codeMirror"), {
            lineNumbers: true,
            mode: "application/json", // You can change the mode based on your file type
            theme: "dracula", // You can choose a different theme
            lineWrapping: true,
            autofocus: true,
            extraKeys: { "Ctrl-Space": "autocomplete" },
        });
    </script>
@stop