@extends('layout.layout')
@section('title')
Subject Details
@endsection
@section('content')
			<!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header flex-wrap py-5 border-0">
                    <div class="card-title">
                         <!--begin::Button-->
                        <a href="#" class="btn btn-light-primary font-weight-bolder export-btn exportReport z-index-1 position-relative" data="SubjectDetails" data-type="excel">
                            <span class="svg-icon svg-icon-md">
                               <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Selected-file.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M4.85714286,1 L11.7364114,1 C12.0910962,1 12.4343066,1.12568431 12.7051108,1.35473959 L17.4686994,5.3839416 C17.8056532,5.66894833 18,6.08787823 18,6.52920201 L18,19.0833333 C18,20.8738751 17.9795521,21 16.1428571,21 L4.85714286,21 C3.02044787,21 3,20.8738751 3,19.0833333 L3,2.91666667 C3,1.12612489 3.02044787,1 4.85714286,1 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M6.85714286,3 L14.7364114,3 C15.0910962,3 15.4343066,3.12568431 15.7051108,3.35473959 L20.4686994,7.3839416 C20.8056532,7.66894833 21,8.08787823 21,8.52920201 L21,21.0833333 C21,22.8738751 20.9795521,23 19.1428571,23 L6.85714286,23 C5.02044787,23 5,22.8738751 5,21.0833333 L5,4.91666667 C5,3.12612489 5.02044787,3 6.85714286,3 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            </span>Export to Excel
                        </a>
                        <a href="#" style="margin-left:10px;" class="btn btn-light-success font-weight-bolder export-btn exportReport z-index-1 position-relative" data="SubjectDetails" data-type="pdf">
                            <span class="svg-icon svg-icon-md">
                               <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Selected-file.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M4.85714286,1 L11.7364114,1 C12.0910962,1 12.4343066,1.12568431 12.7051108,1.35473959 L17.4686994,5.3839416 C17.8056532,5.66894833 18,6.08787823 18,6.52920201 L18,19.0833333 C18,20.8738751 17.9795521,21 16.1428571,21 L4.85714286,21 C3.02044787,21 3,20.8738751 3,19.0833333 L3,2.91666667 C3,1.12612489 3.02044787,1 4.85714286,1 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M6.85714286,3 L14.7364114,3 C15.0910962,3 15.4343066,3.12568431 15.7051108,3.35473959 L20.4686994,7.3839416 C20.8056532,7.66894833 21,8.08787823 21,8.52920201 L21,21.0833333 C21,22.8738751 20.9795521,23 19.1428571,23 L6.85714286,23 C5.02044787,23 5,22.8738751 5,21.0833333 L5,4.91666667 C5,3.12612489 5.02044787,3 6.85714286,3 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            </span>Export to PDF
                        </a>
                            <!--end::Button-->
                            <!--begin::Button-->
                        {{-- <a href="#" class="btn btn-light-primary font-weight-bolder export-btn exportReport" data="signup" data-type="pdf">
                            <span class="svg-icon svg-icon-md">
                               <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Selected-file.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M4.85714286,1 L11.7364114,1 C12.0910962,1 12.4343066,1.12568431 12.7051108,1.35473959 L17.4686994,5.3839416 C17.8056532,5.66894833 18,6.08787823 18,6.52920201 L18,19.0833333 C18,20.8738751 17.9795521,21 16.1428571,21 L4.85714286,21 C3.02044787,21 3,20.8738751 3,19.0833333 L3,2.91666667 C3,1.12612489 3.02044787,1 4.85714286,1 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M6.85714286,3 L14.7364114,3 C15.0910962,3 15.4343066,3.12568431 15.7051108,3.35473959 L20.4686994,7.3839416 C20.8056532,7.66894833 21,8.08787823 21,8.52920201 L21,21.0833333 C21,22.8738751 20.9795521,23 19.1428571,23 L6.85714286,23 C5.02044787,23 5,22.8738751 5,21.0833333 L5,4.91666667 C5,3.12612489 5.02044787,3 6.85714286,3 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            </span>Export to PDF
                        </a> --}}
                            <!--end::Button-->
                    </div>
                    <div class="card-toolbar">
                        <!--begin::Button-->
                        @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                        <a href="{{ url('/signup/create') }}" class="btn btn-primary font-weight-bolder">Add Subject</a>
                        @endif
                        <!--end::Button-->
                    </div>
                </div>
                <div class="card-body">
                    <!--begin: Datatable-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer base-datatable">
                        <thead>
                            <tr>
                                <th>ERX ID</th>
                                <th>SUBJECT ID</th>
                                <th>FULL NAME</th>
                                <th>PHONE NUMBER</th>
                                <th>COM. TYPE</th>
                                <th>YEAR TO DATE</th>
                                <th>UPDATE DATE</th>
                                <th>STATUS</th>
                                {{-- <th>UPDATE TIME</th> --}}
                                {{-- <th>UPDATE BY</th> --}}
                                <th>ACTION</th>
                              </tr>
                        </thead>
                        <tbody>
                            @foreach ($signups as $item)
                            @php
                                $year_to_date = get_user_total_payment($payments, $item->erxId);
                                if($year_to_date > 599){
                                    $class = "alert-payment bg-gray-900";
                                }
                                else{
                                    $class = "";
                                }
                            @endphp
                            <tr class="{{ $class }}">
                                <td>{{ $item->erxId }}</td>
                                <td>{{ $item->subjectId }}</td>
                                <td>{{ maskFieldforSponsor($item->first_name.' '.$item->last_name) }}</td>
                                <td>{{ maskFieldforSponsor($item->phoneNo) }}</td>
                                <td>{{ $item->compensationType }}</td>
                                <td>{{ "$".number_format($year_to_date) }}</td>
                                <td>{{ convert_mm_dd_yyyy($item->updated_at) }}</td>
                                {{-- <td>{{ convert_mm_dd_yyyy_otime($item->updated_at) }}</td> --}}
                                {{-- <td>{{ $item->createdBy }}</td> --}}
                              <td>  @if ($item->status == 'Active')
                                <span class="badge badge-primary">Active</span>
                                @elseif ($item->status == 'Inactive')
                                <span class="badge badge-danger">Inactive</span>
                                @endif</td>
                                <td class="nowrap">
                                    <a href="javascript:void(0)" class="btn btn-light btn-sm px-2" onclick="show_sub_detail({{ $item->id }})" >
                                        <i class="fa fa-eye fs-8 pe-0 me-2"></i> View
                                    </a>
                                    @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                                    <a href="{{ url('editSubject', $item->id) }}" class="btn btn-light btn-sm px-2">
                                        <i class="fa fa-pencil-alt fs-8 pe-0 me-2"></i> Edit
                                    </a>
                                    @endif
                                    @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                                        @if ($item->status == 'Active')
                                        <a href="{{ url('changeStatus', [$item->id,'Inactive']) }}" class="btn btn-light btn-sm px-2">
                                            <span class="svg-icon svg-icon-3">
                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-in-alt" class="svg-inline--fa fa-sign-in-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>
                                            </span>
                                        </a>
                                        @elseif ($item->status == 'Inactive')
                                        <a href="{{ url('changeStatus', [$item->id,'Active']) }}" class="btn btn-light btn-sm px-2">
                                            <span class="svg-icon svg-icon-3">
                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-in-alt" class="svg-inline--fa fa-sign-in-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>
                                            </span>
                                        </a>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!--end: Datatable-->
                </div>
            </div>
            <!--end::Card-->

