@section('externalcss')
    <style>
        .form-check-label {
            font-family: system-ui, sans-serif;
            font-size: 2rem;
            font-weight: bold;
            line-height: 1.1;
            display: grid;
            grid-template-columns: 1em auto;
            gap: 0.5em;
        }
    </style>
@endsection
@if (\Illuminate\Support\Facades\Auth::user()->isAbleTo('sample_collect-read'))


    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">

            @if (session()->has('success'))
                <div class="flex py-4">
                    <div class="w-full alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span class="svg-icon svg-icon-muted svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path opacity="0.3"
                                        d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                                        fill="black" />
                                    <path
                                        d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                                        fill="black" />
                                </svg></span>
                        </button>
                    </div>
                </div>
            @elseif (session()->has('error'))
                <div class="flex py-4">
                    <div class="w-full alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>{{ session('error') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span class="svg-icon svg-icon-muted svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path opacity="0.3"
                                        d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                                        fill="black" />
                                    <path
                                        d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                                        fill="black" />
                                </svg></span>
                        </button>
                    </div>
                </div>
            @endif


            <!--begin::Card-->
            <div class="card card-flush" style="box-shadow: 0px 5px 10px #4f55da;">
                <!--begin::Card header-->
                <div class="card-header mt-6">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1 me-5">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                        rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                    <path
                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                        fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            <input type="text" data-kt-table-filter="search" wire:model="search"
                                class="form-control form-control-solid w-500px ps-15" placeholder="Search By Registration No."
                                style=" border: none; border-radius: 5px;" />
                        </div>
                        <div class="col-md-4">
                            <button type="button" wire:click="searchpatient" class="btn btn-info btn-block">
                                <span class="indicator-label">Search</span>
                                <span class="indicator-progress" wire:loading wire:target="searchpatient">Please
                                    wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                        <!--end::Search-->
                    </div>
                    <!--end::Card title-->

                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed text-start fs-7 gy-5 mb-10" id="kt_table">
                        <thead>
                            <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0"
                                style="color: grey; font-size: middium; height: 50px;">
                                <th class="min-w-80 text-black p-2">Collected DateTime</th>
                                <th class="min-w-100px text-black p-2">Diagnosis Name</th>
                                <th class="min-w-100px text-black p-2">Specimen</th>
                                <th class="min-w-50px text-black p-2">Particular</th>
                                <th class="min-w-80px text-black p-2">Collected By</th>
                                <th class="min-w-80px text-black p-2">Sample No</th>
                                <th class="min-w-80px text-black p-2">Print Barcode</th>
                                <th class="min-w-110px text-black p-2">Action</th>
                            </tr>
                        </thead>
                        <tbody class="fw-bold text-gray-600">
                            @if (sizeof($sample_data) > 0)
                                @foreach ($sample_data as $key => $tabledata)
                                    <tr>
                                        <td class="text-black p-2">
                                            {{ Carbon\Carbon::parse($tabledata['collected_dt_time'])->format('Y:m:d h:i A') }}
                                        </td>
                                        {{-- <td class="text-black p-2">{{$tabledata['collected_datetime']}}</td> --}}
                                        <td class="text-black p-2">{{ $tabledata['diagnosis_name'] }}</td>
                                        <td class="text-black p-2">{{ $tabledata['specimen'] }}</td>
                                        <td class="text-black p-2">{{ $tabledata['particular'] }}</td>
                                        <td class="text-black p-2">{{ $tabledata['collected_person'] }}</td>
                                        <td class="text-black p-2">{{ $tabledata['barcode'] }}</td>
                                        <td class="text-center text-black p-2">
                                            @if ($tabledata['collected_by'])
                                                <button type="button" wire:click="print_barcode('{{$tabledata['barcode']}}')"><svg xmlns="http://www.w3.org/2000/svg"
                                                        width="16" height="16" fill="currentColor"
                                                        class="bi bi-printer" viewBox="0 0 16 16">
                                                        <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
                                                        <path
                                                            d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
                                                    </svg></button>
                                            @endif
                                        </td>

                                        @if (\Illuminate\Support\Facades\Auth::user()->isAbleTo('sample_collect-create'))
                                            <td class="text-start p-2">
                                                @if ($tabledata['collected_by'])
                                                    <span
                                                        class="badge badge-warning fs-8 m-1 text-white">Collected</span>
                                                @else
                                                    <div class="custom-checkbox"
                                                        style="padding-top: 10px; text-align: start;">
                                                        <input class="form-check-input" type="checkbox"
                                                            value=""
                                                            wire:model.defer='collected.{{ $key }}'
                                                            id="customCheck"
                                                            style="outline: 2px solid rgb(41, 40, 40);">
                                                        <label class="form-check-label" for="customCheck">
                                                            <div
                                                                style="display: flex; align-items: center; font-size: 14px; color: #333;">
                                                                {{-- <span style="font-weight: bold; margin-right: 5px; color: #03790d;">*</span> --}}
                                                            </div>
                                                        </label>
                                                    </div>
                                                    {{-- <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" wire:model.defer='collected.{{$key}}'>
                                                    <label class="form-check-label" for="defaultCheck1"></label> --}}
                                                @endif

                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td class="p-2 justify-content-center text-center" colspan="9">
                                        <h2 class="fs-2">No Data Available</h2>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    @if ($button_visibility == true)
                    <div class="row" style="margin-top: -20px">
                        <div class="col-sm-12 text-right">
                            <button type="button" wire:click="clct_sample" class="btn btn-info float-right"
                                style="width:100px;">
                                <span class="indicator-label">Submit</span>
                                <span class="indicator-progress" wire:loading wire:target="clct_sample">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                    @endif

                    <!--end::Table-->
                    {{-- <div class="col-12 justify-content-end">
                        {{ $datatables->links('livewire.pagination-livewire') }}
                    </div> --}}
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->

            <!--end::Modals-->

            <div class="modal  fade" id="deleteConfirmation" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="deleteConfirmation" aria-hidden="true" wire:ignore.self>
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">{{ __('Delete Registered Patient') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span class="svg-icon svg-icon-muted svg-icon-2"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                        viewBox="0 0 24 24" fill="none">
                                        <path opacity="0.3"
                                            d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                                            fill="black" />
                                        <path
                                            d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                                            fill="black" />
                                    </svg></span>
                            </button>
                        </div>
                        <div class="modal-body">
                            {{ __('Are you sure you want to delete this data ? Once the data is deleted, all of its resources and data will be permanently deleted.') }}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-danger" wire:click="delete"> Delete</button>
                        </div>
                    </div>
                </div>
            </div>
                {{--Sample Print Modal start--}}
                <div class="modal fade" id="kt_modal_print_sample" data-bs-backdrop="static"
                     data-bs-keyboard="false" tabindex="-1" aria-hidden="true" wire:ignore.self>
                    <!--begin::Modal dialog-->
                    <div class="modal-dialog modal-dialog-centered mw-500px">
                        <!--begin::Modal content-->
                        <div class="modal-content">
                            <!--begin::Modal header-->
                            <div class="modal-header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bolder">Sample Print</h2>


                                {{-- <div class="fv-row col-md-3">


                                    <select class="form-control form-control-solid" name="select_language"
                                        wire:model="select_language">
                                        <option value="">Select Language</option>
                                        <option value="en">English</option>
                                        <option value="hi">Hindi</option>
                                        <option value="or">Odia</option>

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





                                <!--end::Modal title-->

                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-active-icon-primary align-items-end"
                                     data-kt-permissions-modal-action="close" onclick="popupmodal()">

                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                    <span class="svg-icon svg-icon-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                         viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="6" y="17.3137" width="16"
                                              height="2" rx="1" transform="rotate(-45 6 17.3137)"
                                              fill="black" />
                                        <rect x="7.41422" y="6" width="16" height="2"
                                              rx="1" transform="rotate(45 7.41422 6)" fill="black" />
                                    </svg>
                                </span>
                                    <!--end::Svg Icon-->
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div id="barcodePrint" class="modal-body scroll-y mx-5 mx-xl-15 my-7" >

                                <!--begin::Form-->
                                <div class="col-md-12">
                                <div class="row d-flex justify-content-center">
                                    @if($barcode_no)
                                    {!! DNS1D::getBarcodeHTML($barcode_no, 'C39', 1, 30) !!}
                                        @endif
                                </div>
                                    <div class="row d-flex justify-content-center"> *{{ $barcode_no }}*</div>
                                </div>
                                <div class="row d-flex justify-content-center align-items-center mt-3">
                                    Name: &nbsp;&nbsp;<input  class="rounded-1 border border-dark" readonly style="width: 280px;" type="text">
                                </div>

                            </div>
                            <div class="modal-footer justify-content-center">
                                    <button type="button" class="btn btn-info align-items-center"
                                            onclick="printBarCode('barcodePrint',{{ $barcode_no }})">
                                        <span class="indicator-label">Print</span>
                                        <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                            </div>
                        </div>
                    </div>

                </div>
                {{--End Sample Print--}}

            <div id="kt_docs_toast_stack_container" class="toast-container position-fixed top-0 end-0 p-3 z-index-3">
                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"
                    data-kt-docs-toast="stack">
                    <div class="toast-header">
                        <span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
                        <strong class="me-auto">Keenthemes</strong>
                        <small>11 mins ago</small>
                        <button type="button" class="btn-close" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
@else
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <div class="card card-flush">
                <div class="card-body">
                    <h1 class=" text-center text-bold" style="font-size: 25px; font-weight: bold; color: red;">Sorry
                        !!! Unauthorized Access</h1>
                </div>
            </div>
        </div>
    </div>
@endif



@section('externaljs')
    <script>
        function popupmodal() {
            Swal.fire({
                text: "Are you sure you would like to close?",
                icon: "warning",
                showCancelButton: !0,
                buttonsStyling: !1,
                confirmButtonText: "Yes, close it!",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-info",
                    cancelButton: "btn btn-active-light"
                }
            }).then((function(result) {

                if (result.isConfirmed) {
                    closemodal();
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    )
                }


            }))
        }

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }
        window.addEventListener('barcodePrintModalOpen', event => {
            $('#kt_modal_print_sample').modal('show');
        });
        window.addEventListener('barcodePrintModalClose', event => {
            $('#kt_modal_print_sample').modal('hide');
        });

        function printBarCode(divid,doctitle) {
            document.title = doctitle;
            printJS({
                printable: divid,
                type: 'html',
                targetStyles: ["*"], //accepts all the styles
                font_size: '12px;',
            })
        }

    </script>
@endsection