@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["viewUrl"]))
                                        <a href="{{$urls['viewUrl']}}">
                                            <div class="btn btn-info btn-sm"><span class="fas fa-file-invoice"></span> View</div>
                                        </a>
                                    @endif
                                    @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</div>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Requesting Store <span class="text-danger">*</span></label>
                                        <hr class="mt-1 mb-2">
                                        <input type="text" class="form-control" name="store" placeholder="Requesting Store">
                                    </div>
                                </div>

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

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Exchange Order Note</label>
                                <hr class="mt-1 mb-2">
                                <textarea rows="4" style="resize: none;" class="form-control" name="poNote" placeholder="Exchange Order note">{{ $record["poNote"] }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="clearfix" id="vue-template">
                        <main-component :view-data="viewData" ref="comp"></main-component>
                    </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">
                                    @if($record["approvalStatus"] === null || $record["approvalStatus"] === "DRAFT" || $record["approvalStatus"] === "PENDING")
                                    <div class="form-group mb-3">
                                        <label>Send For Approval <span class="text-danger">*</span></label>
                                        <hr class="mt-1 mb-2">
                                        <select name="approvalStatus" class="form-control">
                                            <option value="DRAFT" @if($record["approvalStatus"] === "DRAFT") selected="selected" @endif>
                                                Save as Draft
                                            </option>
                                            <option value="PENDING" @if($record["approvalStatus"] === "PENDING") selected="selected" @endif>
                                                Send For Approval
                                            </option>
                                        </select>
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group " style="margin-top: 30px;">
                                        <button type="submit" class="btn btn-success btn-add-row">Save Exchange Order</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" name="storeId" value="{{ $record["storeId"] }}">
    <input type="hidden" name="sourceStoreId" value="{{ $record["sourceStoreId"] }}">
</form>

<script>
    let storeMS = null;
    let exchangingStoreMS = null;

    let viewData = {"products":[],"productSearchUrl":"\/inventory\/product\/search_data","measureSearchUrl":"\/inventory\/measure\/search_data","store":null,"exchangingStore":null,"restrictIssuingMeasure":"","country":null,"showProductSize":null};
    let vueApp = new Vue({
        components:{"main-component":ExchangeOrderItems},
        data(){
            return {
                viewData:viewData,
            }
        }
    }).$mount('#vue-template')

    $(document).ready(function () {

        submitCreateForm();

        storeMS = $("input[name='store']").magicSuggest({
            allowFreeEntries: false,
            maxSelection:1,
            data: "/inventory/store/search_data",
            dataUrlParams:{"_token" : "{{ csrf_token() }}", "withoutMainStore": "Y", "departmentIds": 'null'},
            value:[],
        });

        $(storeMS).on('selectionchange', function(){
            const selection = this.getSelection();
            const value = selection[0] ?? null;
            const id = selection[0]?.id ?? '';

            $("input[name='storeId']").val(id);
            setStore(value)
        });

        exchangingStoreMS = $("input[name='exchangingStore']").magicSuggest({
            allowFreeEntries: false,
            maxSelection:1,
            data: "/inventory/store/search_data",
            dataUrlParams:{"_token" : "{{ csrf_token() }}", "withoutMainStore": "Y"},
            value:[],
        });

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

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

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

            const storeId = $("input[name='storeId']").val();
            if (storeId.length > 0) {
                idNot.push(storeId);
            }

            let params = {};
            params._token = "{{ csrf_token() }}";
            params.idNot = JSON.stringify(idNot);
            params.withoutMainStore = "Y";

            exchangingStoreMS.setDataUrlParams(params);
        });

        $(exchangingStoreMS).on('selectionchange', function(){
            const selection = this.getSelection();
            const value = selection[0] ?? null;
            const id = selection[0]?.id ?? '';

            $("input[name='sourceStoreId']").val(id);
            setExchangingStore(value)
        });
    });

    function getData() {
        return vueApp.$refs.comp.getData();
    }

    function resetProductForm() {
        vueApp.$refs.comp.resetForm();
    }

    function setStore(store) {
        vueApp.$refs.comp.setStore(store);
    }

    function setExchangingStore(store) {
        vueApp.$refs.comp.setExchangingStore(store);
    }

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

    function validateForm(formData) {
        let errors = 0;
        let errorText = [];

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

        if (storeMS.getValue() === "") {
            errors++;
            errorText.push(' Requesting Store Required.');
        }

        if (exchangingStoreMS.getValue() === "") {
            errors++;
            errorText.push('Exchanging Store Required.');
        }

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

            showNotifications(errorData);

            return false;
        } else {

            let data = getData();
            if (data) {

                formData.push({"name" : "products", "value" : JSON.stringify(data.products)});

                //show preloader
                showPreloader($('#create_form'), true);

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

    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");
                storeMS.clear();
                exchangingStoreMS.clear();
                resetProductForm();
            }
        @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