<h5>
    <b>Finding</b> &emsp; &emsp;&emsp;&emsp;&emsp;&emsp; &nbsp;

    {{-- {{fidingtemp($case)}}


 --}}


    @if ($procedure->code != 'gi003S2')
        <button type="button" class="btn btn-checkbox waves-effect waves-light btn-sm mainpart_group" status="Normal">
            <i class=" ri-checkbox-blank-line ri-lg me-2" aria-hidden="true"></i>Normal All</button> &emsp;
        <button type="button" class="btn btn-checkbox waves-effect waves-light btn-sm mainpart_group mainpart_group"
            status="Unremarkable">
            <i class=" ri-checkbox-blank-line ri-lg me-2" aria-hidden="true"></i>Unremarkable All</button>
            @if ($procedure->name == 'ERCP')
            <a href="{{url("procedureadvance/$cid")}}" class="btn btn-checkbox waves-effect waves-light btn-sm" >
                <i class="ri-file-list-line ri-lg me-2" aria-hidden="true"></i>Advance</a>
                @endif
        <br />
    @endif

</h5>
<style>
    .btn-finding {
        background-color: #E0E3E5
    }

    .btn-finding:hover {
        background-color: #acaeaf
    }
    .focus-hide:focus{
        background: #ffffff;
        border: 0px #ffffff;
    }
    /* .textarea:nth-child(2){
        margin-top: 2em;
    } */
</style>

<div class="row">
    <div class="col-12 mt-2">
        @if ($procedure->code == 'gi003S2')
            @include('case.component.ercp.finding_typeofmajor')
            @include('case.component.ercp.finding_Infundibulum')
            @include('case.component.ercp.finding_transverse')
            @include('case.component.ercp.finding_diverticulum')
            @include('case.component.ercp.finding_periampullary')
        @else
            @foreach (@$mainpart as $key => $value)
            {{-- @dd($case->photo_advance["analcanal"]) --}}
                <div class="row" >
                    <div class="col-2 mt-2">
                        {{ $value }}
                    </div>
                    @if (@$project_name == 'capture')
                    <div class="col-auto mt-2 ">
                        <a class="btn border btn-light text_delfind btn_mainpart_na"
                            group_key="{{ $value }}">N/A</a>

                        </div>
                    @else

                    <div class="col-auto mt-2 ">
                        <a class="btn border btn-light text_delfind btn_mainpart_na"
                        group_key="{{ $value }}">N/A</a>
                            @if (@$file_check_advance&&$case->case_procedurecode=="gi002")
                            <button type="button" class="btn border btn-light btn_advance"
                                mainpart="{{ $value }}">Advance</button>
                            @endif

                        </div>
                    @endif
                    <div class="col-8 mt-2">
                        <input type="hidden" name="mainpart_name[]" value="{{ $value }}">
                        <textarea id="mainpart{{ $key }}" rows="1" name="mainpart_value[]" placeholder="Free text"
                            group_name="finding" group_key="{{ $value }}" class="savejsongroup form-control autotext mainpart_text">{{ @$case->mainpart[$value] }}</textarea>
                    </div>
                    <div id="advance_mainpart_{{smalltext($value)}}" class="col-12 advance_mainpart px-5 my-2" text="{{ $value }}" style="display: @if (isset($case->advance[smalltext($value)])) show @else none @endif; border: 1px solid #245788; border-radius: 4px;">
                        <div class="row my-2">
                            <div class="col-6 align-self-center">
                                <span class="text-danger fw-bold"> Advance {{ @$value }}</span>
                                <a class="btn border lesion_add" mainpart="{{smalltext($value)}}">Add Lesion</a>
                            </div>
                        </div>

                        @php
                            $temp = url("");
                            $explode = explode("/", $temp);
                            $end = end($explode);
                        @endphp

                        @if (is_file(webconfig('htdocs_path') . "$end\\resources\\views\\mainpart\\lesion\\$value.blade.php"))
                            @php
                                $view['value'] = $value;
                                $view['case'] = $case;
                                $view['num'] = 1;

                                if(isset($case->advance[smalltext($value)])){
                                    $temparray = $case->advance[smalltext($value)];
                                    $temp2 = [];
                                    foreach ($temparray as $tempkey => $tempvalue) {
                                        $temp2[] = $tempkey;
                                    }
                                    $maxs = max($temp2);
                                    $maxs++;
                                }else{
                                    $maxs = 2;
                                }
                            @endphp
                            @forelse ($case->advance[smalltext($value)]??[] as $key => $val)
                                @php($view['num'] = $key)
                                @component('mainpart.lesion.' . $value,$view) @endcomponent
                            @empty
                                @php($view['num'] = 1)
                                @component('mainpart.lesion.' . $value,$view) @endcomponent
                            @endforelse
                            <div id="theme_{{smalltext($value)}}" style="display: none">
                                @php($view['num'] = 999)
                                @component('mainpart.lesion.'.$value,$view) @endcomponent
                            </div>
                        @else
                            @include('mainpart.lesion.blank')
                        @endif
                    </div>
                    <input type="text" id="num_{{smalltext($value)}}" value="{{ @$maxs }}" class="focus-hide" style="width: 0px;height:0px; background: #ffffff; border: 0px #ffffff;">
                </div>
            @endforeach
        @endif

    </div>

    @if ($procedure->code != 'gi003S2')
        <div class="row" style="padding-right: 0px;">
            <div class="col-2 " style="margin-top: 10px;">
                Overall Finding
            </div>
            <div class="col-10 " style="margin-top: 10px; padding-right: 0px;">
                    <textarea style="overflow:hidden" id='overall_finding' name='formsubmit_overall_finding'
                    class="form-control savejson w-100" type="text" placeholder="Free text">{{ @$case->overall_finding }}</textarea>
            </div>
        </div>
    @endif
