@extends('admin.layouts.admin')
@section('title')
Admin | Withdraw request list
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap4.css') }}">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/custom.button-switch.css') }}">
<style type="text/css">
  #artists-table th:nth-child(1){
    width: 25%!important;
  }
  #artists-table th:nth-child(2){
    width: 25%!important;
  }
  #artists-table th:nth-child(3){
    width: 25%!important;
  }
  #artists-table th:nth-child(5){
    width: 10%!important;
  }

  p.total_earning, .total_paid, .total_approved{
    color: #20a093;
  }

  .paid-request{
    color: #20a093;
    font-weight:bold;
  }

  .reject-request{
    color: #b00a01;
    font-weight:bold;
  }


</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Withdraw request list</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Payment</a></li>
              <li class="breadcrumb-item"><a href="{{ route('admin.payment.withdraw') }}">Withdrawal</a></li>
              <li class="breadcrumb-item active">Withdraw request list</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">

    <p>&nbsp;</p>
    <!-- <div class="container-fluid"> -->
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        
        <!-- Main row -->
        <div class="row">
        <div class="col-md-12">
        <div class="card card-info">

            @if ($errors->any())            
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="card-header">
                <h3 class="card-title">Service Information</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->              
                <div class="card-body">
                  <div class="form-group">

                    <div class="row">
                      <div class="col-md-5">
                        <label for="exampleInputEmail1">Service Approval Status</label>
                      </div>
                      <div class="col-md-7">
                        <p class="">
                          @if(isset($professionalService) && $professionalService->is_active == 1)
                            <span class="badge badge-success status">ACTIVE</span>
                          @else                      
                            <span class="badge badge-secondary status">INACTIVE</span>
                          @endif
                        </p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-5"><label for="exampleInputPassword1">Business name</label></div>
                      <div class="col-md-7"><p class="text-success" style="font-weight: bold;">{{ $professionalService->business_name??'' }}</p></div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputEmail1">Service Type</label></div>
                      <div class="col-md-7">
                      <p class="">{{ $professionalService->serviceType->name??'' }}</p></div>
                    </div>
                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputEmail1">Price per Slot</label></div>
                      <div class="col-md-7">
                      <p class="">${{ $professionalService->price_per_slot??0.00 }}</p></div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputEmail1">Service Address</label></div>
                      <div class="col-md-7">
                      <p class="">{{ $professionalService->address??'' }}</p></div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputEmail1">Provider Name</label></div>
                      <div class="col-md-7">
                      @if(isset($professionalService->provider) && $professionalService->provider)
                        <span title="Click here to show provider details">
                        <a target="_blank" href="{{ url('admin/user/show/'.$professionalService->provider->id) }}"><b>{{ $professionalService->provider->name }}</b></a>&nbsp;&nbsp;
                        <i class="fa fa-hand-o-left text-dark" aria-hidden="true"></i></span>
                      @else
                        Not found.
                      @endif
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputPassword1">Contact Details</label></div>
                      <div class="col-md-7">
                          <p class="">
                          {{ $professionalService->provider->phone?$professionalService->provider->email:''}}
                          @if($professionalService->provider->phone)
                            <br><i class="nav-icon fa fa-phone"></i> {{ $professionalService->provider->phone }}
                          @endif
                          </p>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputPassword1">Total Earning Amount</label></div>
                      <div class="col-md-7">
                          <p class="total_earning"><strong>$<span class="total_earning">{{ $total_earning??0.00 }}</span></strong></p>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputPassword1">Total Approved Amount</label></div>
                      <div class="col-md-7">
                          <p class="total_approved"><strong>$<span class="total_approved">{{ $total_request??0.00 }}</span></strong></p>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-5">
                      <label for="exampleInputPassword1">Total Paid Amount</label></div>
                      <div class="col-md-7">
                          <p class="total_paid"><strong>$<span class="total_paid">{{ $total_withdrawn??0.00 }}</span></strong></p>
                      </div>
                    </div>

                  </div>
                </div>                
            </div>
          <!-- /.card -->
        </div>
        </div>
        <!-- /.col -->
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <p>&nbsp;</p>
        <div class="form-group">
          <div class="row">
            <div class="col-md-3 pb-md-0 pb-lg-0 pb-3">
              <!-- <label for="exampleInputEmail1">Status</label>  -->
              <select class="form-control filter-button" name="req_status" >
                <option value="">Select Request status</option>
                  @if($req_status)
                    @foreach($req_status as $key => $status)
                      <option value="{{ $key }}" >{{ $status }}</option>
                    @endforeach
                  @endif                  
              </select>                 
            </div>

            <div class="col-md-2">
                <div class="btn btn-primary filter-clear-button" style="display: none;">Clear</div>
            </div>
            <div class="col-md-4"></div>
          </div>
        </div>


        <!-- Main row -->
        <div class="row">
        <div class="col-12">
          <div class="card">            
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="artists-table" class="table table-bordered table-hover" style="width: 100%;">
                <thead>
                <tr>                    
                    <th>Request Amount</th>
                    <th>Payable Amount</th> 
                    <th>Request Date</th>
                    <th>Request Status</th>                    
                    <th>Id</th>                                                         
                </tr>
                </thead>
                <tbody>                
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" class="tfoot"><b>Note::</b>  
                            <label class="switch"><input type="checkbox" checked="" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Already Associated,
                            <label class="switch"><input type="checkbox" disabled="disabled" checked="checked" class="success active-status"><span class="slider round" ></span></label> : Active,
                            <label class="switch"><input type="checkbox" disabled="disabled" class="success"><span class="slider round checkbox-disable"></span></label> : Inactive 
                        </td>
                    </tr>
                </tfoot>                
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>  

      <div class="row">
          <div class="col-md-12">
            <div class="card card-info">
              <div class="card-footer">
                <a href="{{ url('admin/payment/withdraw') }}" class="btn btn-primary">Back</a>&nbsp;                
              </div>
            </div>
          <!-- /.card -->
          </div>
          <div class="col-md-2"></div>
        <!-- /.col -->
        </div>      
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
      <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top" style="display: none;">Top</button>
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script type='text/javascript' src="{{asset('plugins/datatables/jquery.dataTables.js') }}"></script> 
<script type='text/javascript' src="{{asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript">
    var oTable = '';
    $(document).ready(function () {

        oTable = $('#artists-table').DataTable({
           // "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                //"info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            paging: true,
            processing: true,
            serverSide: true,
            ajax: {
                "url": baseUrl + 'admin/payment/withdraw-list/{{ $professionalService->provider->id }}',
                "type": "GET",
                "data": function(d){
                    d.req_status = $("select[name=req_status]").val();
                    d.category  = $("select[name=category]").val();
                    d.fetchMode = $("select[name=fetch-mode]").val();
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },           
            columns: [
                {
                    data: null,
                    name: 'request_amount',
                    className: 'text-left',
                    render: function (data, type, row) {
                        return "$"+row.request_amount;
                    }
                },                
                {
                    data: null,
                    name: 'payable_amount',
                    className: 'text-left',
                    render: function (data, type, row) {
                        return "$"+row.payable_amount;
                    }
                },
                {
                    data: null,
                    name: 'created_at',
                    className: 'text-center',
                    render: function (data, type, row) {
                        return moment(data.created_at).format("DD MMM YYYY, hh:mmA");
                    }
                },
                {
                    data: null,
                    name: 'created_at',
                    className: 'text-center',
                    render: function (data, type, row) {                        
                        
                        if(data.status == "1"){
                            return '<div><span class="btn btn-danger approve-action" data="3" data-id="'+data.id+'">Reject</span>&nbsp;&nbsp;<span class="btn btn-success approve-action" data="2" data-id="'+data.id+'">Approve</span></div>';
                        }
                        else if(data.status == "2")
                            return '<span class="paid-request">Paid</span>';
                        if(data.status == "3")
                            return '<span class="reject-request">Rejected</span>';
                        else
                            return "Error";
                    }
                },
                { data: 'id', name: 'id' }
            ],
            'columnDefs': [ {
                'targets': [ 2, 3 ], /* column index */
                'orderable': false, /* true or false */
            },
            {
                "targets": [ 4 ],
                "visible": false
            },
            {
                "targets": [ 3, 4 ],
                "searchable": false
            }],
            'aaSorting': [ 4, 'DESC']
        });

        $("select[name=req_status], select[name=category], select[name=fetch-mode]").on("change", function(){
            filterButton();
            oTable.draw();
        });

        $(".filter-clear-button").on("click", function(){
            $(".filter-button").each(function(){  
                $(this).val('');
            });
            $(".filter-clear-button").hide();
            oTable.draw();
        });

    });

    function filterButton()
    {  
        $(".filter-clear-button").hide();
        $(".filter-button").each(function(){            
            if(($(this).val()).length)
            {
                $(".filter-clear-button").show();
            }
        });
    }

    $(document).on("click", "#artists-table span.approve-action", function(event){        
        var status = $(this).attr("data");
        var id = $(this).attr("data-id");

        var obj = $(this);

        var confirm_status = confirm("Are you sure to continue process?");

        if(!confirm_status){
          return false;
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'admin/payment/change-withdraw-request-status',
            method: 'post',
            dataType: 'json',
            data: {                
                id: id,
                status: status,
                _token: $('meta[name="csrf_token"]').attr('content')                   
            },
            success: function (data) {
                if (data.success == true) {                    
                    obj.hide();
                    obj.closest("div").html(data.status_message);

                    $("div.card-body").find("span.total_approved").text(data.amount['total_request']);
                    $("span.total_paid").text(data.amount['total_withdrawn']);
                }
            }
        });
    });   
    
</script>
@endsection