@php
$view['json']           = $json;
$view['mainpartsub']    = $mainpartsub;
@endphp
<style>
    .permanent{
        overflow-y: auto;
    }
    .permanent::-webkit-scrollbar {
        width: 20px;
    }

    /* Track */
    .permanent::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    .permanent::-webkit-scrollbar-thumb {
        background: #0071bb;
        border-radius: 10px;
    }

    /* Handle on hover */
    .permanent::-webkit-scrollbar-thumb:hover {
        background: #055386;
    }
</style>
<div class="row">
    <div class="col-5">
        <div class="row">
            <div class="scrollbar-rail">
                @php
                    $count_pt = 0;
                    foreach($photoselect as $photo){
                        if($photo['ns']!=0){
                            $count_pt++;
                        }
                    }
                @endphp

                <div class="row permanent" style="@if($count_pt>=5) height:800px; @endif padding: 20px;">

                    @php
                        $image_info = getimagesize(mePHOTO($case->case_hn,$case->caseuniq.".jpg",$folderdate));
                    @endphp
                    <div class="col-6">
                        <a href="#" class="btn btn-success btn-sm rounded-0 p-1" style="position: absolute;" data-toggle="modal" data-target="#modal_photo_re"><i class="far fa-folder-open"></i></a>
                        <img src="{{mePHOTO($case->case_hn,$case->caseuniq.".jpg",$folderdate)}}?a={{RandomString()}}" img_height="{{$image_info[1]}}px" img_width="{{$image_info[0]}}px" photoname="{{$case->caseuniq.".jpg"}}" width="100%"  class="img-thumbnail img_draw">
                    </div>
                    @foreach($photoselect as $photo)
                        @if($photo['ns']!=0)
                        <div id="divselect{{$photo['nu']}}" class="col-6">
                            <table width="100%">
                                <tr>
                                    <td style="border: 1px solid black;height:20px" align="center">
                                        {{$photo['nu']}}
                                    </td>
                                    @php
                                        $image_info = getimagesize(mePHOTO($case->hn,$photo['na'],$folderdate));
                                    @endphp

                                    <td rowspan="7" style="border: 1px solid black;">
                                            <img
                                            src         = "{{mePHOTO($case->hn,$photo['na'],$folderdate)}}?a={{RandomString()}}"
                                            photoname   = "{{$photo['na']}}"
                                            img_height  = "{{$image_info[1]}}"
                                            img_width   = "{{$image_info[0]}}"
                                            width       = "100%"
                                            class       = "img-thumbnail"
                                            id          = "photoselect{{$photo['nu']}}"
                                            >
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid black;height:20px;" align="center">
                                        <img src="{{url('public/images/icon/drawing.png')}}" width="20px" data-toggle="tooltip" title="Drawing" photoname="{{$photo['na']}}" class="img-thumbnail2">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid black;height:20px;" align="center">
                                        <a href="{{url("crop?cid=$case->case_id&hn=$case->hn&folderdate=$folderdate&photoname=".$photo['na'])}}">
                                            <img src="{{url('public/images/icon/crop_icon.png')}}" width="20px"  data-toggle="tooltip" title="crop">
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid black;height:20px;" align="center">
                                        <a class="deselect" photo_number="{{$photo['nu']}}">
                                            <img src="{{url('public/images/icon/trash_blue.png')}}" width="20px"  data-toggle="tooltip" title="delete">
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                </tr>
                            </table>
                            @php
                                $photoattr['class']     = 'form-control selectmainsub';
                                $photoattr['id']        = 'selectmainsub'.$photo['nu'];
                                $photoattr['cid']       = $cid;
                                $photoattr['photo_id']  = $photo['nu'];
                            @endphp
                            {!! Form::select('',array(''=>'Select')+array_pluck($mainpartsub,'mainpartsub_name','mainpartsub_id'),$photo['sc'],$photoattr)!!}
                            <input id="phototext_select{{$photo['nu']}}" photoid="{{$photo['nu']}}" placeholder="Free text" type="text" class="form-control photo_savetxt photo_autotext" value="{{@$photo['tx']}}">
                        </div>
                        @endif
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <div class="col-7">
        @if ($nummax != 0)
            @if($procedure_findding!="no")
                @component("case.component.$procedure_findding",$view)@endcomponent
            @endif
        @endif

    </div>
</div>

