@extends('admin.layout') @section('content')

<style type="text/css">


.content-wrapper, .right-side, .main-footer {
    padding-top: 60px!important;
}


.product-buttons {

    padding: 30px 0px;

}

.sidenav{
  width: 0px;
}

.sidenav .closebtn{
    display: block;
}

.content-wrapper {
    margin-left: 0px !important;
}
.content-wrapper.close-wrapper {
    margin-left: 300px!important;
}

.pro-btn {

    background: #333;

    border: none;

    color: #fff;

    padding: 10px 25px;

    display: block;

    width: 100%;

    margin: 10px 0px;

    border-radius: 30px;

    cursor: pointer;

}



.pro-btn i {

    color: #fff;

    vertical-align: inherit;

}



.product-buttons .col-3 {

    text-align: center;

}



.product-buttons a{

  color: #fff!important;

}



.blue-color {

    background: #1f328e;

}



.pink-color {

    background: #F44336;

}



.green-color {

    background: #4CAF50;

}



.orange-color {

    background: #FF9800;

}



.light-blue-color {

    background: #03A9F4;

}



.pro-btn:hover{

  opacity: 0.8;

  color: #fff;

}



.pro-btn:focus{

  outline: none;

}



.close {

    position: absolute;

    right: 15px;

}

button.close {

    position: absolute;

    right: 15px;

}

.modal-body {

    padding: 5rem 4rem;

    text-align: center;

}

.modal-body {

    font-size: 16px;

}

.modal-content {

    min-height: auto;

}

.modal-title {

    padding-left: 0;

}

.modal-body p {

    margin-bottom: 0;

    font-size: 24px;

    font-weight: 600;

}
.orderleftBar {
    margin: 15px 15px 0 15px;
    background: white;
    border-radius: 4px;
}
.orderRight {
    background-color: #fff;
    margin: 15px 15px 0 0px;
    border-radius: 4px;
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 110px;
}
/* profile page */
.new_media img{
    border-radius: 50%;
}
.mynav {
    border-bottom: 3px solid #20d2fd;
}
.new_media .newfontsize {
    font-size: 18px;
}
.purchase_hd {
    font-size: 20px;
    width: 100%;
    background-color: #36d8ff;
    color: white;
    padding: 7px 15px;
}
.myavailbox h5 {
    text-overflow: ellipsis;
    width: 100%;
    float: left;
    word-break: break-all;
}
.newitem a {
    text-align: left;
    font-weight: 500;
}
.history_box .newrow{
    padding: 20px 15px;
}
.big_size{
    font-size: 40px;
}
.big_size1{
    font-size: 60px !important; 
    color: #36d8ff;
}
.mybalance_box{
    padding: 51px 0;
}
.table > thead > tr > th {
    padding: 0px !important;
    border: none !important;
}
table tr td {
    padding: 0px !important;
    border: none !important;
}
.table-striped tbody tr {
    background: none !important;
}
/****Email Css***/

li.customerEmailB {
    text-align: right !important;
}

li.customerEmailB a.nav-link {
    text-align: right;
    display: inline;
    font-size: 26px;
    cursor: pointer;
    vertical-align: bottom;
}

li.customerEmailB a.nav-link i {
    margin-right: 4px;
}

    
.form-control {
        text-align: left !important;
}

.form-group {
    margin-bottom: 2rem;
}

.help-block{
  font-weight: normal;font-size: 11px;margin-bottom: 0;position: absolute;
}

textarea.form-control {
    height: calc(2.25rem + 2px);
}

.space-30{
  height: 30px;
  display: block;
}

label {
    font-weight: 600;
}

textarea.form-control {
    height: auto;
}

i.dropdown.icon {
    color: #333;
}

i.icon.delete:before {
    content: "\f00d";
    font-family: Dropdown;
    color: #333;
}

.ui.multiple.dropdown {
    height: auto;
}


select.custom-select.custom-select-sm.form-control.form-control-sm {
    height: auto;
    width: 75px;
}



div#emailCustomerModal .modal-body {
    padding: 28px 20px;
}

