@extends('layout')

@section('content_title')
    Vizsgálatkérések \ Vonalkód feldolgozás
@endsection

@section('top_button')
@endsection

@section('content')
    <div class="mb-4">
        <div class="alert alert-info d-none alert-1">
            Vonalkód felolvasás sikeres, vizsgálatkérő beazonosítva.
        </div>
        <div class="alert alert-danger d-none alert-2">
            Vonalkód felolvasás sikeres, kapcsolódó vizsgálatkérő már iktatókönyhöz van rendelve.
        </div>
        <div class="alert alert-danger d-none alert-3">
            Vonalkód felolvasás már korábban megtörtént.
        </div>
        <div class="alert alert-danger d-none alert-4">
            Vonalkód felolvasás ismeretlen / nincs felhasználva.
        </div>
        <form id="barcode_lookup" action="{{ route('inquiries.barcodes.lookup') }}">
            <div class="d-flex">
                <input name="barcode" type="text" class="form-control mr-2" placeholder="Vonalkód" autofocus
                       autocomplete="off">
                <button type="submit" class="btn btn-primary">Ellenőrzés</button>
            </div>
        </form>
    </div>
    <form action="{{ route('inquiries.transfer') }}" method="POST">
        @csrf
        <button class="mb-2 btn btn-sm btn-primary">Kijelölt iktatókönyvek átemelése</button>
        <table class="table table-striped datatable-basic">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>ID</th>
                <th>Vonalkódok</th>
                <th>Űrlap</th>
                <th>Rendelő neve</th>
                <th>Beküldő állatorvos</th>
                <th>Tulajdonos neve</th>
                <th>Állat neve/jelölése</th>
                <th>Beküldés dátuma</th>
                <th width="180">Képek</th>
                <th width="160" class="text-right">&nbsp;</th>
            </tr>
            </thead>
        </table>
        <button class="mt-2 btn btn-sm btn-primary">Kijelölt iktatókönyvek átemelése</button>
    </form>

    @include('Inquiries.modal')
@endsection

@push('scripts')
    <script>
        $(function () {
            let form = $('#barcode_lookup');
            form.on('submit', function () {
                let input = form.find('input');
                form.parent('.alert').addClass('d-none');
                $.ajax({
                    type: 'POST',
                    url: form.attr('action'),
                    data: {barcode: input.val()},
                    success: function (data) {
                        input.val('');
                        $('.alert-' + data.status).removeClass('d-none');
                        if (data.status === 1) {
                            table.ajax.reload();
                        }
                    }, error: function (xhr, ajaxOptions, thrownError) {
                    }
                });
                return false;
            });

            let table = $('.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('inquiries.barcodes.data') }}',
                    type: 'POST'
                },
                columns: [
                    {
                        data: 'id', sortable: false, render: function (data, type, row) {
                            return row.status == 0 ? '<input type="checkbox" name="ids[]" value="' + data + '">' : '&nbsp;';
                        }
                    },
                    {data: 'id'},
                    {data: 'barcodes_total', render: function (data, type, row) {
                            return row.barcodes_readed + ' / ' + data;
                        }
                    },
                    {data: 'type'},
                    {data: 'office_name'},
                    {
                        data: 'veterinarian', render: function (data, type, row) {
                            return row.veterinarian + (row.email ? '<br />(' + row.email + ')' : '');
                        }
                    },
                    {data: 'owner_name'},
                    {data: 'animal_name'},
                    {data: 'created_at'},
                    {
                        data: 'file1', render: function (data, type, row) {
                            let html = [];
                            if (row.file1) {
                                html.push('<a href="/storage/' + row.file1 + '" target="_blank" class="btn btn-sm btn-primary">Fájl 1</a>');
                            }
                            if (row.file2) {
                                html.push('<a href="/storage/' + row.file2 + '" target="_blank" class="btn btn-sm btn-primary">Fájl 2</a>');
                            }
                            if (row.file3) {
                                html.push('<a href="/storage/' + row.file3 + '" target="_blank" class="btn btn-sm btn-primary">Fájl 3</a>');
                            }
                            return html.join('&nbsp;');
                        }
                    },
                    {data: 'actions', searchable: false, sortable: false, className: 'text-center nowrap'}
                ],
                order: [[1, 'desc']]
            });
        });
    </script>
@endpush