@extends('operations.layout.mainlayout')
@section('content')

    <link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
            <div class="container-fluid card m-0">
                <div class="row">
                    <div class="col-sm-6 m-0 card ">
                        <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">Notifications</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="card  mr-0 col-md-12">
                        <div class="card-body">
                            <div class=" d-flex justify-content-between contain-filters">
                                <div class="filter" style="width: 100%;min-height: auto">
                                    <div class="row">
                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2">
                                            <input autocomplete="off" id="treport-date-from" class="form-control date-from-invoice" type="text" name="date_from" value="" placeholder="Created Date & Time From">
                                        </div>

                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control select_user_groups" id="notification-user-group" multiple="multiple" >
                                                <option>-- select user group --</option>
                                                @foreach($userGroups as $user)
                                                    <option value="{{$user->ID}}" user_label="{{$user->NAME}}" > {{$user->NAME}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control" id="notification-status-id" >
                                                <option>-- status --</option>
                                                    <option value="1" >Open</option>
                                                    <option value="2" >Close</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2">
                                            <input autocomplete="off" id="treport-date-to" class="form-control date-to-invoice" type="text" name="date_to" value="" placeholder="Created Date & Time To">
                                        </div>
                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2" style="margin-top:20px">
                                            <select class="form-control rhospital_ids" name="notification_group" id="notification-report-group-event-id">
                                                <option value="">Select group event</option>
                                                @foreach($groupTypes as $type)
                                                    <option data-module="{{$type->MODULE}}" value="{{$type->ID}}"> {{$type->NAME}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3 d-flex justify-content-between align-items-center mt-2" style="margin-top:20px">
                                            <select class="form-control select-type-values" multiple name="notification_event_types" id="notification-event-id">
                                                <option>select events</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="notification-report-datatable" class="table table-bordered table-striped"></table>
                                </div>
                            </div>

                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.row -->
                </div>
                </div>
                <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div class="modal fade" id="show-event-list-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Events</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <table id="show-event-list-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Event</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal" id="items-cancel">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="show-notification-test-list-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Events</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <table id="show-notification-test-list-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Tests</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal" id="items-cancel">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="show-notification-response-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Response</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row" style="margin: 15px">
                        <div class="col-md-12" style="margin-bottom: 10px">
                        <p style="margin-bottom: 0"><b>Added By :</b><span id="notification-summery-user"></span></p>
                            <small id="response-time"></small>
                        </div>
                        <div class="col-md-12">
                        <p id="notification-summery-response"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal" id="items-cancel">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-acknowledgment-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Response</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <input type="hidden" value="" id="notification_summery_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-danger alert-danger-acknowledgment" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" id="notification-text-section">
                        <tex class="col">
                            <label for="discount-code">Text</label>
                            <textarea id="notification_text"  class="form-control"></textarea>
                        </tex>
                    </div>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="request-acknowledgment" type="button" class="btn btn-danger">Save</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@endsection

@section('warehouse_scripts')
    <script>
        $('.rhospital_ids').select2({
            width:'100%',
        });
        $('.select_user_groups').select2({
            placeholder: "User Groups",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select-type-values').select2({
            placeholder: "select event",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });

        var notificationReport = $("#notification-report-datatable").DataTable({
            language: {
                "processing": "",
                paginate: {
                    next: '&#8594;', // or '→'
                    previous: '&#8592;', // or '←',
                },
                search: '',
                searchPlaceholder: "Search anything here"
            },
            dom: 'lfBrtip',
            "buttons" : [
                'copy', 'csv', 'pdf', 'print'
            ],
            "responsive": true,
            "autoWidth": false,
            serverSide: true,
            "lengthMenu": [[10, 25, 50, 100,500], [10, 25, 50, 100,500]],
            "processing": true,

            "order": [[ 1, "desc" ]],
            ajax: {
                url : '/operations/notifications/report/datatable',
                data: function (d) {
                    d.user_group = $('#notification-user-group').val(),
                    d.event_gorup = $('#notification-report-group-event-id').val(),
                    d.event_type = $('#notification-event-id').val(),
                    d.date_from = $('#treport-date-from').val(),
                    d.date_to = $('#treport-date-to').val(),
                    d.status_id = $('#notification-status-id').val()
                }
            },
            columns: [
                {data: 'NOTIFICATION_ID', title: 'Serial Number'},
                {data: 'order_number',name:'NOTIFICATION_SUMMARY.RESERVATION_ID', title: 'Reservation #',render:function (data,type,row){
                        if(data != null) @permission('view_reservations_details') return '<a target="_blank" href="/operations/reservations/'+data+'">'+data+'</a>';
                        @else
                            return data;
                    @endpermission
                    else return '';
                    }},
                {data: 'sample_number',name:'NOTIFICATION_SUMMARY.SAMPLE_ID', title: 'Sample #',render:function (data,type,row){
                        if(data != null) @permission('view_samples_details') return '<a target="_blank" href="/operations/samples/'+data+'">'+data+'</a>';
                        @else
                            return data;
                    @endpermission
                    else return '';
                    }},
                {data: 'expired_date', title: 'Expired Date', name: 'NOTIFICATIONS.EXPIRED_AT',render:function (data,type,row){
                        if (row['expired_date'] == '0000-00-00 00:00:00') {
                            return '--';
                        } else {
                            return row['expired_date'];
                        }
                    }},
                {data: 'event_group', title: 'Group',name:'NOTIFICATION_GROUPS.NAME'},
                { data: "STATUS", title: "Status","searchable": false,render:function (data,type,row){
                        var dateNow = null;
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            if(row['IS_ACKNOWLEDGMENT']){
                                return '<span class="btn btn-secondary" style="pointer-events: none;"> Close </span>';
                            }else{
                                return '<span class="btn btn-success" style="pointer-events: none;"> Open </span>';
                            }
                        } else {
                            if (row['IS_CLOSED'] || (row['expired_date'] < dateNow  )) {
                                return '<span class="btn btn-secondary" style="pointer-events: none;"> Close </span>';
                            } else {
                                return '<span class="btn btn-success" style="pointer-events: none;"> Open </span>';
                            }
                        }
                    }
                },
                {data: 'event_type', title: 'Type',name:'NOTIFICATION_TYPES.NAME'},
                {data: 'event_name', title: 'Event',name: 'NOTIFICATION_EVENTS.NAME'},
                {data: 'ID', title: 'Event List',render:function (data, type , row , meta){
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            return '--';
                        } else {
                            return '<a style="color:var(--blazma-primary) !important;cursor: pointer;" class="show-event-list" notification-summary-id="'+row["ID"]+'"><i class="fas fa-sticky-note"></i></a>'
                        }
                    }},
                {data: 'ID', title: 'Tests',render:function (data, type , row , meta){
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            return '--';
                        } else {
                            return '<a style="color:var(--blazma-primary) !important;cursor: pointer;" class="show-notification-test-list" notification-id="'+row["NOTIFICATION_ID"]+'"><i class="fas fa-sticky-note"></i></a>'
                        }
                    }},
                {data: 'TAT_DELAY', title: 'Expected Delaying Time',name:'NOTIFICATIONS.TAT_DELAY',render:function (data, type, row, meta) {
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            return '--';
                        } else {
                            return data+" Hours";
                        }

                    }},
              /*  {data: 'ID', title: 'Quantity of the patient',render:function (data, type , row , meta){
                        if (row['QTY_NOTIFICATION_RECEIVED']) {
                            return row['QTY_NOTIFICATION_RECEIVED']
                        } else {
                            return '--'
                        }
                    }},
                {data: 'ID', title: 'Time Stamp',render:function (data, type , row , meta){
                        if (row['NOTIFICATION_APPROVED_TIME'] && row['NOTIFICATION_FIRST_RECEIVED_TIME']) {
                            let approve = new Date(row['NOTIFICATION_APPROVED_TIME']);
                            let receive = new Date(row['NOTIFICATION_FIRST_RECEIVED_TIME']);
                            return (receive - approve) / 1000;
                        } else {
                            return '--'
                        }
                    }},*/
                {data: 'ID', title: 'Response',render:function (data, type , row , meta){
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            if(row['IS_ACKNOWLEDGMENT'] == 1) {
                                return '<a style="color:var(--blazma-primary) !important;cursor: pointer;" class="show-notification-response" notification-summery-id="' + row["ID"] + '"><i class="fas fa-sticky-note"></i></a>'
                            }
                        }
                        return '';

                    }},
                {data: 'ID', title: 'Action',render:function (data, type , row , meta){
                        if (row['IS_REJECTION_NOTIFICATION']) {
                            if(row['IS_ACKNOWLEDGMENT'] == 0){
                                return '<a href="#" class="btn btn-info acknowledge-notifications" notification-summery-id="'+row["ID"]+'">ACKNOWLEDGMENT</a>';
                            }
                        }
                        return ''
                    }},
            ],
        });

        $("body").on("click", ".acknowledge-notifications",function(){
            let notification_id = $(this).attr("notification-summery-id");
            $("#modal-acknowledgment-modal #notification_summery_id").val( notification_id );
            $('#modal-acknowledgment-modal').modal('show');
        });
        $('#request-acknowledgment').click(function(){
            $(".alert-danger-acknowledgment").slideUp( "slow", function() {});
            $('#request-acknowledgment').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            let notification_summery_id = $("#notification_summery_id").val();
            let text_data = $("#notification_text").val();


            let data = {
                notification_summery_id: notification_summery_id,
                text_data: text_data,
            }
            $.ajax({
                type: "POST",
                url: '/operations/notifications/notification-summery/add-reject-reason',
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {

                $('#request-acknowledgment').prop("disabled",false);
                //$('#hospital-location-table').DataTable().ajax.reload();
                notificationReport.draw();
                $('#modal-acknowledgment-modal').modal('hide');
                $('#request-acknowledgment').html('Save').attr('disabled', false);
                $("#notification_text").val('');
            }).fail(function(data) {
                var response = JSON.parse(data.responseText);
                $('#request-acknowledgment').prop("disabled",false);
                $(".alert-danger-acknowledgment").html(response.error);
                $(".alert-danger-acknowledgment").slideDown( "slow", function() {});
                $('#request-acknowledgment').html('Save').attr('disabled', false);
            });
            return false;
        });

        $("#notification-report-group-event-id").change(function(){
            if($("#notification-report-group-event-id").val()) {
                $.ajax({
                    type: "GET",
                    url: "/operations/notifications/group/" + $("#notification-report-group-event-id").val() + "/events",
                }).done(function (data, textStatus, xhr) {
                    if (data) {
                        $("#notification-event-id").empty();
                        $("#notification-event-id").append('<option value="">select events</option>');

                        var events = "{{isset($notification) ? $notification->EVENT_ID : null}}";
                        var selected = '';
                        data.forEach(function (element) {
                            selected = '';
                            if(events && events == element.ID) {
                                selected = 'selected';
                            }
                            $("#notification-event-id").append('<option value="' + element.ID + '" '+ selected +' >' + element.NAME + '</option>');

                        })
                    } else {
                        alert("Please re-login, your session has ended");
                    }
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseJSON.errorMessage);
                });
            }else{
                $("#notification-event-id").empty();
                $("#notification-event-id").append('<option value="">Select events</option>');
            }
        });
        $("#notification-report-group-event-id").trigger('change');

        $("#notification-report-group-event-id").change(function(){
            notificationReport.draw();
        });
        $("#notification-event-id").change(function(){
            notificationReport.draw();
        });
        $("#treport-date-from").change(function(){
            notificationReport.draw();
        });
        $("#treport-date-to").change(function(){
            notificationReport.draw();
        });
        $("#notification-user-group").change(function(){
            notificationReport.draw();
        });

        $("#notification-status-id").change(function(){
            notificationReport.draw();
        });


    </script>
    @include('operations.notification.script.index')
@endsection