@extends('layouts.master')
@section('page_title')
    @if(isset($page_title))
        {{ $page_title }}
    @endif
@endsection

@section('content')
@include('client.new_notes')
<div class="">
  <div class="page-title">
    <div class="title_left">
      </div>
        <div class="title_left">
          <ol class="breadcrumb">
            <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
            <li><a href="{!! url('clients') !!}">Client</a></li>
            <li class="active">Client Details</li>
          </ol>
        </div>
  </div>
  <div class="clearfix"></div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Client Details </h2>

            <div class="clearfix"></div>
          </div>
            <div class="x_content">
              <div class="col-md-3 col-sm-3 col-xs-12 profile_left">
                <div class="profile_img">
                  <div id="crop-avatar">
                    <!-- Current avatar -->
                    <img class="img-responsive avatar-view" src="{{ url('public/assets/img/generic-client.png') }}" alt="Generic Client Icon" title="Change the avatar" width="100px">
                  </div>
                </div>
                <h3>{{ $showclient->name }}</h3>
                <div class="well" style="border-radius: 25px;">
                  Click Account Manager <br>
                  <strong><em> <?php echo $showclient->auth_user_info->name ?? 'N/A' ?> </em></strong>
                </div>
                <h4>Client Name Account Manager</h4>
                <ul class="list-unstyled user_data">
                  <li><i class="fa fa-phone user-profile-icon"></i> <?php echo $showclient->phone ?? "N/A";  ?></li>
                  <li><i class="fa fa-envelope user-profile-icon"></i> <?php echo $showclient->email ?? "N/A";  ?> </li>
                  <li class="m-top-xs"><i class="fa fa-skype user-profile-icon"></i> <?php echo $showclient->skype_name ?? "N/A";  ?></li>
                  <li class="m-top-xs"><i class="fa fa-linkedin user-profile-icon"></i> <?php echo $showclient->linkedin_name ?? "N/A";  ?></li>
                </ul>

                <!-- <a class="btn btn-success"><i class="fa fa-edit m-right-xs"></i>Edit Profile</a> -->
                <br />

                <!-- start skills -->
                <h4>Finance</h4>
                <ul class="list-unstyled user_data">
                  <li><i class="fa fa-phone user-profile-icon"></i> [Phone Number here]</li>
                  <li><i class="fa fa-envelope user-profile-icon"></i>  [email here] </li>
                  <li class="m-top-xs"><i class="fa fa-skype user-profile-icon"></i> [Skype ID Here]</li>
                </ul>                
                <!-- end of skills -->
              </div>
              <div class="col-md-9 col-sm-9 col-xs-12" style="border: 1px solid; min-height: 500px;">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                  <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tabCompany" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Company</a></li>
                    <li role="presentation" class=""><a href="#tabConnection" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Connection</a></li>
                    <li role="presentation" class=""><a href="#tabContract" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Contract</a></li>
                    <li role="presentation" class=""><a href="#tabFinance" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Finance</a></li>
                    <li role="presentation" class=""><a href="#tabNotes" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Notes</a></li>
                  </ul>
                  <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade active in" id="tabCompany" aria-labelledby="home-tab">
                      <strong>Company Details</strong>
                      <p>Country : </p>
                      <p>Company Type : </p>
                      <p>Products </p>
                      <p>Products Description</p>
                      <p>Product Specification</p>
                      <p>Networks</p>
                      <p>Requested Sender IDs</p>


                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabConnection" aria-labelledby="profile-tab">

                      <strong>Connection Details </strong>
                      Click Mobile SMPP Details <br>
                      SMPP Categorisation <br>
                      SMPP Account Name<br>
                      <br>

                      Partner SMPP Details <br>
                      SMPP Categorisation<br>
                      SMPP Account Name<br>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabContract" aria-labelledby="profile-tab">
                      <strong>Contract Details </strong>
                      Contract Type : Bilateral <br>


                      Contract Validity : [------]

                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabFinance" aria-labelledby="profile-tab">
                      <strong>Finance Details </strong>
                      Last Invoice Sent : YES (2023-01-12) <br>


                      Payment Status : Paid (2023-01-15)
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabNotes" aria-labelledby="profile-tab">
                      <strong><h3> Notes</h3> </strong>
                        <div class="pull-right">
                          <!-- {{ url('clients/create-notes') }} -->
                          <button type="button" class="btn btn-primary btn-sm" id="creatNotesBtn">New Notes <i class="fa fa-plus-square"></i> </button>
                        </div>
                        <div class="clearfix"></div>
                        <div style="background-color: #dce2e4; height: 400px; overflow: scroll;">
                              
                            <ul class="messages" style="padding: 15px;">
                              @if($show_notes->isEmpty())
                              <li>No notes found</li>
                              @else
                              <?php for ($i = 0; $i < $show_notes->count(); $i++) {  ?>
                              <li>
                                <div class="message_date">
                                  <h3 class="date text-info"><?php echo date('d', strtotime($show_notes[$i]->created_at)); ?></h3>
                                  <p class="month"><?php echo date('M', strtotime($show_notes[$i]->created_at)); ?></p>
                                  <p class="year"><?php echo date('Y', strtotime($show_notes[$i]->created_at)); ?></p>
                                </div>
                                <div class="message_wrapper">
                                  <h4 class="heading">{{ $show_notes[$i]->client_info->name }}</h4>
                                  <blockquote class="message"><em>Content : </em> {{ $show_notes[$i]->notes_body }}</blockquote>
                                  <br />
                                  <p class="url">
                                    <span class="fs1 text-info" aria-hidden="true" data-icon=""></span>
                                    <a href="#"><i class="fa fa-edit"></i>Account Manager :  {{ $show_notes[$i]->created_by_info->name }} </a>
                                  </p>
                                </div>
                              </li>
                              <?php } ?>
                              @endif
                            </ul>
                            </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
  $(document).ready(function(){
    $('select').select2();
    $('#creatNotesBtn').click(function(evt){
      evt.preventDefault();
      $('#newNotesForm').modal('show');
    });

    $('#newNotesFormForm').submit(function(evt){
    evt.preventDefault();   
    var formData = new FormData($(this)[0]);
    $.ajax({
        type: "POST",
        url: base_url + '/clients/notes_store',
        data : formData,
        processData: false,
        contentType: false,
        async: false,
        success: function (data){
          if (data.code === 1) {
            $("#newNotesFormForm")[0].reset();
            $.alert({
                title: 'Alert!',
                content: 'Notes added successfully',
            });
            setTimeout(function(){
              location.reload();
            }, 8000);
          }
          else if (data.code > 5) {
            $.alert({
                title: 'Alert!',
                content: data.msg,
            });
          }
          else {
            $.alert({
                title: 'Alert!',
                content: 'Your request could not be handled. Try again !',
            });
            
          }
        }
    });     
    });




  });
</script>
@endsection