@extends('layouts.app')

@section('title', 'Clients |')

@section('content')

<!-- Page Content -->
<div class="content container-fluid" style="padding: 5px;">

    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">Clients</h3>                                
            </div>
            <div class="col-auto float-right ml-auto">
                 @if( auth()->user()->role_id == 1 || auth()->user()->role_id ==2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4  )
                <a href="{{route('client/create')}}" class="btn add-btn " ><i class="fa fa-plus"></i> Add Client</a>
                @endif
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    <!-- Search Filter -->
    <div class="row filter-row">
        
        <div class="col-sm-6 col-md-3">  
            <div class="form-group ">
                <label class="focus-label">Name</label>
                <select id="" class=" client_list client_all form-control onclientSelect">

                </select>                  
            </div>
        </div>
        <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="focus-label">Phone</label>
                <select class=" form-control client_phone" > 
                    
                </select>                
            </div>
        </div>
        <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="">Status</label>
                <select class="form-control select clientStatus"> 
                    <option value="">Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                    <option value="0">Pending</option>                                               
                </select>
                
            </div>
        </div>
        <div class="col-sm-6 col-md-3">  
             <button type="submit" class="btn btn-success searchBtn" style="padding: 3px 10px;margin-top: 30px;min-width: 26px;min-height: 36px;">
            Search
        </button>  
        </div>     
    </div>
    <!-- /Search Filter -->
    <div id="clientResult">
        @include('client.ajax')   
    </div>
    <!--  -->
</div>
<!-- /Page Content -->
<!--  -->
<!-- Invite Modal -->
<div class="modal custom-modal fade" id="inviteModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">

            <form method="post" id="invite_client_form" action="{{route('client/invite/new')}}">
                @csrf
                <div class="form-header">
                    <h3>Invite client</h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;">
                   <p> <i class="fa fa-user-plus"></i> Creating client: </p>
                   <p>1. Invite first - System will send a link on client's email with secret code to verify email is active?</p>
                   <p>2. Client will fill the form with profile detail to access system.</p>
                </div>
                </div>
                
                <div class="form-group">
                <label>First Name <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="first_name">
                    <p style="margin-bottom: 2px;" class="error text-danger" id="error-first_name"></p>  
                </div>

                <div class="form-group">
                <label>Last Name </label>
                    <input class="form-control" type="text" name="last_name">
                </div>
                <div class="form-group">
                    <label>Email Address <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="email">
                    <p style="margin-bottom: 2px;" class=" error text-danger" id="error-email"></p>  
                </div>

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary continue-btn" data-loading-text="sendig...">Send Invitation </button> 
                        </div> 
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            
            </form>

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

<!-- Sned a mail Modal -->
<div id="sendMessageModal" class="modal custom-modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Send a mail - <span class="clientName"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="sendMailForm" action="{{route('/client/sendMail')}}">
          @csrf
          
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Subject</label>
                <input class="form-control subject" type="text" name="subject">
                <p style="margin-bottom: 2px;" class="text-danger" id="error-subject"></p> 
              </div>
            </div>                    
          </div>
          <div class="form-group">
            <label>Your message</label>
            <textarea rows="6" class="form-control summernote description" name="description" placeholder="Enter your message here"></textarea>
            <p style="margin-bottom: 2px;" class="text-danger" id="error-description"></p> 
          </div>
                                                  
          <div class="submit-section">
            <input type="hidden" id="input_client_id" name="client_id" value="">
            <button class="btn btn-primary submit-btn">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- /send mail Modal -->           


<!-- Make inactive Modal -->
<div class="modal custom-modal fade" id="delete_employee" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-header">
                    <h3>Inactive Client</h3>
                    <p>Are you sure want to Inactive?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <a href="javascript:void(0);" class="btn btn-primary continue-btn">Disable</a>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Delete Employee Modal -->
 
