@extends('layout.layout')
@section('title')
    Record Sample
@endsection
@section('content')
    <!--begin::Card-->
    @if (session('Role') == 'site-coordinator' || session('Role') == 'site-coordinator-collector')
        <div class="card card-custom">
            {{-- <div class="border-0 card-header">
                <div class="card-title">
                    <h3 class="card-label">Collect Sample
                    </h3>
                </div>
            </div> --}}
            <div class="card-body pt-0">
                <div class="basic-info ">
                    <form action="{{ url('/record_sample/create') }}" method="get" class="row mt-6" autocomplete="off" id="record_sample_form">
                        @csrf
                        {{-- <div claas="col-lg-12">
                            @if (Session::has('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ Session::get('error') }}
                                </div>
                            @endif
                            @if (Session::has('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ Session::get('success') }}
                                </div>
                            @endif
                        </div> --}}
                        <div class="row d-flex justify-content-between">
                            <div class="form-group col-md-4">
                                <label class="mb-2">Subject ID
                                    <span class="text-danger">*</span>
                                </label>
                                <select name="subjectId" class="form-control form-select custom-select-placeholder"
                                    data-control="select2">
                                    <option value="" selected disabled>Select Subject Id</option>
                                    @foreach ($subjects as $subject)
                                        <option value="{{ $subject->subjectId }}"
                                            {{ old('subjectId') == $subject->subjectId ? 'selected' : '' }}>
                                            {{ $subject->subjectId }}</option>
                                    @endforeach
                                </select>
                                <p class="text-danger">{{ $errors->first('subjectId') }}</p>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="mb-2">Sample Type
                                    <span class="text-danger">*</span>
                                </label>
                                <select name="type" class="form-control form-select custom-select-placeholder"
                                    data-control="select2">
                                    <option value="" selected disabled>Select Sample</option>
                                    @foreach ($sampleTypes as $sampleType)
                                        <option value="{{ $sampleType->name }}"
                                            {{ old('type') == $sampleType->name ? 'selected' : '' }}>{{ $sampleType->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <p class="text-danger">{{ $errors->first('type') }}</p>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="mb-2">Collection/Visit Date
                                    <span class="text-danger">*</span>
                                </label>
                                <input class="form-control datepicker" type="text" placeholder="mm/dd/yyyy" name="date" value="{{ old('date') }}" />
                                <p class="text-danger">{{ $errors->first('date') }}</p>
                            </div>

                        </div>
                        <div class="mt-7 row">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary" onclick="submit_form(this)">Record Sample</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif


    <div class="card card-custom mt-5">
        <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="recordSample" 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="recordSample" 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>
            </div>
            @if(session('Role') != "site-monitor" && session('Role') != "sponsor")
            <div class="card-action">
                <button class="btn btn-success" id="cnfrm-cmpnstion-btn" disabled onclick="submit_confirm_compensation()">Confirm All</button>
            </div>
            @endif
         </div>
        <div class="card-body">
<form action="{{url('confirmVisitDataBulk')}}" method="post" id="confirmVisitDataBulkForm">
@csrf

            <!--begin: Datatable-->
            {{-- <table class="table table-row-bordered fs-7 no-footer base-datatable table-responsive">
                <thead>
                    <tr>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="nowrap">
                                <a class="btn btn-icon btn-sm btn-active-color-primary mt-n2"
                                   data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start"
                                   data-kt-menu-overflow="true">
                                   <i class="fa fa-ellipsis-v text-black"></i>
                                </a>
                                <div class="border border-1 fs-6 fw-bold menu menu-sub menu-sub-dropdown mw-100px py-4"
                                   data-kt-menu="true">
                                   <a class="px-6 py-2 text-black">Confrim</a>
                                   <a class="px-6 py-2 text-black">Reject</a>
                                </div>
                        </td>
                    </tr>
                </tbody>
            </table> --}}
            <!--end: Datatable-->
            <table class="table table-row-bordered fs-7 no-footer base-datatable table-responsive">
                <thead>
                    <tr>
                        <th>
                            @if(session('Role') != "site-monitor" && session('Role') != "sponsor")
                            <input type="checkbox" onclick="check_all(this)" value="1" id="checkall" />
                            @endif
                        </th>
                        <th>ERX ID</th>
                        <th>SUBJECT ID</th>
                        <th>RECORD ID</th>
                        <th>COL. DATE</th>
                        <th>SAMPLE TYPE</th>
                        <th>VOLUME</th>
                        <th>UPDATE DATE</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
            </table>
</form>
        </div>
    </div>
    <!--end::Card-->

<div class="modal fade mydropdownmodal" tabindex="-1" role="dialog" id="confirm_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title" id="heading"></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">
                <input type="hidden" id="visit_id" />
                <input type="hidden" id="flag" />
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="text-black-50">Subject ID</label>
                        <h6 id="subjectId"></h6>
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="text-black-50">Record ID</label>
                        <h6 id="visitId"></h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="text-black-50">Collection Date</label>
                        <h6 id="collectionDate"></h6>
                    </div>

                    <div class="col-md-6 mb-4">
                        <label class="text-black-50">Cost Center</label>
                        <h6 style="word-wrap: break-word;" id="costCenter"></h6>
                    </div>
                </div>
                <hr />
                <h5>Collection Detail</h5>
                <div id="details">
                </div>
                <hr class="my-2" />
                <div class="mx-4 row">
                    <div class="col-md-8 font-weight-bold text-black-50">TOTAL</div>
                    <div class="col-md-4 d-flex justify-content-end font-weight-bold" style="font-weight: bold;" id="total">$40</div>
                </div>
                <hr />
                <p>Are you sure you want to <span id="wording"></span> this sample?</p>
                <div id="justification_box">
                    <label>Justification<span class="text-danger">*</span></label>
                    <textarea id="reject_comment" maxlength="500" class="form-control" id="" cols="30" rows="8"></textarea>
                    <p class="text-danger d-none" id="reject_comment_error">Justification field is required</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">No</button>
                <button type="button" class="btn btn-primary" onclick="confirm_modal(this)">Yes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade mydropdownmodal" tabindex="-1" role="dialog" id="confirm_modal_bulk">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</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">
                <p>Are you sure you want to confirm these samples?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">No</button>
                <button type="button" class="btn btn-primary" onclick="confirm_modal_bulk(this)">Yes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade mydropdownmodal" tabindex="-1" role="dialog" id="pending_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</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">
                <p>Are you sure you want to change status back to 'Pending' for this sample?</p>
                <label>Justification<span class="text-danger">*</span></label>
                <textarea id="pending_comment" maxlength="500" class="form-control" id="" cols="30" rows="8"></textarea>
                <p class="text-danger d-none" id="pending_comment_error">Justification field is required</p>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="pending_id" />
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">No</button>
                <button type="button" class="btn btn-primary" onclick="confirm_pending(this)">Yes</button>
            </div>
        </div>
    </div>
</div>

    <script type="text/javascript">
    function disable(id){
        $('#disableBtn_'+id).prop("disabled", 'true');
    }
        $(document).ready( function () {

            $('.dropdown-toggle').dropdown();

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

            $('.base-datatable').DataTable({
                columnDefs: [
                { "targets":[0,5,9], "orderable": false },
               { type: 'date', 'targets': [4,7] },
               { class:"nowrap position-relative",targets:9 },
               ],
                responsive: true,
               scrollX: true,
               order: [[7, 'desc']],
                "processing": true,
                "serverSide": true,
                "ajax":{
                "url": "{{ url('datatable/recordsample') }}",
                "dataType": "json",
                "type": "POST",
                "data":{ _token: "{{csrf_token()}}"}
                },
                "columns": [
                { "data": "id" },
                { "data": "erxId" },
                { "data": "subjectId" },
                {"data":"recordId"},
                {"data":"collectionDate"},
                {"data":"name"},
                {"data":"volume"},
                {"data":"updateDate"},
                {"data":"status"},
                {"data":"action"}
                ]

            });


            $('body').click(function() {
                $('.option-div').removeClass('show');
                $('.option-btn').addClass('show-option');
            });

        });

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

        function show_modal(id, flag) {
            if(flag == 1){
                var heading = "<i class='fa fa-check-circle' aria-hidden='true'></i> Confirmation";
                var wording = "Confirm";
                $('#justification_box').hide();
            }
            else if(flag == 2){
                var heading = "<i class='fa fa-exclamation-circle' aria-hidden='true'></i> Rejection";
                var wording = "Reject";
                $('#justification_box').show();
            }
            jQuery.ajax({
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('getRecordDetail', '')}}" + "/" + id,
                success: function(response) {
                $('#details').html("");
                $('#subjectId').html(response.subjectId);
                $('#visitId').html(response.visitId);
                $('#collectionDate').html(response.collectionDate);
                $('#costCenter').html(response.costCenter);
                $('#total').html('$'+response.total);
                for (let index = 0; index < response.detail.length; index++) {
                    var value = response.detail[index].rate == null ? '0' : response.detail[index].rate;
                    $('#details').append('<div class="row mx-4 my-2"><div class="col-md-8 text-black-50">'+response.detail[index].name+'</div><div class="col-md-4 d-flex justify-content-end">$'+value+'</div></div>');
                }
                $('#visit_id').val(id);
                $('#flag').val(flag);
                $('#heading').html(heading);
                $('#wording').html(wording);
                    $('#confirm_modal').modal('show');
                }
            });
        }

        function confirm_modal(e){

            var visit_id = $('#visit_id').val();
            var flag = $('#flag').val();
            if(flag == 1){
                $(e).attr('disabled', true);
                window.location.href = "/confirmVisitData/" + visit_id
            }
            else if(flag == 2){
                var comment = $('#reject_comment').val();
                if(comment == "" || !comment.replace(/\s/g, '').length){
                    $('#reject_comment_error').removeClass('d-none');
                }
                else{
                    $(e).attr('disabled', true);
                    jQuery.ajax({
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/changeSampleStatus',
                        cache: false,
                        contentType: "application/x-www-form-urlencoded",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id"  : visit_id ,
                            "status" :  'Rejected' ,
                            "comment" : comment
                        },
                        success: function(response) {
                            window.location.href = "/record_sample";
                        }
                    });
                }
            }
        }

        function show_pending_modal(id){
            $('#pending_id').val(id);
            $('#pending_modal').modal('show');
        }

        function confirm_pending(e){
            var pending_id = $('#pending_id').val();
            var comment = $('#pending_comment').val();
            if(comment == "" || !comment.replace(/\s/g, '').length){
                $('#pending_comment_error').removeClass('d-none');
            }
            else{
                $(e).attr('disabled', true);
                jQuery.ajax({
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/changeSampleStatus',
                    cache: false,
                    contentType: "application/x-www-form-urlencoded",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "id"  : pending_id ,
                        "status" :  'Pending' ,
                        "comment" : comment
                    },
                    success: function(response) {
                        window.location.href = "/record_sample";
                    }
                });
            }
        }

        function submit_confirm_compensation(){
            $('#confirm_modal_bulk').modal('show');
        }

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

        function check_all(e){
            if(e.value == "1"){
                $('.vst-ids').prop('checked', true);
                $('#checkall').val("0");
            }
            else{
                $('.vst-ids').prop('checked', false);
                $('#checkall').val("1");
            }
            check_all_checked();
        }

        function check_all_checked(){
            var checked = $('.vst-ids:checked').length;
            if(checked){
                $('#cnfrm-cmpnstion-btn').attr("disabled", false);
            }
            else{
                $('#cnfrm-cmpnstion-btn').attr("disabled", true);
            }
        }

        function show_option(e){
            event.stopPropagation();
            $('.option-div').removeClass('show');
            if($(e).hasClass('show-option')){
                $(e).next().addClass('show');
                $(e).removeClass('show-option');
            }
            else{
                $(e).next().removeClass('show');
                $(e).addClass('show-option');
            }
        }

    </script>

@endsection