@extends('inventory::layouts.master')

@section('page_content')
    <form class="form-label-left input_mask" action="javascript:" id="create_form">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4 class="header-title">{{ $pageTitle }}</h4>
                            </div>
                            <div class="col-sm-6">
                                <div class="float-right">
                                    @if($formMode=="edit")
                                        @if(isset($urls["addUrl"]))
                                            <a href="{{$urls['addUrl']}}">
                                                <div class="btn btn-info btn-sm"><span class="fa fa-plus"></span> Add
                                                    New
                                                </div>
                                            </a>
                                        @endif
                                    @endif

                                    @if(isset($urls["listUrl"]))
                                        <a href="{{$urls['listUrl']}}">
                                            <div class="btn btn-info btn-sm"><span class="fa fa-list"></span> List
                                                Products
                                            </div>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Product Name <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" class="form-control" name="itemName"
                                                           placeholder="Product Name" value="{{ $record["itemName"] }}">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Category <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" class="form-control" name="category" placeholder="Select Category">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Brand Name <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" class="form-control" name="brandName"
                                                           placeholder="Brand Name">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Price</label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="number" step="any" class="form-control" name="price"
                                                           placeholder="Product price" value="{{ $record["price"] }}">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Product Nature <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <select name="productNature" class="form-control">
                                                        <option value="PERISHABLE" @if ($record["productNature"] === "PERISHABLE") selected="selected" @endif>
                                                            Perishable
                                                        </option>
                                                        <option value="REUSABLE" @if ($record["productNature"] === "REUSABLE") selected="selected" @endif>
                                                            Reusable
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>

                                            @if($formMode ==="add" || isset($urls["changeMinOrderLevel"]))
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Minimum Order Level <span class="text-danger">*</span></label>
                                                        <hr class="mt-1 mb-2">
                                                        <input type="number" class="form-control"
                                                               name="minOrderLevel" placeholder="Reorder Threshold"
                                                               value="{{ $record["minOrderLevel"] }}">
                                                    </div>
                                                </div>
                                            @endif

                                            @if($formMode ==="add" || isset($urls["changeMaxOrderLevel"]))
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Maximum Order Level <span class="text-danger">*</span></label>
                                                        <hr class="mt-1 mb-2">
                                                        <input type="number" class="form-control"
                                                               name="maxOrderLevel" placeholder="Reorder Threshold"
                                                               value="{{ $record["maxOrderLevel"] }}">
                                                    </div>
                                                </div>
                                            @endif

                                            @if($formMode ==="add" || isset($urls["changeReorderLevel"]))
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Reorder Threshold <span class="text-danger">*</span></label>
                                                        <hr class="mt-1 mb-2">
                                                        <input type="number" class="form-control"
                                                               name="reorderThreshold" placeholder="Reorder Threshold"
                                                               value="{{ $record["reorderThreshold"] }}">
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Product Source <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <select name="source" class="form-control" onchange="setSource();">
                                                        <option value="EXTERNAL"
                                                                @if($record["source"] === "EXTERNAL") selected="selected" @endif>
                                                            External
                                                        </option>
                                                        <option value="INTERNAL"
                                                                @if($record["source"] === "INTERNAL") selected="selected" @endif>
                                                            Internal
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Unit of Measure <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" class="form-control" name="measureName"
                                                           placeholder="Select Unit of Measure">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Issuing Measures <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" class="form-control" name="itemMeasures"
                                                           placeholder="Select Issuing Measures">
                                                </div>
                                            </div>

                                            @if($showProductSize === "YES")
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Item Size <span class="font-weight-bold"
                                                                               id="sizeMeasure"></span> <span
                                                                class="text-danger">*</span></label>
                                                        <hr class="mt-1 mb-2">
                                                        <input type="number" step="any" class="form-control" name="itemSize"
                                                               placeholder="Item Size" value="{{ $record["itemSize"] }}">
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label>Product Description</label>
                                                    <hr class="mt-1 mb-2">
                                                    <textarea rows="5" style="resize: none;" class="form-control"
                                                              name="itemDescription"
                                                              placeholder="Product Description">{{ $record["itemDescription"] }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group mb-3">
                                            <label>Enable/Disable Product Status <span
                                                    class="text-danger">*</span></label>
                                            <select name="itemStatus" class="form-control">
                                                <option value="ENABLED"
                                                        @if($record["itemStatus"] === "ENABLED") selected="selected" @endif>
                                                    Enable
                                                </option>
                                                <option value="DISABLED"
                                                        @if($record["itemStatus"] === "DISABLED") selected="selected" @endif>
                                                    Disable
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group float-right" style="margin-top: 30px;">
                                            <button type="submit" class="btn btn-success btn-add-row">Save Product
                                                Item
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="productCategoryId" value="{{ $record["productCategoryId"] }}">
        <input type="hidden" name="brandId" value="{{ $record["brandId"] }}">
        <input type="hidden" name="measureId" value="{{ $record["measureId"] }}">
    </form>

        <script>
        let productCategoryMS=null;
        let brandIdMS = null;
        let measureMS = null;
        let itemMeasuresMS = null;
        $(document).ready(function () {

            submitCreateForm();

            productCategoryMS = $("input[name='category']").magicSuggest({
                allowFreeEntries: false,
                maxSelection:1,
                data: "/inventory/product_category/search_data",
                dataUrlParams:{"_token":"{{ csrf_token() }}"},
                value:[],
            });

            $(productCategoryMS).on('selectionchange', function(){
                let selection = this.getValue();

                if(selection.length > 0) {
                    $("input[name='productCategoryId']").val(selection[0]);
                } else {
                    $("input[name='productCategoryId']").val("");
                }
            });

            brandIdMS = $("input[name='brandName']").magicSuggest({
                allowFreeEntries: false,
                maxSelection: 1,
                data: "/inventory/brand/search_data",
                dataUrlParams: {"_token": "{{ csrf_token() }}"},
                value:[],
            });

            $(brandIdMS).on('selectionchange', function () {
                let selection = this.getValue();

                if (selection.length > 0) {
                    $("input[name='brandId']").val(selection[0]);
                } else {
                    $("input[name='brandId']").val("");
                }
            });

            measureMS = $("input[name='measureName']").magicSuggest({
                allowFreeEntries: false,
                maxSelection: 1,
                data: "/inventory/measure/search_data",
                dataUrlParams: {"_token": "{{ csrf_token() }}"},
                value:[],
            });

            $(measureMS).on('selectionchange', function () {
                const selections = measureMS.getSelection();
                let measure = null;

                if (selections.length > 0) {
                    measure = selections[0];
                    $("input[name='measureId']").val(selections[0].id);
                } else {
                    $("input[name='measureId']").val("");
                }

                setSizeMeasure(measure);
            });

            @if(isset($record["measure"]))
            setSizeMeasure(null);
            @endif

            itemMeasuresMS = $("input[name='itemMeasures']").magicSuggest({
                allowFreeEntries: false,
                maxSelection: 999,
                data: "/inventory/measure/search_data",
                dataUrlParams: {"_token": "{{ csrf_token() }}", "withParentMeasure": "Y"},
                value:[],
            });

            $(itemMeasuresMS).on('beforeload', function () {

                let idNot = [];
                let selections = itemMeasuresMS.getSelection();
                if ($(selections).length > 0) {
                    $(selections).each(function (index, selection) {

                        idNot.push(selection.id);
                    });
                }

                let params = {};
                params._token = "{{ csrf_token() }}";
                params.withParentMeasure = "Y";
                params.idNot = idNot;
                params.parentMeasureId = $("input[name='measureId']").val();

                itemMeasuresMS.setDataUrlParams(params);
            });
        });

        function setSizeMeasure(measure) {

            let sizeMeasure = '';
            if (measure && measure?.name && measure.name.length > 0) {

                sizeMeasure = `(${measure.name})`;
            }
            $("#sizeMeasure").html(sizeMeasure);
        }

        function submitCreateForm() {
            $('#create_form').ajaxForm({
                url: "@if(isset($formSubmitUrl)) {{ $formSubmitUrl }} @endif",
                type: "POST",
                dataType: "json",
                beforeSubmit: validateForm,
                success: serverResponse,
                error: onError
            });
        }

        function validateForm(formData, jqForm) {
            let form = jqForm[0];

            let errors = 0;
            let errorText = [];
            const decimalRegEx = /^\d+(?:[.]\d+)*$/gm;

            let itemName = form.itemName.value;
            let price = form.price.value;

            errorText.push("<strong> <span class='glyphicon glyphicon-warning-sign'></span> Following errors occurred while submitting the form</strong><br/>");

            if (itemName === "") {
                errors++;
                errorText.push('Product Name Required.');
            }

            if(productCategoryMS.getValue() === "") {
                errors++;
                errorText.push('Category Required.');
            }

            if (brandIdMS.getValue() === "") {
                errors++;
                errorText.push('Unit of brand Required.');
            }

            if (!price.match(decimalRegEx)) {
                errors++;
                errorText.push('Valid price Required.');
            }

            @if($showProductSize === "YES")
            let itemSize = form.itemSize.value;
            if (!itemSize.match(decimalRegEx)) {
                errors++;
                errorText.push('Valid Item Size Required.');
            }
            @endif

            @if(isset($urls["changeReorderLevel"]))
            let reorderThreshold = form.reorderThreshold.value;

            if (reorderThreshold === "") {
                errors++;
                errorText.push('Reorder Threshold Required.');
            }
            @endif

            if (errors > 0) {
                let errorData = [];
                errorData.status = "warning";
                errorData.notify = errorText;

                showNotifications(errorData);

                return false;
            } else {
                //show preloader
                showPreloader($('#create_form'), true);

                //disable form submit
                $('#create_form button[type="submit"]').attr("disabled", "disabled");
                return true;
            }
        }

        function serverResponse(responseText) {
            //Hide preloader
            hidePreloader($('#create_form'));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            @if($formMode === "add")
            if (responseText.notify.status && responseText.notify.status === "success") {
                $("#create_form").trigger("reset");
                productCategoryMS.clear();
                brandIdMS.clear();
                measureMS.clear();
                itemMeasuresMS.clear();
            }
            @endif

            showNotifications(responseText.notify)
        }

        function onError() {
            //Hide preloader
            hidePreloader($("#create_form"));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            let errorText = [];
            let errorData = [];

            errorText.push('Something went wrong. Please try again.');

            errorData.status = "warning";
            errorData.notify = errorText;

            showNotifications(errorData)
        }
    </script>
@endsection

@section('page_css')
@endsection

@section('page_js')
@endsection