@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">Products</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)">Products</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 class="d-inline-block dropdown float-right">
                                            <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form action="{{ route('admin.products.store') }}" method="post" enctype="multipart/form-data" class="product_form">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Category Name</label>
                                                    <select name="category_id" class="form-control category_id" required>
                                                        <option value="">-Select category-</option>
                                                        @forelse($categories as $key => $value)
                                                            <option value="{{$value->id}}" {{$value->id == old('category_id')? 'selected' : ''}}>{{$value->category_name}}</option>
                                                        @empty
                                                            <option value="">No Category</option>
                                                        @endforelse
                                                    </select>
                                                    @if ($errors->has('category_id'))
                                                        <div class="invalid-feedback">{{ $errors->first('category_id') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Subcategory</label>
                                                    <select name="subcategory_id" class="form-control subcategory_id" required>
                                                        <option value="">-Select subcategory-</option>
                                                    </select>
                                                    @if ($errors->has('subcategory_id'))
                                                        <div class="invalid-feedback">{{ $errors->first('subcategory_id') }}</div>
                                                    @endif
                                                </div>
                                            </div>

                                        </div>

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

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

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

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Product Image</label>
                                                    <input type="file" name="product_image" class="form-control" required>
                                                    <small class="form-text text-muted">Accepted formats: png, jpg, jpeg. Max file size 5Mb</small>
                                                    @if ($errors->has('product_image'))
                                                        <div class="invalid-feedback">{{ $errors->first('product_image') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label>File Name</label>
                                                <div class="input-group">
                                                    <input type="hidden" name="s3_file_size" class="form-control">
                                                    <input type="hidden" name="s3_upload_key" class="form-control">
                                                    <input type="text" name="s3_file_name" class="form-control" placeholder="File Name" value="{{old('s3_file_name')}}" required readonly>
                                                    <div class="input-group-prepend">
                                                        <button class="btn btn-primary btn-sm browse_plan" type="button" data-url="{{route('admin.get.s3.bucket')}}" data-dir_path="" data-request_type="get_bucket">Browse</button>
                                                    </div>
                                                </div>
                                                @if ($errors->has('s3_file_name'))
                                                    <div class="invalid-feedback">{{ $errors->first('s3_file_name') }}</div>
                                                @endif
                                                @if ($errors->has('s3_file_size'))
                                                    <div class="invalid-feedback">{{ $errors->first('s3_file_size') }}</div>
                                                @endif
                                                @if ($errors->has('s3_upload_key'))
                                                    <div class="invalid-feedback">{{ $errors->first('s3_upload_key') }}</div>
                                                @endif
                                                <!-- <label>Product Download URL</label>
                                                <input type="url" name="product_download" class="form-control" placeholder="Enter Product Download URL" value="{{old('product_download')}}" required>
                                                @if ($errors->has('product_download'))
                                                    <div class="invalid-feedback">{{ $errors->first('product_download') }}</div>
                                                @endif -->
                                            </div>

                                            <!-- <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label></label>
                                                    <input type="file" name="product_download_file" class="form-control">
                                                    <small class="form-text text-muted">Accepted formats: png, jpg, jpeg. Max file size 5Mb</small>
                                                    @if ($errors->has('product_download_file'))
                                                        <div class="invalid-feedback">{{ $errors->first('product_download_file') }}</div>
                                                    @endif
                                                </div>
                                            </div> -->
                                        </div>

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

                                        <div class="row">
                                            <div class="col-md-6">
                                                <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>
                                            </div>
                                        </div>
                                        </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(){
    $('.products').addClass('active');

    $( ".publish_date" ).datepicker({
        changeMonth: true,
        changeYear: true,
        // minDate: '0',
        dateFormat: 'yy-mm-dd'
    });

    $(document.body).on('change', '.category_id', function(){
        var category_id = $(this).val()
        if(category_id == ''){
            alert('Please select category');
            return false
        }
        showLoader();
        $.ajax({
            type: 'get',
            url: '{{route("get-SubCategories")}}',
            data: {
                'category_id': category_id,
            },
            dataType: 'json',
            success:function(response){
                console.log(response);
                if(response.status == 'success'){
                    // var items = response.data;
                    // var newOptions = '<option value="">Select District</option>';
                    // $.each( items, function( index, value ){
                    //     newOptions += '<option value="'+ value.id +'">'+ value.district_name +'</option>';
                    // });
                    $(".subcategory_id").html(response.data);
                }else{
                    $(".subcategory_id").html('<option value="">-Select subcategory-</option>');
                }
                hideLoader();
            }
        });
    });

    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 | select_all | removeformat | 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,
        setup: function (editor) {
            editor.on('init', function (args) {
                //doeditbuttons()
                // args.target.editorCommands.execCommand("fontName", false, "Roboto Light");
                this.getDoc().body.style.fontFamily = 'Roboto_Light';
            });
            editor.on('change', function (e) {
                //doeditbuttons()
            });

            editor.addButton('select_all', {
                text: 'Select all',
                icon: false,
                onclick: function () {
                    // editor.insertContent("<pre>" + editor.selection.getContent() + "</pre>");
                    // tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
                    tinymce.activeEditor.execCommand('selectAll');
                }
            });
        },
        // 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