@extends('layout.layout')
@section('title')
Compensation
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header flex-wrap py-5 border-0 mt-5">
        <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="compensation" data-type="excel">
                <span class="svg-icon svg-icon-md">
                  <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="compensation" data-type="pdf">
                <span class="svg-icon svg-icon-md">
                  <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>
        </div>
         @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
        <div class="card-action">
            <button class="btn btn-success" disabled id="changeStatus">Approve All</button>
        </div>
        @endif
     </div>


    <div class="card-body py-12">
        {{-- <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer compensation-table">
                    <thead>
                        <tr>
                            @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                            <th>
                                <input type="checkbox" class="selectall">
                            </th>
                            @endif
                            <th>ERX ID</th>
                            <th>SUBJECT ID</th>
                            <th>RECORD ID</th>
                            <th>COMP. TYPE</th>
                            <th>COL. DATE</th>
                            <th>COMP.$</th>
                            <th>ADJUSTMENT</th>
                            <th>STATUS</th>
                            @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                            <th>ACTION</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($compensation as $comp)
                        <tr>
                            @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                            <td>
                                @if($comp->status=="Pending")
                                <input type="checkbox" value="{{ $comp->id }}" name="tableId" class="selectindividual">
                                @endif
                            </td>
                            @endif
                            <td>{{ $comp->erxId }}</td>
                            <td>{{ $comp->subjectId }}</td>
                            <td>{{ $comp->visitId }}</td>
                            <td>{{ $comp->type=="AncillaryCharges"?$comp->ancillaryName:$comp->sampleName }}</td>
                            <td>{{ convert_mm_dd_yyyy($comp->scheuleDate) }}</td>
                            <td>{{ $comp->amount }}</td>
                            @if($comp->isAdjusted == 1 && $comp->isPrimary == 0)
                                <td><span class="bg-primary px-3 py-1 rounded-2 text-white rounded-full fs-7">Yes</span></td>
                            @else
                                <td><span class="bg-dark px-3 py-1 rounded-2 text-white rounded-full fs-7">No</span></td>
                            @endif
                            <td>
                            @if($comp->status=="Pending")
                            <span class="bg-warning px-3 py-1 rounded-2 text-white rounded-full fs-7">Pending</span>
                            @endif
                            @if($comp->status== "Approved")
                            <span class="bg-success px-3 py-1 rounded-2 text-white rounded-full fs-7">Approved</span>
                            @endif
                            @if($comp->status== "Rejected")
                            <span class="bg-danger px-3 py-1 rounded-2 text-white rounded-full fs-7">Rejected</span>
                            @endif
                            @if($comp->status== "Paid")
                            <span class="bg-success px-3 py-1 rounded-2 text-white rounded-full fs-7">Paid</span>
                            @endif
                            @if($comp->status== "Inprocess")
                            <span class="bg-warning px-3 py-1 rounded-2 text-white rounded-full fs-7">Inprocess</span>
                            @endif
                            </td>
                           @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                            <td class="nowrap">
                                @if($comp->status=="Pending")
                                @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                                <a href="javascript:void(0);" class="fs-7 btn btn-light btn-sm px-2 status_change" data-id="{{ $comp->id }}" data-status="{{ $comp->status }}">
                                <i class="fa fa-wave-square pe-0 me-2"></i>Status
                                </a>
                                @endif
                                @endif
                                @if(($comp->status=="Pending" || $comp->status=="Approved") && ($comp->isAdjusted == 0 && $comp->isPrimary == 1))
                                @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                                <a href="{{ url('/compensation/edit/'.$comp->id) }}" class="btn btn-light btn-sm px-2" data-id="{{ $comp->id }}" data-status="{{ $comp->status }}">
                                <i class="fa fa-pencil-alt fs-8 pe-0 me-2"></i>Edit
                                </a>
                                @endif
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
        </table> --}}

        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer compensation-table">
            <thead>
                <tr>
                    @if (session('Role') != "site-monitor" && session('Role') != "sponsor")
                    <th>
                        <input type="checkbox" class="selectall">
                    </th>
                    @else
                    <th></th>
                    @endif
                    <th>ERX ID</th>
                    <th>SUBJECT ID</th>
                    <th>RECORD ID</th>
                    <th>COMP. TYPE</th>
                    <th>COL. DATE</th>
                    <th>COMP.$</th>
                    <th>ADJUSTMENT</th>
                    <th>STATUS</th>
                    <th>ACTION</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<!--end::Card-->

