@extends('layouts.app')
@section('PageHeading', 'Mindbody Activation Management')
@section('bodyClass', 'user-view')
@section('content')
<div class="container_fluid">
   <div class="box_content">
      <div class="box_overlayout">
         <div class="box_innerlayout">
         <div class="profile-header d-md-flex align-items-center justify-content-between">
               <h5 class="mb-2 mb-md-0">
                  @if (count($mbPending) > 0)
                  <span class="text-theme-yellow">{{ count($mbPending) }}</span> Pending
                  @endif
                  Mindbody Requests</h5>
               <form class="filter-search">
                  <input type="text" name="search" id="pending-search" class="form-control" placeholder="Search..." autocomplete="off">
               </form>
            </div>
           <div id="mb_pending_list">
            @include('mindbody.mb_pending_activation_list')
            </div>
           <div class="profile-header d-md-flex align-items-center justify-content-between">
               <h5 class="mb-2 mb-md-0">Mindbody Activation Log</h5>
               <form class="filter-search">
                  <input type="text" name="search" id="mb-search" class="form-control" placeholder="Search..." autocomplete="off">
               </form>
            </div>
            @if (count($mbActive) > 0)
            <div class="table-responsive">
            <table summary="Invoice List" class="table-theme" id="mb-table">
               <thead id="invoiceListHeader">
                  <tr id="invoiceListHeaderCol">
                        <th scope="col">Date Activated</th>
                        <th scope="col">Business Name</th>
                        <th scope="col">Address</th>
                        <th scope="col">Company Admin</th>
                        <th scope="col">Email</th>
                  </tr>
               </thead>
               <tbody id="invoiceListBody">
                  @foreach ($mbActive as $mb)
                  <tr id="invoiceListRow{{$mb->id}}">
                        <td data-sort='{{$mb->mb_activation_date}}'>{{ \App\Helpers\Helper::getHumanDate($mb->mb_activation_date) }}</td>
                        <td>{{ $mb->studio->name }}</td>
                        <td>{{ $mb->studio->address }}</td>
                        <td>{{ $mb->studio->owner->first_name ?? '' }}  {{ $mb->studio->owner->last_name ?? '' }}</td>
                        <td><a  href="mailto:{{ $mb->studio->owner->email }}"  class="autopay_links"> {{ $mb->studio->owner->email ?? '' }}</a></td>
                  </tr>
                  @endforeach
               </tbody>
            </table>
            </div>
            @else
            @include('includes.no_results', ['noResultText' => 'No Record Found'])
            @endif
         </div>
      </div>
   </div>
</div>
<!-- first time login alert -->
@if (session()->has('success'))
<!-- <div class="shortcut">
    <p><span>Handy Tip!</span> Add CloudTasker to your home screen as a shortcut. See browser settings.</p>
    <button type="button" class="close-buttton">
        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.8334 4.2403L12.7591 3.16602L8.50008 7.42506L4.24103 3.16602L3.16675 4.2403L7.4258 8.49935L3.16675 12.7584L4.24103 13.8327L8.50008 9.57363L12.7591 13.8327L13.8334 12.7584L9.57437 8.49935L13.8334 4.2403Z" fill="white"/>
        </svg>
        Close
    </button>
</div> -->
@endif
<!-- end -->

@endsection
@push('scripts')
<script type="text/javascript">    
   $(document).ready(function() {
       oTable = $('#mb-table').DataTable({
           paging: false,
           info: false,
           lengthChange: false,
           searching: true,
           order: [0, 'ASC'],
           columnDefs: [{
               "targets": -1,
               "orderable": false
           }]
       });
       
       @if(!empty($passwordResetVal))
           $('#changePassword').trigger('click');
       @endif    
   });
   $('#mb-search').keyup(function() {
      oTable.search($(this).val()).draw();
   })

   $('#pending-search').keyup(function() {
      var keyword = $(this).val();
      $.ajax({
        url: "{{ route('corporate.mindbody_activation_management')}}?keyword=" + keyword,
        datatype: "html",
        type: "get"
      })
      .done(function (response) {
         $("#mb_pending_list").html(response.html);
      })
      .fail(function (jqXHR, ajaxOptions, thrownError) {
         console.log('Server error occured');
      });
   })
   $('.copy-activation-code').click(function(){
      var string = $(this).attr("data-code");
      var id = $(this).attr("id");
      copyToClipboard(string, id);
   });
   function copyToClipboard(string, id) {    
      let textarea;
      let result;

      try {
         textarea = document.createElement('textarea');
         textarea.setAttribute('readonly', true);
         textarea.setAttribute('contenteditable', true);
         textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
         textarea.value = string;

         document.body.appendChild(textarea);

         textarea.focus();
         textarea.select();

         const range = document.createRange();
         range.selectNodeContents(textarea);

         const sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);

         textarea.setSelectionRange(0, textarea.value.length);
         result = document.execCommand('copy');
      } catch (err) {
         console.error(err);
         result = null;
      } finally {
         document.body.removeChild(textarea);
      }
      $('#' + id).html('Copied');
         setTimeout(
            function() {
                  var cpy_icon =
                     '<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                     '<path d="M9.86654 0.166992H1.86654C1.1332 0.166992 0.533203 0.766992 0.533203 1.50033V10.8337H1.86654V1.50033H9.86654V0.166992ZM9.19987 2.83366L13.1999 6.83366V13.5003C13.1999 14.2337 12.5999 14.8337 11.8665 14.8337H4.52654C3.7932 14.8337 3.19987 14.2337 3.19987 13.5003L3.20654 4.16699C3.20654 3.43366 3.79987 2.83366 4.5332 2.83366H9.19987ZM8.5332 7.50033H12.1999L8.5332 3.83366V7.50033Z" />' +
                     '</svg>';
                  $('#' + id).html(cpy_icon + ' Copy Activation Code');
            }, 5000);
      return true;
   }

   $(document).on("click", ".mb-confirm-link", function (e) {
        $(".common-modal").hide();
        var link = $(this);
        var confirmationmessage = link.data("confirmation");
        var subconfirmationmessage = link.data("subconfirmation");
        e.preventDefault();
        var modal = $(".mb-confirm-modal");
        modal.find("p").text(confirmationmessage);
        modal.find("span").text(subconfirmationmessage);
        modal.modal("show");
        modal.find('a#mb-action-link').attr("href", link.attr("href"));
    });

   $(document).on("click", ".confirm-close", function () {
        $(".mb-confirm-modal").modal("hide");
   });

   $("body").on("click", function(event) {
      if (!$(event.target).closest("#mb-action-link").length && !$(event.target).is("#mb-action-link")) {
         $(".mb-confirm-modal").modal("hide");
      }
   });
   
   $(document).on('click', '.shortcut button', function(){
      $(this).closest('.shortcut').hide();
   })

</script>
<style>
   #mb-table_filter{
   display:none;
   }
</style>
@endpush