.table thead {
    background-color: #36d8ff;
    color: #fff;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

table#example {
    border-top: 1px solid #ddd;
    padding-top: 24px;
}

table#example tr {
    text-align: left;
}

table#example tr td {
    padding: 3px 0px !important;
    font-size: 13px;
}
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
    top: -2px;
    left: 3px;
    font-size: 17px;
}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
    width: 15px;
    height: 15px;
    border-radius: 2px;
}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    padding-left: 19px;
    font-size: 13px;
}
table#example thead th {
    font-size: 13px;
}
table#example thead th:before, table#example thead th:after {
    font-size: 10px;
}
.form-group {
    text-align: left;
}
/*End*/
</style>
<div class="content-wrapper"> 
<section class="orderPage">
              <div class="row no-gutters">
            <div class="col-md-4 col-sm-12">
              <div class="orderleftBar" style="margin: 15px 15px 0 15px;">
                <div class="row no-gutters">
                  <div class="col-7">
                    <div class="ordersearch">
                      <i class="fas fa-search"></i>
                      <input type="search" name="" value="" placeholder="Search..." id="searchable">
                    </div>
                  </div>
                  <div class="col-4 proDuct3">
                    <p class="tPro text-right tpcount">0 Users</p>
                  </div>
                  <div class="col-1 text-center">
                    <a href="#" class="plusIcon"><i class="fas fa-plus"></i></a>
                  </div>
                </div>
                <!-- row -->


                <div class="row no-gutters">
                  <div class="col-12">
                    <div class="orderScroll search_custList">

                    @if (count($customers['result']) > 0) 
                         @foreach ($customers['result'] as $key=>$listingCustomers)
                    <div class="productORder" onclick="Getproductinfo({{ $listingCustomers->customers_id }})">
                      <div class="media new_media">
                          <img class="mr-3" src="{{asset('').'/'.$listingCustomers->customers_picture}}" alt="">
                          <div class="media-body">
                            <h5 class="mt-0">{{ $listingCustomers->customers_firstname }} {{ $listingCustomers->customers_lastname }}</h5>
                            <span>Email: {{ $listingCustomers->customers_email_address }}</span>
                            <div class="row inStock">
                              <div class="col-12">
                                <p>{{$listingCustomers->customers_telephone }}</p>
                              </div>
                             
                            </div>
                          </div>
                        </div>
                    </div>

                @endforeach 
                @endif




                  </div>
                  </div>
                </div>
                <!-- row -->

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

            <div class="col-md-8 col-sm-12">

              <div class="orderRight">
                    
                    
                    <ul class="nav nav-pills mb-3 nav-justified mynav" id="" role="tablist">

                          <li class="nav-item newitem">
                              <a class="nav-link">Customer Profile</a>
                          </li>
                          <li class="nav-item newitem customerEmailB">
                              <a class="nav-link" id="emailCustomerFrom"><i class="fas fa-envelope"></i> </a>
                          </li>

                        

                      </ul>
            <div class="apenddata">
                            
           </div>
                    
                

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





          </div>
        <!-- row -->
        </section>
    </div>

  <!-- Customers Emails Poup -->
    <div class="modal fade" id="emailCustomerModal" tabindex="-1" role="dialog" aria-labelledby="emailCustomerModal">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title" id="deleteCustomerModalLabel">
                Marketing Module</h4>

            </div>

          

            <div class="modal-body">

                 <!-- form start -->
                                    <div class="box-body">
                                       {!! Form::open(array('url' =>'admin/marketingSendEmail', 'method'=>'post', 'class' => 'form-horizontal registration-form form-validate', 'enctype'=>'multipart/form-data','id'=>'frm-example')) !!}
                                      
                    <fieldset>
                        <div class="form-top">
    
                      <table id="example" class="display custom_clist" cellspacing="0" width="100%">
                         <thead>
                            <tr>
                                <th><input name="select_all" value="1" id="example-select-all" type="checkbox" />
                                  <label for="example-select-all">Select All</label></th>
                               <th>Email</th>
                               <th>Name</th>
                               
                            </tr>
                         </thead>
                         <tbody>

                    @if (count($customers['result']) > 0) 
                         @foreach ($customers['result'] as $key=>$listingCustomers)
                           <tr>
                             <td><input type="checkbox" id="inStock_" name="id[]" value="">
                              <label for="inStock_"></label>
                              </td>
                             <td>{{ $listingCustomers->customers_email_address }} </td>
                             <td>{{$listingCustomers->customers_firstname }} {{ $listingCustomers->customers_lastname }} </td>
                             
                           </tr>
                          @endforeach 
                      @endif

                         </tbody>

                      </table>
                      <hr>

                      
                        </div>
                        <div class="form-bottom">
                            
                            <button type="button" class="btn ecom-btn btn-next">Next</button>
                        </div>
            </fieldset>
            <fieldset style="display: none;">
                <div class="form-top">
                    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <label for="subjects">Subject </label>
                                          
                                                <input class="form-control field-validate" name="subjects" type="text" value=""> <span class="help-block" style="font-weight: normal;font-size: 11px;margin-bottom: 0;">                                 </span> 
                                        </div>
                                          
                                   <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                      <label for="customers_emails">Select Template </label>
                                        <select  class="form-control field-validate dropdown" id="emails_temp" name="emails_temp" >
                      @if (count($emails_temp) > 0) 
                        @foreach ($emails_temp as $email_temp)
                                         <option value="">{{$email_temp->temp_name}}</option>
                         @endforeach 
                      @endif
                                      </select>
                                  </div>

                                            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                <label for="message">Message </label>
                                                
                                                    <textarea id="id_message" class="form-control" name="message" type="text" value=""></textarea> <span class="help-block">                                 </span>

                                            </div>
                                          

                                            <!-- /.box-body -->

                </div>
                <div class="form-bottom">
                    
                    <button type="button" class="btn btn-previous ecom-btn">Previous</button>
                     <button type="submit" class="ecom-btn">Send Email</button>
                </div>
            </fieldset>
        {!! Form::close() !!}

                                           </div>

                                    </div>

                                     

            </div>
           


        </div>

    </div>

