<?php
$url = route('admin.users');
?>
<style>
    #recordsFilter label {
        font-weight: bold;
    }

    #recordsFilter .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: 15px;
    }

    .filter-container .select2-container {
        max-width: 150px;
    }
</style>
<form id="recordsFilter" method="GET" action="{{ $url }}" class="filter-container align-items-end mb-3" v-cloak>
    <div class="border p-2">
        <h6 class="mb-1"><b>Customer Properties:</b></h6>
        <div class="d-flex flex-wrap justify-content-start">
            <div class="form-group mb-0 me-2">
                <label class="text-secondary text-sm mb-1">Name</label>
                <input name="customer_name"
                    class="d-block p-1 border border-secondary max-width-110px bg-white width-100px"
                    v-model="filters.customer_name" />
            </div>
            <div class="form-group mb-0 me-2">
                <label class="text-secondary text-sm mb-1">Payment Profile?</label>
                <select name="payment_profile"
                    class="d-block p-1 border border-secondary max-width-110px bg-white width-100px"
                    v-model="filters.payment_profile" select2_>
                    <option value=""></option>
                    <option value="YES">Yes</option>
                    <option value="NO">No</option>
                </select>
            </div>
        </div>
    </div>

    <div class="">
        <div class="form-group mb-0">
            <label>&nbsp;</label>
            <div class="d-flex align-items-center">
                <button type="submit" v-on:click.prevent="doSubmit()"
                    class="btn btn-sm btn-primary btn-sm mr-2">Filter</button>
                <a href="#" v-on:click.prevent="fastLoad('{{ $url }}')"
                    class="btn btn-link btn-sm text-danger">Clear Filters</a>
            </div>
        </div>
    </div>
</form>

<?php
$loadedFilters = $filters;
$allFilterKeys = ['payment_profile', 'customer_name'];
for ($i = 0; $i < count($allFilterKeys); $i++) {
    if (!isset($loadedFilters[$allFilterKeys[$i]]) || !$loadedFilters[$allFilterKeys[$i]]) {
        $loadedFilters[$allFilterKeys[$i]] = '';
    }
}
?>

<script>
    $(document).ready(function() {
        new Vue({
            el: '#recordsFilter',
            delimiters: ['@{{ ', ' }}'],
            data: {
                filters: <?= json_encode($loadedFilters) ?>
            },
            methods: {
                doSubmit: function() {
                    fastLoad('{{ $url }}?' + $('#recordsFilter').serialize());
                    return false;
                },
                initSelect2: function() {
                    $('[select2]').select2({
                        width: '150px'
                    });
                },
                init: function() {
                    this.initSelect2();

                }
            },
            mounted: function() {
                this.init();
            },
        });
    });
</script>
