@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-md-12">
                        <div class="card">
                            
                        <div class="card-header">
                            <h4><i class="icon icon-bell"></i> {{__('sidebar.quiq.notifications')}} QuiQ </h4>
                        </div>

                        <hr>

                        <div class="card-body">
                                    <form method="POST" action="{{route('quiq_notifications_post_new')}}">
                                    {{ csrf_field() }}
                                <div class="row mb-5">
                                        <div class="col-md-4 mb-4">
                                            <h5>{{__('strings.select_an_option')}}</h5>
                                            <div >
                                                <div>
                                                <label >
                                                    <input type="radio" name="type" value="driver" checked />
                                                    {{__('strings.quiq_drivers')}}
                                                    </label>
                                                </div>

                                                <div>
                                                    <label >
                                                    <input type="radio" name="type" value="company" disabled />
                                                    {{__('strings.companies')}}
                                                    </label>
                                                </div>

                                                <div>
                                                <label >
                                                    <input type="radio" name="type" value="user" disabled />
                                                    {{__('strings.users')}}
                                                    </label>
                                                </div>
                                            </div>
                                            
                                        </div>

                                        <div class="col-md-8">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="form-control-label">{{__('strings.notification_title')}}</label>
                                                        <input type="text" class="form-control" name="title">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                            <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="form-control-label">{{__('strings.message')}}</label>
                                                        <textarea class="form-control" rows="2" name="body"></textarea> 
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                </div>
                                <div class="form-actions center col-md-12">
                                    <button type="submit" class="btn btn-primary">{{ __('strings.send') }}</button>
                                </div>
                                    </form>
                            </div>
                        </div>
                    </div>
                </div>
@endsection

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

<script type="text/javascript">
    
    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" });
        });
    }

    function deleteDriver(driverToken){
        $.confirm('Esta acción no es reversible. Si presionas OK se perderá toda la información del conductor almacenada en la base de datos de QuiQ.', 'Importante', function () {
            $.post("{{route('quiq_driver_deletion')}}", {
            user_token: "{{Auth::user()->token}}" ,
            driver_token: driverToken
            }, function(response){
                console.log(response);
                $.notify(response.message, { className: 'success', globalPosition:"bottom right" });
                driverTable.ajax.reload();
            })
            .fail(function(err){
                console.log(err);
                $.notify("{{__('strings.error_message')}}", { className: 'error',globalPosition:"bottom right" });
            });
	    });
    }
</script>
@endpush