@extends('admin.layouts.master')
@section('content')
<style>
  table.bank_details .td-left{
    padding-right: 20px;
  }
  
</style>
<div class="content-header"> 
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Therapist Commission</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="">Therapist Commission</li><a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
      @if(session()->has('success'))
          <div class="alert alert-success">
              {{ session()->get('success') }}
          </div>
      @endif
      @if(session()->has('error'))
          <div class="alert alert-success">
              {{ session()->get('error') }}
          </div>
      @endif
    <section class="content">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Therapist Id</th>
                  <th>Therapist Name</th>
                  <th>Total USD Commission</th>
                  <th>Total GBP Commission</th>
                  <th>Date</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                  @foreach($commissions as $key=>$row)
                    <tr>
                      <td>{{$row->user_id}}</td>
                      <td>{{$row->first_name.' '. $row->last_name }}</td>
                      <td>{{$row->usd_amount}}</td>
                      <td>{{$row->gbp_amount}}</td>
                      <td>{{$row->month.'-'.$row->year}}</td>
                      <td>{{$row->status}}</td>
                      <td>
                        <a class="update_commission" href="javascript:"therapist_id="{{$row->user_id}}" month="{{$row->month}}" year="{{$row->year}}" usd_adjust_amount = "{{$row->usd_adjust_amount}}" gbp_adjust_amount="{{$row->gbp_adjust_amount}}" data-toggle="modal" data-target="#editCommission" data-toggle="tooltip" title="Edit Commission">
                          <button class="btn-sm btn-info"><i class="nav-icon fas fa-edit"></i></button>
                        </a>
                        
                        <a href="{{route('therapist-commission-details',[$row->user_id,$row->month,$row->year,$row->status])}}"data-toggle="tooltip" title="View Comission Details" ><button class="btn-sm btn-info">
                              <i class="fas fa-eye"></i></button>
                        </a>
                        @if($row->status == "unpaid")
                          <a bank_name="{{$row->bank_name}}" sort_code="{{$row->sort_code}}" account_number="{{$row->account_number}}" iban="{{$row->iban}}" swift_code="{{$row->swift_code}}" therapist_name="{{$row->first_name.' '. $row->last_name }}" class="label label-success" href="javascript:" data-toggle="tooltip" title="Commission Paid" onclick="therapistBankDetails(this)"><button class="btn-sm btn-success">Pay</button></a>
                          <form action="{{ asset('admin/therapist/commission/pay?user_id='.$row->user_id.'&month='.$row->month) }}" method="POST">
                            {{ method_field('POST') }}
                            {{ csrf_field() }}
                          </form>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <div class="modal fade" id="bankDetailsPopup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Bank Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p class="therapist_name"></p>
            <p class="therapist_bank_info"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" onclick="payTherapist()">Mark commission as paid</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="editCommission" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Update Commission</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 id="update_commission_form" style="display: inline;" action="{{route('adjuested_commission')}}" method="POST">
              {{ method_field('POST') }}
              {{ csrf_field() }}
              <input type = "hidden" name="commission_date_year" id="commission_date_year"/> 
              <input type = "hidden" name="commission_date_month" id="commission_date_month"/> 
              <input type = "hidden" name="therapist_id" id="therapist_id"/> 
              <div class="form-group">
                  <label>Currency</label>
                  <select required class="form-control" style="width: 100%;" name="currency" id="currency">
                    <option value="GBP" selected>GBP</option>
                    <option value="USD">USD</option>
                  </select>
              </div>
              <div class="form-group">
                  <label>Adjusted Commission</label>
                  <input type="text" class="form-control" name="commission_amount" id="commission_amount" />
              </div>
            </div>
          
          <div class="modal-footer">
            <button type="button" onclick="document.getElementById('update_commission_form').submit();" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- /.content -->
    <!-- /.content -->
@endsection


@section('script')
<script>
    
  var therapistPayBtn;
  function therapistBankDetails($this) {
    therapistPayBtn = $this;
    var info = '<table class="bank_details table"><tbody>' + 
                  '<tr>' +
                      '<td class="td-left">Therapist Name </td>' +
                      '<td><strong>' + $($this).attr('therapist_name') + '</strong></td>' +
                  '</tr>' +
                  '<tr>' +
                      '<td class="td-left">Bank Name </td>' +
                      '<td><strong>' + $($this).attr('bank_name') + '</strong></td>' +
                  '</tr>' +
                  '<tr>' +
                      '<td class="td-left">Sort code </td>' +
                      '<td><strong>' + $($this).attr('sort_code') + '</strong></td>' +
                  '</tr>' +
                  '<tr>' +
                      '<td class="td-left">Account number </td>' +
                      '<td><strong>' + $($this).attr('account_number') + '</strong></td>' +
                  '</tr>' +
                  '<tr>' +
                      '<td class="td-left">IBAN </td>' +
                      '<td><strong>' + $($this).attr('iban') + '</strong></td>' +
                  '</tr>' +
                  '<tr>' +
                      '<td class="td-left">Swift Code </td>' +
                      '<td><strong>' + $($this).attr('swift_code') + '</strong></td>' +
                  '</tr>' +
               '</tbody></table>';
    $('#bankDetailsPopup .therapist_bank_info').html(info)
    $('#bankDetailsPopup').modal('show');
      /* if (confirm('are you sure?'))
          $($this).next().submit();
          pay_now(therapistPayBtn);    
      */
  }
  
   function payTherapist(){
      if (confirm('are you sure?'))
        $(therapistPayBtn).next().submit();
   }

   $(".update_commission").click(function(){
      var month = $(this).attr('month');
      var year = $(this).attr('year');
      var therapist_id = $(this).attr('therapist_id');
      var usd_adjust_amount = $(this).attr('usd_adjust_amount');
      var gbp_adjust_amount = $(this).attr('gbp_adjust_amount');

      $("#currency").attr('usd_adjust_amount',usd_adjust_amount);
      $("#currency").attr('gbp_adjust_amount',gbp_adjust_amount);
      $("#commission_amount").val(gbp_adjust_amount);
      $("#currency").val("GBP");
      $("#therapist_id").val(therapist_id);
      $("#commission_date_year").val(year);
      $("#commission_date_month").val(month);
   });

   $("#currency").change(function(){
      var currency = $(this).val();
      if(currency == "GBP"){
        $("#commission_amount").val($(this).attr('gbp_adjust_amount'));
      } else {
        $("#commission_amount").val($(this).attr('usd_adjust_amount'));
      }
   });
</script>

@endsection