@extends('layouts.master')

@section('title', 'Mi Perfil')

@section('content')

    <meta name="_token" content="{{ csrf_token() }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>

    <style type="text/css">
    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }
    .modal-lg{
        max-width: 1000px !important;
    }
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1 class="m-0 text-dark">Mi Perfil <small></small></h1>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div class="card">
                    <div class="card-header ui-sortable-handle bg-dark text-light">
                        <h3 class="card-title">
                            <i class="fas fa-bars mr-1"></i>
                            Resumen
                        </h3>
                    </div>

                    <div class="card-body box-profile">
                        <div class="text-center">
                            <img class="profile-user-img img-fluid img-circle" src="{{URL::asset(Auth::User()->img)}}" alt="User profile picture">
                        </div>

                        <h3 class="profile-username text-center">{{ Auth::User()->name }}</h3>

                        <p class="text-muted text-center">{{ Auth::User()->nickname }}</p>

                        <p class="text-muted text-center">{{ Auth::User()->email }}</p>

                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                <div class="card">
                    <div class="card-header ui-sortable-handle bg-dark text-light">
                        <h3 class="card-title">
                            <i class="fas fa-user mr-1"></i>
                            Mis Datos
                        </h3>
                    </div>

                    <div class="card-body box-profile">
                        <div class="tab-content">
                            <div class="tab-pane active" id="settings">
                                {{ Form::open(['route' => 'organizador.perfil.actualizar', 'method'=>'POST', 'files'=> true, 'class'=>'form-horizontal']) }}
                                <div class="form-group row">
                                    {{ Form::label('name', "Nombre", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::text('name', Auth::User()->name, ['maxlength'=>'100', 'required' => 'required', 'class'=>'form-control']) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('', "Documento", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::text('cuit', Auth::User()->cuit, ['maxlength'=>'100', 'required' => 'required', 'class'=>'form-control']) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('email', "Email", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::text('email', Auth::User()->email, ['maxlength'=>'100', 'required' => 'required', 'class'=>'form-control', 'disabled']) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('nickname', "Nickname", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::text('email', Auth::User()->nickname, ['maxlength'=>'100', 'required' => 'required', 'class'=>'form-control']) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('telefono', "Telefono", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::text('telefono', Auth::User()->telefono, ['maxlength'=>'100', 'required' => 'required', 'class'=>'form-control']) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('password_old', "Contraseña Antigua", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::password('password_old', ["class" => "form-control"]) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{ Form::label('password_new', "Contraseña Nueva", ['class'=>'col-sm-2 col-form-label']) }}
                                    <div class="col-sm-10">
                                        {{ Form::password('password_new', ["class" => "form-control"]) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="offset-sm-2 col-sm-4">
                                        {{ Form::submit('Actualizar', array('class'=> 'btn btn-success btn-block'))}}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>


<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Recortar Imagen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <div class="row">
                        <div class="col-md-8">
                            <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                        </div>
                        <div class="col-md-4">
                            <div class="preview"></div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <button type="button" class="btn btn-outline-success btn-block" id="crop">Guardar</button>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <button type="button" class="btn btn-outline-secondary btn-block" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<script>

var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;

$("body").on("change", ".image", function(e){
    var files = e.target.files;
    var done = function (url) {
        image.src = url;
        $modal.modal('show');
    };
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
        file = files[0];

        if (URL) {
            done(URL.createObjectURL(file));
        } else if (FileReader) {
            reader = new FileReader();
            reader.onload = function (e) {
                done(reader.result);
            };
            reader.readAsDataURL(file);
        }
    }
});

$modal.on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 3,
        preview: '.preview'
    });
}).on('hidden.bs.modal', function () {
    cropper.destroy();
    cropper = null;
});

$("#crop").click(function(){
    canvas = cropper.getCroppedCanvas({
        width: 160,
        height: 160,
    });

    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            var base64data = reader.result;

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{URL::to('/')}}/jefetaller/perfil/foto/guardar",
                data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
                success: function(data){
                    location.reload();
                }
            });
        }
    });
})

</script>
@endsection

@section('javascript')

@endsection