</div>

  <!-- End -->
    <!-- deleteCustomerModal -->

<div class="modal fade" id="deleteCustomerModal" tabindex="-1" role="dialog" aria-labelledby="deleteCustomerModalLabel">

    <div class="modal-dialog" role="document">

        <div class="modal-content">


            {!! Form::open(array('url' =>'admin/deleteCustomers', 'name'=>'deleteCustomer', 'id'=>'deleteCustomer', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!} {!! Form::hidden('action', 'delete', array('class'=>'form-control')) !!} {!! Form::hidden('customers_id', '', array('class'=>'form-control', 'id'=>'customers_id')) !!}

            <div class="modal-body">

              <center><img style="width: 60px; padding-bottom: 20px;" src="/resources/views/outlets/common/images/cancel.svg" alt=""></center>

                <p>{{ trans('labels.DeleteCustomerText') }}</p>

            </div>

            <div class="modal-footer">



              <button type="button" name="button" data-dismiss="modal">

                <img src="/resources/views/outlets/common/images/cancel.svg" alt="">

              </button>

              <button type="submit" id="deleteEmps">

                <img src="/resources/views/outlets/common/images/verified.svg" alt="">

              </button>



            </div>

            {!! Form::close() !!}

        </div>

    </div>

</div>
<!-- ============end add to customer========= -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  var $ = $.noConflict(true); 
  $(document).ready(function ($){   
   var table = $('#example').DataTable({
      
      'order': [1, 'asc']
   });

   // Handle click on "Select all" control
   $('#example-select-all').on('click', function(){
      // Check/uncheck all checkboxes in the table
      var rows = table.rows({ 'search': 'applied' }).nodes();
      $('input[type="checkbox"]', rows).prop('checked', this.checked);
   });

   // Handle click on checkbox to set state of "Select all" control
   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
      // If checkbox is not checked
      if(!this.checked){
         var el = $('#example-select-all').get(0);
         // If "Select all" control is checked and has 'indeterminate' property
         if(el && el.checked && ('indeterminate' in el)){
            // Set visual state of "Select all" control 
            // as 'indeterminate'
            el.indeterminate = true;
         }
      }
   });
    
   $('#frm-example111').on('submit', function(e){
      var form = this;

      // Iterate over all checkboxes in the table
      table.$('input[type="checkbox"]').each(function(){
         // If checkbox doesn't exist in DOM
         if(!$.contains(document, this)){
            // If checkbox is checked
            if(this.checked){
               // Create a hidden element 
               $(form).append(
                  $('<input>')
                     .attr('type', 'hidden')
                     .attr('name', this.name)
                     .val(this.value)
               );
            }
         } 
      });

      // FOR TESTING ONLY
      
      // Output form data to a console
      /*$('#example-console').text($(form).serialize()); 
      console.log("Form submission", $(form).serialize()); */
       
      // Prevent actual form submission
      e.preventDefault();
   });
});
</script>
<!-- Steps form -->