<div class="modal signupmodal fade mydropdownmodal" tabindex="-1" role="dialog" id="subject_detail">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">View Details</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times"></span>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="bg-gray-300 col-md-12 fs-3 fw-bold mb-6 py-1">Basic Information</div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">ERX ID</label>
                        <p class="fs-6 fw-bold" id="erxId"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Subject ID</label>
                        <p class="fs-6 fw-bold" id="subjectId"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Subject Name</label>
                        <p class="fs-6 fw-bold" id="subjectName"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Date of Birth</label>
                        <p class="fs-6 fw-bold" id="subjectAge"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Email</label>
                        <p class="fs-6 fw-bold" id="email"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Phone</label>
                        <p class="fs-6 fw-bold" id="phoneNo"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Address</label>
                        <p class="fs-6 fw-bold" id="address"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Address 2</label>
                        <p class="fs-6 fw-bold" id="address2"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Country</label>
                        <p class="fs-6 fw-bold" id="country"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">City</label>
                        <p class="fs-6 fw-bold" id="city"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">State</label>
                        <p class="fs-6 fw-bold" id="state"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Zip Code</label>
                        <p class="fs-6 fw-bold" id="zip"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Current QLL</label>
                        <p class="fs-6 fw-bold" id="qll"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Compensation Method</label>
                        <p class="fs-6 fw-bold" id="compensationType"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Year To Date</label>
                        <p class="fs-6 fw-bold" id="yeartodate"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="bg-gray-300 col-md-12 fs-3 fw-bold mb-6 py-1">Audit Trail</div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Created Date</label>
                        <p class="fs-6 fw-bold" id="created_date"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Created Time</label>
                        <p class="fs-6 fw-bold" id="created_time"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Created By</label>
                        <p class="fs-6 fw-bold" id="createdBy"></p>
                    </div>
                    <div class="col-md-4 mb-2 updated-divs">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Updated Date</label>
                        <p class="fs-6 fw-bold" id="updated_date"></p>
                    </div>
                    <div class="col-md-4 mb-2 updated-divs">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Updated Time</label>
                        <p class="fs-6 fw-bold" id="updated_time"></p>
                    </div>
                    <div class="col-md-4 mb-2 updated-divs">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Updated By</label>
                        <p class="fs-6 fw-bold" id="updatedBy"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
				<button type="button" id="ACHViewBtn" class="btn btn-success d-none">View ACH</button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
			</div>
        </div>
    </div>
