@extends('layouts.main')

@push('styles')
<style>
        .cards tbody tr {
            float: left;
            width: 30%;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0,0,0,.125);
    	    border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.25);
        }
        .cards tbody td {
            display: block;
        }
        .table tbody label {
            display: none;
        }
        .cards tbody label {
        	display: inline;
        	position: relative;
        	font-size: 85%;
        	top: -0.5rem;
        	float: left;
        	color: #808080;
        	min-width: 4rem;
        	margin-left: 0;
        	margin-right: 1rem;
        	text-align: left;
        }
        
        .table .fa {
            font-size: 2.5rem;
            text-align: center;
        }
        .cards .fa {
            font-size: 7.5rem;
        }
        
        .driver_photo{            
            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;
        }
        .driver_photo_upload{            
            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: 25%;
        }

    form input[type="submit"]{

        background: none;
        border: none;
        color: #42a5f5;
        cursor: pointer;
    }
    form input[type="submit"]:hover {
        color:#515151;
        text-decoration:none
    }
</style>
@endpush

@section('content') 
<div class="row">
    <div class="col-xs-12">
        <div class="card">
                <div class="card-header">
                    <h4 class="form-section"><br><i class="icon-head"></i> {{__('strings.quiq_drivers')}}  <span class="float-sm-right"> <a href="{{route('quiq_driver_crate_driver_view')}}" class="btn btn-primary">{{__('sidebar.admin.add_driver')}}</a></span></h4><br>
                    <button id="btToggleDisplay" class="btn btn-primary"><i class="fa fa-table fa-lg" aria-hidden="true"></i> <i class="fa fa-arrows-h fa-lg" aria-hidden="true"></i> <i class="fa fa-id-card-o fa-lg" aria-hidden="true"></i></button>
                </div>
                <div class="table-responsive">
                    <table id="drivers" class="table hover mb-0">
                        <thead class="thead-inverse">
                            <tr>
                            	<th>Id</th>
                                <th>{{__('strings.photo')}}</th>
                            	<th>{{__('strings.user')}}</th>
                                <th>SCT?</th>
                            	<th>{{__('strings.name')}}</th>                                
                                <th>{{__('strings.last_name')}}</th>
                                <th>Eco</th>
                            	<th>{{__('strings.taximeter_type')}}</th>
                            	<th>{{__('strings.registration_date')}}</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </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>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <img id="driver_photo_upload" name="driver_photo_upload" class="driver_photo_upload" src="">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-control-label" for="customFile">Choose file</label>
                            <input type="file" class="form-control" id="imageFile" accept="image/gif, image/jpeg, image/png" onchange="resizeImage(this);">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="filename" class="form-control-label">filename</label>
                            <input type="text" id="filename" name="filename" class="form-control" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                <button type="button" id="update" name="update" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{asset('js/notify.min.js')}}"></script>

