@extends('layout')

@section('content_title')
    Rendelők listája
@endsection

@section('top_button')
    <a class="btn btn-labeled btn-outline-primary" href="{{ route('offices.create') }}"><span class="btn-label btn-label-spaced"><i class="fa fa-plus"></i>Új rögzítés</span></a>
@endsection

@section('content')
    <form action="{{ route('offices.filter') }}" class="filter" method="post">
        @csrf
        <div class="dflex aifend">
            <div class="form-row align-items-end f1">
                <div class="form-group col">
                    <input type="text" class="form-control" name="name" id="name" value="{{ old('name', $filter['name']) }}" placeholder="Név">
                </div>
                <div class="form-group col">
                    <div class="row">
                        <div class="col-6 pr-1">
                            <input data-datetime="true" data-datetime-only-date="true" type="text" name="date_from" id="date_from" class="form-control datepicker" value="{{ old('date_from', $filter['date_from']) }}" placeholder="szerződés kezdete">
                        </div>
                        <div class="col-6 pl-1">
                            <input data-datetime="true" data-datetime-only-date="true" type="text" name="date_to" id="date_to" class="form-control datepicker" value="{{ old('date_to', $filter['date_to']) }}" placeholder="szerződés vége">
                        </div>
                    </div>
                </div>
                <div class="form-group col">
                    {!! html_select('county', select2_value('county', old('county', $filter['county'])), old('county', $filter['county']), $errors, false, 'form-control county') !!}
                </div>
                <div class="form-group col">
                    {!! html_select('city', select2_value('city', old('city', $filter['city'])), old('city', $filter['city']), $errors, false, 'form-control city') !!}
                </div>
                <div class="form-group col">
                    <input type="text" class="form-control" name="address" id="address" value="{{ old('address', $filter['address']) }}" placeholder="Cím">
                </div>
                <div class="form-group col">
                    {!! html_select('enabled', $filter['enabled_list'], old('enabled', $filter['enabled']), $errors, false, 'form-control enabled') !!}
                </div>
                <div class="form-group col">
                    {!! html_select('contract', $filter['contract_list'], old('contract', $filter['contract']), $errors, false, 'form-control contract') !!}
                </div>
            </div>
            <div class="dflex aicenter">
                <button class="btn btn-sm btn-primary">Keresés</button>
                <button class="btn btn-sm btn-outline-primary" name="clear">Törlés</button>
            </div>
        </div>
    </form>
    <table class="table table-striped datatable-basic">
        <thead>
        <tr>
            <th>Név</th>
            <th>Postázási cím</th>
            <th>Számlázási cím</th>
            <th>Szerződés</th>
            <th>Szerződés kezdete</th>
            <th width="60" class="text-center">&nbsp;</th>
        </tr>
        </thead>
    </table>
@endsection

@push('scripts')
    <script>
        $(function() {
            $('.datatable-basic').DataTable({
                orderCellsTop: true,
                fixedHeader: true,
                language: {
                    url: '/js/datatable_hu.json'
                },
                pageLength: 30,
                dom: '<"datatable-scroll"t><"datatable-footer"ip>',
                processing: true,
                serverSide: true,
                stateSave: true,
                ajax: {
                    url: '{{ route('offices.data') }}',
                    type: 'POST'
                },
                columns: [
                    {data: 'name', name: 'o.name'},
                    {
                        data: 'post_address', name: 'o.post_address', sortable: false, render: function (data, type, row) {
                            return (row.post_zip?row.post_zip + ' ':'') + (row.post_city??'') + (row.post_address?', ':' ') + (row.post_address??'');
                        }
                    },
                    {
                        data: 'billing_address', name: 'o.billing_address', sortable: false, render: function (data, type, row) {
                            return (row.billing_zip?row.billing_zip + ' ':'') + (row.billing_city??'') + (row.billing_address?', ':' ') + (row.billing_address??'');
                        }
                    },
                    {
                        data: 'contract', name: 'o.contract', render: function (data, type, row) {
                            return data ? 'igen' : 'nem';
                        }
                    },
                    {data: 'contract_start', name: 'o.contract_start'},
                    {data: 'actions', searchable: false, sortable: false, className: 'text-center nowrap'}
                ],
                order: [[0, 'asc']]
            });
            PLUGINS.select2('.county', 'Megye', '{{ route('ajax.counties') }}?empty=1');
            PLUGINS.select2('.city', 'Település', '{{ route('ajax.cities') }}?empty=1');
        });
    </script>
@endpush