<div id="control04" class="row" style="padding-left: 0.7em;height: 0em;width: 100%;display:none">

    <div class="col-7 pl-5" style="margin-top: 2em">

        <div class="row">

            <div class="col-3 pl-0" style="vertical-align: middle;">
                <h4 style="vertical-align: middle;">Picture Mode</h4>
                <button type="button" onclick="reload_node()" class="btn btn-dark w-100" style="height: 75px;">
                    <i class="fa fa-repeat fa-3x" aria-hidden="true"></i><br>
                    {{-- <m style="color: gainsboro;margin-top:2px;">Reload</m> --}}
                </button>
            </div>

            <div class="col-3 pl-0" id="box1">
                <div class="box-pic">
                    <h4 class="text_in_box">1</h4>
                </div>
            </div>



            {{-- <div class="col-3 pl-0" id="box2">
                <div class="box-pic">
                    <h4 class="text_in_box">1</h4>
                    <div class="mini_box">2</div>
                </div>
            </div> --}}



            {{-- <div class="col-3 pl-0" id="box3">
                <div class="box-pic">
                    <h4 class="text_in_box">1</h4>
                    <div class="mini_box t4">3</div>
                    <div class="mini_box">2</div>
                </div>
            </div> --}}

            {{-- <div class="col-3 pl-0" id="box4">
                <div class="box-pic">
                    <h4 class="text_in_box">1</h4>
                    <div class="mini_box t2">4</div>
                    <div class="mini_box t4">3</div>
                    <div class="mini_box">2</div>
                </div>
            </div> --}}

            <div class="col-3 pl-0" id="box5">
                <div class="box-pic">
                    <h4 class="text_in_box">&nbsp;</h4>
                    <div class="row" style="position: absolute;margin:0;width: 93%;top:3.5em;">
                        <div class="col-sm-6" style="padding: 0;border: 1px solid;">
                            <div class="box2 text-center">
                                <h4>1</h4>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding: 0;border: 1px solid;">
                            <div class="box2 text-center">
                                <h4>2</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-3 pl-0" id="box3">
                <div class="box-pic">
                    <h4 class="text_in_box">&nbsp;</h4>
                    <div class="row" style="position: absolute;margin:0;width: 93%;top:0.8em;height: 7.4em;">
                        <div class="col-sm-6" style="padding: 0;">
                            <div class="row" style="margin: 0;padding:0;height: 100%;">
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">1</h4>
                                    </div>
                                </div>
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">2</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding: 0;border: 1px solid;">
                            <div class="box2 text-center">
                                <h4 style="padding: 1.7em;">3</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- <div class="col-3 pl-0" id="box6">
                <div class="box-pic">
                    <h4 class="text_in_box">&nbsp;</h4>
                    <div class="row"
                        style="position: absolute;margin:0;width: 93%;top:0.8em;height: 7.4em;">
                        <div class="col-sm-6" style="padding: 0;">
                            <div class="row" style="margin: 0;padding:0;height: 100%;">
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">1</h4>
                                    </div>
                                </div>
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">2</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding: 0;border: 1px solid;">
                            <div class="box2 text-center">
                                <h4 style="padding: 1.7em;">3</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}

            {{-- <div class="col-3 pl-0" id="box6">
                <div class="box-pic">
                    <h4 class="text_in_box">&nbsp;</h4>
                    <div class="row"
                        style="position: absolute;margin:0;width: 93%;top:0.8em;height: 7.4em;">
                        <div class="col-sm-6" style="padding: 0;border: 1px solid;">
                            <div class="box2 text-center">
                                <h4 style="padding: 1.7em;">3</h4>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding: 0;">
                            <div class="row" style="margin: 0;padding:0;height: 100%;">
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">1</h4>
                                    </div>
                                </div>
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">2</h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div> --}}



            {{-- <div class="col-3 pl-0" id="box7">
                <div class="box-pic">
                    <h4 class="text_in_box">&nbsp;</h4>
                    <div class="row"
                        style="position: absolute;margin:0;width: 93%;top:0.8em;height: 7.4em;">
                        <div class="col-sm-6" style="padding: 0;">
                            <div class="row" style="margin: 0;padding:0;height: 100%;">
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">1</h4>
                                    </div>
                                </div>
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">3</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding: 0;">
                            <div class="row" style="margin: 0;padding:0;height: 100%;">
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">2</h4>
                                    </div>
                                </div>
                                <div class="col-12" style="border: 1px solid;">
                                    <div class="box2 text-center">
                                        <h4 style="padding-top: 18px; margin: 0;">4</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}



        </div>
    </div>

    <div class="col-5  pl-5" style="margin-top: 2em">

        <div class="row">
            <div class="col-12" style="height: 7.5px"></div>
            <div class="col-6 pl-0">
                <div class="row">
                    <div class="col-6" style="padding: 1px;">
                        <a id="none_scope" data-toggle="modal" data-target="#myModal" onclick="playAudio()">
                            <div class="box-btn"><br><i class="fa fa-object-group fa-3x"
                                    aria-hidden="true"></i><br>
                                <m style="color: gainsboro;margin-top:2px;">CAPTURE</m>
                            </div><br>
                        </a>
                        <a id="btn_capture">
                            <div class="box-btn"><br><i class="fa fa-object-group fa-3x"
                                    aria-hidden="true"></i><br>
                                <m style="color: gainsboro;margin-top:2px;">CAPTURE</m>
                            </div><br>
                        </a>
                    </div>

                    <div class="col-6" style="padding: 1px;">
                        <div class="box-btn" id="check_btn">
                            <button id="btn-start-recording" style="background: none;border: none;" disabled><br><i
                                    class="fa fa-dot-circle-o fa-3x" style="text-shadow: none;"
                                    aria-hidden="true"></i><br>
                                <m style="color: gainsboro;margin-top:2px;text-shadow: none;">Start
                                    Recording</m>
                            </button>
                            <button id="btn-stop-recording" style="background: none;border: none; display:none"><br>
                                <font color="red"><i class="fa fa-dot-circle-o fa-3x" style="text-shadow: none;"
                                        aria-hidden="true"></i></font><br>
                                <m style="color: gainsboro;margin-top:2px;text-shadow: none;">Stop
                                    Record</m>
                            </button>


                            <button id="download" style="position: absolute;opacity:0;">Download</button>

                            <a id="btn-pause-recording" style="display: none; font-size: 15px;"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="col-5 pl-0">
                <div class="row">
                    @if (@$case->case_id != 0)
                        <div class="col-12" style="padding: 3px;">
                            <a class="btn btn-submit btn-success btn-lg btn-block make_report"
                                style="background: green;width:100%;"><h3>ทำรีพอร์ด</h3></a>
                        </div>
                        <div class="col-12" style="padding: 3px;">
                            <a id="select_newcase" class="btn btn-primary btn-lg btn-block"
                                style="background: orange;width:100%;"><h3>เลือกเคสใหม่</h3></a>
                        </div>
                        <div style="display: none">
                            <form id="finishcamera" action="{{ url('camera') }}" method="POST">
                                @csrf
                                <input name="event" type="hidden" value="finishcamera">
                                <input name="case_id" value="{{ $case->case_id }}">
                                <button type="submit" class="btn btn-submit btn-primary btn-lg btn-block"
                                    style="background: skyblue;width:100%;">กลับ<br>หน้าหลัก</button>
                            </form>
                        </div>
                    @else
                        <div class="col-12 mt-4">
                            <form action="{{ url('camera') }}" method="POST">
                                @csrf
                                <input name="event" type="hidden" value="pictest_delete">
                                <button type="submit" class="btn btn-submit btn-primary btn-lg btn-block"
                                    style="background: skyblue;width:100%;">กลับ<br>หน้าหลัก</button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>




</div>
