@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">Registered Doctors</h4>
        </div>
        <div class="col-md-6 p-2">
            <a href="/analytic/sessionusersexport?id={{$session->id}}" class="btn btn-dark waves-effect waves-light float-end me-2" id="btn-export">Export</a>
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="list-page-datatable" class="table w-100 nowrap">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Date of Birth</th>
                                <th>Gender</th>
                                <th>Alternate Phone</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Highlight Qualification</th>
                                <th>Specialization</th>
                                <th>Type Of Setup</th>
                                <th>Designation</th>
                                <th>Clinic Institute Name</th>
                                <th>Attendance</th>
                                <th>Feedback Sent</th>
                                <th>Certificate</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($doctors as $item)
                            <tr>
                                <td>{{ $item->name ?? '' }}</td>
                                <td>{{ $item->email ?? '' }}</td>
                                <td>{{ $item->phone ?? '' }}</td>
                                <td>{{ $item->date_of_birth ?? '' }}</td>
                                <td>{{ $item->gender ?? '' }}</td>
                                <td>{{ $item->alternate_phone ?? '' }}</td>
                                <td>{{ $item->city ?? '' }}</td>
                                <td>{{ $item->state ?? '' }}</td>
                                <td>{{ $item->highlight_qualification ?? '' }}</td>
                                <td>{{ $item->specialization ?? '' }}</td>
                                <td>{{ is_array($item->type_of_setup ?? null) ? implode(', ', $item->type_of_setup) : ($item->type_of_setup ?? '') }}</td>
                                <td>{{ $item->designation ?? '' }}</td>
                                <td>{{ $item->clinic_institute_name ?? '' }}</td>
                                <td>{{isset($item->present) && $item->present == 'yes' ? 'Present':'Absent'}}</td>
                                <td>{{isset($item->feedback) && $item->feedback == 'yes' ? 'Yes':'-'}}</td>
                                <td>{!!isset($item->present) && $item->present == 'yes' && isset($item->feedback) && $item->feedback == 'yes' ? '<a href="/session/certificate?code='.$session->code.'&doctor='.$item->id.'">Download</a>':''!!}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->

<style type="text/css">
    .img-thumbnail { max-width: 100px }
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.js')}}"></script>
<script src="{{asset('assets/js/pages/toastr.init.js')}}"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#list-page-datatable').DataTable({
            //"buttons": ['copy', 'print', ''],
            //"scrollY": "350px",
            "scrollCollapse": true,
            "paging": false,
            stateSave: true,
            "scrollX": true,
            "language": {
                "paginate": {
                    "previous": "<i class='mdi mdi-chevron-left'>",
                    "next": "<i class='mdi mdi-chevron-right'>"
                }
            },
            "drawCallback": function () {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
            }
        });

        $("#btn-date-filter").click(function(){
            $("#date_filter_modal").modal("show")
        })

        $('.assets-btn').click(function(){
            let data = JSON.parse($(this).attr('data'))
            $('#collapseOne input').val('{{ env('APP_URL') }}/microsite/'+data.type+'-'+data.code)
            $('#collapseTwo input').val('{{ env('APP_URL') }}/brochure/'+data.code)
            $('#collapseThree input').val('{{ env('APP_URL') }}/register/'+data.code)
            $('#collapseFour input').val('{{ env('APP_URL') }}/attendance/'+data.code)
            $('#assets-modal').modal('show')
        })

        $('.copy-btn').click(function(){
            console.log( $(this).parent().find('input').val() )
            copytexttoclipboard($(this).parent().find('input').val())
        })

        function copytexttoclipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.style.position = 'fixed';
            textArea.style.top = 0;
            textArea.style.left = 0;
            textArea.style.width = '2em';
            textArea.style.height = '2em';
            textArea.style.padding = 0;
            textArea.style.border = 'none';
            textArea.style.outline = 'none';
            textArea.style.boxShadow = 'none';
            textArea.style.background = 'transparent';
            document.body.appendChild(textArea);
            textArea.value = text;
            textArea.focus();
            textArea.select();
            try {
                var successful = document.execCommand('copy');
                $.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
            } catch (err) {
                $.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
                //console.log('Oops, unable to copy');
            }
            document.body.removeChild(textArea);
        }

    });

</script>
<!-- end demo js-->
@endsection