@extends('layouts.admin')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/richtexteditor/rte_theme_default.css') }}" />
@endsection

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            Edit Topic
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
            <div class="container-xl">

                <form method="POST" action="{{ route('admin.updatetopics') }}" id="editorForm"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="editorContent" id="editorContent" value="{{ $topic->content }}">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Topic</h3>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="topic_id" value="{{ $topic->id }}" />
                                    <fieldset class="form-fieldset">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>Grade/Class</label>
                                                <select class="form-control select2" name="grade_id" required>
                                                    <option value="0">Deleted</option>
                                                    @foreach ($grades as $grade)
                                                        <option value="{{ $grade->id }}"
                                                            @if ($topic->grade_id == $grade->id) selected @endif>
                                                            {{ $grade->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-12  mt-4 select2">
                                                <label>Subject</label>
                                                <select class="form-control" name="subject_id" required>
                                                    <option value="0">Deleted</option>
                                                    @foreach ($subjects as $subject)
                                                        <option value="{{ $subject->id }}"
                                                            @if ($topic->subject_id == $subject->id) selected @endif>
                                                            {{ $subject->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-12  mt-4">
                                                <label>Title</label>
                                                <textarea class="form-control" name="title" required value="">{{ $topic->title }}</textarea>
                                            </div>
                                            <div class="col-md-12  mt-4">
                                                <div class="form-label">Tags</div>
                                                <select type="text" class="form-select" id="select-states" name="tags[]"
                                                    multiple required>
                                                    @foreach ($tags as $tag)
                                                        <option value="{{ $tag->id }}">{{ $tag->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-6  mt-4">
                                                <label>Paid</label>
                                                <span class="col-auto">
                                                    <label class="form-check form-check-single form-switch">
                                                        <input class="form-check-input" type="checkbox"
                                                            @if ($topic->is_paid == 1) checked @endif name="paid"
                                                            value="1">
                                                    </label>
                                                </span>
                                            </div>
                                            {{-- <div class="col-md-6  mt-4">
                                                <label>Price ($)</label>
                                                <input type="text" class="form-control" name="price"
                                                    value="{{ $topic->price }}">
                                            </div> --}}

                                            <div class="col-md-12  mt-4">
                                                <label>Topic Banner (Leave Empty if unchanged)</label>
                                                <input type="file" class="form-control" name="banner">
                                                <a href="{{ asset('banners/' . $topic->banner) }}" target="_blank">Banner
                                                    IMG</a>
                                            </div>

                                            <div class="col-md-12  mt-4">
                                                <label>Supporting Material (You can upload multiple files at once)</label>
                                                <input type="file" class="form-control" name="fil[]" multiple>
                                            </div>

                                            <div class="col-md-12  mt-4">
                                                <label>Files</label>
                                                <ul>
                                                    @foreach ($topic->files as $file)
                                                        <li><a href="{{ asset('documents/' . $file->file) }}">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                    height="24" viewBox="0 0 24 24" fill="currentColor"
                                                                    class="icon icon-tabler icons-tabler-filled icon-tabler-file">
                                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                    <path
                                                                        d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z" />
                                                                    <path d="M19 7h-4l-.001 -4.001z" />
                                                                </svg>
                                                                {{ $file->created_at }}</a>
                                                            <a href="{{ route('admin.deletefile', $file->id) }}">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" style="color: red"
                                                                    height="24" viewBox="0 0 24 24" fill="currentColor"
                                                                    class="icon icon-tabler icons-tabler-filled icon-tabler-backspace">
                                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                    <path
                                                                        d="M20 5a2 2 0 0 1 1.995 1.85l.005 .15v10a2 2 0 0 1 -1.85 1.995l-.15 .005h-11a1 1 0 0 1 -.608 -.206l-.1 -.087l-5.037 -5.04c-.809 -.904 -.847 -2.25 -.083 -3.23l.12 -.144l5 -5a1 1 0 0 1 .577 -.284l.131 -.009h11zm-7.489 4.14a1 1 0 0 0 -1.301 1.473l.083 .094l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.403 -1.403l-.094 .083l-1.293 1.292l-1.293 -1.292l-.094 -.083l-.102 -.07z" />
                                                                </svg>
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>

                                            <div class="col-md-12 mt-5">
                                                <input type="submit" class="btn btn-success pull-right" value="Update"
                                                    style="float: right">
                                            </div>

                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label>Summary</label>
                                            <textarea class="form-control" name="summary" required>{{ $topic->summary }}</textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4>Content</h4>
                                        </div>
                                        <div class="col-md-12">
                                            <div id="div_editor1">
                                                {!! $topic->content !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>

        @include('includes.admin_footer')
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/admin/dist/libs/nouislider/dist/nouislider.min.js?1684106062') }}" defer></script>
    <script src="{{ asset('assets/admin/dist/libs/litepicker/dist/litepicker.js?1684106062') }}" defer></script>
    <script src="{{ asset('assets/admin/dist/libs/tom-select/dist/js/tom-select.base.min.js?1684106062') }}" defer>
    </script>


    <script type="text/javascript" src="{{ asset('assets/richtexteditor/rte.js') }}"></script>
    <script type="text/javascript" src='{{ asset('assets/richtexteditor/plugins/all_plugins.js') }}'></script>

    <script>
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('select-states'), {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                },
            }));
        });
        // @formatter:on
    </script>
    <script>
        var editor1 = new RichTextEditor("#div_editor1");

        document.getElementById('editorForm').addEventListener('submit', function(event) {
            // Prevent the form from submitting immediately
            event.preventDefault();

            // Get the content from the Rich Text Editor
            var editorContent = editor1.getHTMLCode(); // Assuming `getHTMLCode` method returns the editor content

            // Set the content to the hidden input field
            document.getElementById('editorContent').value = editorContent;

            // Submit the form
            this.submit();
        });
        //editor1.setHTMLCode("Use inline HTML or setHTMLCode to init the default content.");
    </script>
@endsection