</div>


<div class="modal fade" id="modal_lesion_del" tabindex="-1" role="dialog" aria-labelledby="modal_lesion_delLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_lesion_delLabel">Delete Lesion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this lesion?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary modal_lesion_del_hide">Cancel</button>
                <button type="button" class="btn btn-danger modal_lesion_del_hide" id="confirm_lesion_del">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).on('click', '#confirm_lesion_del', function () {
        $.post("{{ url('api/procedure') }}", {
            event: "lesion_delete",
            mainpart: lesion_mainpart,
            lesion: lesion_lesion,
            cid: '{{ $cid }}'
        }, function(d, s) {
            $("#"+lesion_del_div).remove();
        });
    });

    $(document).on('click', '.modal_lesion_del_hide', function () {
        $("#modal_lesion_del").modal("hide");
    });
</script>




<script>
    let lesion_del_div = "";
    let lesion_mainpart = "";
    let lesion_lesion = "";
    $(document).on('click', '.lesion_del', function () {
        let mainpart = $(this).attr("mainpart");
        let lesion = $(this).attr("lesion");
        lesion_mainpart = mainpart;
        lesion_lesion = lesion;
        lesion_del_div = mainpart + lesion;
        $("#modal_lesion_del").modal("show");
    });

    $(document).on('click', '.lesion_add', function () {
        let mainpart = $(this).attr("mainpart");
        let html = $("#theme_" + mainpart).html();
        let num = $("#num_" + mainpart).val();
        $.post("{{ url('api/procedure') }}", {
            event: "lesion_add",
            html:html,
            num: num,
        }, function(d, s) {
            console.log(d);
            $("#advance_mainpart_"+mainpart).append(d);
            $("#num_" + mainpart).focus();
        });
        num++;
        $("#num_" + mainpart).val(num);
    });


    function clickfocus() {
        $(".mainpart_text").focusout()
    }

    $(document).on('focusout', '.advance_phototext', function () {
        let mainpart = $(this).attr("mainpart");
        let photo = $(this).attr("photo");
        let text = $(this).val();
        $.post("{{ url('api/procedure') }}", {
            event: "mainpart_photo_text",
            mainpart: mainpart,
            photo: photo,
            lesion: $(this).attr("lesion"),
            cid: '{{ $cid }}',
            text: text
        }, function(d, s) {});
    });

    $(document).on('focusout', '.advance_text', function () {
        $.post("{{ url('api/procedure') }}", {
            cid: '{{ $cid }}',
            event: "mainpart_text",
            mainpart: $(this).attr("mainpart"),
            lesion: $(this).attr("lesion"),
            component_name: $(this).attr("component_name"),
            text: $(this).val(),
        }, function(d, s) {});
    });

    $(document).on('click', '.advance_checkbox', function () {
        let group = $(this).attr("group");
        let lesion = $(this).attr("lesion");
        let mainpart = $(this).attr("mainpart");
        let component_name = $(this).attr("component_name");
        let checkall = [];
        $("input[mainpart='" + mainpart + "'][group='" + group + "'][lesion='" + lesion + "']").each(function() {
            if ($(this).prop("checked")) {
                checkall.push($(this).val());
            }
        });
        $.post("{{ url('api/procedure') }}", {
            event: "mainpart_checkbox",
            cid: '{{ $cid }}',
            mainpart: $(this).attr("mainpart"),
            lesion: $(this).attr("lesion"),
            group: $(this).attr("group"),
            component_name: $(this).attr("component_name"),
            checkall: checkall
        }, function(d, s) {});
    });

    $(document).ready(function () {
        var text = $('#overall_finding').val();
        text = text.replace(/^\s*$(?:\r\n?|\n)/gm, "");
        $('#overall_finding').val(text);
    });

