@extends('admin.layouts.index')

@push('style')
<link rel="stylesheet" href="{{asset('assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/color_skins.css')}}">
<link rel="stylesheet" href="{{asset('assets/plugins/multi-select/css/multi-select.css')}}">
<link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}" />
<link rel="stylesheet" href="{{asset('assets/plugins/magnific-popup/dist/magnific-popup.css')}}" />


<style type="text/css">
     span ul {

          list-style: none;
          padding: 0;
          margin: 0;
          font-weight: bold;

     }


     a {
          color: #47a0b6;
     }
</style>
@endpush

@section('content')

<section class="content home">
     <div class="block-header">
          <!-- Start Content-->
          <div class="container-fluid">

               <div class="row">
                    <div class="col-12">
                         <div class="page-title-box">
                              <div class="page-title-right">
                                   <ol class="breadcrumb mb-4">
                                        <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Language Cafe</a></li>
                                        <li class="breadcrumb-item active">Send Notification</li>
                                   </ol>
                              </div>
                              <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                         </div>
                    </div>
               </div>


               <div class="col-lg-12">
                    <div class="card">
                         <div class="header">
                              <a class="btn btn-white float-left ml-2 mt-2" onclick="history.go(-1)">
                                   <i class="material-icons text-muted">arrow_back</i>
                              </a>
                         </div>
                         <div class="body">
                              <div class="form-outline">

                                   <div class="form-group form-float">
                                        <div class="form-line" style="width: 20%;">
                                             <input type="text" id="myinput" class="form-control" placeholder="Search here" />
                                        </div>
                                   </div>
                              </div>



                              <form method="POST" action="#" data-validate="parsley" id="add_notification" name="add_notification" role="form" data-parsley-validate="">
                                   @csrf

                                   <div class="form-group form-float mb-0">
                                        <div class="form-line">
                                             <textarea class="form-control" name="message" placeholder="Message" data-parsley-required="true" data-parsley-required-message="Please enter an message" data-parsley-errors-container="#messageerror"></textarea>
                                        </div>
                                        <span id="messageerror" class="text-danger"></span>
                                   </div>


                                   <div class="row" id="user_selection">
                                        <div class="form-group form-float m-l-10">
                                             <p class="mb-3 ml-2">Select User:</p>
                                             <div class="row mt-2 ml-1">
                                                  <div class="col-md-6">
                                                       <select id="vendor_optgroup" class="ms" multiple="multiple" name="user_ids[]" id="user_ids" required data-parsley-errors-container="#user_select" data-parsley-error-message="Please select user">
                                                            @if(count($user) > 0)
                                                            @foreach($user as $userData)
                                                            <option class="options" value="{{ $userData->id }}">{{ $userData->first_name }} {{ $userData->last_name }}</option>
                                                            @endforeach
                                                            @endif

                                                       </select>
                                                       <span id="user_select" class="text-danger"></span>
                                                  </div>
                                             </div>
                                        </div>


                                        <div class="checkbox checkbox-primary col-lg-2 col-lg-offset-1">
                                             <input id="select_vendor" type="checkbox">
                                             <label for="select_vendor">
                                                  <strong> Select All</strong>
                                             </label>
                                        </div>

                                        <div class="row mt-3">
                                             <div class="form-group m-l-10">
                                                  <div class="col-lg-12">
                                                       <button class="btn btn-primary waves-effect waves-light" type="submit" id="submit">
                                                            Send
                                                       </button>
                                                       <a href="javascript:void(0)" onclick="history.go(-1)" class="btn btn-custom-cut waves-effect btn-file mx-1">
                                                            <span>Cancel</span>
                                                       </a>

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

                                   </div>

                              </form>









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

          </div>
</section>

@push('script')
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>
<script src="{{asset('assets/plugins/multi-select/js/jquery.multi-select.js')}}"></script><!-- no -->
<script src="{{asset('assets/plugins/magnific-popup/dist/jquery.magnific-popup.min.js')}}"></script>
<script>
     $(document).ready(function() {

          $('#selectAll').change(function() {
               if ($(this).prop('checked')) {
                    $('#users option').prop('selected', true);
               } else {
                    $('#users option').prop('selected', false);
               }
          });

          $('#select_vendor').change(function() {
               if ($(this).is(':checked')) {
                    $("#vendor_optgroup").multiSelect('select_all');

               } else {
                    $("#vendor_optgroup").multiSelect('deselect_all');
               }

          });

          $('#vendor_optgroup').multiSelect({
               selectableOptgroup: true
          });

     });



     $(document).ready(function() {
          $("#myinput").on("keyup", function() {
               var value = $(this).val().toLowerCase();
               $(".ms-elem-selectable").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
               });
          });
     });

     
</script>



@endpush