@extends('member-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('attendance/admin.check_in_info')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{{$alias}}/checkin-logs">{{trans('attendance/admin.check_in_info')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($checkIn) && ($checkIn->id))
                        {{trans('common/common.edit')}}
                    @else
                        {{trans('common/common.add_new')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($checkIn, ['method' => isset($checkIn) && $checkIn->id ? 'put' : 'post', 'enctype' => 'multipart/form-data']) !!}
 <section id="multiple-column-form">
    <div class="row">
        <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('remarks') ? 'has-error' : '' }}}">
                                        <label class="required">Remark<span style="color:red;">*</span></label>
                                        {!! Form::textarea('remarks',isset($checkIn) && $checkIn->remarks ? $checkIn->remarks : old('remarks'), 
                                        ['class' => 'form-control', 'id' => 'remarks', 'rows' => 6, 'style' => 'resize:none;']) !!} 
                                        {!! $errors->first('remarks', '<label class="control-label error" for="name">:message</label>')!!}
                                    </div>
                                
                            </div>

                            <div class="col-md-6 col-12">
                            
                                    <div class="form-label-group {{{ $errors->has('in_address') ? 'has-error' : '' }}}">
                                        <label for="in_address" class="required">Address<span style="color:red;">*</span></label>
                                        @if(isset($checkIn) && ($checkIn->id))
                                        {!! Form::textarea("address",isset($checkIn) && $checkIn->in_address ? $address : old('in_address'), 
                                        ['class' => 'form-control', 'id' => 'in_address', 'rows' => 6, 'readonly', 'style' => 'resize:none;']) !!}
                                        @else
                                        {!! Form::textarea('in_address',isset($checkIn) && $checkIn->in_address ? $checkIn->in_address : old('in_address'), 
                                        ['class' => 'form-control', 'id' => 'in_address', 'rows' => 6, 'readonly', 'style' => 'resize:none;']) !!} 
                                        @endif
                                        {!! $errors->first('in_address', '<label class="control-label error" for="in_address">:message</label>')!!}
                                        <input type="hidden" name="lat" id="geo_latitude" />
                                        <input type="hidden" name="lng" id="geo_longitude" />
                                    </div>
                                
                            </div>

                            

                        
                        <div class="row mt-2">
                            <div class="col-md-6 col-12 mt-2">
                                <label class="form-label">Attachment<span style="color:grey">(can attach more than one)</span></label> 
                                    <div class="form-group {{{ $errors->has('attachments[]') ? 'has-error' : '' }}}">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <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>
                                        @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>
                                                    <a onclick="delAttached.call(this,{{$attachment->id}})" 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>
                                                </div>
                                            @endforeach
                                        @endif
                                        {!! $errors->first('attachments[]', '<label class="control-label" for="attachments[]">:message</label>')!!}
                                    </div>
                            </div>
                        </div>
                        <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />
                        
                        
                        <div class="row float-right">
                            <div class="col-12 mt-2">
                                <button type="submit" id="save-form" class="btn btn-primary me-1">{{trans('common/common.submit')}}</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="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" type="text/javascript"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.js_google_map_key')}}&libraries=drawing,places&v=weekly" defer></script>
<script src="http://maps.googleapis.com/maps/api/geocode/json?latlng=44.4647452,7.3553838&sensor=true"></script>
<!-- end page JS -->
<script type="text/javascript">
 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 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');
    });

    $(document).ready(function(){
        @if(!($checkIn->id))
        {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    getReverseGeocodingData(position.coords.latitude, position.coords.longitude)
                });
            }
        }
        @endif
    });
    
    function getReverseGeocodingData(lat, lng) 
    {
    var latlng = new google.maps.LatLng(lat, lng);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng },  (results, status) =>
    {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        if (status == google.maps.GeocoderStatus.OK) {
            var address = (results[0].formatted_address);
            $('#in_address').val(address)
            $('#geo_latitude').val(lat)
            $('#geo_longitude').val(lng)
        }
    });
    }

</script>
@endpush