{{ asset_add("scripts.js", "anomaly.field_type.datetime::js/flatpickr.min.js") }}
{{ asset_add("styles.css", "anomaly.field_type.datetime::scss/flatpicker.scss") }}
{{ asset_add("styles.css", "anomaly.field_type.datetime::scss/light.scss") }}
{{ asset_add("styles.css", "anomaly.field_type.datetime::scss/picker.scss") }}

{% for locale in config('streams::locales.enabled') %}
    {{ asset_add("scripts.js", "anomaly.field_type.datetime::js/l10n/" ~ locale ~ ".js", ["ignore"]) }}
{% endfor %}

{{ asset_add("scripts.js", "anomaly.field_type.datetime::js/l10n/" ~ config('app.locale') ~ ".js", ["ignore"]) }}

{{ asset_add("scripts.js", "anomaly.field_type.datetime::js/picker.js") }}

{{ asset_script('scripts.js', ['min']) }}
{{ asset_style('styles.css', ['min']) }}

<form action="{{ url_current() }}/download" method="post">
    {{ csrf_field() }}
    <div class="modal-header">
        <button class="close" data-dismiss="modal">
            <span>&times;</span>
        </button>
        <h3 class="modal-title text-center">Export Order Data To Excel</h3>
    </div>

    <div class="modal-body">

        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <div class="form-group">
                        <label class="control-label">
                            <strong>Dealer / Store</strong>
                            <span class="required">*</span>
                        </label>

                        <div class="input-wrapper">
                            <div class="input-group">
                                <select name="dealer" class="custom-select form-control">
                                    <option value="all">All</option>
                                    {% set specialOffer = entries('so', 'special_offer').where('id', request_segment(4)).first() %}
                                    {% for dealer in specialOffer.special_offer_dealer %}
                                        <option value="{{ dealer.id }}">{{ dealer.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col col-sm-12">
                    <div class="field-group starting_date">
                        <div class="form-group datetime-field_type">

                            <label class="control-label">
                                <strong>Starting Date</strong>
                                <span class="required">*</span>

                            </label>

                            <div class="input-wrapper">
                                <div class="input-group">
                                    <input
                                            type="text"
                                            class="form-control"
                                            name="starting_date"
                                            data-input-mode="date"
                                            placeholder=""
                                            data-locale="en"
                                            value="{{ carbon().format('Y-m-d') }}"
                                            data-datetime-format="Y-m-d"
                                            data-alt-format="Y-m-d"
                                            data-field="starting_date" data-field_name="starting_date"
                                            data-provides="anomaly.field_type.datetime"
                                            required
                                    >

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

                <div class="col col-sm-12">
                    <div class="field-group starting_date">
                        <div class="form-group datetime-field_type">

                            <label class="control-label">
                                <strong>Ending Date</strong>
                                <span class="required">*</span>

                            </label>

                            <div class="input-wrapper">
                                <div class="input-group">
                                    <input
                                            type="text"
                                            class="form-control"
                                            name="ending_date"
                                            data-input-mode="date"
                                            placeholder=""
                                            data-locale="en"
                                            value="{{ carbon().format('Y-m-d') }}"
                                            data-datetime-format="Y-m-d"
                                            data-alt-format="Y-m-d"
                                            data-field="ending_date" data-field_name="ending_date"
                                            data-provides="anomaly.field_type.datetime"
                                            required
                                    >

                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">Export</button>
    </div>
</form>

<script>
    (function (window, document) {

        let fields = Array.prototype.slice.call(
            document.querySelectorAll('input[data-provides="anomaly.field_type.datetime"]:not(.flatpickr-input)')
        );

        // Initialize inputs
        fields.forEach(function (field) {

            if (!field.getAttribute('readonly')) {

                let inputMode = field.getAttribute('data-input-mode');
                let clearToggle = field.parentElement.querySelector('a[data-clear]');

                let options = {
                    altInput: true,
                    allowInput: false,
                    locale: field.getAttribute('data-locale'),
                    altFormat: field.getAttribute('data-alt-format'),
                    minuteIncrement: field.getAttribute('data-step') || 1,
                    dateFormat: field.getAttribute('data-datetime-format'),
                    time_24hr: Boolean(field.getAttribute('data-alt-format').match(/[GH]/)),
                    enableTime: inputMode !== 'date',
                    noCalendar: inputMode === 'time'
                };

                let picker = field.flatpickr(options);

                if (clearToggle) {

                    clearToggle.addEventListener('click', function (event) {

                        event.preventDefault();

                        picker.clear();
                    });
                }
            }
        });
    })(window, document);

</script>