@extends('layouts.user')

@section('title', 'Profile')

@section('content')
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <div class="nk-content ">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="components-preview wide-md mx-auto">
                        <div class="nk-block-head nk-block-head-lg wide-sm">
                            <div class="nk-block-head-content">
                                <div class="nk-block-head-sub"><a class="back-to" href="{{ route('account') }}"><em class="icon ni ni-arrow-left"></em><span>Dashboard</span></a></div>
                                <h2 class="nk-block-title fw-normal">Profile</h2>
                                <div class="nk-block-des">
                                    <p class="lead"></p>
                                </div>
                            </div>
                        </div><!-- .nk-block -->
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12 mb-5">
                                                <h4 class="mb-4">
                                                    <strong></strong>
                                                </h4>
                                                @if(session('error'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <i class="fe fe-alert-triangle air__menuLeft__icon"></i> {{ session('error') }}
                                                    </div>
                                                @endif
                                                @if(session('success'))
                                                    <div class="alert alert-success" role="alert">
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <i class="fe fe-check-square air__menuLeft__icon"></i> {{ session('success') }}
                                                    </div>
                                                @endif
                                                <form name="form-validation" method="POST" action="{{ route('updateProfile') }}" enctype="multipart/form-data">
                                                    @csrf

                                                    <div style="margin-top: 100px"></div>
                                                    <input type="file" name="photo" id="mediaFile" />
                                                    <div id="profile"  style="background-image: url('../../../storage/user-photo/{{ $profile['photo'] }}')" class="">
                                                        <div class="dashes"></div>
                                                        <label>Click to browse or drag an image here</label>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Username</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                value="{{ $user['username'] }}"
                                                                name="username"
                                                                type="text"
                                                                disabled
                                                        />
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Email</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="email"
                                                                value="{{ $user['email'] }}"
                                                                type="text"
                                                                disabled
                                                        />
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">First name</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="first_name"
                                                                readonly
                                                                value="{{ $profile['first_name'] }}"
                                                                type="text"
                                                        />
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Last name</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="last_name"
                                                                readonly
                                                                value="{{ $profile['last_name'] }}"
                                                                type="text"
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Address</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="address"
                                                                required
                                                                value="{{ $profile['address'] }}"
                                                                type="text"
                                                        />
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Country</label>
                                                        <select id="country" name="country" class="form-control" required>
                                                            @foreach($countries as $country)
                                                                <option @if($country == $profile->country) selected @endif @if($profile->country !== null) disabled @endif>{{ $country }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">State</label>
                                                        <input type="text" name="state" value="{{ $profile->state }}" class="form-control" placeholder="State" @if($profile->state != null) readonly @endif>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Phone number</label>
                                                        <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="phone_number"
                                                                required
                                                                value="{{ $profile['phone_number'] }}"
                                                                type="number"
                                                        />
                                                    </div>

                                                    <div class="form-actions">
                                                        <button type="submit" class="btn btn-primary">Update</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <script>
                            ;(function($) {
                                'use strict'
                                $(function() {
                                    $('#form-validation').validate({
                                        submit: {
                                            settings: {
                                                inputContainer: '.form-group',
                                                errorListClass: 'form-control-error',
                                                errorClass: 'has-danger',
                                            },
                                        },
                                    })

                                    $('#form-validation .remove-error').on('click', function() {
                                        $('#form-validation').removeError()
                                    })

                                    $('#form-validation-simple').validate({
                                        submit: {
                                            settings: {
                                                inputContainer: '.form-group',
                                                errorListClass: 'form-control-error-list',
                                                errorClass: 'has-danger',
                                            },
                                        },
                                    })

                                    $('#form-validation-simple .remove-error').on('click', function() {
                                        $('#form-validation-simple').removeError()
                                    })

                                    $('.select2').select2()
                                })
                            })(jQuery)
                        </script>
                    </div><!-- .components-preview -->
                </div>
            </div>
        </div>
    </div>

    <style>
        #mediaFile {
            position: absolute;
            top: -1000px;
        }

        #profile {
            border-radius: 100%;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            position: relative;
            top: -80px;
            margin-bottom: -80px;
            cursor: pointer;
            background: #ddd;
            display: table;
            background-size: cover;
            background-position: center center;
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35);
        }

        #profile.is-invalid {
            border: 4px solid red;
        }
        #profile .dashes {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 100%;
            width: 100%;
            height: 100%;
            border: 4px dashed #fff;
            opacity: 1;
        }
        #profile label {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            padding: 0 30px;
            color: grey;
            opacity: 1;
        }
        #profile.dragging {
            background-image: none !important;
        }
        #profile.dragging .dashes {
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-name: spin;
            animation-name: spin;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            opacity: 1 !important;
        }
        #profile.dragging label {
            opacity: 0.5 !important;
        }
        #profile.hasImage .dashes, #profile.hasImage label {
            opacity: 0;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    </style>

    <script>
        // ----- On render -----
        $(function() {

            $('#profile').addClass('dragging').removeClass('dragging');
        });

        $('#profile').on('dragover', function() {
            $('#profile').addClass('dragging')
        }).on('dragleave', function() {
            $('#profile').removeClass('dragging')
        }).on('drop', function(e) {
            $('#profile').removeClass('dragging hasImage');

            if (e.originalEvent) {
                var file = e.originalEvent.dataTransfer.files[0];
                console.log(file);

                var reader = new FileReader();

                //attach event handlers here...

                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    console.log(reader.result);
                    $('#profile').css('background-image', 'url(' + reader.result + ')').addClass('hasImage');

                }

            }
        })
        $('#profile').on('click', function(e) {
            console.log('clicked')
            $('#mediaFile').click();
        });
        window.addEventListener("dragover", function(e) {
            e = e || event;
            e.preventDefault();
        }, false);
        window.addEventListener("drop", function(e) {
            e = e || event;
            e.preventDefault();
        }, false);
        $('#mediaFile').change(function(e) {

            var input = e.target;
            if (input.files && input.files[0]) {
                var file = input.files[0];

                var reader = new FileReader();

                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    console.log(reader.result);
                    $('#profile').css('background-image', 'url(' + reader.result + ')').addClass('hasImage');
                }
            }
        })
    </script>
@endsection