<div>
    <style>
        #modal_selectcase .modal-lg {
            max-width: 80%;
        }
    </style>
    <div class="row m-0 p-3">
        <div class="bg-sortphoto">
            <div class="col-12 d-flex justify-content-between py-3">
                <div>
                    <span class="text-sort-blue h2">Move Photo </span>
                    <p class="text-sort-blue h4">
                        Please <u> <b>select case first</b></u> and then select photo by "click" into photo and then click button for move photo

                    </p>
                </div>
                <div>
                    <a href="{{ url("procedure/{$cid}") }}"
                    class="btn btn-danger btn-label waves-effect right w-lg waves-light">
                    <i class="ri-arrow-left-line label-icon align-middle fs-16 ms-2"></i> Back</a>
                    <button wire:click="selectAll" type="button"
                        class="btn btn-primary btn-label waves-effect right w-lg waves-light select_all">
                        <i class="ri-check-double-line label-icon align-middle fs-16 ms-2"></i>
                        Select All</button>
                    <button wire:click="deselectAll" type="button"
                        class="btn btn-warning btn-label waves-effect right w-lg waves-light" id="photo_unselect_all"
                        wire:click="deselectAll"><i
                            class=" ri-checkbox-blank-line label-icon align-middle fs-16 ms-2"></i> Deselect
                        All</button>

                </div>
            </div>






            <div class="row">
                <div class="col-5" style="width: 45%">
                    <div class="card p-2" style="border: 1px solid #305F71; background-color: #BAD4DB;">
                        <div class="row">
                            <div class="col-12">
                                <span class="text-blue-table fs-20 text-center" style="font-weight: bold;">
                                    Current Case</span>
                            </div>
                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> HN :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class=" fs-20 ">{{ @$case->hn }}</span><br>
                            </div>

                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> Patient Name :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class=" fs-20 ms-2">{{ @$case->patientname }}</span><br>
                            </div>
                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> Procedure
                                    &nbsp;&nbsp;&nbsp;&nbsp; :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class=" fs-20 ms-2">{{ @$case->procedurename }}</span>
                            </div>

                        </div>
                    </div>
                    <div class="" style="margin-top: 90px;"></div>
                    <div class="row text-center card m-3" style="border: 1px solid #305F71; background-color: #BAD4DB;">
                        <form wire:submit.prevent="move_photo">
                            @csrf
                            <div class="row">
                                @foreach ($photo_all ?? [] as $photo)
                                    <div class="col-4">
                                        <input type="checkbox" id="check0{{ $photo['nu'] }}" class="checkbox_selected"
                                            wire:model="selected_photo" value="{{ $photo['na'] }}">
                                        <label for="check0{{ $photo['nu'] }}" class="m-0 photo-hover "
                                            style="width: 200px; height: 200px;">
                                            <img photo_id="{{ $photo['nu'] }}" class="photo_select w-100 h-100"
                                                photo="{{ $photo['na'] }}"
                                                src="{{ mePHOTO($case->hn, $photo['na'], $folderdate) }}?a={{ RandomString() }}">
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                        </form>
                    </div>
                </div>
                <div class="col-2 text-center" style="width: 10%; align-self: center;">
                    @if($status_movebtn)
                        <button class="btn btn-primary btn-icon" wire:model="newcase_id" wire:click="move_photo">
                            <i class=" ri-speed-fill"></i>
                        </button>
                    @endif

                </div>
                <div class="col-5" style="width: 45%">
                    <div class="card p-2" style="border: 1px solid #305F71; background-color: #BAD4DB;">
                        <div class="row">
                            <div class="col-12">
                                <span class="text-blue-table fs-20 center" style="font-weight: bold;">
                                    New Case</span>
                            </div>
                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> HN
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class="fs-20">{{ $selected_hn ?? '-' }}</span><br>
                            </div>

                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> Patient Name :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class="fs-20 ms-2">{{ @$selected_patientname ?? '-' }}</span><br>
                            </div>
                            <div class="col-3 mt-2">
                                <span class="text-blue-table fs-20" style="font-weight: bold;"> Procedure
                                    &nbsp;&nbsp;&nbsp;&nbsp; :</span>
                            </div>
                            <div class="col-9 mt-2">
                                <span class="fs-20 ms-2">{{ @$selected_procedure ?? '-' }}</span>
                            </div>

                        </div>
                    </div>
                    <div class="col-12 center">
                        <button class="btn btn-primary w-lg" style="height: 50px;" data-bs-toggle="modal"
                            data-bs-target="#modal_selectcase">
                            Select Case
                        </button>
                    </div>
                    <div class="row text-center card m-3" style="border: 1px solid #305F71; background-color: #BAD4DB;">
                        <div class="row">
                            @foreach ($temp_photo_arr ?? [] as $key => $photo)
                                <div class="col-3">
                                    {{-- {{$photo}} --}}
                                    <img src="{{ mePHOTO($selected_hn, $photo, $folderdate_new) }}?a={{ RandomString() }}"
                                        width="150px" height="150px">
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 text-center" style="position: absolute; bottom: px; color: #ffffff80;">
        © 2023 EndoINDEX 6.0 by Medica Healthcare Co.,Ltd.
    </div>

    <!-- Default Modals -->
    <div id="modal_selectcase" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" wire:ignore.self
        style="display: none;">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Case list</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <td>Date</td>
                                <td>HN</td>
                                <td>Patient Name</td>
                                <td>Endoscopist</td>
                                <td>Procedure</td>
                                <td>Actions</td>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($tb_case ?? [] as $newcase)
                                <tr>
                                    <td>{{ $newcase['appointment_date'] }}</td>
                                    <td>{{ $newcase['hn'] }}</td>
                                    <td>{{ $newcase['patientname'] }}</td>
                                    <td>{{ $newcase['doctorname'] }}</td>
                                    <td>{{ $newcase['procedurename'] }}</td>
                                    <td>
                                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                                            wire:click="select_case('{{ $newcase['_id'] }}')"
                                            >Select</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>



                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>

                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->







</div>

