@extends('_layout.layout')

@section('title') Customer: {{$apiUser->firstname}} {{$apiUser->lastname}}
@endsection

@section('header')
<h1> <a href="{{route('getCompanyDetails',$apiUser->company_id)}}">{{$apiUser->company->name}}</a> <small>Customer details - <strong>{{$apiUser->firstname}} {{$apiUser->lastname}}</strong></small></h1>
@endsection

@section('modals')
@include('_layout.partials.deletemodal')
@include('_layout.partials.confirmmodal')
@endsection

@section('content')

<div class="row">

  <div class="col-lg-6">
    <div class="portlet box green">
      <div class="portlet-title">
        <div class="caption"><i class="icon-user"></i><span class="caption-subject bold uppercase"> Customer details</span></div>
      </div>
      <div class="portlet-body">
        <div class="row static-info">
          <div class="col-md-5 name"> Name: </div>
          <div class="col-md-7 value"> {{$apiUser->firstname}} {{$apiUser->lastname}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Email: </div>
          <div class="col-md-7 value"> {{$apiUser->email}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Phone: </div>
          <div class="col-md-7 value"> {{$apiUser->phone?'('.substr($apiUser->phone, 2, 3).') '.substr($apiUser->phone, 5, 3).'-'.substr($apiUser->phone, 8):$apiUser->phone}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Site: </div>
          <div class="col-md-7 value"> {{$apiUser->site}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Timezone: </div>
          <div class="col-md-7 value"> {{$apiUser->timezone}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Can create campaigns/groups? </div>
          <div class="col-md-7 value">
            {!! Form::open(['route' => ['postChangeUserOptionCreateCampaign',$apiUser->id],'class' => 'form-horizontal', 'id' => 'changeUserOptionCreateCampaignForm']) !!}
              <label class="mt-checkbox mt-checkbox-outline">
                <input name="can_create_campaigns" type="checkbox" {{$apiUser->can_create_campaigns==1?'checked="true"':''}}  id="changeUserOptionCreateCampaignButton"> 
                <span></span>
              </label>
            {!! Form::close() !!}
          </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Twilio number: </div>
          <div class="col-md-3 value"> {{$apiUser->twilio_number?'('.substr($apiUser->twilio_number, 2, 3).') '.substr($apiUser->twilio_number, 5, 3).'-'.substr($apiUser->twilio_number, 8):$apiUser->twilio_number}} </div>
          @if ($apiUser->twilio_number)
          <div class="col-md-4">
            {{ Form::open(['route' => ['deleteTwilioNumber',$apiUser->id],'class' => 'form-inline inline deleteTwilioNumberForm',
                'id' => 'deleteTwilioNumberForm'.$apiUser->id, 'data-item-id' => $apiUser->id, 'data-item-data' => $apiUser->firstname.' '.$apiUser->lastname]) }}
              {{Form::hidden('_method','POST')}}
              <button type="submit" class="btn btn-sm black"><i class="fa fa-trash-o"></i> Remove number </a>
            {{ Form::close() }}
          </div>
          @endif
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Twilio number id: </div>
          <div class="col-md-7 value"> {{$apiUser->twilio_number_sid}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Voice mail message: </div>
          <div class="col-md-7 value"> {{$apiUser->voice_message}} </div>
        </div>
        @if ($apiUser->image)
        <div class="row static-info">
          <div class="col-md-5 name"> Image: </div>
          <div class="col-md-7 value">
            <div class="profile-userpic">
              <img src="{{env('AWS_FILES_URL').$apiUser->image}}" class="img-responsive" alt="" style="max-height: 70px;max-width: 70px" > 
            </div>
          </div>
        </div>
        @endif
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="portlet box blue-hoki">
      <div class="portlet-title">
        <div class="caption"><i class="icon-notebook"></i><span class="caption-subject bold uppercase"> Licence details</span></div>
        @if (auth()->user()->hasPermision('apiUser.licence.edit'))
        <div class="actions"><a href="{{route('getUserLicence',$apiUser->id)}}" class="btn blue btn-sm"><i class="fa fa-pencil"></i> Edit licence </a></div>
        @endif

      </div>
      <div class="portlet-body">

        <div class="row static-info">
          <div class="col-md-5 name"> Status: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->getStatus()}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Messages left: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->messages}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Start date: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->start_date}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Expire date: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->expire_date}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Termination date: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->grace_date}} </div>
        </div>
        <div class="row static-info">
          <div class="col-md-5 name"> Licence check date: </div>
          <div class="col-md-7 value"> {{$apiUser->licence->next_check_date}} </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="portlet box blue-steel">
      <div class="portlet-title">
        <div class="caption"><i class="icon-screen-tablet"></i><span class="caption-subject bold uppercase"> Devices</span></div>
      </div>
      <div class="portlet-body">
        <div class="table-responsive">
          @if ($apiUser->devices->count()>0)
          <table class="table table-striped table-bordered table-hover"><tbody>
          <tr>
            <th style="vertical-align:middle;">Name</th>
            <th style="vertical-align:middle; text-align: center;">Activity</th>
            <th style="vertical-align:middle;">Remove date</th>
            <th style="vertical-align:middle; text-align: center; width: 200px">Actions</th>
          </tr>
          @foreach($apiUser->devices as $device)
          <tr>
            <td>{{$device->name}}</td>
            @if ($device->deleted==0)
            <td style="text-align: center;"><span class="label label-success">Active</span></td>
            <td>NA</td>
            @else
            <td style="text-align: center;"><span class="label label-danger">Removed</span></td>
            <td>{{$device->deleted_at}}</td>
            @endif
            <td style="text-align: center;">
              {{ Form::open(['route' => ['postActivateDevice',$device->id],'class' => 'form-inline inline activateDeviceForm',
                  'id' => 'activateDeviceForm'.$device->id, 'data-item-id' => $device->id, 'data-item-data' => $device->name ]) }}
                {{Form::hidden('_method','POST')}}
                @if ($device->deleted==0)
                <button type="submit" class="btn btn-outline btn-circle dark btn-xs red"><i class="fa fa-close"></i> Disable </button>
                @else
                <button type="submit" class="btn btn-outline btn-circle dark btn-xs green"><i class="fa fa-check"></i> Activate </button>
                @endif
              {{ Form::close() }}

              {{ Form::open(['route' => ['deleteDevice',$device->id],'class' => 'form-inline inline deleteDeviceForm',
                  'id' => 'deleteDeviceForm'.$device->id, 'data-item-id' => $device->id, 'data-item-data' => $device->name ]) }}
                {{Form::hidden('_method','DELETE')}}
                <button type="submit" class="btn btn-outline btn-circle dark btn-xs black"><i class="fa fa-trash-o"></i> Delete </button>
              {{ Form::close() }}
            </td>
          </tr>
          @endforeach
        </tbody></table>
        @else
        No data
        @endif
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-6">
    <div class="portlet box purple-soft">
      <div class="portlet-title">
        <div class="caption"><i class="icon-bag"></i><span class="caption-subject bold uppercase">Purchase Requests</span></div>
        @if ($apiUser->purchaseRequests->count()>0)
        <div class="actions"><a href="{{route('getUserPurchases',$apiUser->id)}}" class="btn blue btn-sm"><i class="fa fa-pencil"></i> More </a></div>
        @endif
      </div>
      <div class="portlet-body">
        <div class="table-responsive">
          @if ($apiUser->purchaseRequests->count()>0)
          <table class="table table-striped table-bordered table-hover"><tbody>
          <tr>
            <th style="vertical-align:middle;">Platform</th>
            <th style="vertical-align:middle;">Type</th>
            <th style="vertical-align:middle;">Amount</th>
            <th style="vertical-align:middle;">Transaction ID</th>
            <th style="vertical-align:middle;">Date</th>
          </tr>
          @foreach($apiUser->lastPurchases as $pRequest)
          <tr>
            <td>{{\App\Licence::getPlatformName($pRequest->platform)}}</td>
            <td>{{\App\PurchaseRequest::getTypeDescription($pRequest->type)}}</td>
            <td>{{$pRequest->amount}}</td>
            <td>{{$pRequest->transaction_id}}</td>
            <td>{{$pRequest->created_at}}</td>
          </tr>
          @endforeach
        </tbody></table>
        @else
        No data
        @endif
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="portlet box red-sunglo">
      <div class="portlet-title">
        <div class="caption"><i class="icon-credit-card"></i><span class="caption-subject bold uppercase">Payments</span></div>
        @if ($apiUser->lastPayments->count()>0)
        <div class="actions"><a href="{{route('getUserPayments',$apiUser->id)}}" class="btn blue btn-sm"><i class="fa fa-pencil"></i> More </a></div>
        @endif
      </div>
      <div class="portlet-body">
        <div class="table-responsive">
          @if ($apiUser->lastPayments->count()>0)
          <table class="table table-striped table-bordered table-hover"><tbody>
          <tr>
            <th style="vertical-align:middle;">Platform</th>
            <th style="vertical-align:middle;">Type</th>
            <th style="vertical-align:middle;">Amount</th>
            <th style="vertical-align:middle;">Transaction ID</th>
            <th style="vertical-align:middle;">Original Transaction ID</th>
            <th style="vertical-align:middle;">Date</th>
          </tr>
          @foreach($apiUser->lastPayments as $payment)
          <tr>
            <td>{{\App\Licence::getPlatformName($payment->platform)}}</td>
            <td>{{\App\PurchaseRequest::getTypeDescription($payment->type)}}</td>
            <td>{{$payment->amount}}</td>
            <td>{{$payment->transaction_id}}</td>
            <td>{{$payment->original_transaction_id}}</td>
            <td>{{$payment->purchase_date}}</td>
          </tr>
          @endforeach
        </tbody></table>
        @else
        No data
        @endif
        </div>
    </div>
  </div>
