@extends('app') @section('page-title') 
    @if (isset($status))
        <div class="pad margin no-print">
            <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
                <ul>
                    @foreach ($status['messages'] as $m)
                    <li>{{$m}}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
    <div class="row bg-title">

        <!-- .page title -->
        <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
            <h4 class="page-title"><i class="icon-people"></i> Check In </h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">

        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection @push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> @endpush @section('content')
<link rel="stylesheet" href="/assets/css/daterangepicker.css">


@section('content')
<div class="row">
    <div class="col-xs-12">
        <section class="col-lg-12 connectedSortable white-box">
            <h3 class="box-title ">View Check In</h5>
            
            <div class="row">
                <div class="form-group col-md-3">
                    <label>Reason</label>
                    <br>
                    {{ ucfirst($checkIn->remarks) }}
                </div>
                <div class="form-group col-md-3">
                    <label>Location</label>
                    <br>
                    {{ ucfirst($address) }}
                </div>
                <div class="form-group col-md-3">
                    <label>Created By</label>
                    <br>
                    {{ ucfirst($checkIn->employee->name) }}
                </div>
            </div>
            @if($checkIn->attachments)
            <div class="row">
                <div class="col-md-12">
                    <label>Check In Attachments</label> 
                    <div class="form-group">
                        @if($checkIn->attachments)
                            @foreach($checkIn->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>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </section>        
    </div>
</div>
@endsection

@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="/assets/plugins/bower_components/custom-select/custom-select.min.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>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

<script>
    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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></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"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }
</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