@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/warning.certification')}}</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/certificate">{{trans('emprecords/warning.certificates')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($certificate) && ($certificate->id))
                    {{trans('emprecords/warning.edit_certificate')}}
                    @else
                    {{trans('emprecords/warning.add_certificate')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($certificate, ['method' => 'post', 'files' => 'true']) !!}
 <input type="hidden" name="organization_id" value="{{$organization->id}}">
 <section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            
        @if (isset($status))
        <div class="card-header">
            @foreach ($status['messages'] as $m)
            <div class="demo-spacing-0">
                <div class="alert alert-{{$status['code']}}" role="alert">
                    <div class="alert-body"><strong>{{$m}}</strong></div>
                </div>
            </div>
            @endforeach
        </div> 
        @endif
            <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 selct2" 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" disabled>
                                      <option value="" selected>{{ trans('common/filter.select_employee') }}</option>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee->id}}"  @if((old('employee_id') == $employee->id ) || (isset($certificate->employee_id) && $certificate->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" disabled>
                                        <option value="" selected>{{ trans('emprecords/healthrecords.select_workman') }}</option>
                                        @foreach($workmans as $workman)
                                            <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($certificate->employee_id) && $certificate->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('name') ? 'has-error' : '' }}}">
                                    <label for="name" class="required">{{trans('emprecords/warning.certificate_name')}}<span class="mendatory-field text-danger">*</span></label>
                                    {!! Form::text('name', isset($certificate->name) ? $certificate->name : old('name'), ['class' => 'form-control', 'id' => 'name']) !!} 
                                    {!! $errors->first('name', '<label class="control-label error" for="name">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('issued_date') ? 'has-error' : '' }}}">
                                <label for="description" class="required">{{trans('emprecords/warning.generated_date')}}<span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('issued_date',$issuedDate,['class' => 'form-control', 'id' => 'issued_date']) !!}
                                {!! $errors->first('issued_date', '<label class="control-label error" for="issued_date">:message</label>')!!}
                                </div>
                            </div>
                        </div>
                    
                        <div class="row mt-1">
                            <div class="col-md-6 col-12 ">
                                <div class="form-group {{{ $errors->has('remark') ? 'has-error' : '' }}}">
                                    <label for="remark" class="required">{{trans('emprecords/warning.remark')}}</label> 
                                    {!! Form::textarea('remark', isset($certificate->remark) ? $certificate->remark : old('remark'), ['class' => 'form-control', 'id' => 'remark', 'rows' => 2, 'style' => 'resize:none;']) !!} 
                                    {!! $errors->first('remark', '<label class="control-label error" for="remark">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group {{{ $errors->has('valid_date') ? 'has-error' : '' }}}">
                                <label for="description" class="required">{{trans('emprecords/warning.valid_date')}}</label>
                                {!! Form::text('valid_date',$validDate, ['class' => 'form-control', 'id' => 'valid_date']) !!}
                                {!! $errors->first('valid_date', '<label class="control-label error" for="valid_date">:message</label>')!!}
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="row d-flex justify-content-between">
                                    <div class="col-md-6">
                                        <a target="_blank" id="generate"><button type="button" class="btn btn-info" style="line-height:18px; padding-left:22px;"><i data-feather="plus" aria-hidden="true"></i>&nbsp {{trans('emprecords/warning.generate_pdf')}}</button></a> 
                                    </div>
                                    @if(isset($certificate->employee_id))
                                        @if($certificate->is_generated=="true")
                                        <div class="col-md-6 d-flex justify-content-end">
                                            <a href="{{$warningLetter->warning_letter_pdf}}" target="_blank" id="preview" disable><button type="button" class="btn btn-success" style="line-height:18px; padding-left:18px; color:#000;"><i data-feather="eye" aria-hidden="true"></i>&nbsp{{trans('emprecords/warning.preview_warning_letter')}}</button></a> 
                                        </div>
                                        @else
                                        <div class="col-md-6 d-flex justify-content-end">
                                            <a target="_blank" id="preview" disable><button type="button" class="btn btn-secondary" style="line-height:18px; padding-left:18px; color:#000;"><i data-feather="eye" aria-hidden="true"></i>&nbsp {{trans('emprecords/warning.preview_warning_letter')}}</button></a> 
                                        </div>
                                        @endif
                                    @else
                                        <div class="col-md-6 d-flex justify-content-end">
                                            <a target="_blank" id="preview" disable><button type="button" class="btn btn-secondary" style="line-height:18px; padding-left:18px; color:#000;"><i data-feather="eye" aria-hidden="true"></i>&nbsp {{trans('emprecords/warning.preview_warning_letter')}}</button></a> 
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label for="attachment" class="required">{{trans('emprecords/warning.certificate')}} {{trans('common/common.attachment')}}<span style="color:grey">({{trans('common/common.can_attach_more_than_one')}})</span></label> 
                                <div class="form-group {{{ $errors->has('attachments[]') ? 'has-error' : '' }}}">
                                    <div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'>
                                        <input type="hidden" name="is_attached[]" class="is_attached" />
                                        <div class="row">
                                            <div class="col-md-4">
                                                <button type="button" id="add_more" class="btn btn-primary" style="line-height:15px;width: max-content;"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
                                            </div>
                                        </div>
                                        <div class="preview">
                                        @if($certificate->attachments)
                                            @foreach($certificate->getMedia('attachments') as $attachment)
                                            <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                                    @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @else
                                                        <a href="{{$attachment->getUrl()}}" target="_blank"><img src="{{$attachment->getUrl()}}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                    @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    <a onclick="delAttached.call(this,{{$attachment->id}})" style='cursor:pointer; color:red; position: absolute; right: 5px; top: 5px' title="Delete Image"> <i data-feather='x-circle' style="font-size:18px;"></i></a>
                                            </div>
                                            @endforeach
                                        @endif
                                        </div>
                                    </div>
                                    {!! $errors->first('attachments[]', '<label class="control-label error" for="attachments[]">:message</label>')!!}
                                    {!! $errors->first('attachments.*', '<label class="control-label" for="attachments">:message</label>')!!}
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="is_generated" id="is_generated" value="" />
                        <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />  
                        <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() {
        $('#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-div').hide();
            // $('#'+ids+'_id').select2('destroy');
            $('.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+'-div').show();
            // $('#'+ids+'_id').select2();
            }
            else if(ids == "workman"){
            $("#employee_id").attr("disabled", true);
            $('#employee-div').hide();
            // $('#'+ids+'_id').select2('destroy');
            $('.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+'-div').show();
            // $('#'+ids+'_id').select2();
            }
            else{
            $("#employee_id").attr("disabled", true);
            $('#employee-div').hide();
            $("#workman_id").attr("disabled", true);
            $('#workman-div').hide();
            }    

        });

        $('#generate').click(function(){
            var id = '';
            if($('#type').val() == 'employee'){
                id = $('#employee_id').val();
            }
            else if($('#type').val() == 'workman'){
                id = $('#workman_id').val();
            }

            var issuedDate = $('#issued_date').val();

            if(id=='' || id==null){
                $('.fa-eye').css('color','#000');
                $('#preview>button').css('color','#000');
                $('#preview>button').attr('class','btn btn-secondary');
                $('#preview').removeAttr('href');
                alert("Please select the Employee/Workman");
            }
            else if($('#name').val()=="" || $('#name').val()==null){
                $('.fa-eye').css('color','#000');
                $('#preview>button').css('color','#000');
                $('#preview>button').attr('class','btn btn-secondary');
                $('#preview').removeAttr('href');
                alert("Please fill the Certificate name field");
            }
            else if(issuedDate=='' || issuedDate==null){
                $('.fa-eye').css('color','#000');
                $('#preview>button').css('color','#000');
                $('#preview>button').attr('class','btn btn-secondary');
                $('#preview').removeAttr('href');
                alert("Please fill the Certificate issued date field");
            }
            else{
                $.ajax({
                    url: "/{!! $alias !!}/compliance/certificate/certificate-type",
                    type: "GET",
                    data: {
                    },
                    success: function(dataResult){
                        if(dataResult == "true"){
                            $('#is_generated').val('true');
                            $('.fa-eye').css('color','#fff');
                            $('#preview>button').css('color','#fff');
                            $('#preview>button').attr('class','btn btn-success');
                            $('#preview').removeAttr('disable');
                            $('#preview').attr('href','/{!! $alias !!}/compliance/certificate/'+id+'/certificate-pdf?certificate_name='+$('#name').val()+'&issued_date='+issuedDate);
                        }
                        else{
                            alert("Valid certificate format for this organization doesn't exist! ");
                        }
                    }
                });
            }
        });
        
        $('#issued_date').datepicker({
            todayHighlight:'TRUE',
            autoclose: true,
        });
        $('#valid_date').datepicker({
            todayHighlight:'TRUE',
            autoclose: true,
            startDate: "+0d"
        });   
    });
    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"){
                    $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else if(extension == "docx" || extension=="doc"){
                    $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else{
                    $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image">'+feather.icons['x-circle'].toSvg({ class: 'font-4' })+'</a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function delAttached(attachment){
        $(this).parent().remove();
        var val = JSON.parse($('#deleted_attachemnts').val());
        val.push(attachment);
        $('#deleted_attachemnts').val(JSON.stringify(val));
    }

    function deleteAttachment(){
        $(this).parent().remove();
    }

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }

    $('#add_more').click(function(e){
        var temp = $(this).parent().parent().parent().append("<div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'><input type='file' style='display:none;' class='fileinput form-control attachments' name='attachments[]' data-filename-placement='inside' title='Browse' onchange='preview.call(this)' /></div>");
        var result = temp.find('div:last input').trigger('click');
    });
    
</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