<!-- /show status Modal -->
<div class="notification-popup hide">
    <p>
        <span class="task"></span>
        <span class="notification-text"></span>
    </p>
</div>


<!-- Script -->
<script type="text/javascript">

$(document).ready(function(){
    var notificationTimeout;

//Shows updated notification popup 
var updateNotification = function(task, notificationText, newClass){
    var notificationPopup = $('.notification-popup ');
    notificationPopup.find('.task').text(task);
    notificationPopup.find('.notification-text').text(notificationText);
    notificationPopup.removeClass('hide success');
    // If a custom class is provided for the popup, add It
    if(newClass)
        notificationPopup.addClass(newClass);
    // If there is already a timeout running for hiding current popup, clear it.
    if(notificationTimeout)
        clearTimeout(notificationTimeout);
    // Init timeout for hiding popup after 3 seconds
    notificationTimeout = setTimeout(function(){
        notificationPopup.addClass('hide');
    }, 5000);
};

//
$(document).on('click','.openMessageModal',function(){  
    var userName    ="";
    var user_id = $(this).attr('data');
    $('#input_client_id').val(user_id);

    $('#invite_client_form')[0].reset();
    $('.is-invalid').removeClass('is-invalid');
    $('.error').text('');
    $('#sendMessageModal').modal();

    userName    = $("table.clientTable").find("[data='" + user_id + "']").find('td.userName').find('a.uName').text();  

    if(userName ==""){
        userName    = $("table.clientTable").find("[data='" + user_id + "']").find('td.userEmail').find('span').text();  
    }
    $(".clientName").html(userName);
    console.log(userName);
});
// submit form
$(document).on('submit', 'form#sendMailForm', function (event) {

    $("#overlay").fadeIn(300);　

    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    var $btn = $(this);

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {

            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                
                $("#overlay").fadeOut(300);

                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#sendMessageModal').modal('hide');
                $("#overlay").fadeOut(300);
                updateNotification(' ', 'Mail has been sent to client!', 'success');

            }
        },
        error: function (xhr, textStatus, errorThrown) {
            $("#overlay").fadeOut(300);
            alert("Error: " + errorThrown);

        }
    });
    return false;
});

//

$(document).on('click','.inviteModalBtn',function(){
    $('#invite_client_form')[0].reset();
    $('.is-invalid').removeClass('is-invalid');
    $('.error').text('');
    $('#inviteModal').modal();
});

// submit form
$(document).on('submit', 'form#invite_client_form', function (event) {

    $("#overlay").fadeIn(300);　

    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    var $btn = $(this);

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {

            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                
                $("#overlay").fadeOut(300);

                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                $("#overlay").fadeOut(300);
                 window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            $("#overlay").fadeOut(300);
            alert("Error: " + errorThrown);

        }
    });
    return false;
});

//
$('.client_all').on('select2:select', function (e){
    var data = e.params.data.id;
    //loader
    $("#overlay").fadeIn(300);　
    getData(0);
    event.preventDefault();
});

$('.client_phone').on('select2:select', function (e){
    var data = e.params.data.id;
    //loader
    $("#overlay").fadeIn(300);　
    getData(0);
    event.preventDefault();
});


$(document).on('change','.client_phone, .client_all, .clientStatus', function (e){
    
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

//
$(document).on('click','.searchBtn', function (e){ 
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();
});

// 
$(document).on('click', '.pagination a',function(event){
    //loader
    $("#overlay").fadeIn(300);　
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getData(page);
});

});

function getData(page){

    var client_id =    $(".client_all").val();                
    var status    =    $(".clientStatus option:selected").val();                
    var client_phone    =    $(".client_phone option:selected").val();                

        $.ajax(
        {
            url: '?page=' + page+'&client_id='+client_id+'&status='+status+'&client_phone='+client_phone,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#clientResult").empty().html(data);
            $("#overlay").fadeOut(300);
            //debug to check page number
            // location.hash = page;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            alert('No response from server');

        });

}
</script>

@endsection