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

@section('page_content')
    <form 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(isset($urls["listUrl"]))
                                        <a href="{{$urls['listUrl']}}">
                                            <div class="btn btn-info btn-sm"><span class="fa fa-list"></span> View
                                                Settings
                                            </div>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="settings-wizard">

                                    <ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-4">
                                        <li class="nav-item">
                                            <a href="#basic-settings" data-toggle="tab"
                                               class="nav-link rounded-0 pt-2 pb-2 active">
                                                <i class="fas fa-warehouse me-1"></i>
                                                <span class="d-none d-sm-inline">Basic Settings</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#company-settings" data-toggle="tab"
                                               class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="fas fa-building me-1"></i>
                                                <span class="d-none d-sm-inline">Company Settings</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#order-settings" data-toggle="tab"
                                               class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="fas fa-people-arrows me-1"></i>
                                                <span class="d-none d-sm-inline">Order Settings</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#invoice-settings" data-toggle="tab"
                                               class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="fas fa-file-invoice me-1"></i>
                                                <span class="d-none d-sm-inline">Quotation/Invoice Settings</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#email-templates" data-toggle="tab"
                                               class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="fas fa-file-invoice me-1"></i>
                                                <span class="d-none d-sm-inline">Email Templates</span>
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content b-0 mb-0 pt-0">
                                        <div class="tab-pane active show" id="basic-settings">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>Select Your Country <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="systemCountry">
                                                                <input type="hidden" name="values[]" id="countryId">
                                                                <input type="text" class="form-control" name="country"
                                                                       placeholder="Select Your Country">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>Select Main Store<span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="mainStore">
                                                                <input type="hidden" name="values[]" id="storeId">
                                                                <input type="text" class="form-control" name="store"
                                                                       placeholder="Select Main Store">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="company-settings">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyName"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyName">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyName"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyAddress"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyAddress">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyAddress"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyCity"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyCity">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyCity"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyState"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyState">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyState"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyPostalCode"]["label"] }}
                                                                    <span class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyPostalCode">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyPostalCode"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyPhone"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyPhone">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyPhone"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyHotline"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyHotline">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyHotline"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["companyEmail"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="companyEmail">
                                                                <input type="text" name="values[]"
                                                                       value="{{ $settings["companyEmail"]["value"] }}"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane show" id="order-settings">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["restrictIssuingMeasure"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="restrictIssuingMeasure">
                                                                <select name="values[]" class="form-control">
                                                                    <option value="YES"
                                                                            @if($settings["restrictIssuingMeasure"]["value"] === "") selected="selected" @endif>
                                                                        Select Option
                                                                    </option>
                                                                    <option value="YES"
                                                                            @if($settings["restrictIssuingMeasure"]["value"] === "YES") selected="selected" @endif>
                                                                        YES
                                                                    </option>
                                                                    <option value="NO"
                                                                            @if($settings["restrictIssuingMeasure"]["value"] === "NO") selected="selected" @endif>
                                                                        NO
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["showProductSize"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]"
                                                                       value="showProductSize">
                                                                <select name="values[]" class="form-control">
                                                                    <option value="YES"
                                                                            @if($settings["showProductSize"]["value"] === "") selected="selected" @endif>
                                                                        Select Option
                                                                    </option>
                                                                    <option value="YES"
                                                                            @if($settings["showProductSize"]["value"] === "YES") selected="selected" @endif>
                                                                        YES
                                                                    </option>
                                                                    <option value="NO"
                                                                            @if($settings["showProductSize"]["value"] === "NO") selected="selected" @endif>
                                                                        NO
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane show" id="invoice-settings">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["invoiceGreeting"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="invoiceGreeting">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["invoiceGreeting"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["invoiceBankInfo"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="invoiceBankInfo">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["invoiceBankInfo"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["invoiceFooterNote"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="invoiceFooterNote">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["invoiceFooterNote"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane show" id="email-templates">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["customerQuotationEmail"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="customerQuotationEmail">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["customerQuotationEmail"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["customerInvoiceEmail"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="customerInvoiceEmail">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["customerInvoiceEmail"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="form-group">
                                                                <label>{{ $settings["SupplierPOEmail"]["label"] }} <span
                                                                        class="text-danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="hidden" name="options[]" value="SupplierPOEmail">
                                                                <textarea type="text" name="values[]" class="form-control text-editor">{{ $settings["SupplierPOEmail"]["value"] }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </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-3">
                            </div>
                            <div class="col-md-3">
                            </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 Settings</button>
                                </div>
                            </div>
                            <div class="col-md-3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <script>
        let countryIdMS = null;
        let storeIdMS = null;
        let countryDisabled = false;
        let storeDisabled = false;

        @if($countriesDisabled)
            countryDisabled = true
        @endif

            @if($storesDisabled)
            storeDisabled = true
        @endif

        $(".text-editor").summernote({height:100});

        $(document).ready(function () {

            submitCreateForm();

            countryIdMS = $("input[name='country']").magicSuggest({
                allowFreeEntries: false,
                maxSelection: 1,
                disabled: countryDisabled,
                data: "/country/search_data",
                dataUrlParams: {"_token": "{{ csrf_token() }}"},
                value:[],
            });

            $(countryIdMS).on('selectionchange', function () {
                let selection = this.getValue();
                const value = selection[0] ?? ''

                $("#countryId").val(value);
            });

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

            $(storeIdMS).on('selectionchange', function () {
                const selection = this.getValue();
                const value = selection[0] ?? ''

                $("#storeId").val(value);
            });
        });

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

        function validateForm() {
            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 (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");

            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')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
@endsection

@section('page_js')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
@endsection