@extends('admin.layout.master')

@section('title')
    Add Products
@endsection

@section('content')

    <div class="page-content">

        <nav class="page-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin./') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Products</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Add Products</h6>
                        <form method="POST" action="{{ route('admin.save_products') }}" enctype="multipart/form-data"
                              class="MyForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-3">
                                    <label>Name</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Product Name" step="0.01" name="name" required>
                                </div>
                                <div class="col-md-3">
                                    <label>Cut Price</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Cut Price" step="0.01" name="cut_price">
                                </div>
                                <div class="col-md-3">
                                    <label>Price</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Price" name="price" required>
                                </div>
                                <div class="col-md-3">
                                    <label>Category</label>
                                    <select name="categoryid" class="form-control MyInput" required>
                                        <option value="" disabled selected>Select Category</option>
                                        @forelse($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label>Discount</label>
                                    <input type="number" min="1" max="100" class="form-control mb-3 MyInput"
                                           autocomplete="off"
                                           placeholder="Discount" name="discount" value="">
                                </div>
                                <div class="col-md-3">
                                    <label>Main Image</label>
                                    <input type="file" class="form-control mb-3 MyFileInput" autocomplete="off"
                                           name="image" accept="image/*" required>
                                </div>
                                <div class="col-md-3">
                                    <label>Multiple Images (optional)</label>
                                    <input type="file" class="form-control mb-3 MyFileInput" autocomplete="off"
                                           name="MoreImages[]" multiple accept="image/*">
                                </div>
                                <div class="col-md-3">
                                    <label>Availability</label>
                                    <select name="stock" class="form-control MyInput" required>
                                        <option value="in stock">in stock</option>
                                        <option value="out of stock">out of stock</option>
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label>Tags</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Tags comma ( , ) separated" name="tags" required>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label><a onclick="AddMoreColors()" style="cursor:pointer"
                                                      class="badge bg-success"> Add Colors </a> </label>
{{--                                    <input type="color" class="form-control mb-3 MyFileInput mt-2" autocomplete="off"--}}
{{--                                           name="color[]" required>--}}
                                </div>
                                <div class="row" id="MoreColors"></div>
                                <div class="col-md-12">
                                    <label>Short Detail</label>
                                    <textarea class="form-control mb-3" autocomplete="off" rows="5"
                                              placeholder="Short Detail" name="shortdetail"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <label>Description</label>
                                    <textarea class="form-control mb-3" autocomplete="off" rows="5"
                                              placeholder="Description" id="description" name="description"></textarea>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-md-4 mx-auto mt-3" style="text-align:center">

                                    <button type="submit" class="btn btn-outline-success MyButton"
                                            name="UpdateSystemInformation">Submit
                                    </button>

                                </div>

                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <!-- Place the first <script> tag in your HTML's <head> -->
    <script
            src="https://cdn.tiny.cloud/1/slqzq9p4jfyu3f1nzvbomd2qq198chen520bsjv05lggwszl/tinymce/6/tinymce.min.js"
            referrerpolicy="origin"></script>

    <script>
        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

        tinymce.init({
            selector: 'textarea#description',
            plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
            link_list: [
                {title: 'My page 1', value: 'https://www.tiny.cloud'},
                {title: 'My page 2', value: 'http://www.moxiecode.com'}
            ],
            image_list: [
                {title: 'My page 1', value: 'https://www.tiny.cloud'},
                {title: 'My page 2', value: 'http://www.moxiecode.com'}
            ],
            image_class_list: [
                {title: 'None', value: ''},
                {title: 'Some class', value: 'class-name'}
            ],
            importcss_append: true,
            file_picker_callback: function (callback, value, meta) {
                /* Provide file and text for the link dialog */
                if (meta.filetype === 'file') {
                    callback('https://www.google.com/logos/google.jpg', {text: 'My text'});
                }

                /* Provide image and alt text for the image dialog */
                if (meta.filetype === 'image') {
                    callback('https://www.google.com/logos/google.jpg', {alt: 'My alt text'});
                }

                /* Provide alternative source and posted for the media dialog */
                if (meta.filetype === 'media') {
                    callback('movie.mp4', {
                        source2: 'alt.ogg',
                        poster: 'https://www.google.com/logos/google.jpg'
                    });
                }
            },
            templates: [
                {
                    title: 'New Table',
                    description: 'creates a new table',
                    content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
                },
                {
                    title: 'Starting my story',
                    description: 'A cure for writers block',
                    content: 'Once upon a time...'
                },
                {
                    title: 'New list with dates',
                    description: 'New List with dates',
                    content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
                }
            ],
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 600,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            // contextmenu: 'link image imagetools table',
            // skin: useDarkMode ? 'oxide-dark' : 'oxide',
            // content_css: useDarkMode ? 'dark' : 'default',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    </script>

    <script>

        var count = 1;
        function AddMoreColors() {
            var more = `<div class="col-md-12" id="div_` + count + `"><div class="form-group">
                                        <label> Product Color <a onclick="RemoveColors(` + count + `)" style="cursor:pointer" class="badge bg-danger"> Remove - </a> </label>
                                        <input type="color" class="form-control mb-3 MyFileInput mt-2" autocomplete="off"
                                               name="color[]" required>
                                </div>`;
            $("#MoreColors").append(more);
            count++;
        }

        function RemoveColors(id) {
            $("#div_" + id).remove();
        }

    </script>

@endsection