@extends('layout', ['hide_menu' => true, 'id' => $regbook->id])

@section('top_button')
    <a href="{{ url()->previous() }}" class="btn btn-outline-secondary mr-2">Vissza</a>
    <button id="save" type="button" class="btn btn-primary" name="save">Mentés</button>
@endsection

@section('content_title')
    Indítás - {{ $regbook->reg_number }}
@endsection

@section('content')
    <form class="h-100" action="{{ route('histology.processing.store', ['registration_book' => $regbook->id]) }}" method="post" autocomplete="off">
        @csrf
        <table class="table w-100 h-100">
            <tr>
                <th width="25%">Beérkezett (külön jelölt) minták száma/jelölése</th>
                <td width="15%" colspan="3" data-type="text"><span>{{ $records['case_id'][1] }}</span><input type="hidden" name="case_id[1]" value="{{ $records['case_id'][1] }}"></td>
                <td width="15%" colspan="3" data-type="text"><span>{{ $records['case_id'][2] }}</span><input type="hidden" name="case_id[2]" value="{{ $records['case_id'][2] }}"></td>
                <td width="15%" colspan="3" data-type="text"><span>{{ $records['case_id'][3] }}</span><input type="hidden" name="case_id[3]" value="{{ $records['case_id'][3] }}"></td>
                <td width="15%" colspan="3" data-type="text"><span>{{ $records['case_id'][4] }}</span><input type="hidden" name="case_id[4]" value="{{ $records['case_id'][4] }}"></td>
                <td width="15%" colspan="3" data-type="text"><span>{{ $records['case_id'][5] }}</span><input type="hidden" name="case_id[5]" value="{{ $records['case_id'][5] }}"></td>
            </tr>
            <tr>
                <th>Mintaszám (db)</th>
                <td data-type="number"><span>{{ $records['sample_count_1'][1] }}</span><input type="hidden" name="sample_count_1[1]" value="{{ $records['sample_count_1'][1] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_2'][1] }}</span><input type="hidden" name="sample_count_2[1]" value="{{ $records['sample_count_2'][1] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_3'][1] }}</span><input type="hidden" name="sample_count_3[1]" value="{{ $records['sample_count_3'][1] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_1'][2] }}</span><input type="hidden" name="sample_count_1[2]" value="{{ $records['sample_count_1'][2] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_2'][2] }}</span><input type="hidden" name="sample_count_2[2]" value="{{ $records['sample_count_2'][2] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_3'][2] }}</span><input type="hidden" name="sample_count_3[2]" value="{{ $records['sample_count_3'][2] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_1'][3] }}</span><input type="hidden" name="sample_count_1[3]" value="{{ $records['sample_count_1'][3] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_2'][3] }}</span><input type="hidden" name="sample_count_2[3]" value="{{ $records['sample_count_2'][3] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_3'][3] }}</span><input type="hidden" name="sample_count_3[3]" value="{{ $records['sample_count_3'][3] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_1'][4] }}</span><input type="hidden" name="sample_count_1[4]" value="{{ $records['sample_count_1'][4] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_2'][4] }}</span><input type="hidden" name="sample_count_2[4]" value="{{ $records['sample_count_2'][4] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_3'][4] }}</span><input type="hidden" name="sample_count_3[4]" value="{{ $records['sample_count_3'][4] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_1'][5] }}</span><input type="hidden" name="sample_count_1[5]" value="{{ $records['sample_count_1'][5] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_2'][5] }}</span><input type="hidden" name="sample_count_2[5]" value="{{ $records['sample_count_2'][5] }}"></td>
                <td data-type="number"><span>{{ $records['sample_count_3'][5] }}</span><input type="hidden" name="sample_count_3[5]" value="{{ $records['sample_count_3'][5] }}"></td>
            </tr>
            <tr>
                <th>További fixálás</th>
                <td data-type="text"><span>{{ $records['additional_fixation_1'][1] }}</span><input type="hidden" name="additional_fixation_1[1]" value="{{ $records['additional_fixation_1'][1] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_2'][1] }}</span><input type="hidden" name="additional_fixation_2[1]" value="{{ $records['additional_fixation_2'][1] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_3'][1] }}</span><input type="hidden" name="additional_fixation_3[1]" value="{{ $records['additional_fixation_3'][1] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_1'][2] }}</span><input type="hidden" name="additional_fixation_1[2]" value="{{ $records['additional_fixation_1'][2] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_2'][2] }}</span><input type="hidden" name="additional_fixation_2[2]" value="{{ $records['additional_fixation_2'][2] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_3'][2] }}</span><input type="hidden" name="additional_fixation_3[2]" value="{{ $records['additional_fixation_3'][2] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_1'][3] }}</span><input type="hidden" name="additional_fixation_1[3]" value="{{ $records['additional_fixation_1'][3] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_2'][3] }}</span><input type="hidden" name="additional_fixation_2[3]" value="{{ $records['additional_fixation_2'][3] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_3'][3] }}</span><input type="hidden" name="additional_fixation_3[3]" value="{{ $records['additional_fixation_3'][3] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_1'][4] }}</span><input type="hidden" name="additional_fixation_1[4]" value="{{ $records['additional_fixation_1'][4] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_2'][4] }}</span><input type="hidden" name="additional_fixation_2[4]" value="{{ $records['additional_fixation_2'][4] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_3'][4] }}</span><input type="hidden" name="additional_fixation_3[4]" value="{{ $records['additional_fixation_3'][4] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_1'][5] }}</span><input type="hidden" name="additional_fixation_1[5]" value="{{ $records['additional_fixation_1'][5] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_2'][5] }}</span><input type="hidden" name="additional_fixation_2[5]" value="{{ $records['additional_fixation_2'][5] }}"></td>
                <td data-type="text"><span>{{ $records['additional_fixation_3'][5] }}</span><input type="hidden" name="additional_fixation_3[5]" value="{{ $records['additional_fixation_3'][5] }}"></td>
            </tr>
            <tr>
                <th>Dekalcinálás</th>
                <td data-type="text"><span>{{ $records['decalcification_1'][1] }}</span><input type="hidden" name="decalcification_1[1]" value="{{ $records['decalcification_1'][1] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_2'][1] }}</span><input type="hidden" name="decalcification_2[1]" value="{{ $records['decalcification_2'][1] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_3'][1] }}</span><input type="hidden" name="decalcification_3[1]" value="{{ $records['decalcification_3'][1] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_1'][2] }}</span><input type="hidden" name="decalcification_1[2]" value="{{ $records['decalcification_1'][2] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_2'][2] }}</span><input type="hidden" name="decalcification_2[2]" value="{{ $records['decalcification_2'][2] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_3'][2] }}</span><input type="hidden" name="decalcification_3[2]" value="{{ $records['decalcification_3'][2] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_1'][3] }}</span><input type="hidden" name="decalcification_1[3]" value="{{ $records['decalcification_1'][3] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_2'][3] }}</span><input type="hidden" name="decalcification_2[3]" value="{{ $records['decalcification_2'][3] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_3'][3] }}</span><input type="hidden" name="decalcification_3[3]" value="{{ $records['decalcification_3'][3] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_1'][4] }}</span><input type="hidden" name="decalcification_1[4]" value="{{ $records['decalcification_1'][4] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_2'][4] }}</span><input type="hidden" name="decalcification_2[4]" value="{{ $records['decalcification_2'][4] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_3'][4] }}</span><input type="hidden" name="decalcification_3[4]" value="{{ $records['decalcification_3'][4] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_1'][5] }}</span><input type="hidden" name="decalcification_1[5]" value="{{ $records['decalcification_1'][5] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_2'][5] }}</span><input type="hidden" name="decalcification_2[5]" value="{{ $records['decalcification_2'][5] }}"></td>
                <td data-type="text"><span>{{ $records['decalcification_3'][5] }}</span><input type="hidden" name="decalcification_3[5]" value="{{ $records['decalcification_3'][5] }}"></td>
            </tr>
            <tr>
                <th>Fotó</th>
                <td data-type="image" data-index="1_1"><span>{{ $records['photo_count_1'][1] }}</span><input type="hidden" name="photo_count_1[1]" value="{{ $records['photo_count_1'][1] }}"></td>
                <td data-type="image" data-index="1_2"><span>{{ $records['photo_count_2'][1] }}</span><input type="hidden" name="photo_count_2[1]" value="{{ $records['photo_count_2'][1] }}"></td>
                <td data-type="image" data-index="1_3"><span>{{ $records['photo_count_3'][1] }}</span><input type="hidden" name="photo_count_3[1]" value="{{ $records['photo_count_3'][1] }}"></td>
                <td data-type="image" data-index="2_1"><span>{{ $records['photo_count_1'][2] }}</span><input type="hidden" name="photo_count_1[2]" value="{{ $records['photo_count_1'][2] }}"></td>
                <td data-type="image" data-index="2_2"><span>{{ $records['photo_count_2'][2] }}</span><input type="hidden" name="photo_count_2[2]" value="{{ $records['photo_count_2'][2] }}"></td>
                <td data-type="image" data-index="2_3"><span>{{ $records['photo_count_3'][2] }}</span><input type="hidden" name="photo_count_3[2]" value="{{ $records['photo_count_3'][2] }}"></td>
                <td data-type="image" data-index="3_1"><span>{{ $records['photo_count_1'][3] }}</span><input type="hidden" name="photo_count_1[3]" value="{{ $records['photo_count_1'][3] }}"></td>
                <td data-type="image" data-index="3_2"><span>{{ $records['photo_count_2'][3] }}</span><input type="hidden" name="photo_count_2[3]" value="{{ $records['photo_count_2'][3] }}"></td>
                <td data-type="image" data-index="3_3"><span>{{ $records['photo_count_3'][3] }}</span><input type="hidden" name="photo_count_3[3]" value="{{ $records['photo_count_3'][3] }}"></td>
                <td data-type="image" data-index="4_1"><span>{{ $records['photo_count_1'][4] }}</span><input type="hidden" name="photo_count_1[4]" value="{{ $records['photo_count_1'][4] }}"></td>
                <td data-type="image" data-index="4_2"><span>{{ $records['photo_count_2'][4] }}</span><input type="hidden" name="photo_count_2[4]" value="{{ $records['photo_count_2'][4] }}"></td>
                <td data-type="image" data-index="4_3"><span>{{ $records['photo_count_3'][4] }}</span><input type="hidden" name="photo_count_3[4]" value="{{ $records['photo_count_3'][4] }}"></td>
                <td data-type="image" data-index="5_1"><span>{{ $records['photo_count_1'][5] }}</span><input type="hidden" name="photo_count_1[5]" value="{{ $records['photo_count_1'][5] }}"></td>
                <td data-type="image" data-index="5_2"><span>{{ $records['photo_count_2'][5] }}</span><input type="hidden" name="photo_count_2[5]" value="{{ $records['photo_count_2'][5] }}"></td>
                <td data-type="image" data-index="5_3"><span>{{ $records['photo_count_3'][5] }}</span><input type="hidden" name="photo_count_3[5]" value="{{ $records['photo_count_3'][5] }}"></td>
            </tr>
            <tr>
                <th>Blokkszám (db)</th>
                <td data-type="number"><span>{{ $records['block_count_1'][1] }}</span><input type="hidden" name="block_count_1[1]" value="{{ $records['block_count_1'][1] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_2'][1] }}</span><input type="hidden" name="block_count_2[1]" value="{{ $records['block_count_2'][1] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_3'][1] }}</span><input type="hidden" name="block_count_3[1]" value="{{ $records['block_count_3'][1] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_1'][2] }}</span><input type="hidden" name="block_count_1[2]" value="{{ $records['block_count_1'][2] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_2'][2] }}</span><input type="hidden" name="block_count_2[2]" value="{{ $records['block_count_2'][2] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_3'][2] }}</span><input type="hidden" name="block_count_3[2]" value="{{ $records['block_count_3'][2] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_1'][3] }}</span><input type="hidden" name="block_count_1[3]" value="{{ $records['block_count_1'][3] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_2'][3] }}</span><input type="hidden" name="block_count_2[3]" value="{{ $records['block_count_2'][3] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_3'][3] }}</span><input type="hidden" name="block_count_3[3]" value="{{ $records['block_count_3'][3] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_1'][4] }}</span><input type="hidden" name="block_count_1[4]" value="{{ $records['block_count_1'][4] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_2'][4] }}</span><input type="hidden" name="block_count_2[4]" value="{{ $records['block_count_2'][4] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_3'][4] }}</span><input type="hidden" name="block_count_3[4]" value="{{ $records['block_count_3'][4] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_1'][5] }}</span><input type="hidden" name="block_count_1[5]" value="{{ $records['block_count_1'][5] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_2'][5] }}</span><input type="hidden" name="block_count_2[5]" value="{{ $records['block_count_2'][5] }}"></td>
                <td data-type="number"><span>{{ $records['block_count_3'][5] }}</span><input type="hidden" name="block_count_3[5]" value="{{ $records['block_count_3'][5] }}"></td>
            </tr>
            <tr>
                <th>Összblokkszám</th>
                <td colspan="15" data-type="number"><span>{{ $generals['total_block_count'] }}</span><input type="hidden" name="total_block_count" value="{{ $generals['total_block_count'] }}"></td>
            </tr>
            <tr>
                <td colspan="16" height="100%" class="p-0 m-0 position-relative">
                    <div class="position-absolute" style="right: 10px; top: 10px">
                        <button type="button" id="drawCanvas" class="btn btn-sm btn-outline-primary"><i class="fa fa-pencil"></i></button>
                        <button type="button" id="eraseCanvas" class="btn btn-sm btn-outline-danger"><i class="fa fa-eraser"></i></button>
                        <button type="button" id="clearCanvas" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                    </div>
                    <div class="drawing-area w-100 h-100"><canvas id="canvas"></canvas></div>
                </td>
            </tr>
        </table>

        <input type="hidden" name="image" id="image" value="{{ $generals['image'] }}">
    </form>

    <div class="modal" id="dataModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataModalTitle">Érték megadása</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="dataModalValue" class="col-sm-2 col-form-label">Érték</label>
                        <div class="col-sm-10">
                            <input type="number" id="dataModalValue" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
                    <button type="button" class="btn btn-primary" id="dataModalSave">Rögzítés</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-xl" id="videoModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Fotó készítése</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img id="videoModalImage" style="display: block; width: 100%; max-width: 900px;margin: 0 auto;"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
                    <button type="button" class="btn btn-primary" id="videoModalSave">Fotó készítése</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <style>
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
            overscroll-behavior: none;
            position: fixed;
            inset: 0;
            -webkit-touch-callout: none;
        }
        body {
            touch-action: none;
        }
        body .container-fluid {
            height: calc(100vh - 155px);
        }
        table.table th:first-child {
            border-radius: unset;
        }
        #canvas {
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            width: 100%;
            height: 100%;
        }
        table.table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-color: #bababa;
        }
    </style>
    <script src="/js/draw.js?202607141200"></script>
    <script src="/js/cam.js?202607131433"></script>
    <script>
        DRAW.init(@json($generals['image']));
        $('#save').click(function () {
            $('#image').val(DRAW.get());
            $('form').submit();
        });

        let modalInfo = {el: null, title: null, value: null, type: null}
        $('table td[data-type=number], table td[data-type=text]').click(function (e) {
            e.preventDefault()
            modalInfo.el = $(this);
            modalInfo.title = modalInfo.el.parent().find('th').text()
            modalInfo.value = modalInfo.el.find('input').val()
            modalInfo.type = modalInfo.el.data('type')
            $('#dataModal').modal({backdrop: 'static', keyboard: false}, 'show')
            $('#dataModalValue').focus();
        })
        $('#dataModal').on('show.bs.modal', function () {
            $('#dataModalTitle').text(modalInfo.title);
            $('#dataModalValue').prop('type', modalInfo.type).val(modalInfo.value);
        });
        $('#dataModalSave').click(function () {
            let value = $('#dataModalValue').val()
            modalInfo.el.find('span').text(value);
            modalInfo.el.find('input').val(value);
            $('#dataModal').modal('hide')
        });

        CAM.init('wss://{{ ENV('CAM_URL') }}');
        $('table td[data-type=image]').click(function () {
            modalInfo.el = $(this);
            modalInfo.value = modalInfo.el.find('input').val() * 1
            $('#videoModal').modal({backdrop: 'static', keyboard: false}, 'show')
        });
        $('#videoModal').on('show.bs.modal', function () {
            CAM.startVideo();
        }).on('hide.bs.modal', function () {
            CAM.stopVideo();
            $('#videoModalImage').empty();
        });
        $('#videoModalSave').click(function () {
            const button = $(this);
            button.data('text', button.text());
            button.prop('disabled', true).text('Mentés...');
            CAM.takePhoto(async function (error, image) {
                if (error) {
                    alert(error.message);
                } else {
                    CAM.stopVideo();

                    let index = modalInfo.el.data('index');
                    await upload(index, image)

                    $('#videoModal').modal('hide')
                }
                button.prop('disabled', false).text(button.data('text'));
            });
        });

        async function upload(index, content) {
            $.ajax({
                url: '{{ route('histology.processing.upload', ['registration_book' => $regbook->id]) }}',
                type: "POST",
                data: {index: index, content: content},
                success: function (response) {
                    modalInfo.el.find('span').text(response.count);
                    modalInfo.el.find('input').val(response.count);
                },
                error: function (xhr) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
@endpush