<script type="text/javascript">
    $(function() {
    	moment.locale('es');
        $('#drivers').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            ajax: '{!! route('drivers_driver_datatable') !!}',
            columns: [
            { data: 'ID_USER', name: 'ID_USER', defaultContent: "<i>{{__('errors.not_set')}}</i>"},      
            { data: 'ID_USER', name: 'ID_USER', orderable: false, render: function (data, type, full, meta) { 
                    return '<img class="driver_photo" height="75%" width="75%" src="{{Auth::user()->getQuiQPhotoREST()}}drivers/' + full.EMAIL + full.ECO + '.jpeg" onclick="updatePhoto(\''+ full.EMAIL + full.ECO + '\')"/>';
                }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
            },            
            { data: 'EMAIL', name: 'EMAIL', defaultContent: "<i>{{__('errors.not_set')}}</i>"},            
            { data: 'SCT', name: 'SCT', orderable: false, render: function (data, type, full, meta) {
                if(data) {
                    return '<input type="checkbox" value="' + full.SECURE_TOKEN + '" onclick="sctRequest(this)" checked/>';
                } else {
                   return '<input type="checkbox" value="' + full.SECURE_TOKEN + '" onclick="sctRequest(this)"/>';
                }
                }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
            },        
            { data: 'NAME', name: 'NAME', defaultContent: "<i>{{__('errors.not_set')}}</i>"},            
            { data: 'LAST_NAME', name: 'LAST_NAME', defaultContent: "<i>{{__('errors.not_set')}}</i>"},  
            { data: 'ECO', name: 'ECO', defaultContent: "<i>{{__('errors.not_set')}}</i>"},                  
            { data: 'TAXI_TYPE', name: 'TAXI_TYPE', defaultContent: "<i>{{__('errors.not_set')}}</i>"}, 
            { data: 'CREATED_AT', name: 'CREATED_AT', render: function(data, type, row, meta)
	            {
	            	return moment.utc(data).local().format('YYYY-MM-DD');
	            }, defaultContent: "<i>{{__('errors.not_set')}}</i>"
	    },   
            { data: 'EDIT', name: 'EDIT', defaultContent: "<i>{{__('errors.not_set')}}</i>"},
            { data: 'TRIPS', name: 'TRIPS', defaultContent: "<i>{{__('errors.not_set')}}</i>"}, 
            { data: 'EMAIL', name: 'EMAIL', orderable: false, render: function (data, type, driver, meta) { 
                    var htmlForm = '<form method="post" target="_blank" action="{{Auth::user()->getQuiQWeb()}}driver/history">';
                    htmlForm += '<input type="hidden" name="secure_token" value="rt-5c4603ddc5583-cb875168-11bd-48cd-a281-6dbc7e033bae">';
                    htmlForm += '<input type="hidden" name="driver_id" value="' + driver.ID_USER + '">';
                    htmlForm += '<input type="hidden" name="driver_email" value="' + driver.EMAIL + '">';
                    htmlForm += '<input type="hidden" name="driver_token" value="' + driver.SECURE_TOKEN + '">';
                    htmlForm += '<input type="hidden" name="quiq_admin" value="true">';
                    htmlForm += '<input type="submit" value="{{__("strings.historical")}}">';
                    htmlForm += "</form>"
                    return htmlForm;
                }, 
            defaultContent: "<i>{{__('errors.not_set')}}</i>"
            } 
            ],
            dom: 'Bfrtip',
            buttons: [
                'pageLength','copy', 'excel', 'pdf'
            ],
            lengthMenu: [[10, 50, 200], [10, 50, 200]],
            language: {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
            },
        });
        $('#btToggleDisplay').on('click', function () {
                $("#drivers").toggleClass('cards')
                $("#drivers thead").toggle();
            })
    });
    var base64;
    function updatePhoto(driverPhoto) {
        $("#imageFile").val(null);
        $('#filename').val(driverPhoto + ".jpeg");
        $('#driver_photo_upload').attr("src",'{{Auth::user()->getQuiQPhotoREST()}}drivers/' + driverPhoto + ".jpeg");
        $('#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) {
                    var img = new Image();                    
                    img.src = e.target.result;
                    img.onload = function() {
                        var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext("2d");
                        canvas.width = 255;
                        canvas.height= 255;
                        // draw the img into canvas
                        ctx.drawImage(this, 0, 0, 255, 255);
                        base64 = canvas.toDataURL("image/jpeg", 0.75);
                        document.getElementById('driver_photo_upload').src = base64;
                    };                 
                }
                reader.readAsDataURL(file);
            }

        } else {
            $.alert('The File APIs are not fully supported in this browser.');
        }
    }
    
    $("#update").click(function(){
        $.post("{{Auth::user()->getQuiQREST()}}driver/image/upload", { filename: $('#filename').val(), image:base64.split(',')[1]} ,function(response){
            location.reload(); 
            $('#photoModal').modal('hide');
        });
    });
    
    function sctRequest(checkbox) {
        console.log($(checkbox).prop('checked'), $(checkbox).val());
        $.post("{{route('quiq_driver_sct')}}", {
            user_token: "{{Auth::user()->token}}" ,
            driver_token: $(checkbox).val(),
            sct: $(checkbox).prop('checked')
        }, function(response){
            console.log(response);
            $.notify(response.message, { className: 'success', globalPosition:"bottom right" });
        })
        .fail(function(err){
            console.log(err);
            $(checkbox).prop('checked', !$(checkbox).prop('checked'));
            $.notify("{{__('strings.error_message')}}", { className: 'error',globalPosition:"bottom right" });
        });
    }
</script>
@endpush