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

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Loyverse Receipts</h1>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="container-fluid">
            <div class="card card-outline card-info">
                <div class="card-body">
                    <div class="form-group row mb-4">
                        <div class="loyverse-account col-sm-12 col-lg-6">
                            <label class="col-form-label float-left">Loyverse Account</label>
                            <div class="control col-sm-6 float-left">
                                <select id="loyverse_account_filter" name="account_id" class="form-control" autocomplete="off">
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}"{{ $accounts->count() == 1 ? ' selected' : ''}}>{{ $account->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @php
                        echo $grid->toHtml();
                    @endphp
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script type="text/javascript">
    var receiptGrid;

    $('#loyverse_account_filter').select2({theme: 'bootstrap4', width: '100%'});

    $('body').on('gridLoaded', function(event, gridId, grid) {
        if (gridId == 'loyverse_receipt') {
            receiptGrid = grid;
        }
    });

    $('body').on('gridSearchBefore', function(event, gridId, filterForm, additionalPostData) {
        if (gridId == 'loyverse_receipt' && $('#loyverse_account_filter').length > 0 && $('#loyverse_account_filter').val() != '') {
            additionalPostData['account_id'] = $('#loyverse_account_filter').val();
        }
    });

    $('body').on('gridExportBefore', function(event, gridId, filterForm, additionalPostData) {
        if (gridId == 'loyverse_receipt' && $('#loyverse_account_filter').length > 0 && $('#loyverse_account_filter').val() != '') {
            additionalPostData['account_id'] = $('#loyverse_account_filter').val();
        }
    });

    $('#loyverse_account_filter').change(function() {
        if (receiptGrid) {
            receiptGrid.search();
        }
    });

    $(document).ready(function() {
        if ($('#loyverse_account_filter > option').length == 1) {
            receiptGrid.search();
        }
    });
</script>
@endpush