</div>
<div class="modal fade ACHDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">View ACH Details</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times"></span>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="bg-gray-300 col-md-12 fs-3 fw-bold mb-6 py-1">ACH</div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Subject Name</label>
                        <p class="fs-6 fw-bold" id="ACHSubjectName"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank Name</label>
                        <p class="fs-6 fw-bold" id="ACHBankName"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Branch Name</label>
                        <p class="fs-6 fw-bold" id="ACHBranchName"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank Country</label>
                        <p class="fs-6 fw-bold" id="ACHBankCountry"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank State</label>
                        <p class="fs-6 fw-bold" id="ACHBankState"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank City</label>
                        <p class="fs-6 fw-bold" id="ACHBankCity"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank Zip Code</label>
                        <p class="fs-6 fw-bold" id="ACHBankZipCode"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Bank Address</label>
                        <p class="fs-6 fw-bold" id="ACHBankAddress"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Account Type</label>
                        <p class="fs-6 fw-bold" id="ACHAccountType"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Account Number</label>
                        <p class="fs-6 fw-bold" id="ACHAccountNumber"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="fs-6 mb-2 text-muted text-uppercase">Routing Number</label>
                        <p class="fs-6 fw-bold" id="ACHRoutingNumber"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
				<button type="button" id="ACHViewBtn" class="btn btn-success d-none">View ACH</button>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
			</div>
        </div>
    </div>
</div>

