@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-12">
                                        <div class="form-group">
                                            <label>Store <span class="text-danger">*</span></label>
                                            <hr class="mt-1 mb-2">
                                            <input type="text" class="form-control" name="store" placeholder="Store">
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Issue Order Type <span class="text-danger">*</span></label>
                                            <hr class="mt-1 mb-2">
                                            <input type="text" class="form-control" name="issueOrderType" placeholder="Issue Order Type">
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Invoice (If and only if applicable)</label>
                                            <hr class="mt-1 mb-2">
                                            <input type="text" class="form-control" name="invoice" placeholder="Invoice">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="project-info" style="@if(!$project) display: none; @endif">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="page-title mb-3">Project Information</h4>

                                        <h5 class="mt-0">Project No</h5>
                                        <p id="project-no">{{ $project["projectNo"] ?? ''}}</p>

                                        <h5 class="mt-3">Project Name</h5>
                                        <p id="project-name">{{ $project["name"] ?? ''}}</p>
                                    </div>
                                </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 Issue Order Order</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

        <script>
        let storeMS = null;
        let invoiceMS = null;
        let issueOrderTypeMS = null;

        let viewData = {"products":[],"productSearchUrl":"\/inventory\/product\/search_data","measureSearchUrl":"\/inventory\/measure\/search_data","invoiceItemsFetchUrl":"\/inventory\/invoice\/fetch_invoice_items","store":null,"restrictIssuingMeasure":"","country":null,"showProductSize":null,"invoiceId":null};
        let vueApp = new Vue({
            components:{"main-component":IssueOrderItems},
            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() }}", "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)
            });

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

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

                const invoice = selection[0] ?? null;

                if (invoice) {
                    if (invoice?.orderType === "PRODUCT") {
                        setItemsFromInvoice(id);
                    }
                    setProject(selection[0]?.quotation?.project ?? null);
                }

                $("input[name='invoiceId']").val(id);
            });

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

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

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

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

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

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

        function setItemsFromInvoice(purchaseOrderId) {

            vueApp.$refs.comp.setItemsFromInvoice(purchaseOrderId);
        }

        function setProject(project) {
            if (project) {
                $("#project-no").text(project?.projectNo);
                $("#project-name").text(project?.name);
                $("#project-info").show();
            } else {
                $("#project-info").hide();
            }
        }

        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('Store Required.');
            }

            if (issueOrderTypeMS.getValue() === "") {
                errors++;
                errorText.push('Issue Order Type 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" : "totalCost", "value" : data.totalCost});
                    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();
                invoiceMS.clear();
                issueOrderTypeMS.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