@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}
    {!! Html::style('assets/admin/plugins/treeview/treeview.css') !!}

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        .category-thumb {
            margin-bottom: 15px;
        }

        .category-thumb img {
            width: 500px;
            max-width: 500px;
        }

        /*Select2 style*/

        .ck-editor__editable[role="textbox"] {
            /* editing area */
            min-height: 400px;
        }
        .ck-content .image {
            /* block images */
            max-width: 80%;
            margin: 20px auto;
        }
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Content
            <small> Create</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/third-party-seo-content') !!}">Content</a></li>
            <li class="active">Create</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                       <div class="row">
                            <div class="col-md-8">
                            </div>
                            <div class="col-md-4">
                                <a style="margin-left: 5px;" href="{!! url('/admin/third-party-seo-content') !!}" class="btn btn-primary btn-sm pull-right">
                                    <i class="fa fa-fw fa-arrow-left"></i> Back
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <form action="{{url('admin/third-party-seo-content-create')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                            <div class="form-group">
                                <label>Slug Type</label>
                                <select name="slug_type" id="slug_type">
                                    <option value="">Select Slug Type</option>
                                    <option value="category">Category</option>
                                    <option value="store">Store</option>
                                    <option value="offer">Offer</option>
                                    <option value="brand">Brand</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Slug</label>
                                <select name="slug" class="form-control" id="branch_position">
                                    <option value="">Select Slug</option>
                                    {{-- @foreach ($category_slugs as $slug)
                                    <option value="category/{{$slug->category_slug}}">category/{{$slug->category_slug}}</option>
                                    @endforeach

                                    @foreach ($store_slugs as $slug2)
                                        @if($slug2->is_store == 1)
                                            <option value="store/{{$slug2->offer_name_slug}}">store/{{$slug2->offer_name_slug}}</option>
                                        @else
                                            <option value="offers/{{$slug2->offer_name_slug}}">offers/{{$slug2->offer_name_slug}}</option>
                                        @endif
                                    @endforeach --}}
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Content</label>
                                <textarea class="form-control" name="content" id="cms_editor_details"></textarea>
                            </div>

                            <div class="form-group">
                                <label>Video</label>
                                <input type="text" class="form-control" name="video" placeholder="Enter Video Url" value="">
                            </div>

                            <div class="form-group">
                                <label>Table Title</label>
                                <input type="text" class="form-control" name="table_title" placeholder="Enter Blog Title" value="">
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-highlight" id="productTable">
                                  <thead>
                                    <th width="2%">#</th>
                                    <th width="98%">Product</th>
                                  </thead>
                                  <tbody>
                                      <tr>
                                         <td>1</td>
                                         <td>
                                            <select name="product_id[]" class="form-control product_name">
                                                <option value="">Select Product</option>

                                            </select>
                                         </td>
                                      </tr>
                                      <tr>
                                         <td>2</td>
                                         <td>
                                            <select name="product_id[]" class="form-control product_name">
                                                <option value="">Select Product</option>

                                            </select>
                                         </td>
                                      </tr>
                                      <tr>
                                        <td>3</td>
                                        <td>
                                            <select name="product_id[]" class="form-control product_name">
                                                <option value="">Select Product</option>

                                            </select>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td>4</td>
                                        <td>
                                            <select name="product_id[]" class="form-control product_name">
                                                <option value="">Select Product</option>

                                            </select>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td>5</td>
                                        <td>
                                            <select name="product_id[]" class="form-control product_name">
                                                <option value="">Select Product</option>

                                            </select>
                                        </td>
                                      </tr>

                                  </tbody>
                                </table>
                                <button type="button" class="btn btn-primary" id="addRow" style="float: right">Add More</button>
                            </div>

                            <div class="form-group">
                                <label>Status</label>
                                <select class="form-control" name="is_active">
                                  <option value="">Select Status</option>
                                  <option value="active">Active</option>
                                  <option value="inactive">Inactive</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>

                    </div>



                </div>
            </div>
        </div>
    </section>
@endsection