<script type="text/javascript">
                   $(document).ready( function () {
               $('.base-datatable').DataTable({
               columnDefs: [
               { orderable: false, targets: -1 }
               ],
               pagingType: 'numbers',
               responsive: true,
               scrollX: true,
               order: [],

         });
         } );


    var role = "{{ session('Role') }}";
    function show_sub_detail(id) {
        jQuery.ajax({
            method: "GET",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{route('getSubjbectDetail', '')}}" + "/" + id,
            success: function(response) {

                    // console.log(response);

                    var subjectName = response.first_name + ' ' + response.last_name;
                    var subjectAge = response.dateOfBirth_final;
                    var email = response.email;
                    var phoneNo = response.phoneNo_final;
                    var address = response.address;
                    var address2 = response.address2;
                    var country = response.country;
                    var city = response.city;
                    var state = response.state;
                    var zip = response.zip;
                    var compensationType = response.compensationType;
                    var created_date_final = response.created_date_final;
                    var created_time_final = response.created_time_final;
                    var createdBy = response.createdBy;
                    var updated_date_final = response.updated_date_final;
                    var updated_time_final = response.updated_time_final;
                    var updatedBy = response.updatedBy;
                    var qll = response.qll;
                    var yeartodate = response.yeartodate;

                    $('#erxId').html(response.erxId);
                    $('#subjectId').html(response.subjectId);
                    $('#subjectName').html(maskFieldforSponsor(subjectName));
                    $('#subjectAge').html(maskFieldforSponsor(subjectAge));
                    $('#email').html(maskFieldforSponsor(email));
                    $('#phoneNo').html(maskFieldforSponsor(phoneNo));
                    $('#address').html(maskFieldforSponsor(address));
                    $('#address2').html(maskFieldforSponsor(address2));
                    $('#country').html(maskFieldforSponsor(country));
                    $('#city').html(maskFieldforSponsor(city));
                    $('#state').html(maskFieldforSponsor(state));
                    $('#zip').html(maskFieldforSponsor(zip));
                    $('#compensationType').html(compensationType);
                    $('#created_date').html(created_date_final);
                    $('#created_time').html(created_time_final);
                    $('#createdBy').html(createdBy);
                    $('#updated_date').html(updated_date_final);
                    $('#updated_time').html(updated_time_final);
                    $('#updatedBy').html(updatedBy);
                    $('#yeartodate').html('$'+yeartodate);
                    $('#qll').html(qll);
                    if(role != 'sponsor' && role != 'site-monitor'){
                        if(compensationType == 'ACH'){
                            $('#ACHViewBtn').attr('onclick', 'ACHViewBtn('+id+')');
                            $('#ACHViewBtn').removeClass("d-none");
                        }else{
                            $('#ACHViewBtn').addClass("d-none");
                        }
                    }else{
                        $('#ACHViewBtn').addClass("d-none");
                    }
                    if(created_date_final == updated_date_final && created_time_final == updated_time_final){
                        $('.updated-divs').hide();
                    }

                    $('#subject_detail').modal('show');
            }
        });
    }
    function ACHViewBtn(id){
        jQuery.ajax({
            method: "GET",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{route('getSubjbectACHDetail', '')}}" + "/" + id,
            success: function(response) {

                    console.log(response);

                    var ACHSubjectName = response.newFirstName + ' ' + response.newLastName;
                    var ACHBankName = response.newBank;
                    var ACHBranchName = response.branchName;
                    var ACHBankCountry = response.bankCountry;
                    var ACHBankCity = response.bankCity;
                    var ACHBankState = response.bankState;
                    var ACHBankAddress = response.bankAddress;
                    var ACHBankZipCode = response.bankPostalCode;
                    var ACHAccountType = response.accountType;
                    var ACHAccountNumber = response.newAccountNumber;
                    var ACHRoutingNumber = response.newRoutingNumber;

                    $('#ACHSubjectName').html(ACHSubjectName);
                    $('#ACHBankName').html(maskFieldforSponsor(ACHBankName));
                    $('#ACHBranchName').html(maskFieldforSponsor(ACHBranchName));
                    $('#ACHBankCountry').html(maskFieldforSponsor(ACHBankCountry));
                    $('#ACHBankCity').html(maskFieldforSponsor(ACHBankCity));
                    $('#ACHBankState').html(maskFieldforSponsor(ACHBankState));
                    $('#ACHBankAddress').html(maskFieldforSponsor(ACHBankAddress));
                    $('#ACHBankZipCode').html(maskFieldforSponsor(ACHBankZipCode));
                    $('#ACHAccountType').html(maskFieldforSponsor(ACHAccountType));
                    $('#ACHAccountNumber').html(maskFieldforSponsor(ACHAccountNumber));
                    $('#ACHRoutingNumber').html(maskFieldforSponsor(ACHRoutingNumber));
                    $('.ACHDetailModal').modal('show');
            }
        });
    }
    function maskFieldforSponsor(value){
        if(role == 'sponsor' || role == 'site-monitor'){
            return '*****';
        }
        else if(value === null){
            return '--';
        }
        else{
            return value;
        }
    }
</script>

@endsection