@extends('templates.structure')
@section('custom_css')
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> --}}
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<style>
    .ck-content { min-height:300px; max-height:auto; }

</style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">

        <div class="card">

            <form role="form" id="form">
                <div class="card-body">

                    <div class="row">

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Location ID</label>
                                {{-- <input type="text" name="location_id" class="form-control"> --}}
                                <select name="location_id" class="form-control">                                    
                                </select>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Product Name</label>
                                <input type="text" name="product_name" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea id="editor1" name="descriptions" style="width: 100%;" class="form-controller"></textarea>                            
                            </div>
                        </div>
                        <div class="col-md-6">
                                <div class="form-group">
                                    <label>Currency</label>
                                    <select name="currency" class="form-control">                                    
                                        @php
                                        $collection = ['PHP', 'IDR', 'SGD', 'MYR', 'AUD', 'USD', 'KRW', 'JPY', 'THB'];
                                        sort($collection);
                                        @endphp
                                    @foreach ($collection as $item)                                        
                                    <option value="{{$item}}">{{$item}}</option>
                                    @endforeach
                                </select>                                                                        
                            </div>

                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Price</label>
                                <input type="text" name="price" class="form-control">
                            </div>

                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category ID</label>                                    
                                <select name="category_id" class="form-control">
                                    <option value=""></option>
                                    @foreach ($unity_product_categories as $key => $value)
                                    <option value="{{$value->id}}">{{$value->category_desc}}</option>
                                    @endforeach
                                </select>
                            </div>                                
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Image</label>
                                <div style="display:none">
                                    <br>
                                    <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>
                                    <br>
                                    <br>
                                </div>
                                <div class="input-group mb-3">
                                    <div class="custom-file">
                                        <input type="file" name="media" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="custom-file-input">
                                        <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
                                    </div>
                                </div>
                            </div>
                            <textarea id="base" style="display:none"></textarea>
                        </div>
                        <div class="col-md-12">
                            <div class="row dtForm">
                        {!!\FormDt::getDtAttrForm('product')!!}
                            </div>
                        </div>
                    </div>

                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>

    </div>
</div>
@endsection


@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>

<script>
    
//Initialize Select2 Elements
$('[name="category_id"]').select2()
$('[name="currency"]').select2() 
$('[name="location_id"]').select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

    var myEditor;
            ClassicEditor
              .create(document.querySelector('#editor1'))
              .then(function (editor) {
                // The editor instance
                myEditor = editor;
              })
              .catch(function (error) {
                console.error(error)
              })

    var tnc;
            ClassicEditor
              .create(document.querySelector('#tnc'))
              .then(function (editor) {
                // The editor instance
                tnc = editor;
              })
              .catch(function (error) {
                console.error(error)
              })

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            if(e.target.result != undefined){
                $('#falseinput').closest('div').css('display', 'block')
            }
            $('#falseinput').attr('src', e.target.result);
            $('#base').val(e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}   

$( "#form" ).submit(function( e ) {
    e.preventDefault()

    let bodyFormData = new FormData();
    bodyFormData.append('product_name', $('[name="product_name"]').val())
    bodyFormData.append('location_id', $('[name="location_id"]').val())
    bodyFormData.append('currency', $('[name="currency"]').val())
    bodyFormData.append('price', $('[name="price"]').val())
    bodyFormData.append('category_id', $('[name="category_id"]').val())
    bodyFormData.append('image', $('#base').val())
    bodyFormData.append('descriptions', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')

    $.each($('.dtForm :input').serializeArray(), function (key, val) {
        bodyFormData.append(val.name, val.value)
    })

    axios.post('{{route("products.store")}}', bodyFormData, config) .then(function (response) {
                console.log(response);
                window.location = response.data.additional.redirect;

            })
            .catch(function (error) { console.log(error);
                $('.newerror').remove()
                var msgs = error.response.data.data.message
                $.each(msgs, function (index, value) {
                        if(index.split(".").length > 1){
                            var newindex = index.split(".")
                            $('[name="'+newindex[0]+'['+newindex[1]+']"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        } else {

                            $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        }
                        // console.log(value[0])
                    });
            });
})
    
</script>
@endsection