@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
    {{-- {!! Html::script('assets/admin/bower_components/ckeditor/ckeditor.js') !!} --}}
    {{-- {!! Html::script('assets/admin/ckeditor/ckeditor.js') !!} --}}
    {{-- <script src="https://cdn.ckeditor.com/4.23.0-lts/standard/ckeditor.js"></script> --}}

    <script src="https://cdn.ckeditor.com/ckeditor5/35.3.2/super-build/ckeditor.js"></script>
    <script>
        CKEDITOR.ClassicEditor.create(document.getElementById("cms_editor_details"), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                toolbar: {
                    items: [
                        // 'exportPDF','exportWord', '|',
                        'findAndReplace', 'selectAll', '|',
                        'heading', '|',
                        'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                        'bulletedList', 'numberedList', 'todoList', '|',
                        'outdent', 'indent', '|',
                        'undo', 'redo',
                        '-',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                        'alignment', '|',
                        'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                        // 'textPartLanguage', '|',
                        'sourceEditing'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // Changing the language of the interface requires loading the language file using the <script> tag.
                // language: 'es',
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                placeholder: 'Long Description',
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                // Be careful with enabling previews
                // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                htmlEmbed: {
                    showPreviews: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                                '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                                '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                                '@sugar', '@sweet', '@topping', '@wafer'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                },
                // The "super-build" contains more premium features that require additional configuration, disable them below.
                // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                removePlugins: [
                    // These two are commercial, but you can try them out without registering to a trial.
                    // 'ExportPdf',
                    // 'ExportWord',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                    // Storing images as Base64 is usually a very bad idea.
                    // Replace it on production website with other solutions:
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                    // 'Base64UploadAdapter',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                    // from a local file system (file://) - load this site via HTTP server if you enable MathType
                    'MathType'
                ]
            });
    </script>

    <script type="text/javascript">

        $('#slug_type').select2();
        $('#branch_position').select2();
        $('.product_name').select2({
            minimumInputLength: 3,
            ajax: {
                url: "{{ route('product-search') }}",
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.product_code_inv+' - '+item.product_name,
                                id: item.product_id
                            }
                        })
                    };
                },
                cache: true
            }
        });

        $('#slug_type').change(function(){
            var slug_type = $(this).val();
            $.ajax({
                url: "{{ url('admin/seo-content-slug-search') }}",
                type: 'GET',
                data: {slug_type:slug_type},
                success: function(response) {
                    if (response.status === "success") {
                        // Extract the data array from the response
                        var data = response.data;

                        // Initialize options with a default value
                        var options = "<option value=''>Select Slug</option>";

                        // Loop through the data array and create options
                        $.each(data, function(index, value) {
                            if(slug_type == 'category'){
                                options += "<option value='category/"+value+"'>category/"+value+"</option>";
                            } else if(slug_type == 'store'){
                                options += "<option value='store/"+value+"'>store/"+value+"</option>";
                            } else if(slug_type == 'offer'){
                                options += "<option value='offers/"+value+"'>offers/"+value+"</option>";
                            } else if(slug_type == 'brand'){
                                options += "<option value='brand/"+value+"'>brand/"+value+"</option>";
                            }
                            // options += "<option value='" + value + "'>" + value + "</option>";
                        });

                        // Append the generated options to the dropdown
                        $('#branch_position').html("<select name='slug' class='form-control'>" + options + "</select>");
                    } else {
                        console.error("Failed to fetch data");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error: ", error);
                }
            });
        });

        $(document).ready(function () {
            // Counter to keep track of the number of rows
            var rowCount = 5;

            // Function to add a new row
            function addRow() {
            rowCount++;
            var newRow = '<tr>' +
                '<td>' + rowCount + '</td>' +
                '<td>' +
                '<select name="product_id[]" class="form-control product_name">' +
                '<option value="">Select Product</option>' +
                '</select>' +
                '</td>' +
                '</tr>';

            $('#productTable tbody').append(newRow);

                $('.product_name').select2({
                    minimumInputLength: 3,
                    ajax: {
                        url: "{{ route('product-search') }}",
                        dataType: 'json',
                        delay: 250,
                        processResults: function (data) {
                            return {
                                results: $.map(data, function (item) {
                                    return {
                                        text: item.product_code_inv+' - '+item.product_name,
                                        id: item.product_id
                                    }
                                })
                            };
                        },
                        cache: true
                    }
                });
            }

            // Event handler for the "Add More" button
            $('#addRow').click(function () {
            addRow();

            // Disable the button after 10 rows
            if (rowCount >= 20) {
                $(this).prop('disabled', true);
            }
            });
        });
    </script>
@endsection