@extends('layouts.main')
@section('breadcrumb')
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title">Custom Report ({{date('d/m/Y H:i',strtotime($data->created_at))}})</h4>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Custom Report ({{date('d/m/Y H:i',strtotime($data->created_at))}})</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
@endsection
@section('content')

        <div class="clearfix"></div>
          @include('flash::message')
          <div class="clearfix"></div>
          <div class="row">
            <div class="col-md-3">
                  <aside class="card-box">
                    <div class="row">
                      <div class="col-md-12 form-group">
                        <label>Generated by: {{\App\Models\Contact::getContactInfo($data->user_id)}}</label>
                      </div>
                      <div class="col-md-12">
                         <a href="/custom-reports" class="btn btn-danger">Back</a>
                         <a href="#" class="btn btn-success generate"><i class="ion-document-text "></i> Send Report</a>
                      </div>
                    </div>
                  </aside>
            </div>
            <div class="col-md-9">
              <iframe src = "/ViewerJS/#../file_google/{{$data->file}}" style="display: table;float: none;margin: 0px auto;width:100%;max-width:793px;" width="700" height="950" allowfullscreen webkitallowfullscreen></iframe>
            </div>
          </div>
          <div id="modal-generate" class="modal-demo">
                <div class="custom-modal-text" style="overflow:hidden;">
                  {!! Form::model(null, ['url' => '/', 'class'=>'form_sending', 'method' => 'patch', 'files'=>'true']) !!}
                       @include('news.report_fields')
                  {!! Form::close() !!}

                </div>
          </div>

          <style type="text/css">
              .btn-onf-ex{
                float: none;
                margin: 0px auto;
                display: table;
                cursor: pointer;
              }
              .error{
                font-size: 14px;color:#dc3545;
              }
              .custom_emails{
                    height: auto !important;
                    padding-top: 5px;
                    padding-bottom: 5px;
              }
              .custom_emails .select2-search-field{
                    width: 100%;
              }
              .custom_emails .select2-container-multi .select2-choices .select2-search-field input{
                color #fff;
              }
              .custom_emails .select2-container-multi .select2-choices {
                  min-height: 26px;
                  overflow: visible;
              }
              .select2-drop .select2-results .select2-result-selectable{
                border:none !important;
              }
              .select2-container-multi .select2-choices .select2-search-field input.select2-active{
                background: transparent;
                color:#fff;
              }
              .select2-container-multi .select2-choices .select2-search-field input,.select2-container-multi .select2-choices .select2-search-field input.select2-active,.select2-container-multi .select2-choices{
                background: transparent !important;
                color:#fff;
                box-shadow: none !important;
              }
              .select2-drop .select2-results .select2-result-selectable,.select2-drop-active{
                background: transparent !important;
              }
              .custom_emails .select2-container-multi .select2-choices .select2-search-field{
                position: absolute;
                bottom: -49px;
              }
              #modal-generate .row .row{
                    width: 104%;
              }
              #modal-generate .custom-modal-title{
                width: 100%;
                margin-top: -10px;
                    margin-bottom: 20px;
              }
              .select2-drop .select2-results .select2-result-selectable.select2-highlighted .select2-result-label,.select2-drop .select2-results .select2-result-selectable div{
                color: #fff;
                border: 1px solid #4c5a67;
                padding-top: 7px;
                padding-bottom: 7px;
                border-radius: 3px;
                margin-top: 4px;
                background: #434f5c !important;
              }
              .select2-drop .select2-results{
                background: #36404a !important;

              }
              .modal-demo{
                position: relative;
              }
              .select2-drop .select2-results .select2-result div{
                color: #fff;
              }
              .select2-results li{
                background: #434f5c !important;
              }
              .select2-drop,.select2-drop .select2-results{
                border:none !important;
              }
              .info-exc{
                padding-top: 30px;
                margin-bottom: 22px;
              }
              .multiple_select2.form-control {
                height: auto;
                min-height: 38px;
                padding-top: 5px;
              }
          </style>
@endsection
@section('footer_scripts')
<script type="text/javascript">
var modal_generate = new Custombox.modal({
                            content: {
                              effect: 'fadein',
                              target: '#modal-generate'
                            }
                          });

  $(document).on('click','.generate',function(e){
    e.preventDefault();
    modal_generate.open();
  });
  $('.multiple_select2').select2();
  $('.custom_emails').select2({
    tags:true
  });
  $(document).on('submit','.form_sending',function(e){
    e.preventDefault();
  });
  function validateEmail(elementValue){
     var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
     return emailPattern.test(elementValue);
   }
  $(document).on('click','.form_sending .btn.btn-success',function(e){
    e.preventDefault();
    $('.error').empty();
    var formData = new FormData();
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    formData.append('existed_users', $('select.multiple_select2').val());


    if($('select.multiple_select2').val()==null){
      $('.error-existed_users').text('Please select at least one recipient!');
      return false;
    }

    if($('input.custom_emails').val()){


      var arr_emails = $('input.custom_emails').val().split(",");

      var show_error = false;
      $.each(arr_emails,function(index,element){
          em = validateEmail(element);
          if(!em){
            show_error = true;
            $('.error-custom_emails').append('<span>Invalid Email: '+element+'</span><br/>');
          }
      });
      if(show_error){
        return false;
      }
      formData.append('custom_emails', $('input.custom_emails').val());
    }

    $('#wrapper').append('<div class="loader">Loading...</div>');
      $('#wrapper').append('<div class="laybg"></div>');

      $.ajax({
          url: '/news-send-report/{{$data->id}}',
          data:formData,
          type: "POST",
          dataType: "json",
          contentType: false,
           processData: false,
          success: function (resp) {
            location.href = '/custom-reports';
          }
      });
  });

</script>
@endsection