@extends('layouts.main')

@push('styles')
<style>
    .face_image{            
        content: ' ';
        display: block;
        background-image: url("{{asset('images/user.png')}}");
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        width: 155px;
    }
    .collection_image{            
            content: ' ';
            display: block;
            background-image: url("{{asset('images/user.png')}}");
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 50%;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
            height: auto;
            min-width: 75px;
        }
</style>
@endpush
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.config_collection') }}</h4>
            </div>
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table id="data-table" class="table">
                        <tbody>
                            <tr>
                                <td>Id</td>
                                <td>{{$collection->id ?? ''}}</td> 
                            </tr>
                            <tr>
                                <td>{{ __('strings.name') }}</td>
                                <td>{{$collection->name ?? ''}}</td> 
                            </tr>
                            <tr>
                                <td>CollectionARN</td>
                                <td>{{$collection->collection_arn ?? ''}}</td> 
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12 p-3">
                <button class="btn btn-primary" onclick="showModal()">{{__('strings.add_face')}}</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.collection_faces') }}</h4>
            </div>
            <div class="card-body p-2">
            <div class="table-responsive">
                    <table id="faces-table" class="table">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Id</th>
                                <th>{{ __('strings.photo') }}</th>
                                <th>{{ __('strings.name') }}</th> 
                                <th>{{ __('strings.last_name') }}</th>
                                <th>{{ __('strings.department') }}</th>
                                <th>{{ __('strings.position') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.recognition_faces') }}</h4>
            </div>
            <div class="card-body p-2">
            <div class="table-responsive">
                    <table id="faces-recognition-table" class="table">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Id</th>
                                <th>{{ __('strings.name') }}</th>
                                <th>{{ __('strings.last_name') }}</th>
                                <th>{{ __('strings.department') }}</th>
                                <th>{{ __('strings.position') }}</th>
                                <th>{{ __('strings.created_at') }} UTC</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('strings.update_photo')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="post" action="{{route('collection_add_face')}}" onsubmit="$.showPreloader(); return true;" enctype="multipart/form-data">
                         
            <div class="modal-body">           
                <div class="row">
                    {{csrf_field()}}    

                    <div class="col-md-12">
                        <div class="form-group">
                            <img id="face_image" name="face_image" class="face_image" width="155" height="155" src="">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-control-label" for="image_file">{{__('strings.choose_image')}}</label>
                            <input type="file" class="form-control" id="image_file" name='image_file' accept="image/jpeg,image/png" onchange="resizeImage(this);">
                        </div>
                    </div>

                    <input type="hidden" id="face_collection_id" name="face_collection_id" class="form-control" value="{{$collection->id ?? ''}}">

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name" class="form-control-label">{{__('strings.name')}}</label>
                            <input type="text" id="name" name="name" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name" class="form-control-label">{{__('strings.last_name')}}</label>
                            <input type="text" id="last_name" name="last_name" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="department" class="form-control-label">{{__('strings.department')}}</label>
                            <input type="text" id="department" name="department" class="form-control">
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="position" class="form-control-label">{{__('strings.position')}}</label>
                            <input type="text" id="position" name="position" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                <input type="submit" value="{{__('strings.suburb_create_submit')}}" class="btn btn-primary" />
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    var table;
    var tableRecognitions;
    $(function() {
	    //setting language for moment.js
	    moment.locale('es'); 
        initTable();
    });

    function initTable() {
        //initialize datetable
        table = $('#faces-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,  
            searching: true,
            ajax: {
                url: "{{route('recongnition_collections_faces')}}",
                type: "POST",
                data: {
                    'user_token': '{{Auth::user()->token}}',
                    'collection_id': '{{$collection->id ?? ''}}'
                }                
            },
            columns:[
                { data: 'id', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'id', render: function(data, type, row, meta){
                        return '<img class="collection_image" height="75%" width="75%" src="' + row.public_url + '" />';
                    }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
                },
                { data: 'name', defaultContent: "<i>{{__('errors.not_set')}}</i>"
                },
                { data: 'last_name', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'department', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'position', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'id', render: function(data, type, row, meta){                    
                        return "<a href='#' onclick='deleteFace(" + data + ")'>{{__('strings.delete')}}</a>";
                    }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
                }        
            ],
            dom: 'Bfltip',
            buttons: [
            'copy', 'excel', 'pdf'
            ],
            order:[[0,'desc']],
            lengthMenu: [[10, 50, 300], [10, 50, 300]],
            language: {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
            }
        });


        //initialize datetable
        tableRecognitions = $('#faces-recognition-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,  
            searching: true,
            ajax: {
                url: "{{route('recongnition_face_datatable')}}",
                type: "POST",
                data: {
                    'user_token': '{{Auth::user()->token}}',
                    'collection_id': '{{$collection->id ?? ''}}'
                }                
            },
            columns:[
                { data: 'id', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'face.name', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'face.last_name', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'face.department', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'face.position', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
                { data: 'created_at', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
            ],
            dom: 'Bfltip',
            buttons: [
            'copy', 'excel', 'pdf'
            ],
            order:[[0,'desc']],
            lengthMenu: [[10, 50, 300], [10, 50, 300]],
            language: {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
            }
        });
    }


    function showModal() {
        $("#image_file").val(null);
        $('#photoModal').modal({focus:true});
        base64 = "";
    }

    function resizeImage(input) {
        if (window.File && window.FileReader && window.FileList && window.Blob) {            
            var filesToUploads = input.files;
            var file = filesToUploads[0];
            if (file) {
                var reader = new FileReader();
                // Set the image once loaded into file reader
                reader.onload = function(e) {
                    $('#face_image')
                    .attr('src', e.target.result)
                    .width(155)
                    .height(155);                                     
                }
                reader.readAsDataURL(file);
            }

        } else {
            $.alert('The File APIs are not fully supported in this browser.');
        }
    }

    function deleteFace(faceId) {
        $.confirm("{{__('strings.delete_image_confirm')}}", function () {
            $.showPreloader();
            $.post("{{route('collection_face_delete')}}",{
                user_token: "{{Auth::user()->token}}",
                collection_id: "{{$collection->id ?? ''}}",
                face_id: faceId
            }, function(response){
                $.hidePreloader();
                table.ajax.reload();
            }).fail(function(error){
                $.hidePreloader();
                console.log(error);
                if(error.responseJSON) {
                    $.alert(error.responseJSON.message,'Error');
                }
            });
        });
    }
</script>
@endpush