<script type="text/javascript">
  $(document).ready(function () {

    // next step
    $('.registration-form .btn-next').on('click', function () {
        var parent_fieldset = $(this).parents('fieldset');
        var next_step = true;

        parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
            if ($(this).val() == "") {
                $(this).addClass('input-error');
                next_step = false;
            } else {
                $(this).removeClass('input-error');
            }
        });

        if (next_step) {
            parent_fieldset.fadeOut(400, function () {
                $(this).next().fadeIn();
            });
        }

    });

    // previous step
    $('.registration-form .btn-previous').on('click', function () {
        $(this).parents('fieldset').fadeOut(400, function () {
            $(this).prev().fadeIn();
        });
    });

    // submit
 /*   $('.registration-form').on('submit', function (e) {

        $(this).find('input[type="text"],input[type="email"]').each(function () {
            if ($(this).val() == "") {
                e.preventDefault();
                $(this).addClass('input-error');
            } else {
                $(this).removeClass('input-error');
            }
        });

    });*/

   
});
</script>

<!-- End -->

<script type="text/javascript">
   function Getproductinfo(custid)

 {

     $.ajax({

         url: "{{ route('listingCustomersInfo') }}",

         method: 'GET',

         data: {
             custid: custid
         },

         dataType: 'json',

         success: function(data)

         {

             $('.apenddata').html(data.table_data);

         }

     });

 }

 /** Search Customers***/



 function fetch_customer_data(query = '')
 {
  
$.ajax({

   url:"{{ route('listingCustomersInfoSearch') }}",

   method:'GET',

   data:{query:query},

   dataType:'json',

   success:function(data)

   {
  $('.search_custList').html(data.table_data);
  $('.tpcount').text('');
  $('.tpcount').text(data.total_data+' Users');
   }

  });
 }
  $(document).on('keyup', '#searchable', function(){

  var query = $(this).val();
  //console.log(query);
  fetch_customer_data(query);

 });
</script>
<script type="text/javascript">
    //EmailCustomerModal
  $(document).on('click', '#emailCustomerFrom', function(){
    /*var customers_id = $(this).attr('customers_id');
    $('#customers_id').val(customers_id);*/
    $("#emailCustomerModal").modal('show');
  });

</script>


<!-- include summernote css/js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script>
<script type="text/javascript">
   var jquery = $.noConflict(true); 
  jquery(document).ready(function() {
  //jquery('textarea').summernote();

  //On change dropdown get template

  function Getemailtemplate(temp_id)

 {

    $.ajax({

         url: "{{ route('Getemailtemplate') }}",

         method: 'GET',

         data: {
             temp_id: temp_id
         },

         dataType: 'json',

         success: function(data)

         {
            jquery('#id_message').summernote('destroy');
             jquery('#id_message').summernote('code', data[0].temp_html);
             

         }

     });

 }
 jquery(document).ready(function(){
  var temp_id = jquery('#emails_temp').val();
  Getemailtemplate(temp_id);
  //change
    jquery(document).on('change', '#emails_temp', function(){

      var temp_id1 = jquery(this).val();
      //console.log(query);
      Getemailtemplate(temp_id1);

     });

 });
});
</script>
<script type="text/javascript">
    
</script>

@endsection