@extends('modules.head') @section('contenido')
<form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('/profile-image/save') }}">
    @csrf
    <h1>Profile: <b>{{ Auth::user()->first_name }} {{Auth::user()->last_name }}</b></h1>
    <div class="dvProfile">
        <div>
            <div><span>Email:</span><b>{{ Auth::user()->email }}</b></div>
            <div><span>Phone:</span><b>{{ Auth::user()->phone }}</b></div>
            <div><span>Slack ID:</span><input type="text" val="" placeholder="Slack ID" id="txtSlackID" /></div>
        </div>
        <div>
            <h3>Your picture</h3>
            <div class="dvProfilePic">
                <input type="file" class="hidden_input_file" name="image" id="image" />
            </div>
        </div>
    </div>
    <div class="btn-div pull-right">
        <button type="submit" class="btn-pull-left" id="submit">Save &raquo;</button>
    </div>
</form>

@if(session()->has('success'))
    <script type="text/javascript">
        $(function () {
            swal({
                title: "{{ Session::get('success') }}",
                text: "New profile image has been uploaded.",
                icon: "success"
            })
        });
    </script>
@endif
@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<style type="text/css">
.dvProfile { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 25px 0;}
.dvProfile > div {width: 49%; background-color: #fff; border-radius: 10px; padding: 10px; }
.dvProfile > div span { display: block;}
.dvProfile > div > div { margin: 0 0 15px 0;}
.dvProfile input { width: 100%;}
.dvProfilePic { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%;}
.dvProfilePic > div { }
.dvProfilePic input { width: auto; }
</style>