@extends('admin.layout.app')

@section('content')
<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Product</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Product</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">

                            <!-- [ Hover-table ] start -->
                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <div class="card">
                                    <div class="card-header">
                                        <h5>Add New Product</h5>
                                    </div>
                                    <div class="card-body">
                                        <form action="{{ route('admin.products.store') }}" method="post" enctype="multipart/form-data" class="attribute_form">
                                        @csrf

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    @include('components._categoryDropDown', ['is_required' => true, 'is_multiple' => false, 'is_label' => true, 'is_dash' => true, 'is_subcategory_display' => true, 'is_disabled' => true])
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Name</label>
                                                    <input type="text" name="name" placeholder="Enter Name" class="form-control" value="{{old('name')}}" required>
                                                    @if ($errors->has('name'))
                                                        <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Price</label>
                                                    <input type="number" name="price" placeholder="Enter Price" class="form-control" value="{{old('price')}}" required>
                                                    @if ($errors->has('price'))
                                                        <div class="invalid-feedback">{{ $errors->first('price') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Old Price</label>
                                                    <input type="number" name="old_price" placeholder="Enter Old Price" class="form-control" value="{{old('old_price')}}">
                                                    @if ($errors->has('old_price'))
                                                        <div class="invalid-feedback">{{ $errors->first('old_price') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Quantity</label>
                                                    <input type="number" name="quantity" placeholder="Enter Quantity" class="form-control" value="{{old('quantity')}}" required>
                                                    @if ($errors->has('quantity'))
                                                        <div class="invalid-feedback">{{ $errors->first('quantity') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Description</label>
                                                    <textarea name="description" class="form-control tinyMCE_textarea" placeholder="Enter Description" required>{{old('description')}}</textarea>
                                                    @if ($errors->has('description'))
                                                        <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Meta Title</label>
                                                    <input type="text" name="meta_title" placeholder="Enter Name" class="form-control" value="{{old('meta_title')}}">
                                                    @if ($errors->has('meta_title'))
                                                        <div class="invalid-feedback">{{ $errors->first('meta_title') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Meta Author</label>
                                                    <input type="text" name="meta_author" placeholder="Enter Name" class="form-control" value="{{old('meta_author')}}">
                                                    @if ($errors->has('meta_author'))
                                                        <div class="invalid-feedback">{{ $errors->first('meta_author') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Meta Keyword</label>
                                                    <input type="text" name="meta_keyword" placeholder="Enter Name" class="form-control" value="{{old('meta_keyword')}}">
                                                    @if ($errors->has('meta_keyword'))
                                                        <div class="invalid-feedback">{{ $errors->first('meta_keyword') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Meta Description</label>
                                                    <textarea name="meta_description" class="form-control" placeholder="Enter Meta Description" rows="5">{{old('meta_description')}}</textarea>
                                                    @if ($errors->has('meta_keyword'))
                                                        <div class="invalid-feedback">{{ $errors->first('meta_keyword') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-glow-primary btn-primary btn-sm">Submit</button>
                                        <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Hover-table ] end -->


                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
$(function(){
    $('.main_products').addClass('active');
    $('.main_products').addClass('pcoded-trigger');
    $('.products').addClass('active');

     tinyMCE.init({
        selector: ".tinyMCE_textarea",
        theme: "modern",
        // object_resizing: false,
        // relative_urls: false,
        // remove_script_host: false,

        // allow_script_urls: true,
        // extended_valid_elements: 'span,script[language|type|src]',
        // browser_spellcheck: true,
        // force_br_newlines: true,
        // force_p_newlines: false,
        // forced_root_block: '',

        paste_as_text: true,
        browser_spellcheck: true,

        plugins: ["code", "textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table", "image"],
        toolbar: "codesample | code | fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tiny.cloud/css/codepen.min.css'
        ],
        valid_elements : '*[*]',
        height: 200,
        // formats: {
        //     alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        //     aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        //     alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        //     alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        //     bold: { inline: 'span', classes: 'bold' },
        //     italic: { inline: 'span', classes: 'italic' },
        //     underline: { inline: 'span', classes: 'underline', exact: true },
        //     strikethrough: { inline: 'del' },
        //     customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
        // },
        // style_formats: [
        //     { title: 'Custom format', format: 'customformat' },
        //     { title: 'Align left', format: 'alignleft' },
        //     { title: 'Align center', format: 'aligncenter' },
        //     { title: 'Align right', format: 'alignright' },
        //     { title: 'Align full', format: 'alignfull' },
        //     { title: 'Bold text', inline: 'strong' },
        //     { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
        //     { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
        //     { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
        //     { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
        //     { title: 'Image formats' },
        //     { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
        //     { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
        // ]
        /* enable title field in the Image dialog*/
        image_title: true,
        /* enable automatic uploads of images represented by blob or data URIs*/
        automatic_uploads: true,
        /*
            URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
            images_upload_url: 'postAcceptor.php',
            here we add custom filepicker only to Image dialog
        */
        file_picker_types: 'image',
        /* and here's our custom image picker*/
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            /*
            Note: In modern browsers input[type="file"] is functional without
            even adding it to the DOM, but that might not be the case in some older
            or quirky browsers like IE, so you might want to add it to the DOM
            just in case, and visually hide it. And do not forget do remove it
            once you do not need it anymore.
            */

            input.onchange = function () {
            var file = this.files[0];

            var reader = new FileReader();
            reader.onload = function () {
                /*
                Note: Now we need to register the blob in TinyMCEs image blob
                registry. In the next release this part hopefully won't be
                necessary, as we are looking to handle it internally.
                */
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                /* call the callback and populate the Title field with the file name */
                cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
            };

            input.click();
        }
    });
});
</script>
@endpush