@extends('layouts.auth')

@section('title', 'Complete')

@section('content')
    <style>
        .success-msg,
        .error-msg {
            margin: 10px 0;
            padding: 10px;
            border-radius: 3px 3px 3px 3px;
            width: 100%;
        }
        .success-msg {
            color: #270;
            background-color: #DFF2BF;
        }
        .error-msg {
            color: #D8000C;
            background-color: #FFBABA;
        }
    </style>
    <form method="POST" action="{{ route('completeUser') }}" enctype="multipart/form-data" class="form-detail">
        <br><span style="color: #fff; font-size: 15pt; font-weight: 500">Enter Personal Information To Complete Registration</span><br>
        <p style="color: darkseagreen;"><i class="fa fa-check-circle"></i> We've sent you a welcome email. If you haven't received it kindly check your spam folder.</p>
        @if(session('error'))
            <p style="color: #000;">
                <i class="fa fa-times-circle"></i> {{ session('error') }}
            </p>
        @endif
        @csrf

        @php $member = \Illuminate\Support\Facades\Auth::user(); @endphp
        <div class="form-group mt-4">
            <label class="form-control-label" for="InputUsername" style="color: #fff;">Username</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                </div>
                <input type="text" name="username"
                       value="{{ $member['username'] }}"
                       class="form-control "
                       id="InputUsername"
                       placeholder=""
                       required
                       style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstName" style="color: #fff;">First Name</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <input type="text" name="first_name"
                           value=""
                           class="form-control "
                           id="InputFirstName"
                           placeholder=""
                           required
                           style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstLastName" style="color: #fff;">Last Name</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <input type="text" name="last_name"
                           value=""
                           class="form-control "
                           id="InputFirstLastName"
                           placeholder=""
                           required
                           style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                </div>
            </div>
        </div>

        <div class="form-group mb-4">
            <label class="form-control-label" for="InputPhone" style="color: #fff;">Phone Number</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="phone"></i>
                    </span>
                </div>
                <input type="text" name="phone"
                       value=""
                       class="form-control "
                       id="InputPhone"
                       placeholder=""
                       required oninput="this.value = this.value.replace(/[^0-9,.]/g, '').replace(/(\..*)\./g, '$1')"
                       style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstName" style="color: #fff;">Country</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <select name="country" id="country" onchange="getStates()" class="form-control" required style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                        <option></option>
                        @foreach($countries as $country)
                            <option value="{{ $country }}">{{ $country }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstLastName" style="color: #fff;">State</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <select name="state" id="state" class="form-control" required style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                        <option id="visible"></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstName" style="color: #fff;">Next of Kin (Full name)</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <input type="text" name="next_of_kin"
                           value=""
                           class="form-control "
                           id="InputFirstName"
                           placeholder=""
                           required
                           style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="form-control-label" for="InputFirstLastName" style="color: #fff;">Zip Code</label>
                <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="user"></i>
                    </span>
                    </div>
                    <input type="text" name="zip_code"
                           value=""
                           class="form-control "
                           id="InputFirstLastName"
                           placeholder=""
                           required
                           style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
                </div>
            </div>
        </div>

        <div class="form-group mb-4">
            <label class="form-control-label" for="InputPhone" style="color: #fff;">Address</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="phone"></i>
                    </span>
                </div>
                <input type="text" name="address"
                       value=""
                       class="form-control "
                       id="InputPhone"
                       placeholder=""
                       required
                       style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>

        <div>
          <input type="checkbox" id="terms" name="terms" required>
          <label for="terms" style="color: white">By signing up, you accept the <a href="{{ route('terms') }}" style="text-decoration: underline; color: #1E90FF">terms & conditions</a> for use of this website.</label>
        </div>

        <div class="form-group mb-0 text-center">
            <button class="register btn-block" type="submit" style="padding:10px; background-color: #1E90FF; color: #fff;">Complete</button>
        </div>
    </form>

    <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: #f4f4f4;
            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 #ddd;
            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 src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

    <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>

    <script>
        function getStates() {
            let select = $("#state");
            select.find('option').not(':first').remove();
            let country = $("#country").val();
            $.ajax({
                url: "{{ route('state') }}",
                type: 'GET',
                data: {country:country},
                beforeSend: function() {
                    $('#visible').html('Loading states')
                }
            }).done(function( res ) {
                let p = res.data;
                let select = $("#state");
                for (let prop in p) {
                    let option = document.createElement('option');
                    option.innerHTML = p[prop];
                    option.value = p[prop];
                    select.append(option)
                }
                $('#visible').html('')
            }).fail(function() {

            });
        }
    </script>
@endsection