@extends ('layouts.app')
@section ('content')

    <div class="panel padding-10">

        <div class="row" id="step1row">
            <div class="col-md-12">
                <h1>STEP1 : NEW PRODUCT ENTER DETAILS</h1>
                <hr />
            </div>
            <form id="step1form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productname">Product Name - Required</label>
                            <input required type="text" class="form-control" id="productname" aria-describedby="nameHelp" placeholder="Enter product name">
                            <small id="nameHelp" class="form-text text-muted">eg. Captain Morgan Spiced Gold</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productype">Product Type - Required</label>
                            <select required class="form-control" id="productype" aria-describedby="nameHelp">
                                @foreach($product_types as $key => $value)
                                    <option value="{{$key}}">{{ ucfirst($value) }}</option>
                                @endforeach
                            </select>
                            <small id="nameHelp" class="form-text text-muted">Select the type of product</small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productype">Product Category - Required</label>
                            <select required class="form-control" id="categorytype" aria-describedby="catHelp">
                                @foreach($category_types as $key => $value)
                                    <option value="{{$key}}">{{ ucfirst($value) }}</option>
                                @endforeach
                            </select>
                            <small id="catHelp" class="form-text text-muted">Please choose the correct category.</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productname">Product Barcode - Optional</label>
                            <input type="text" class="form-control" id="productbarcode" aria-describedby="barcodeHelp" placeholder="Enter product barcode">
                            <small id="barcodeHelp" class="form-text text-muted">Barcode for the product</small>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productname">Point of Sale Link (SKU) - Optional</label>
                            <input type="text" class="form-control" id="productsku" aria-describedby="skuHelp" placeholder="Enter POS Link">
                            <small id="skuHelp" class="form-text text-muted">Enter the exact link to the POS item</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productype">Mass Volume Measurement - Required</label>
                            <select required class="form-control" id="masstype" aria-describedby="catMass">
                                @foreach($mass_volume_types as $key => $value)
                                    <option value="{{$key}}">{{ ucfirst($value) }}</option>
                                @endforeach
                            </select>
                            <small id="catMass" class="form-text text-muted">Please choose the correct mass measurement. Generally for a bottle of whiskey this will be ML , for a box of beer this will be units. This is also generally what you price the stock in.</small>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <button type="button" id="step2button" class="btn btn-primary">Create Product - Next Step</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>


        <div class="row" id="step2row" style="display:none;">
            <div class="col-md-12">
                <h1>STEP2 : PRODUCT STOCK DETAILS</h1>
                <hr />
            </div>
            <form id="step2form">
                <input type="hidden" id="product_id" value="-1" />
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productname">Product Mass - Required</label>
                            <input required type="text" class="form-control" id="massvolume" aria-describedby="massHelp" placeholder="Enter mass volume">
                            <small id="massHelp" class="form-text text-muted">Enter the amount of mass this product has. eg. 750</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productype">Product Unit Measurement/Sell/Stock Type - Required</label>
                            <select required class="form-control" id="unittype" aria-describedby="unitHelp">
                                @foreach($category_types as $key => $value)
                                    <option value="{{$key}}">{{ ucfirst($value) }}</option>
                                @endforeach
                            </select>
                            <small id="unitHelp" class="form-text text-muted">Please choose the correct product unit type.</small>
                        </div>
                    </div>
                </div>

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

                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="productname">Stock Amount Per Product</label>
                            <input type="text" class="form-control" id="unitamount" aria-describedby="massHelp" placeholder="Enter mass volume">
                            <small id="massHelp" class="form-text text-muted">Enter the amount of units this product has ( tots / units / glasses ).</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <button type="button" id="step3button" class="btn btn-primary">Update Product - Next Step</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>


        <div class="row" id="step3row" style="display:none;">
            <div class="col-md-12">
                <h1>STEP3 : PRODUCT IMAGE</h1>
                <p id="searching"></p>
                <hr />
            </div>
            <form id="step3form" method="post" enctype="multipart/form-data">
                <input type="hidden" id="pid" value="-1" />
                <div class="row">
                    <div class="form-group">
                        <label for="fileupload">Use Your Own Image - Or Choose One Below</label>
                        <input type="file" class="form-control-file" id="fileupload">
                    </div>
                </div>
                <hr />

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <button type="button" id="step4button" class="btn btn-primary">Save Product</button>
                        </div>
                    </div>
                </div>

                <div class="row" id="searchresults">

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

    </div>
