@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('emprecords/healthrecords.health_records')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/compliance/health-record">{{trans('emprecords/healthrecords.health_records')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($healthRecord) && ($healthRecord->id))
                    {{trans('emprecords/healthrecords.edit_health_record')}}
                    @else
                    {{trans('emprecords/healthrecords.add_health_record')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($healthRecord, ['method' => 'post', 'files' => 'true']) !!}
 <input type="hidden" name="organization_id" value="{{$organization->id}}">
 <section id="multiple-column-form">
    <div class="row">
        <div class="card-header">
            <div class="demo-spacing-0">
                <div class="alert alert-danger" id="alert" role="alert">
                    
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <!-- <div class="card-header">
                    <h4 class="card-title">Multiple Column</h4>
                </div> -->
                <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('type') ? 'has-error' : '' }}}">
                                    <label for="type" class="required">{{trans('emprecords/healthrecords.type')}}<span class="mendatory-field text-danger">*</span></label>
                                    @if(isset($currEmp) && (($currEmp->employee_type=="employee") || ($currEmp->employee_type=="workman") ))
                                    <select class="form-control" id="type" name="type" disabled>
                                    @else
                                    <select class="form-control select2" id="type" name="type">
                                    @endif
                                        <option value="" selected>{{trans('emprecords/healthrecords.select_type')}}</option>
                                        <option value="employee"  @if((old('type') == 'employee' ) || ($currEmp->employee_type == 'employee')) selected @endif>Employee</option>                                                        
                                        <option value="workman"  @if((old('type') == 'workman' ) || ($currEmp->employee_type == 'workman')) selected @endif>Workman</option>                                                        
                                        </select>
                                    {!! $errors->first('type', '<label class="control-label error" for="type">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-6 mb-1" id="employee-div" style="display: @if((old('type'))=='employee' || ($currEmp->employee_type == 'employee')) block @else none @endif;">
                                <label for="employee_id" class="required">{{ trans('master/master.employee') }}<span class="mendatory-field text-danger">*</span></label>
                                <br>
                                <select class="form-control select2" id="employee_id" name="employee_id">
                                    <option value="" selected>{{ trans('emprecords/healthrecords.select_employee') }}</option>
                                    @foreach($employees as $employee)
                                        <option value="{{$employee->id}}"  @if((old('employee_id') == $employee->id ) || (isset($compliance->employee_id) && $compliance->employee_id == $employee->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($employee->name).' ('.$employee->employee_code.')'}}</option>                      
                                    @endforeach
                                    </select>
                                {!! $errors->first('employee_id', '<label class="control-label error" for="employee_id">:message</label>')!!}
                            </div>

                            <div class="col-md-6" id="workman-div" style="display: @if((old('type'))=='workman' || ($currEmp->employee_type == 'workman')) block @else none @endif;">
                                <label for="workman_id" class="required">{{ trans('master/master.workman') }}<span class="mendatory-field text-danger">*</span></label>
                                <br>
                                <select class="form-control select2" id="workman_id" name="workman_id">
                                    <option value="" selected>{{ trans('emprecords/healthrecords.select_workman') }}</option>
                                    @foreach($workmans as $workman)
                                        <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($compliance->employee_id) && $compliance->employee_id == $workman->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($workman->name).' ('.$workman->employee_code.')' }}</option>                      
                                    @endforeach
                                    </select>
                                {!! $errors->first('workman_id', '<label class="control-label error" for="workman_id">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('compliance_type_id') ? 'has-error' : '' }}}">
                                    <label for="compliance_type_id" class="required">{{trans('emprecords/healthrecords.parent_test_type')}}<span class="mendatory-field text-danger">*</span></label>
                                    <select class="form-control select2 compliance_type_id" name="compliance_type_id[]" onchange="childTestType.call(this); frequencyUpdate.call(this);">
                                        <option value="" selected>{{trans('emprecords/healthrecords.select_test')}}</option>
                                        @foreach($testTypes as $testType)
                                            <option value="{{$testType->id}}"  @if((old('compliance_type_id') == $testType->id ) || (isset($healthRecord->compliance_type_id) && $healthRecord->compliance_type_id == $testType->id)) selected @endif>{{ ucfirst($testType->name) }}</option>                      
                                        @endforeach
                                    </select>
                                    {!! $errors->first('compliance_type_id', '<label class="control-label error" for="compliance_type_id">:message</label>')!!}
                                </div>
                            </div>
                        </div>
                        
                        <div id="health-record-child-div"></div>
                        
                        <div class="row ">
                            <div class="col-12 mt-2 d-flex justify-content-end">
                                <button type="submit" id="save-form" class="btn btn-primary me-1">{{trans('common/common.save')}}</button> 
                            </div>
                        </div>        
                </div>
            </div>
        </div>
    </div>
</section>
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>

<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- END: Page JS-->

<script>
    $(document).ready(function() {
        $( window ).on("load", function(){
            $('.compliance_type_id').trigger('change');
        });
        $('.date').datepicker({
            todayHighlight:'TRUE',
            autoclose: true,
        });

        $('#type').change(function() {
            $(".select-type").attr("disabled", true);
            $('.select-type').parent().hide();
            var ids = $(this).val();
            if(ids == "employee"){
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().parent().parent().hide();
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().parent().parent().show();
            
            }
            else if(ids == "workman"){
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().parent().parent().hide();
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().parent().parent().show();
            }
            else{
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().hide();
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().hide();
            }    

        });       
    });
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var extension = input.files[0].name.split('.').pop().toLowerCase();
                if(extension == "pdf"){
                    var preview = $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"><p class="text-center">'+input.files[0].name+'</p>'));
                    placeToInsertImagePreview.html(preview);
                }
                else if(extension == "docx" || extension=="doc"){
                    var preview = $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"><p class="text-center">'+input.files[0].name+'</p>'));
                    placeToInsertImagePreview.html(preview);
                }
                else{
                    var preview = $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result);
                    placeToInsertImagePreview.html(preview);
                }
            }
            placeToInsertImagePreview.parent().find('.is_attached').val(1);
            reader.readAsDataURL(input.files[0]);
        }
    };

    function preview() {
        imagesPreview(this, $(this).parent().find('.preview'));
    }

    function frequencyUpdate(){
        var temp = '<option>Frequency</option>';
        var freq = $(this).closest('.row').find('.frequency');
        freq.html(temp);
        var ids = $(this).find('option:selected:last').val();
        $.ajax({
            url: "/{!! $alias !!}/compliance/health-record/frequency",
            type: "GET",
            data: {
                'test_type_id': ids,
            },
            success: function(dataResult){
                var temp = '<option selected>' + dataResult.substr(0,1).toUpperCase()+dataResult.substr(1); + '</option>';
                freq.append(temp);
            }
        });
    }

    function childTestType(){
        var ids = $(this).find('option:selected:last').val();
        $.ajax({
            url: "/{!! $alias !!}/compliance/health-record/child-test-types",
            type: "GET",
            data: {
                'test_type_id': ids,
            },
            success: function(dataResult){
                $('#health-record-child-div').html('');
                $.each(dataResult, function(key, data){
                    var template = '<div class="health-record-div"><div class="row mt-1">';
                    template += '<div class="form-group col-md-6" disabled="disabled" style="position:relative;" ><label for="compliance_type_id" class="required">Test Type<span class="text-danger">*</span></label><select class="form-control select2 compliance_type_id" disabled="disabled"><option value="'+data.id+'" selected >'+data.name+'</option></select></div>';
                    template += '<div class="form-group col-md-6" disabled="disabled" style="position:relative;" ><label for="frequency">Frequency</label><select class="form-control select2 frequency" name="frequency[]" disabled="disabled" ><option selected>'+data.frequency.name+'</option></select></div></div><div class="row">';
                    template += '<div class="form-group col-md-6 mt-1"><label for="status">Status</label><select class="form-control select2 status" name="status[]" onchange="statusUpdate.call(this)" required><option value="" selected>Select Status</option><option value="pending">Pending</option><option value="completed">Completed</option></select></div>';
                    template += '<div class="form-group col-md-6 mt-1" style="display: @if((old("status") != "")) block @else none @endif;"><label class="required">Date<span class="text-danger">*</span></label>{!! Form::text("date[]",$date,["class" => "form-control date","required"]) !!} </div></div>';
                    template += '<div class="row mt-1"><div class="col-md-3"><label for="attachment" class="required">Attachment</label><div class="form-group"><div style="display:inline-block; position:relative; margin: 7px 14px 0 0;"><input type="hidden" name="is_attached[]" class="is_attached" /><input type="file" class="fileinput form-control attachments mb-2" name="attachments[]" data-filename-placement="inside" title="Browse" onchange="preview.call(this)"/><div class="preview"></div></div></div></div></div>';
                    template += '<input type="hidden" name="compliance_type_id[]" value='+data.id+' /></div>';
                    $('#health-record-child-div').append(template);
                })
            }
        });
    }

    function statusUpdate(){
        var value = $(this).val();
        var date = $(this).closest('.row').find('.date');
        var label = date.closest('div').find('label');
        
        if(value == "pending"){
            date.parent().attr("style", 'block');
            date.removeAttr("disabled");
            date.parent().show();

            date.datepicker().val('');
            date.datepicker('destroy');
            date.datepicker({
                todayHighlight:'TRUE',
                autoclose: true,
                startDate: "+0d"
            });
            date.datepicker('update');
            label.html('Next Due Date');
            date.prop('required',true);
        }
        else if(value=="completed"){
            date.parent().attr("style", 'block');
            date.removeAttr("disabled");
            date.parent().show();

            date.datepicker().val('');
            date.datepicker('destroy');
            date.datepicker({
                todayHighlight:'TRUE',
                autoclose: true,
                endDate: "+0d"
            });
            date.datepicker('update');
            label.html('Completed Date');
            date.prop('required',true);
        }
        else{
            date.parent().removeAttr("style");
            date.parent().hide().prop('required',false);
            date.attr("disabled", true);
            date.datepicker().val('');
            date.prop('required',false);
        }

    }

    // $("#save-form").click(function(e) {
    //     e.preventDefault();
    //     var formdata = new FormData(document.getElementById('form-data'));

    //     $.ajax({
    //         url: '/{alias}/employee/{id}/health-record/add',
    //         headers: {
    //             'X-CSRF-TOKEN': "{{ csrf_token() }}",
    //         },
    //         method: 'post',
    //         type: 'POST',
    //         dataType: "JSON",
    //         enctype: "multipart/form-data",
    //         cache: false,
    //         processData: false,
    //         contentType: false,
    //         data: formdata,
    //         success: function(data) {
    //             if(data != '' && data != []){
    //                 $('#alert-msg ul').html(data);
    //                 $.each(data, function(key, message){
    //                     var template = '<div class="alert-body">'+message+'</div>';
    //                     $('#alert').html(template);
    //                 });
    //                 $('#alert').css('display', 'block');
    //                 return false;
    //             }
    //             else{
    //                 $('#alert').css('display', 'none');
    //                 $("form").submit();
    //                 return true;
    //             }
    //         }
    //     });
    //     return true;
    // });
</script>

<style>
.custom-dropdown .form-control { height: auto; padding: 0 }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices { background: none; padding:0; border: none }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { margin-right: 5px }
#organization tr th { /* word-break: break-all; */ 
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}
.tbalorganiresp { overflow: scroll } 
</style>
@endpush