@extends('layout')

@section('content_title')
    @if($type == 'cytological')
        Citológiai vizsgálatkérő létrehozása
    @endif
    @if($type == 'oncological')
        Onkológiai vizsgálatkérő létrehozása
    @endif
    @if($type == 'dermatopathological')
        Dermatopatológiai vizsgálatkérő létrehozása
    @endif
    @if($type == 'pathological')
        Patológiai vizsgálatkérő létrehozása
    @endif
@endsection

@section('content')
    @if(count($errors))
        <div class="alert alert-danger">Az űrlap kitöltésében hiba található!</div>
    @endif

    <form id="inquiry" action="{{ route('inquiries.store') }}" method="post" autocomplete="off" enctype="multipart/form-data">
        @csrf

        <input type="hidden" name="type" value="{{ $type }}" />
        <input type="hidden" name="had_file" id="hadFile" value="{{ old('had_file', 0) }}" />

        @include('Inquiries.fragments.top')
        @include('Inquiries.fragments.files')
        @if($type == 'cytological')
            @include('Inquiries.fragments.capture')
            @include('Inquiries.fragments.cytological')
        @elseif($type == 'dermatopathological')
            @include('Inquiries.fragments.capture')
            @include('Inquiries.fragments.dermatopathological')
        @elseif($type == 'oncological')
            @include('Inquiries.fragments.capture')
            @include('Inquiries.fragments.oncological')
        @elseif($type == 'pathological')
            @include('Inquiries.fragments.pathological')
        @endif

        <div class="buttons row">
            <div class="offset-sm-1 col-sm-8">
                <button type="button" class="btn btn-primary" id="send">Mentés</button>
                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">Vissza</a>
            </div>
        </div>
    </form>

    <div id="spinnerOverlay" class="d-none justify-content-center align-items-center" style="position:fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.4); z-index:1050;">
        <div class="spinner-border text-light" role="status" style="width:4rem; height:4rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="/css/inquiries.css?202511101002">
    <script language="javascript" type="text/javascript" src="/js/html2canvas.min.js"></script>
    <script src="/js/barcodes.js?202604021809"></script>
    <script>
        @if($type == 'cytological' || $type == 'oncological')
        $(function() {
            let index = {{ count(old('records', [[]])) }};
            const container = $('#records-container');
            container.on('click', '.btn-outline-danger', function(){
                $(this).closest('.record').remove();
            });
            $('#add-record').click(function(){
                const record = container.find('.record:first').clone();
                record.find('.d-none').removeClass('d-none');
                record.find('.btn-primary').remove();
                record.find('label, input, textarea').each((idx, field) => {
                    if (field.tagName === 'LABEL') {
                        field.htmlFor = field.htmlFor.replace(/__\d+/, `__${index}`);
                        return;
                    }
                    if (field.type === 'checkbox' || field.type === 'radio') {
                        field.checked = false;
                    } else {
                        field.value = '';
                    }
                    field.name = field.name.replace(/records\[\d+\]/, `records[${index}]`);
                    field.id = field.id.replace(/__\d+/, `__${index}`);
                    field.classList.remove('is-invalid');
                });
                container.append(record);
                index++;
            });
        });
        @endif;
        $(function () {
            $('input[type=file]').on('change', function () {
                $('#hadFile').val(1);
            });

            $('select.colleague').select2({
                placeholder: 'Állatorvosok',
                language: 'hu',
                ajax: {
                    url: '{{ route('ajax.colleagues') }}?empty=1',
                    dataType: 'json',
                    processResults: function (data, params) {
                        return {
                            results: $.map(data.items, function (obj) {
                                let t = obj.text;
                                if (params.term) {
                                    t = t.replace(new RegExp(params.term, 'gi'), function (t) {
                                        return "<u>" + t + "</u>"
                                    });
                                }
                                return {id: obj.id, text: t, name: obj.text};
                            })
                        }
                    }
                },
                escapeMarkup: function (m) {
                    return m;
                },
            }).on('select2:select', function(e){
                if (e.params.data.id) {
                    $('#veterinarian').val(e.params.data.name);
                }
            });

            BARCODES.init(
                '{{ route('ajax.barcode.create') }}',
                function () {
                    return $('#office').val();
                },
                false
            );

            $('.point').bind('click', function () {
                $(this).toggleClass('selected');
            });

            $('#send').click(async function (e) {
                e.preventDefault();

                @if(old('had_file', 0))
                    let file_count = 0;
                    $('input[type=file]').each(function () {
                        if (this.files.length > 0) {
                            file_count++;
                        }
                    });
                    if (!file_count && confirm('Korábban adott meg állományt\nHa szeretne ismét feltöltni nyomjon OK-t')) {
                        return false;
                    }
                @endif

                if (BARCODES.count() === 0) {
                    alert("Nincs hozzáadott minta!");
                    return;
                }

                let overlay = $('#spinnerOverlay').removeClass('d-none').addClass('d-flex');

                let container = $('.canvas_container').addClass('fixed');

                let selectors = ["#canvas1", "#canvas2", "#canvas3", "#canvas4", "#canvas5"];
                for (const id of selectors) {
                    const element = document.querySelector(id);
                    if (!element) continue;

                    let target = $(`${id}`);
                    let list = []
                    $(`${id} .point`).each(function (i, el) {
                        if ($(el).hasClass('selected')) {
                            list.push(i);
                        }
                    })
                    let el = $('<input type="hidden" name="' + (id.replace('#', '')) + '_points" />')
                        .appendTo(target);
                    el.val(list.join(','));

                    const options = {
                        scrollX: 0,
                        scrollY: 0,
                        useCORS: id === "#canvas1",
                        scale: id === "#canvas1" ? 2 : 1
                    };
                    try {
                        const canvas = await html2canvas(element, options);
                        const imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/jpeg;base64,/, "");
                        let el = $('<input type="hidden" name="' + (id.replace('#', '')) + '_image" />')
                            .appendTo(target);
                        el.val(imageData);
                    } catch (error) {
                        alert(`Error in ${id}:`, error);
                    }
                }

                overlay.removeClass('d-flex').addClass('d-none');

                container.addClass('fixed');

                $('#inquiry').submit();
            });

            $('.species').click(function(){
                if (this.value === 'Egyéb') {
                    $('#species_other').prop('disabled', false).closest('.row').removeClass('d-none');
                } else {
                    $('#species_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                }
            });
            $('.aspiration_sample').click(function(){
                if (this.value === 'Nyirokcsomó') {
                    if (this.checked) {
                        $('#lymph_node').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#lymph_node').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
                if (this.value === 'Egyéb') {
                    if (this.checked) {
                        $('#aspiration_other').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#aspiration_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
            });
            $('.body_fluid').click(function(){
                if (this.value === 'Egyéb') {
                    if (this.checked) {
                        $('#body_fluid_other').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#body_fluid_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
            });
            $('.clinical_appearance').click(function(){
                if (this.value === 'Egyéb') {
                    if (this.checked) {
                        $('#clinical_appearance_other').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#clinical_appearance_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
            });
            $('.steroid_therapy').click(function(){
                if (this.value === 'Egyéb') {
                    if (this.checked) {
                        $('#steroid_therapy_other').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#steroid_therapy_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
            });
            $('.submitted_sample').click(function(){
                if (this.value === 'Egyéb') {
                    if (this.checked) {
                        $('#submitted_sample_other').prop('disabled', false).closest('.row').removeClass('d-none');
                    } else {
                        $('#submitted_sample_other').prop('disabled', true).val('').closest('.row').addClass('d-none');
                    }
                }
            });
        });
    </script>
@endpush