@extends('layouts.main')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.collections_info') }} <span class="float-sm-right"> <button class="btn btn-primary" onclick="$('#form_data').slideToggle()">{{__('strings.new_location_rate')}}</button></span></h4>
            </div>
            <hr>

            <div class="col-md-12 mb-3">
                <p>
                    *{{__('strings.collections_info_details')}}
                    <code>{{__('strings.name_info')}}</code>
                </p>
            </div>

            <div id="form_data" style="display: none;" class="card bg-light">
                    {{ csrf_field() }}
                    {{ method_field('post') }}
                    <div class="form-body">
                    <div class="col-md-12">
                        <div class="form-group  col-md-6">
                            <label for="collection_name">{{__('strings.collection_name')}}</label>
                            <div class="input-group">
                                <input type="text" id="collection_name" class="form-control" name="collection_name" placeholder="{{__('strings.name')}}" required>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="col-md-12 mb-3">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-block btn-primary" onclick="collectionRequest()">
                                {{ __('strings.submit_update') }}
                            </button>                                        
                        </div>                                    
                    </div>
            </div>
            
            <div class="card-body p-2">

                <div class="table-responsive">
                    <table id="data-table" class="table hover mb-0">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Id</th>
                                <th>{{ __('strings.name') }}</th> 
                                <th>CollectionARN</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    var table;
    $(function() {
	//setting language for moment.js
	moment.locale('es');        
        
	//initialize datetable
        table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,  
            searching: true,
            ajax: {
                url: "{{route('recongnition_collections_datatable')}}",
                type: "POST",
                data: {
                    'user_token': '{{Auth::user()->token}}'
                }                
            },
            columns:[
                { data: 'id'},
                { data: 'name', render: function(data, type, row, meta){
                        var url = "{{route('config_recognition_index', ':id')}}";
                        url = url.replace(':id', row.id);
                        return "<a href='" + url + "'>" + data + "</a>";
                    }
                },
                { data: 'collection_arn'},
                { data: 'id', render: function(data, type, row, meta){                    
                        return "<a href='#' onclick='deleteCollection(" + data + ")'>{{__('strings.delete')}}</a>";
                    }
                }        
            ],
            dom: 'Bfltip',
            buttons: [
            'copy', 'excel', 'pdf'
            ],
            order:[[0,'desc']],
            lengthMenu: [[10, 50, 300], [10, 50, 300]],
            language: {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
            }
            });
    });


    function collectionRequest() {
        var collection = $('#collection_name').val();
        if(collection == "") {
            $.alert("{{__('strings.collection_name_empty')}}",'Error');
            return;
        }
        
        if(collection.includes(" ")) {
            $.alert("{{__('strings.collection_bad_name')}}",'Error');
            return;
        }
        $('#form_data').hide('slow');
        $.showPreloader();
        $.post("{{route('recongnition_collections_add')}}", {
            user_token: "{{Auth::user()->token}}",
            collection_name: collection
        }, function(response) {
            console.log(response);
            $.hidePreloader();
            table.ajax.reload();
        }).fail(function(error){
            $.hidePreloader();
            console.log(error);
            if(error.responseJSON) {
                $.alert(error.responseJSON.message,'Error');
            }
        });
    }

    function deleteCollection(collectionId) {
        $.confirm("{{__('strings.delete_collection_confirm')}}", function () {
            $.showPreloader();
            $.post("{{route('recongnition_collections_delete')}}", {
                user_token: "{{Auth::user()->token}}",
                collection_id: collectionId
            }, function(response) {
                $.hidePreloader();
                table.ajax.reload();
            }).fail(function(error){
                $.hidePreloader();
                console.log(error);
                if(error.responseJSON) {
                    $.alert(error.responseJSON.message,'Error');
                }
            });
        });
    }
</script>
@endpush