@extends('layouts')
@section('main')
    <div class="container-fluid">
        <div class="row">
            <div class="card_me">
                <div class="top_white_header">
                    <div class="row">
                        <div class="col-auto my-auto">
                            <h3 class="title_red"> {{ $moduleName }}</h3>
                        </div>
                        @if (auth()->user()->role == 'mr')
                            <div class="col-lg-auto ms-auto">
                                <a href="{{ route('add-new-doctor') }}" class="btn btn-primary"><i
                                        class="fa-solid fa-plus me-2"></i>Add Videos </a>
                            </div>
                            <div class="col-lg-auto ">
                                <button type="button" onclick="UserExport()" class="btn btn-primary"><i
                                        class="fa fa-download me-2"></i>Export</button>
                            </div> 
                        @else
                            <div class="col-lg-auto col-sm-auto col-md-auto ms-auto">
                                <select class="select2 js-example-basic-single select-label br_select form-control w-100"
                                    id="filter_speciality_id" name="filter_speciality">
                                    <option value="" selected="selected">Select Speciality</option>
                                    @foreach ($speciality as $key => $val)
                                        <option value="{{ Crypt::encrypt($key) }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-auto col-sm-auto col-md-auto">
                                <select class="select2 js-example-basic-single select-label br_select form-control w-100"
                                    id="filter_mr_id" name="filter_mr">
                                    <option value="" selected="selected">Select MR</option>
                                    @foreach ($mr as $key => $val)
                                        <option value="{{ Crypt::encrypt($key) }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-auto col-sm-auto col-md-auto">
                                <select class="select2 js-example-basic-single select-label br_select form-control w-100"
                                    id="filter_doctor_id" name="filter_doctor">
                                    <option value="" selected="selected">Select Doctor</option>
                                    @foreach ($doctor as $key => $val)
                                        <option value="{{ Crypt::encrypt($key) }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-auto  col-md-auto col-sm-auto">
                                <div class="d-flex align-items-center">
                                    <a href="javascript:void(0)" class="btn btn-primary small_btn" onclick="setFilter()"><i
                                            class="fa fa-search"></i></a>
                                    <a href="javascript:void(0)" class="btn btn-danger small_btn ms-2"
                                        onclick="resetFilter()"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-12">
                    <table id="dataTable" class="table table-striped data-table-dr" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Doctor Name</th>
                                <th>Speciality</th>
                                <th>SC Code</th>
                                <th>Clinic Name</th>
                                @if (auth()->user()->role == 'ho')
                                    <th>MR Name</th>
                                @else
                                    <th>QR Code</th>
                                    <th>Download QR</th>
                                @endif
                                <th>Topic 01 <a href="javascript:void(0)" class="info_rs"
                                        title="Information About Cancer"><i class="fa-solid fa-circle-info"></i></a>
                                </th>
                                <th>Topic 02 <a href="javascript:void(0)" class="info_rs"
                                        title="Dos And Don'ts In Cancer"><i class="fa-solid fa-circle-info"></i></a>
                                </th>
                                <th>Topic 03 <a href="javascript:void(0)" class="info_rs"
                                        title="Diet And Nutrition In Cancer Patients"><i
                                            class="fa-solid fa-circle-info"></i></a></th>
                                <th>Topic 04 <a href="javascript:void(0)" class="info_rs"
                                        title="Myths And Facts About Cancer"><i class="fa-solid fa-circle-info"></i></a>
                                </th>
                                @if (auth()->user()->role == 'ho')
                                    <th>QR Code</th>
                                    <th>Download QR</th>
                                    <th>Scanned QR <br>(Current Month)</th>
                                @endif
                                <th>Date And Time</th>
                                @if (auth()->user()->role == 'mr')
                                    <th>Edit</th>
                                @else
                                    <th>Action</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                        <tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="qr_code" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="qr_code_detiles">
                        <div class="mb-3">
                            <div class="grey_qr">
                                <img src="{{ asset('/assets/images/scanner.png') }}">
                            </div>
                        </div>
                        <div class="mb-3">
                            <h3 class="text-center" id="dr_name">Dr. Salma Kreiger's Qr</h3>
                        </div>
                        <div class="mb-3">
                            <div class="grey_border">
                                <img id="qr_image_show" src="{{ asset('/assets/images/qr-code.png') }}">
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="link_copy">
                                <div class="link_rs">
                                    <span id="url_show"></span>
                                </div>
                                <div class="copy_rs" id="copy_url">
                                    <img src="{{ asset('/assets/images/copy.png') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        @if ($errors->any())
            var errorMessage = @json($errors->first());
            $.notify(errorMessage, "error");
        @endif
        function UserExport() {
            var url = "{{ route('DocExport') }}";
            window.location.href = url;
        }

        $(document).ready(function() {
            $(document).on('click', '#copy_url', function() {
                var textToCopy = $('#url_show').text(); // Get the URL text from the span element by its ID
                var textarea = $('<textarea>').val(textToCopy).appendTo($(this).closest('.modal-content'))
                    .select();
                document.execCommand('copy');
                textarea.remove();
                $.notify('URL copied successfully!', "success");
            });

            $(document).on('click', '#show_qr', function() {
                var doctorName = $(this).data('doctor-name');
                var doctorUrl = $(this).data('doctor-url');
                var doctorImageUrl = $(this).data('doctor-image-url');
                $('#dr_name').text(doctorName + "'s QR");
                $('#url_show').text(doctorUrl);
                $('#qr_image_show').attr('src', doctorImageUrl);
                $('#qr_code').modal('show');
            });


            $(function() {
                var columns = [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        "orderable": true,
                        searchable: true
                    },
                    {
                        data: 'speciality',
                        "orderable": true,
                        searchable: true
                    },
                    {
                        data: 'sc_code',
                        name: 'sc_code',
                        "orderable": true,
                        searchable: true
                    },
                    {
                        data: 'clinic_name',
                        name: 'clinic_name',
                        "orderable": true,
                        searchable: true
                    },
                    @if (auth()->user()->role == 'ho')
                        {
                            data: 'mr_name',
                            name: 'mr_name',
                            "orderable": false,
                            searchable: false
                        },
                    @else
                        {
                            data: 'dr_qr_link',
                            name: 'dr_qr_link',
                            "orderable": false,
                            searchable: false
                        }, {
                            data: 'download_qr',
                            name: 'download_qr',
                            "orderable": false,
                            searchable: false
                        },
                    @endif {
                        data: 't1',
                        name: 't1',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 't2',
                        name: 't2',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 't3',
                        name: 't3',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 't4',
                        name: 't4',
                        "orderable": false,
                        searchable: false
                    },
                    @if (auth()->user()->role == 'ho')
                        {
                            data: 'dr_qr_link',
                            name: 'dr_qr_link',
                            "orderable": false,
                            searchable: false
                        }, {
                            data: 'download_qr',
                            name: 'download_qr',
                            "orderable": false,
                            searchable: false
                        }, {
                            data: 'cm_count',
                            name: 'cm_count',
                            "orderable": false,
                            searchable: false
                        },
                    @endif {
                        data: 'created_at',
                    },
                    @if (auth()->user()->role == 'mr')
                        {
                            data: 'action',
                            "orderable": false,
                            searchable: false
                        },
                    @else
                        {
                            data: 'action',
                            "orderable": false,
                            searchable: false
                        },
                    @endif
                ];
                var columnDefs = [];
                var exportColumns = [];

                @if (auth()->user()->role == 'mr')
                    exportColumns = [0, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11];
                @else
                    exportColumns = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13];
                @endif

                getdatatable("{{ route('mr-manage-doctor') }}", columns, columnDefs, exportColumns);
            });


            function getdatatable(url, columns, columnDefs, exportColumns) {
                table = $('#dataTable').DataTable({
                    "pageLength": 10,
                    language: {
                        searchPlaceholder: "Search"
                    },
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    order: [],
                    "scrollX": true,
                    columns: columns,
                    columnDefs: columnDefs,
                    ajax: {
                        method: 'post',
                        url: url,
                        data: function(d) {
                            d._token = "{{ csrf_token() }}",
                                d.filter_speciality_id = $("#filter_speciality_id").val(),
                                d.filter_mr_id = $("#filter_mr_id").val(),
                                d.filter_doctor_id = $("#filter_doctor_id").val()
                        }
                    },
                    "drawCallback": function(settings) {
                        new VenoBox({
                            selector: '.view_img',
                            numeration: true,
                            infinigall: true,
                            share: true,
                            spinner: 'rotating-plane'
                        });
                        new VenoBox({
                            selector: '.my-video',
                        });

                        feather.replace();

                    },
                    "dom": 'Blfrtip',
                    "buttons": [{
                        /*  "extend": 'excel',
                         "text": '<button type="button" class="btn btn-primary"><i class="fa fa-download me-2"></i>Export</button>', */
                        exportOptions: {
                            columns: exportColumns,
                            "format": {
                                "body": function(data, row, column, node) {
                                    var dateElement = $(node).find('i.fa-calendar').parent()
                                        .contents().filter(function() {
                                            return this.nodeType === 3;
                                        }).text().trim();

                                    var timeElement = $(node).find('i.fa-clock').parent()
                                        .contents().filter(function() {
                                            return this.nodeType === 3;
                                        }).text().trim();

                                    if (dateElement && timeElement) {
                                        return dateElement + ' ' + timeElement;
                                    }

                                    var videoLink = $(node).find('a').attr('href');
                                    // var status = $(node).find('.v_f_status').text().trim();
                                    // if (videoLink && status) {
                                    //     return '(' + status + ') ' + videoLink;
                                    // } else
                                    if (videoLink) {
                                        return videoLink;
                                    } else {
                                        return data == '' ? '-' : data;
                                    }
                                }
                            }
                        },
                    }]

                });
            }


        });

        function setFilter() {
            $('#dataTable').DataTable().ajax.reload();
        }

        function resetFilter() {
            @if (auth()->user()->role == 'ho')
                $('#filter_speciality_id option[value=""]').prop('selected', true);
                $('#filter_speciality_id').trigger('change');
                $('#filter_mr_id option[value=""]').prop('selected', true);
                $('#filter_mr_id').trigger('change');
                $('#filter_doctor_id option[value=""]').prop('selected', true);
                $('#filter_doctor_id').trigger('change');
            @endif
            $('#dataTable').DataTable().ajax.reload();
            // setTimeout(function () {
            //     $('#dataTable').DataTable().ajax.reload();
            // }, 200);
        }
    </script>
@endsection