</script>


<script>
    $(".btn_advance").click(function() {
        var mainpart = $(this).attr("mainpart")
        $(".advance_mainpart[text='" + mainpart + "']").toggle(300);
    })
</script>

<script>
    $(".mainpart_text").focusout(function() {
        restore_finding()
        $.post("{{ url('api/mainpart') }}", {
            event: "mainpart_update",
            group_key: $(this).attr("group_key"),
            value: $(this).val(),
            cid: "{{ $cid }}"
        }, function(data, status) {});
    });

    $(".mainpart_group").click(function() {
        const group = [];
        var value = $(this).attr("status");
        $(".mainpart_text").val(value);
        $(".mainpart_text").each(function() {
            $(this).focus();

            group.push($(this).attr("group_key"));
        });
        restore_finding()
        $.post("{{ url('api/mainpart') }}", {
            event: "mainpart_update_group",
            group: group,
            value: value,
            cid: "{{ $cid }}"
        }, function(data, status) {});
    });

    $(".btn_mainpart_na").click(function() {
        var group_key = $(this).attr("group_key");
        console.log(group_key);
        $("textarea[group_key='" + group_key + "']").val("N/A");
        restore_finding()
        $.post("{{ url('api/mainpart') }}", {
            event: "mainpart_update",
            group_key: group_key,
            value: "N/A",
            cid: "{{ $cid }}"
        }, function(data, status) {});
    });

    function restore_finding() {
        let sub = []
        for (let i = 0; i < $('.mainpart_text').length; i++) {
            let inp_val = $($('.mainpart_text')[i]).val()
            inp_val = inp_val != undefined && inp_val != '' ? inp_val : ''
            sub.push(inp_val)
        }

        let retString = localStorage.getItem("{{ $cid }}")
        let obj = {}
        if (retString != null) {
            obj = JSON.parse(retString)
        }
        obj['finding'] = sub
        console.log(obj);
        let text = JSON.stringify(obj);
        localStorage.setItem("{{ $cid }}", text);
    }
</script>
