@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 Name</th>
                  <th>Commission Amount</th>
                  <th>Date</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                  @foreach($commissions as $key=>$row)
                    <tr>
                      <td>{{$row->first_name.' '. $row->last_name }}</td>
                      <td>{{$row->commission}}</td>
                      <td>{{$row->month.'-'.$row->year}}</td>
                      <td>{{$row->status}}</td>
                      <td>
                        @if($row->status == "unpaid")
                          <a bank_name="{{$row->bank_name}}" sort_code="{{$row->sort_code}}" account_number="{{$row->account_number}}" iban="{{$row->iban}}" 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>
    <!-- /.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>' +
               '</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();
   }
</script>

@endsection