<style>
    #admin-points-filters label {
        font-weight: bold;
    }

    #admin-points-filters .mw-100px {
        min-width: 100px;
    }

    .filter-container {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .filter-container>div {
        width: 165px;
    }

    .filter-container>div:not(:last-child) {
        margin-right: 10px;
    }

    .sm-section {
        width: 125px !important;
        margin-bottom: 10px;
    }
</style>
<form id="admin-points-filters" method="GET" action="{{ route('admin.points') }}" class="filter-container" v-cloak>
    <div class="sm-section">
        <div class="">
            <label>Name:</label>
            <input name="name" class="form-control input-sm" v-model="filters.name">
        </div>
    </div>

    <div class="sm-section">
        <div class="mcp-filter-container">
            <label>MCP:</label>
        </div>
    </div>

    <div>
        <div class="">
            <label>&nbsp;</label>
            <div class=" d-flex">
                <button type="button" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i> Filter</button>
                <a href="#" v-on:click.prevent="fastLoad('{{route('admin.points')}}')" class="btn btn-link btn-sm text-danger">Clear</a>
            </div>
        </div>
    </div>
</form>

<?php
$loadedFilters = @$filters;
$allFilterKeys = [
    'name',
];
for ($i = 0; $i < count($allFilterKeys); $i++) {
    if (!isset($loadedFilters[$allFilterKeys[$i]]) || !$loadedFilters[$allFilterKeys[$i]]) {
        $loadedFilters[$allFilterKeys[$i]] = '';
    }
}
?>
<script>
    (function() {
        function init() {
            new Vue({
                el: '#admin-points-filters',
                delimiters: ['@{{', '}}'],
                data: {
                    filters: <?= json_encode($loadedFilters) ?>
                },
                methods: {
                    init: function() {

                    },
                    doSubmit: function() {
                        fastLoad("{{ route('admin.points') }}?" + $('#admin-points-filters').serialize());
                        return false;
                    }
                },
                mounted: function() {
                    console.log(this.filters);
                    this.init();
                    let mcpSelect = $('<select name="mcp" class="form-control min-width-unset input-sm" provider-search data-pro-uid="{{request()->input('mcp')}}" provider-type="hcp"><option value="">--select--</option></select>').appendTo('.mcp-filter-container');
                    initProSuggest();
                },
            });


        }
        addMCInitializer('admin-points-filters', init, '#admin-points-filters');
    })();
</script>