<div class="modal fade mydropdownmodal" tabindex="-1" role="dialog" id="statusModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Edit Status</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>
            <form action="{{ url('/compensation/update_status') }}" method="post" id="update">
                @csrf
                <input type="hidden" class="compensation_id" name="id">
                <div class="modal-body pt-0">
                    <div class="form-group mt-5">
                        <label>Current Status</label>
                        <select name="status" class="form-control" required>
                            <option value="" disabled selected>Select Status</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="form-group mt-5">
                        <label for="">Comments (if any)</label>
                        <textarea name="comment"  class="form-control" id="" cols="30" rows="8"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                    <button class="btn btn-primary" onclick="submit_form(this)">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade mydropdownmodal" tabindex="-1" role="dialog" id="statusModalBulk">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Edit Status</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>
            <form action="{!! route('update.status.bulk') !!}" method="post" id="bulkUpdate">
                @csrf
                <input type="hidden" name="id[]" class="bulkUpdate_id">
                <div class="modal-body pt-0">
                    <div class="form-group mt-5">
                        <label>Current Status</label>
                        <select name="status" class="form-control" required>
                            <option value="" disabled selected>Select Status</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="form-group mt-5">
                        <label for="">Comments (if any)</label>
                        <textarea name="comment"  class="form-control" id="" cols="30" rows="8"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                    <button class="btn btn-primary" onclick="submit_bulk_form(this)">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){

        $('.compensation-table').DataTable({
               columnDefs: [
               { "targets":[0,4,7,9], "orderable": false },
               { type: 'date', 'targets': [5] },
               { class:"nowrap",targets:[8,9] },
               ],
                responsive: true,
               scrollX: true,
               order: [[5, 'desc']],

            //    order: [[5, 'desc']],
                "serverSide": true,
                "processing": true,
                "ajax":{
                "url": "{{ url('datatable/compensation') }}",
                "dataType": "json",
                "type": "POST",
                "data":{ _token: "{{csrf_token()}}"}
                },
                "columns": [
                { "data": "id" },
                { "data": "erxId" },
                { "data": "subjectId" },
                { "data": "vId" },
                { "data": "compType" },
                { "data": "scheuleDate" },
                { "data": "amount" },
                {"data":"isAdjusted"},
                {"data":"status"},
                {"data":"action"}
                ]

                });
    });
</script>
@endsection

@section('script')
<script>
    $(document).ready(function(){

            //    $('.compensation-table').DataTable({
            //    columnDefs: [
            //    { orderable: false, targets: -1 },
            //    { orderable: false, targets: 0 }
            //    ],
            //    pagingType: 'numbers',
            //    responsive: true,
            //    scrollX: true,
            //    order: [],
            //     });



        $('body').on('click','.status_change',function(){
            $('.compensation_id').val($(this).data('id'));
            $('.compensation_status').text($(this).data('status'));
            $('#statusModal').modal('show');
        })

        $('.close-modal').click(function(){
            $('#statusModal').modal('hide');
        });

        $('.selectall').change(function(){
            if($(this).prop('checked')){
                $('#changeStatus').removeAttr('disabled');
                $('.selectindividual').prop('checked',true);
            }
            else{
                $('#changeStatus').attr('disabled',true);
                $('.selectindividual').prop('checked',false);
            }
        });

        $('body').on('change','input:checkbox[name=tableId]',function(){
            if($('input:checkbox[name=tableId]:checked').length>0){
                $('#changeStatus').removeAttr('disabled');
            }
            else{
                $('#changeStatus').attr('disabled',true);
            }
        });

        $('#changeStatus').click(function(){
         if($('input:checkbox[name=tableId]:checked').length>0){
            $('#changeStatus').attr('disabled',true);
            var id = [];
            $("input:checkbox[name=tableId]:checked").each(function(){
                id.push($(this).val());
            });
            $('.bulkUpdate_id').val(id);
            $('#statusModalBulk').modal('show');
        }
        else{
            toastr.error("Please select atleast one compensation");
        }
        })
    });

    function submit_form(e){
            $(e).attr('disabled', true);
            $('#update').submit();
        }

    function submit_bulk_form(e){
            $(e).attr('disabled', true);
            $('#bulkUpdate').submit();

        }

</script>
@endsection