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

@section('page_content')
    <form action="javascript:" id="create_form" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-6">
                                @if($formMode === "add")
                                    <h4 class="header-title">Add New Import</h4>
                                @else
                                    <h4 class="header-title">Edit Import</h4>
                                @endif
                            </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</div>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Import Name</label>
                                    <hr class="mt-1 mb-2">
                                    <input type="text" class="form-control" name="importName"
                                           placeholder="Import Name"
                                           value="{{ $record["importName"] }}">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Import Type</label>
                                    <hr class="mt-1 mb-2">
                                    <select name="importStatus" class="form-control">
                                        <option value="PRODUCT-IMPORT"
                                                @if($record["importStatus"] === "PRODUCT-IMPORT") selected="selected" @endif>
                                            Product Import
                                        </option>
                                        <option value="CORRECTION-ORDER"
                                                @if($record["importStatus"] === "CORRECTION-ORDER") selected="selected" @endif>
                                            Correction Order
                                        </option>
                                    </select>
                                </div>
                            </div>

                            @if($formMode === "add")
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Select CSV file</label>
                                        <hr class="mt-1 mb-2">
                                        <input type="file" class="form-control" name="importedFile" accept="text/csv,application/vnd.ms-excel">
                                    </div>
                                </div>
                            @endif
                        </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-3">
                            </div>
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label>Select Import Status <span class="text-danger">*</span></label>
                                    <select name="importStatus" class="form-control">
                                        <option value="DRAFT"
                                                @if($record["importStatus"] === "DRAFT") selected="selected" @endif>
                                            Draft
                                        </option>
                                        <option value="PENDING"
                                                @if($record["importStatus"] === "PENDING") selected="selected" @endif>
                                            Pending
                                        </option>
                                        <option value="TERMINATED"
                                                @if($record["importStatus"] === "TERMINATED") selected="selected" @endif>
                                            Terminate
                                        </option>
                                    </select>
                                </div>
                            </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</button>
                                </div>
                            </div>
                            <div class="col-md-3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        $(document).ready(function () {
            submitCreateForm();
        });

        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 = [];

            let importName = form.importName.value;

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

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

            @if($formMode === "add")
                let importedFile = form.importedFile.value;

                if (importedFile === "") {
                    errors++;
                    errorText.push('Importing CSV File 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");
            }
            @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