@extends('operations.layout.mainlayout')
@section('content')
    <style>
        .btn-outline-default{
            color: var(--blazma-primary) !important;
            border-color: var(--blazma-primary) !important;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <section class="content">
        <div class="container-fluid">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="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>

        <div class="row">
            <div class="mx-auto col-md-10">

                <!-- /.card -->

                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist" style="margin-bottom: 15px;">

                    @permission('show_notification_user_group')
                    <li class="nav-item">
                        <a class="nav-link @if($active == 'user') active @endif" style="color: #007bff !important;" id="notification-users-profile-tab" data-toggle="pill" href="#notification-users-profile" role="tab" aria-controls="notification-users-profile" aria-selected="false">User Groups</a>
                    </li>
                    @endpermission
                    @permission('show_notification_event')
                    <li class="nav-item">
                        <a class="nav-link @if($active == 'event') active @endif" style="color: #007bff !important;" id="notification-event-profile-tab" data-toggle="pill" href="#notification-event-profile" role="tab" aria-controls="notification-event-profile" aria-selected="false">Events</a>
                    </li>
                    @endpermission
                    @permission('add_notification')
                    <li class="nav-item">
                        <a class="nav-link @if($active == 'notifications') active @endif" style="color: #007bff !important;" id="notification-content-profile-tab" data-toggle="pill" href="#notification-content-profile" role="tab" aria-controls="notification-content-profile" aria-selected="false">Notifications</a>
                    </li>
                    @endpermission

                </ul>
                <div class="card">
                    <div class="tab-content" id="alert-content-below-tabContent">
                        @permission('show_notification_user_group')
                            <div class="tab-pane fade @if($active == 'user') active show @endif" id="notification-users-profile" role="tabpanel" aria-labelledby="notification-users-profile-tab">
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="notification-user-groups-datatable" class="table table-bordered table-striped"></table>
                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        <button style="color:#fff"  data-toggle="modal" data-target="#modal-add-notification-user-group" id="add-notification-user-group" class="btn btn-info">Add User Group</button>
                                    </div>
                                </div>
                            </div>

                            <!-- /.card-body -->
                        </div>
                        @endpermission
                        @permission('show_notification_event')
                            <div class="tab-pane fade @if($active == 'event') active show @endif" id="notification-event-profile" role="tabpanel" aria-labelledby="notification-event-profile-tab">
                            <div class="card-body">
                                <table id="notification-event-datatable" class="table table-bordered table-striped"></table>
                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        <button style="color:#fff"  data-toggle="modal" data-target="#modal-add-notification-event" id="add-notification-event" class="btn btn-info">Add Event</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endpermission
                        @permission('add_notification')
                            <div class="tab-pane fade @if($active == 'notifications')  active show @endif " id="notification-content-profile" role="tabpanel" aria-labelledby="notification-content-profile-tab">
                            <div class="card-body">
                                <table id="notification-datatable" class="table table-bordered table-striped"></table>
                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        <a href="/operations/notifications/create" style="color:#fff"  class="btn btn-info">Add Notification</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endpermission
                    </div>
                </div>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.content-header -->
    </div>
    </div>
    </section>
    <!-- /.content-wrapper -->


    <div class="modal fade" id="modal-add-notification-event">
        <div class="modal-dialog modal-add-notification-event">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Event</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="form-add-notification-event" method="post">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="notification-danger-event" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name</p>
                                <input style="padding:15px" class="form-control" type="text" id="notificaiton-event-name" />
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Group</p>
                                <select class="form-control col-md-2 rhospital_ids" id="notification-group-type-id">
                                    <option value=""> -- select group -- </option>
                                    @foreach($groupTypes as $type)
                                        <option value="{{$type->ID}}" data-module="{{$type->MODULE}}"> {{$type->NAME}} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Type</p>
                                <select class="form-control col-md-2 rhospital_ids" id="notification-type-id">
                                    <option value=""> -- select type -- </option>
                                </select>
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px;display: none" id="notification-value-display">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Value</p>
                                <select class="form-control col-md-2 rhospital_ids"  id="notification-values-id">
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px;display: none" id="notification-time-display">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Time</p>
                                <select class="form-control col-md-12"  id="notification-time-id">
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px;display: none" id="notification-result-type-display">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Result Type</p>
                                <select class="form-control col-md-12"  id="notification-result-type-id">
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button style="width:130px;color:#fff" id="add-new-notification-event"  type="button" class="btn btn-info">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-add-notification-user-group">
        <div class="modal-dialog modal-add-notification-user-group">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add User Group</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="form-add-notification-user-group" method="post">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="notification-danger-user-group" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name</p>
                                <input style="padding:15px" class="form-control" type="text" value="" id="notification-user-group-name" />
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Group</p>
                                <select class="form-control col-md-2 rhospital_ids" id="notification-user-group-id">
                                    <option value=""> -- select group -- </option>
                                    @foreach($userGroups as $user)
                                        <option value="{{$user['id']}}" user_label="{{$user['name']}}" user_all="{{$user['is_all']}}"> {{$user['name']}} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px;display: none" id="notification-value-user-display">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;" id="notification-value-user-label-display">Value</p>
                                <select class="form-control col-md-2 rhospital_id" multiple id="notification-value-user-id">
                                    <option value=""></option>
                                </select>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"  value="1"  id="select-all">
                                    <label class="custom-control-label" for="select-all"  style="margin-right: 10px;font-weight: 300;"> Select All</label>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button style="width:130px;color:#fff" id="add-new-notification-user-group"  type="button" class="btn btn-info">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('warehouse_scripts')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border: 1px solid transparent;
            border-radius: 2px;
            background-color: #e3ebf6;
            color: #0A1811;
        }
    </style>
    <script>
        $('.rhospital_ids').select2({
            width:'100%',
        });
        $('.rhospital_id').select2({
            width:'100%',
        });
        $('#select-all').on("click", function (e) {
            if($("#select-all").is(':checked'))
            {
                $(".rhospital_id > .users-option").prop("selected","selected");
                $(".rhospital_id").trigger("change");
            }
            else{
                $(".rhospital_id > .users-option").prop("selected","");
                $(".rhospital_id").trigger("change");
            }

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

@endsection