@extends('layout.main_simple')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
@stop

@section('layout_sidebar')
    {{--sidebar--}}
@stop

@section('content')

    <form>
        <div class="card-body">
            <div class="text-center">
                <img src="{{asset('images/soveem2.com.png')}}" class="p-5" style="width: 64px;" />
                <i class="fa fa-plus font-size-h3"></i>
                <img src="{{asset('images/instagram.png')}}" class="p-5" style="width: 64px;" />
            </div>
            <div class="form-group mb-8">
                <div class="alert alert-custom alert-default" role="alert">
                    <div class="alert-icon">
                        <span class="svg-icon svg-icon-primary svg-icon-xl">
                            <!--begin::Svg Icon | path:assets/media/svg/icons/Tools/Compass.svg-->
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24" />
                                    <path d="M7.07744993,12.3040451 C7.72444571,13.0716094 8.54044565,13.6920474 9.46808594,14.1079953 L5,23 L4.5,18 L7.07744993,12.3040451 Z M14.5865511,14.2597864 C15.5319561,13.9019016 16.375416,13.3366121 17.0614026,12.6194459 L19.5,18 L19,23 L14.5865511,14.2597864 Z M12,3.55271368e-14 C12.8284271,3.53749572e-14 13.5,0.671572875 13.5,1.5 L13.5,4 L10.5,4 L10.5,1.5 C10.5,0.671572875 11.1715729,3.56793164e-14 12,3.55271368e-14 Z" fill="#000000" opacity="0.3" />
                                    <path d="M12,10 C13.1045695,10 14,9.1045695 14,8 C14,6.8954305 13.1045695,6 12,6 C10.8954305,6 10,6.8954305 10,8 C10,9.1045695 10.8954305,10 12,10 Z M12,13 C9.23857625,13 7,10.7614237 7,8 C7,5.23857625 9.23857625,3 12,3 C14.7614237,3 17,5.23857625 17,8 C17,10.7614237 14.7614237,13 12,13 Z" fill="#000000" fill-rule="nonzero" />
                                </g>
                            </svg>
                            <!--end::Svg Icon-->
                        </span>
                    </div>
                    <div class="alert-text">
                        Enter your Instagram username and password to authenticate and connect your Instagram account to Soveem
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <div id="insta-error-holder" class="alert alert-danger" style="display:none;">

                </div>
            </div>
            <div class="form-group">
                <label>Username
                    <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="ig_username" placeholder="Enter email" />
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password
                    <span class="text-danger">*</span></label>
                <input type="password" class="form-control" id="ig_password" placeholder="Password" />
            </div>

            <div class="alert alert-danger" id="ig-notes" style="display:none;">
                <b style="font-weight: 900;">Please verify account</b>
                <p class="pt-3">
                    Instagram has sent you a verification code via email or SMS. Please provide the code below and then press "Connect Account".
                    <input class="form-control pt-3" id="ig_code" name="ig_code"  value="" placeholder="Put verification code here..."/>
                </p>
                <div id="_challenge_url_div" style="display:none;">
                    <small>If you haven't recieved the code in 5 minutes please try
                        <a id="_challenge_url" href="" target="_blank">THIS LINK</a>, or open up a new tab and login to <a href="https://www.instagram.com/">Instagram</a> and allow access.
                    </small>
                </div>

            </div>

        </div>
        <div class="card-footer">
                <button type="button" class="btn btn-info" onclick="javascript: authInstagram();">Connect Account</button>
{{--            <button type="submit" class="btn btn-primary mr-2">Connect Account</button>--}}
        </div>
    </form>
    <!--end::Form-->

@stop


@section('page_modals')
    {{--Page modals--}}
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->

    <script>
        function authInstagram(){
            loadPage(true);
            $('#insta-error-holder').hide();
            $.ajax({
                url: route('platform.callback', ['instagram']),
                type: "post", //send it through get method
                data: {
                    '_token': '{{csrf_token()}}',
                    user: $('#ig_username').val(),
                    password: $('#ig_password').val(),
                    verification_code: $('#ig_code').val()
                },
                success: function(data) {
                    loadPage(false);
                    if(data.status == 1) {
                        window.location.href = route('system.success');
                    }else if(data.status == 2){
                        /*show verification code*/
                        $('#ig-notes').show();
                        if (data.challenge_url  !== 'undefined') {
                            if(data.challenge_url != ''){
                                $('#_challenge_url_div').show();
                                $('#_challenge_url').attr('href', data.challenge_url);
                            }
                        }else{
                            $('#_challenge_url_div').hide();
                        }
                    }else{
                        $('#insta-error-holder').show();
                        let error_msg = '';
                        if (data.type  !== 'undefined') {
                            error_msg = data.message;
                        }
                        $('#insta-error-holder').html(error_msg);
                    }
                    $('#ig-loader').hide();
                },
                error: function(xhr) {
                    //Do Something to handle error
                }
            });
        }


    </script>
@stop