@extends('admin.layout.main')
@section('title',$header['title'])
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
  <style>
    .form-item input.is-valids+label {
      font-size: 11px;
      top: -5px;
    }
  </style>


      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 d-flex breadcrumb-style">
              <h1 class="m-0">Notification - Add</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item"><a href="{{ route('manual-notification.index') }}">Notifications</a></li>
                <li class="breadcrumb-item active">Add</li>
              </ol>

            </div><!-- /.col -->

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

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 pt-4 px-3 w-100">
              <form id="dataForm" class="form row pt-3 mb-0 validate"  action="{{ route('manual-notification.store') }}" enctype="multipart/form-data" method="post">
              @csrf
                
                <div class="col-md-6">
                  <div class="mb-3 filter-form">
                    <div class="form-floating form-item mb-3">
                        <div class="form-item form-float-style serach-rem mb-3">
                          <div class="select top-space-rem after-drp form-float-style ">
                          <select data-live-search="true" id="user_type" name="user_type" class="order-td-input selectpicker select-text height_drp is-valid">
                                <option value="">Select User Type</option>
                                <option value="dealer">Dealer</option>
                                <option value="exclusive_dealer">Exclusive Dealer</option>
                                <option value="channel_partner">Channel Partner</option>
                                <option value="distributor">Distributor</option>
                                <option value="contractor">Contractor</option>
                            </select>
                            <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">Select User Type <span class="req-star">*</span></label>
                          </div>                        
                        </div>
                    </div>
                  </div>
                  <div class="form-check form-checkbox-list">
                      <input class="form-check-input" type="hidden" name="applicable_user" id="applicable_user" value="user">
                      <input class="form-check-input" type="checkbox" name="applicable_user" id="checkboxSuccess2" value="all">
                    <label class="form-check-label" for="flexCheckDefault14">
                      All Users
                    </label>
                  </div>
                  <div class="mb-3 filter-form">
                    <div class="form-floating form-item mb-3">
                        <div class="form-item form-float-style serach-rem mb-3">
                          <div class="select top-space-rem after-drp form-float-style  ">
                             <select data-live-search="true" name="user_id[]" multiple id="user_id" class="order-td-input js-select2 select-text height_drp is-valid disable-user">
                             
                            </select>
                            
                            <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">Select User <span class="req-star">*</span></label>
                          </div>                        
                        </div>
                    </div>
                  </div>
                  <div class="mb-3 filter-form">
                    <div class="form-floating form-item mb-3">
                        <div class="form-item form-float-style serach-rem mb-3">
                          <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" id="SelExample" class="selectpicker select-text is-valid" name="category_id" required>
                             <option value="">Select Category</option> 
                            @foreach($parentCategories as $category)
                            <option value="{{$category['id']}}" disabled=""> @if($category['parent_category_name'] != "") {{$category['parent_category_name']}} >> @endif {{$category['name']}}</option>
                                
                                @if(!empty($category['child_category']))
                                
                                @foreach($category['child_category'] as $childCategory)
                                
                                    @if($childCategory['is_parent']==0)
                                            
                                        <option class="level_1" value="{{ @$childCategory['id'] }}">{{ucwords(@$childCategory['name'])}}</option>
                                            
                                              
                                        @endif
                                       
                                    @endforeach                     
                                    
                                @endif
                            
                            @endforeach
                         

                        </select>
                          <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">Select Category Name</label>
                        </div>                        
                    </div>
                    </div>
                  </div>
                  <div class="form-item form-float-style">
                    <input name="notification_image" type="file" id="notification_image" class="file-upload" autocomplete="off">
                    <label for="notification_image">Upload Image</label>
                  </div>
                  <div class="form-item form-float-style">
                    <input type="text" id="notification_title" name="notification_title" autocomplete="off" class="is-valid">
                    <label for="notification-title">Notification Title</label>
                  </div>
                  <div class="form-item form-float-style">
                    <input type="text" id="notification_message" name="notification_message" class="is-valid" autocomplete="off">
                    <label for="notification_message">Notification Description</label>
                  </div>
                  <div class="form-item form-float-style">
                    <input type="text" id="datepicker" name="notification_date" class="is-valids" placeholder="DD/MM/YYYY" autocomplete="off">
                    <label for="">Date</label>
                  </div>
                  <div class="form-item form-float-style">
                    <input type="time" id="time" name="notification_time">
                    <label for="">Time</label>
                  </div>
                  <div class="filter-form">
                    <div class="form-floating form-item mb-3">
                        <div class="form-item form-float-style serach-rem mb-3">
                          <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" name="status" id="status" class="order-td-input selectpicker select-text height_drp is-valid">
                              <option value="1" selected>Active</option>
                              <option value="0">Inactive</option>
                            </select>
                            <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">Status</label>
                          </div>                        
                        </div>
                      </div>
                  </div>

                </div>
                <div class="col-md-6 mobile-preview-side">
                  <div class="card card-default">
                    <div class="card-body">
                      <h2 class="device-preview-title">Device Preview</h2>
                      <div class="form-group form-group-default image-box-frm view" id="">
                        <img src="{{ URL::asset('assets/dist/img/mobile-preview.png') }}" alt="" style="width: 100%; position: relative;"></div>
                      <div class="mobile-data-view">
                        <div class="text-notify">
                          <h5 id="title">Title</h5>
                          <p id="message">Notification Message will appear here</p>
                        </div>
                        <!-- <img src="" alt=""> -->
                        <img id="image" src="#" alt="Your Image" />
                      </div>
                    </div>
                  </div>
                </div>


              
              <div class="cards-btn mt-3">
                <button type="submit" class="btn btn-success form-btn-success">Submit</button>
                <a href="{{ route('manual-notification.index') }}" class="btn btn-danger form-btn-danger">Cancel</a>
              </div>
              </form>
            </div>
            


          </div>
          <!-- /.row -->
        </div>
        <!--/. container-fluid -->
      </section>
  @endsection
  @section('js')  
  
  <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
  <!-- Page specific script -->
  <script>
    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {
      //jquery Form validation
      $('#dataForm').validate({
        rules: {
          notification_image: {
            required: true,
            extension: "jpg|jpeg|png",

          },
          user_type:{
            required: true,
          },
          user_id:{
            required: true,
          },
          category_id:{
            required:true
          },
          notification_title:{
            required: true,
          },
          notification_message:{
            required: true,
          },
          notification_date:{
            required:true
          },
          notification_time:{
            required:true
          }
        },


        messages: {
          notification_image: {
            required: "Please Upload Category Image",
            extension: "Please select image format must be .jpg, .jpeg or .png"
          },
          user_type:{
            required: "Please select an User Type",
          },
          user_id:{
            required: "Please select an User",
          },
          category_id:{
            required:"Please select a Category"
          },
          notification_title:{
            required:"Please enter a Notification Title"
          },
          notification_message:{
            required:"Please enter a Notification Message"
          },
          notification_date:{
            required:"Please select a Notification Date"
          },
          notification_time:{
            required:"Please select a Notification Time"
          }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });

  </script>
  <script>

    $(document).ready(function(){
     
    $( "#user_type" ).change(function() {
      
            var url = '{{ route("admin.get_users",":id") }}';
            url = url.replace(':id', this.value );  
            // var user_type = $("#user_type").val();
            $.ajax({
                type: "GET",
                url: url,
                // data:user_type,
                 success: function(data){
                   
                    
                    optionoldselected = "{{@old('user_id')}}";
                    // var obj = jQuery.parseJSON( data );
                    var obj = JSON.parse(data);
                    $('#user_id').html('');
                    // $('#user_id').append('<option value="all">All</option>');
                    $.each( obj, function( key, value ){
                        optionText = value['text'];
                        optionValue = value['id'];

                        selected="";
                        if(optionValue==optionoldselected){
                            selected="selected";
                        }
                        $.each( optionoldselected, function( index1, value1 ){
                              if(optionValue==value1['user_id']){
                                selected="selected";
                              }
                            });
                        
                        $('#user_id').append(`<option ${selected} value="${optionValue}">
                            ${optionText}
                        </option>`);
                        
                    });
                }
                
            });
        });
      });
     //get notification-image
     function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();

              reader.onload = function (e) {
                  $('#image').attr('src', e.target.result);
              }

              reader.readAsDataURL(input.files[0]);
          }
        }
        $("#notification_image").change(function(){
          readURL(this);
        });
        
    // INCLUDE JQUERY & JQUERY UI 1.12.1
    $(function () {
      $( "#checkboxSuccess2" ).change(function() {
            // if($(this).is(':checked') && $(this).val() == 'all'){
            if($(this).is(':checked')){
              $('.disable-user').attr('disabled','disabled')
              $('#user_id').html('').removeClass('is-invalid');
              $('#applicable_user').val('all');
            }else{
              $('#applicable_user').val('user');
              $('#user_type').trigger('change');
              $('.disable-user').removeAttr('disabled','disabled');
              
            }
      });
      $('#checkboxSuccess2').trigger('change');
      // $('#user_id').trigger('change');
      $("#datepicker").datepicker({
        dateFormat: "dd-mm-yy",
        duration: "fast"
      });

       //get notification-title
       $("input#notification_title").change(function(){
          $("#title").html($(this).val());
        });
        //get notification-message
        $("input#notification_message").change(function(){
          $("#message").html($(this).val());
        });
    });
    // valid in input materila js

    const inputs = document.querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("blur", (event) => {
        if (event.target.value) {
          input.classList.add("is-valid");
        } else {
          input.classList.remove("is-valid");
        }
      });
    });

    const textareas = document.querySelectorAll("textarea");

    textareas.forEach((textarea) => {
      textarea.addEventListener("blur", (event) => {
        if (event.target.value) {
          textarea.classList.add("is-valid");
        } else {
          textarea.classList.remove("is-valid");
        }
      });
    });
    // //////

    CKEDITOR.replace('editor1');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });


    


    // Check all fields on submit
    document.addEventListener('submit', function (event) {

      // Only run on forms flagged for validation
      if (!event.target.classList.contains('validate')) return;

      // Get all of the form elements
      var fields = event.target.elements;

      // Validate each field
      // Store the first field with an error to a variable so we can bring it into focus later
      var error, hasErrors;
      for (var i = 0; i < fields.length; i++) {
        error = hasError(fields[i]);
        if (error) {
          showError(fields[i], error);
          if (!hasErrors) {
            hasErrors = fields[i];
          }
        }
      }

      // If there are errrors, don't submit form and focus on first element with error
      if (hasErrors) {
        event.preventDefault();
        hasErrors.focus();
      }

      // Otherwise, let the form submit normally
      // You could also bolt in an Ajax form submit process here

    }, false);
  </script>

<script>
        "use strict";

    $(document).ready(function domReady() {        
        $(".js-select2").select2({
            placeholder: "Select Users",
            theme: "material"
        });
        
        $(".select2-selection__arrow")
            .addClass("material-icons")
            .html("arrow_drop_down");
    });
  </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

@append