@stop

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {

            let googleitems = [];

            function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            function blockie(){
                $('body').block({
                    message: '<h1>Processing</h1>',
                    css: { border: '3px solid #000' }
                });
            }
            function unblockie(){
                $('body').unblock();
            }

            $("#step4button").on('click' , function() {
                blockie();
                var selected = [];
                $('input.imageselected:checked').each(function() {
                    selected.push($(this).data("url"));
                });
                if (selected.length > 0){
                    $.ajax({
                        type: "POST",
                        url: '/product/ajaxupdate',
                        data: {
                            "url" : selected[0],
                            "id" : $("#pid").val()
                        },
                        success: function(data){
                            //console.log(data);
                            window.location = "/product/edit/" + $("#pid").val();
                        },
                        done: function(data){
                            window.location = "/product/edit/" + $("#pid").val();
                        },
                        dataType: 'json'
                    });
                } else {
                    var data = new FormData();
                    jQuery.each(jQuery('#fileupload')[0].files, function(i, file) {
                        data.append('file-'+i, file);
                        console.log("adding file");
                    });
                    data.append("id" , $("#pid").val());
                    console.log(data);

                    $.ajax({
                        type: "POST",
                        url: '/product/ajaxupdate',
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        method: 'POST',
                        success: function(data){
                            console.log(data);
                            window.location = "/product/edit/" + $("#pid").val();
                        }
                    });
                }

            });

            $("#step3button").on('click' , function(){
                blockie();
                var val = $("#step2form").valid();
                if (val){
                    //Check Product Name
                    var pMassVol = $("#massvolume").val();
                    var pUnit = $("#unittype").val();
                    var pUnitAmount =  $("#unitamount").val();
                    var pId =  $("#product_id").val();

                    $.ajax({
                        type: "POST",
                        url: '/product/ajaxupdate',
                        data: {
                            "id" : pId,
                            "unit_type_id" : pUnit,
                            "mass_volume" : pMassVol,
                            "unit" : pUnitAmount
                        },
                        success: function(data){
                            console.log(data);
                            $('#unittype').empty();
                            data.payload.unit_types.forEach(function(currentValue, index, arr){
                                $("#pid").val(data.payload.id);
                                if (data.payload.unit_type_id == currentValue.id)
                                    $('#unittype').append('<option selected="selected" value="' + currentValue.id + '">' + capitalizeFirstLetter(currentValue.title) + '</option>');
                                else
                                    $('#unittype').append('<option value="' + currentValue.id + '">' + capitalizeFirstLetter(currentValue.title) + '</option>');
                            });
                            if (undefined !== data.payload.search.items &&  data.payload.search.items.length > 0){

                                $("#searchresults").html('');
                                data.payload.search.items.forEach(function(currentValue, index, arr){
                                    var add = '<div class="row" style="margin-bottom:15px; border-bottom:1px solid black; padding-bottom:15px;">';
                                    add += '<div class="col-md-4">';
                                    add += '<a href="' + currentValue.link + '" target="_blank">';
                                    add += '<img src="' + currentValue.image.thumbnailLink + '" /></a>';
                                    add += '</div>';
                                    add += '<div class="col-md-4">';
                                    add += '<p>Height: '+currentValue.image.height+' <br />Width: '+ currentValue.image.width +'</p>';
                                    add += '</div>';
                                    add += '<div class="col-md-4">';
                                    add += '<div class="form-check">';
                                    add += '<input type="checkbox" data-url="' + currentValue.link + '" class="form-check-input imageselected" id="image_' + index + '">';
                                    add += '<label class="form-check-label" for="image_' + index + '">USE THIS IMAGE</label>';
                                    add += '</div>';
                                    add += '</div>';
                                    add += '</div>';
                                    $("#searchresults").append(add);
                                });
                            }

                            $("#step2row").hide();
                            $("#step3row").show();
                            unblockie();
                        },
                        dataType: 'json'
                    });


                } else {
                    toastr.warning('You have errors on your form , please correct.');
                    unblockie();
                }
            });

            $("#step2button").on('click' , function(){
                blockie();
                var val = $("#step1form").valid();
                if (val){
                    //Check Product Name
                    var pName = $("#productname").val();
                    var pType = $("#productype").val();
                    var pCat =  $("#categorytype").val();
                    var pBar =  $("#productbarcode").val();
                    var pSKU =  $("#productsku").val();
                    var pMass =  $("#masstype").val();

                    $.ajax({
                        type: "POST",
                        url: '/product/ajaxupdate',
                        data: {
                            "title" : pName,
                            "product_type_id" : pType,
                            "category_type_id" : pCat,
                            "barcode" : pBar,
                            "pos_link" : pSKU,
                            'mass_volume_type_id' : pMass
                        },
                        success: function(data){
                            console.log(data);
                            $("#product_id").val(data.payload.id);
                            $('#unittype').empty();
                            data.payload.unit_types.forEach(function(currentValue, index, arr){
                                if (data.payload.unit_type_id == currentValue.id)
                                    $('#unittype').append('<option selected="selected" value="' + currentValue.id + '">' + capitalizeFirstLetter(currentValue.title) + '</option>');
                                else
                                    $('#unittype').append('<option value="' + currentValue.id + '">' + capitalizeFirstLetter(currentValue.title) + '</option>');
                            });
                            $("#step1row").hide();
                            $("#step2row").show();
                            unblockie();

                        },
                        dataType: 'json'
                    });


                } else {
                    unblockie();
                    toastr.warning('You have errors on your form , please correct.');
                }
            });

        });
    </script>
@stop