@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.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">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="user-profile-page">
                    <div class="card radius-15">
                        <div class="card shadow-none border mb-0 radius-15">
                            <div class="card-body">
                                <div class="card-title">
                                    <h6 class="mb-0"><b><i class="bx bx-edit-alt"></i> Update widget
                                            {{-- <span style="text-transform:capitalize;">{{ $current_theme_info->title }}</span> --}}
                                            <a class="btn btn-primary btn-sm pull-right"
                                                href="{{ route('widgets', $current_theme_info->id) }}">
                                                <i class="bx bx-arrow-back"></i>
                                                Go Back
                                            </a>
                                    </h6>
                                </div>
                                <hr />
                                <form class="row g-3" action="{{ route('post-update-widget') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" class="form-control form-control-sm" value="{{ $widget->id }}"
                                        name="id" required />
                                    <input type="hidden" class="form-control form-control-sm"
                                        value="{{ $current_theme_info->id }}" name="theme_id" required />

                                    <div class="col-md-8">
                                        <label for="inputFirstName" class="form-label">Title<span
                                                style="color: red;">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="inputFirstName"
                                            name="title" value="{{ $widget->title }}" readonly />
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inputFirstName" class="form-label">Widget Preview Screenshot File (Image
                                            Format)<span style="color: red;">*</span></label>
                                        <input type="file" class="form-control form-control-sm"
                                            name="widget_preview_file" id="thumnail" onChange="preview_thumnail();" />

                                        <div id="thumnail_preview"> </div>
                                        <div id="thumbnail_image">
                                            @if ($widget->preview_img)
                                                <img src="{{ asset('uploads/widgets/' . $widget->theme_id . '/' . $widget->preview_img) }}"
                                                    style="width:200px;margin-top: 1%;margin-right: 1%;" />
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-4 select2-sm">
                                        <label for="inputFirstName" class="form-label">Select Module <span
                                                class="text-secondary">(OPTIONAL : Need to be connected)</span></label>
                                        <select class="single-select" name="connected_with"
                                            onchange="CheckTable(this.value);">
                                            <option value="">--- Choose Any One ---</option>
                                            @foreach ($available_modules as $module)
                                                <option value="{{ $module->module_model }}"
                                                    @if ($module->module_model == $widget->connected_with) selected @endif>
                                                    {{ $module->module_model }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 select2-sm">
                                        <label for="inputFirstName" class="form-label">Select Form <span
                                                class="text-secondary">(OPTIONAL : Need to add)</span></label>
                                        <select class="single-select" name="added_form" onchange="CheckForms(this.value);">
                                            <option value="">--- Choose Any One ---</option>
                                            @foreach ($available_forms as $forms)
                                                <option value="{{ $forms->id }}"
                                                    @if ($forms->id == $widget->id)  @endif>
                                                    {{ $forms->form_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inputFirstName" class="form-label">Widget Type</label>
                                        <select class="form-select form-select-sm" name="widget_type" required>
                                            <option value="Static" @if ($widget->widget_type == 'Static') selected @endif>Static
                                            </option>
                                            <option value="Dynamic" @if ($widget->widget_type == 'Dynamic') selected @endif>
                                                Dynamic</option>
                                            {{-- <option value="Static" disabled>Auto Dynamic - Coming Soon</option> --}}
                                        </select>
                                    </div>
                                    @if($widget->title == 'header-menu-section')
                                    <div class="col-md-6">
                                        Get Header Dynamic Navigation:
                                        @php
                                            echo '<br />
                                        <pre><code>// NOTE  : If you want to implement a dynamic header navigation, please replace your existing static navigation code with the code provided below.
                                            @include("frontend.src.navigation")
                                        </code></pre>';
                                        @endphp
                                    </div>
                                    <div class="col-md-6">
                                        Global Values:
@php
echo '<br />
<pre><code>// NOTE  : Please place the following code at the very top.
    $str = $basedata->businesstitle;
    $array = str_split($str);
    $office_emails = explode(',', $basedata->contact_emails);
    $office_contact_numbers = explode(',', $basedata->contact_numbers);

// NOTE : FOR DYNAMIC LOGO PATH

{{ asset("uploads/general-setting/" . $basedata->officelogo) }}
</code></pre>';
@endphp
                                    </div>
                                    @endif

                                    <div class="col-md-6" id="fields_to_display"></div>
                                    <div class="col-md-6" id="forms_to_display"></div>
                                    <div class="col-md-12">
                                        <label class="form-label">HTML Source Content<span
                                                style="color: red;">*</span></label>
                                        <textarea class="form-control" id="myTextarea" rows="15" name="html_source" required style="font-size:12px;">{{ $source_content }}</textarea>
                                    </div>
                                    <div class="col-md-12 mt-5">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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> @include('backend.partial.dashboard_footer')
@endsection
@section('script')
    <script>
        function preview_thumnail() {
            document.getElementById('thumbnail_image').style.display = 'none';
            $('.thumnail-responsive').remove();
            var total_file = document.getElementById("thumnail").files.length;
            for (var i = 0; i < total_file; i++) {
                $('#thumnail_preview').append("<img class='icon-responsive' src='" + URL.createObjectURL(event.target.files[
                    i]) + "' style='width:200px;margin-top: 1%;'/>");
            }
        }
    </script>
    <script>
        var base_url = window.location.origin;

        function CheckTable(value) {
            alert(value);
            $.post('{{ route('getmodule-fields') }}', {
                _token: '{{ csrf_token() }}',
                selected_module: value
            }, function(html) {
                $('#fields_to_display').html(html);
            });
        }

        function CheckForms(value) {
            alert(value);
            $.post('{{ route('getform-forcall') }}', {
                _token: '{{ csrf_token() }}',
                selected_form: value
            }, function(html) {
                $('#forms_to_display').html(html);
            });
        }
    </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