<script>
        // newphototext
        $('.photo_savetxt').focusout(function(){
        var case_id     = {{$cid}};
        var photo_id    = $(this).attr('photo_id');

        let photoid = $(this).attr('photoid');
        let selectmainsub = $('#selectmainsub'+photoid).val();

        console.log(case_id);

        $.post("{{url('jquery')}}",{
            event       : 'phototxt',
            case_id     : case_id,
            procedure   : "{{@$case->case_procedure}}",
            idhtml      : 'mainsub'+selectmainsub,
            value       : $(this).val(),
            photo_id    : photo_id,
            id          :  $(this).attr('photoid'),
        },function(data,status){});
    });

    $('.photo_autotext').on('click keyup',function(){
        let photoid = $(this).attr('photoid');
        let selectmainsub = $('#selectmainsub'+photoid).val();
        console.log(photoid);
        console.log(selectmainsub);

        var this_id     = $(this).attr('id');
        var this_value  = $(this).val();
        $.post('{{url('photomove')}}',{
        event       : 'jqinputdropdown',
        textid      : 'mainsub'+selectmainsub,
        value       : this_value,
        procedure   : {{@$case->case_procedure}},

        },function(data,status){
            dataList = [];
            dataList = JSON.parse(data);
            $('#'+this_id).inputDropdown(dataList, {
                formatter: data => {return `<li language="${data.value}">`+data.name+'</li>'},
                valueKey: 'language'
            });
            var wi = $('#'+this_id).css('width');
            $('.jq-input-dropdown').css({'min-width':wi});
            $('#jq-input-dropdown_'+this_id).show();
            var html_li = "";
            dataList.forEach(obj => {
                html_li += '<li language="'+obj['value']+'">'+obj['value']+'</li>';
            });
            $('#jq-input-dropdown_'+this_id).html(html_li);

            $('li').on('click',function(){
                $('#'+this_id).focus();
            });
        });
    });

    $('.zoomify_icon').click(function(){
        var photo_name = $(this).attr('photo_name');
        $('#bigphoto').attr('src',photo_name);
        $('#modalbigphoto').modal('show');

    });

    $('.img-thumbnail').mousedown(function(e) {
        if(e.which==3){
            var photoname = $(this).attr('photoname');
            var htmlid = $(this).attr('id');
            var hn = '{{$case->case_hn}}';
            $.post('{{url('photomove')}}',{
                event       : 'drawarrow',
                hn          : hn,
                caseid      : '{{$cid}}',
                folderdate  : '{{$folderdate}}',
                photoname   : photoname,
                offsetX     : e.originalEvent['offsetX'],
                offsetY     : e.originalEvent['offsetY'],
                clientHeight: e.target['clientHeight'],
                clientWidth : e.target['clientWidth']
            },function(data,status){
                d = new Date();
                $('#'+htmlid).attr("src", "{{picurl('')}}"+hn+"/{{$folderdate}}/"+photoname+"?"+d.getTime());
            });
        }
    });

    $('img').bind("contextmenu",function(e){
        return false;
    });


    $('.picrollback').click(function(){
        var photoname   = $(this).attr('photoname');
        var hn          = $(this).attr('hn');
        var photo_status= $(this).attr('status');
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        var photo_num   = $(this).attr('photo_num');
        if(photo_status==10){
            if(confirm("ภาพนี้มีการวาด ต้องการคืนรูปหรือไม่")){
                $.post('{{url('photomove')}}',{
                    event       : 'rollback',
                    photo_id    : photo_id,
                    hn          : hn,
                    caseid      : '{{$cid}}',
                    photoname   : photoname,
                },function(data,status){
                    d = new Date();
                    $('#imgselect'+photo_num).attr("src", "{{picurl('')}}"+hn+"/"+photoname+"?"+d.getTime());
                    $('#picrollback'+photo_num).attr('status','0');
                });
            }
            else{
                return false;
            }
        }else{
            $.post('{{url('photomove')}}',{
                event       : 'rollback',
                photo_id    : photo_id,
                hn          : hn,
                caseid      : '{{$cid}}',
                photoname   : photoname,
            },function(data,status){
                d = new Date();
                $('#imgselect'+photo_num).attr("src", "{{picurl('')}}"+hn+"/"+photoname+"?"+d.getTime());
            });
        }
    });


    $('.piccropblacknew').click(function(){
        var photoname   = $(this).attr('photoname');
        var folderdate  = '{{$folderdate}}';
        var hn          = $(this).attr('hn');
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        var photo_num   = $(this).attr('photo_num');
        $.post('{{url('photomove')}}',{
            event       : 'cropblacknew',
            folderdate  : folderdate,
            photo_id    : photo_id,
            hn          : hn,
            caseid      : '{{$cid}}',
            photoname   : photoname,
        },function(data,status){
            d = new Date();
            $('#imgselect'+photo_num).attr("src", "{{picurl('')}}"+hn+"/"+folderdate+"/"+photoname+"?"+d.getTime());
        });
    });


    $('.picmark').click(function(){
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        $.post("{{url('')}}/photomove",{
            event    : 'change_status',
            photo_id : photo_id,
        },function(data,status){
            if(data==1){$('#'+this_id).css({"background-color": "green"});}
            if(data==0){$('#'+this_id).css({"background-color": "white"});}
        });
    });

    $('.piccropblack').click(function(){
        var photoname   = $(this).attr('photoname');
        var hn          = $(this).attr('hn');
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        var photo_num   = $(this).attr('photo_num');
        $.post('{{url('photomove')}}',{
            event       : 'cropblack',
            photo_id    : photo_id,
            hn          : hn,
            caseid      : '{{$cid}}',
            photoname   : photoname,
        },function(data,status){
            d = new Date();
            $('#imgselect'+photo_num).attr("src", "{{picurl('')}}"+hn+"/"+photoname+"?"+d.getTime());
        });
    });



    $('.picrollbacknew').click(function(){
        var photoname   = $(this).attr('photoname');
        var hn          = $(this).attr('hn');
        var folderdate  = '{{$folderdate}}';
        var photo_status= $(this).attr('status');
        var photo_id    = $(this).attr('photo_id');
        var case_id     = $(this).attr('case_id');

        if(photo_status==10){
            if(confirm("ภาพนี้มีการวาด ต้องการคืนรูปหรือไม่")){
                $.post("{{url('jquery')}}",{
                    event       : 'photorollback',
                    folderdate  : '{{$folderdate}}',
                    photo_id    : photo_id,
                    hn          : hn,
                    caseid      : case_id,
                    photoname   : photoname,
                },function(data,status){
                    d = new Date();

                    $('#imgselectnew'+photo_id).attr("src", "{{picurl('')}}"+hn+"/"+folderdate+"/"+photoname+"?"+d.getTime());
                    // $('#picrollbacknew'+photo_id).attr('status','0');
                });
            }
            else{
                return false;
            }
        }else{
            $.post("{{url('jquery')}}",{
                event       : 'photorollback',
                folderdate  : '{{$folderdate}}',
                photo_id    : photo_id,
                hn          : hn,
                caseid      : case_id,
                photoname   : photoname,
            },function(data,status){
                console.log('mmmm');
                d = Math.random();
                $('#imgselect'+photo_id).attr("src", "{{picurl('')}}"+hn+"/"+folderdate+"/"+photoname+"?"+d);
            });
        }
    });

    // --rowbacknew


    $(".picdel").click(function(){
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        $.post('{{url('photomove')}}',{
            event       : 'change_status_del',
            photo_id    : photo_id,
        },function(data,status){
            if(data==3){$('#'+this_id).css({"background-color": "red"});}
            if(data==0){$('#'+this_id).css({"background-color": "white"});}
        });
    });



    // New select
    $('.imgselect_new').click(function() {
        var photo_id    = $(this).attr('photo_id');
        var this_id     = $(this).attr('id');
        var selectnum   = $("#bb"+photo_id).html();
        var innum       = num+1;

        $.post("{{url('jquery')}}",{
            event       : 'picselect',
            case_id     : '{{$cid}}',
            photo_id    : photo_id,
            selectnum   : selectnum,
            innum       : innum
        },function(data,status){});


        if(selectnum==0){
            $('#picselect'+photo_id).css({"background-color":"green"});
            num++;
            $("#bb"+photo_id).html(innum);
        }else{
            $('#picselect'+photo_id).css({"background-color":"white"});
            num--;
            renumber(new Number($("#bb"+photo_id).html()));
            $("#bb"+photo_id).html('0');
        }
        $("#bb"+photo_id).toggle();

    });
    //New select

    $('.deselect').click(function(){
        $photo_number = $(this).attr('photo_number');
        $('#divselect'+$photo_number).hide();
        $('#imgselect'+$photo_number).trigger('click');
    })
</script>