</div>
@endsection


@section('page-script')
<script>
  $(".activateDeviceForm button").on('click', function (e) {
      e.preventDefault();
      $('#confirmModal .modal-title').text('Confirm status change of the device: '+$(this).parent().data('item-data'));
      $('#confirmModal .modal-body').html('Are you sure you want to change the status of the device?');
      $('#confirmModal-confirmButton').data('item-id',$(this).parent().data('item-id'));
      $('#confirmModal-confirmButton').data('type','device');
      $('#confirmModal').modal('show');
  });



  $('#confirmModal-confirmButton').on('click', function (e) {
    if ($(this).data('type')=='device')
      $("#activateDeviceForm"+$(this).data('item-id')).submit();
  });

  $(".deleteDeviceForm button").on('click', function (e) {
      e.preventDefault();
      $('#deleteModal .modal-title').text('Confirm delete the device: '+$(this).parent().data('item-data'));
      $('#deleteModal .modal-body').html('Are you sure you want to delete the device?');
      $('#deleteModal-confirmButton').data('item-id',$(this).parent().data('item-id'));
      $('#confirmModal-confirmButton').data('type','device');
      $('#deleteModal').modal('show');
  });

  $(".deleteTwilioNumberForm button").on('click', function (e) {
      e.preventDefault();
      $('#deleteModal .modal-title').text('Confirm delete of the twilio phone number for: '+$(this).parent().data('item-data'));
      $('#deleteModal .modal-body').html('Are you sure you want to delete the twilio number?');
      $('#deleteModal-confirmButton').data('item-id',$(this).parent().data('item-id'));
      $('#confirmModal-confirmButton').data('type','twilioNumber');
      $('#deleteModal').modal('show');
  });

  $('#deleteModal-confirmButton').on('click', function (e) {
    if ($(this).data('type')=='device')
      $("#deleteDeviceForm"+$(this).data('item-id')).submit();
    if ($(this).data('type')=='twilioNumber')
      $("#deleteTwilioNumberForm"+$(this).data('item-id')).submit();

  });

  $("#changeUserOptionCreateCampaignButton").on('change', function (e) {
    $("#changeUserOptionCreateCampaignForm").submit();
  });



</script>
@endsection

@section('page-css')

@endsection