@extends('layouts.master')

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark"></h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="">
                    <div class="">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Settings</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                            @csrf
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Consumer key</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="consumer" placeholder="API key" name="consumerkey" value="{{ old('consumerkey', $settings->consumerkey) }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Consumer secret</label>

                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="consumer_secret" placeholder="API secret" name="consumersecret" value="{{ old('consumersecret', $settings->consumersecret) }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Access token</label>

                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="token" placeholder="API secret" name="accesstoken" value="{{ old('accesstoken', $settings->accesstoken) }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Access token secret</label>

                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="token_secret" placeholder="API secret" name="accesssecret" value="{{ old('accesssecret', $settings->accesssecret) }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <div class="form-check">
                                            <input type="checkbox" @if($settings->trends)checked @endif class="form-check-input"  id="trend_check" name="trends">
                                            <label class="form-check-label" for="exampleCheck2">Trend Tracker</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="submit" id="settings_btn" class="btn btn-info">Save Changes</button>
                                <!--<button type="submit" class="btn btn-default float-right">Cancel</button>-->
                            </div>
                            <!-- /.card-footer -->
                    </div>
                        <span id="message"></span>
                    </div>
                    <!-- /.col-md-6 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

@endsection

@section('javascript')

    <script src="{{asset('/dist/js/adminlte.js')}}"></script>


    <script type="text/javascript">
        $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
    </script>

    <script>
        var timeout = null
        $("#settings_btn").on('click', function () {
            var token = document.getElementById("token").value;
            var token_secret = document.getElementById("token_secret").value;
            var consumer = document.getElementById("consumer").value;
            var consumer_secret = document.getElementById("consumer_secret").value;
            var trends = document.getElementById("trend_check").checked ? 1 : 0;

            timeout = setTimeout(function () {
                $.ajax({
                    type: "get",
                    url: '{{URL::to('settings')}}',
                    async: true,
                    data: {
                        token: token,
                        token_secret: token_secret,
                        consumer: consumer,
                        consumer_secret: consumer_secret,
                        trends : trends,
                    },
                    contentType: "application/json",
                    success: function (msg) {
                        if (msg.data.success == 'ok') {
                            document.getElementById("message").innerHTML =
                                "<div class='alert alert-success' style='opacity: 0.7'>\n" +
                                "Verification succesful!\n" +
                                "</div>";
                            setTimeout(fade_out, 2000);

                            function fade_out() {
                                $(".alert").fadeOut().empty();
                            }
                        }
                        if (msg.data.success == 'failed') {
                            document.getElementById("message").innerHTML =
                                "<div class='alert alert-danger' style='opacity: 0.7'>\n" +
                                "Verification failed! \n" +
                                "</div>";
                            setTimeout(fade_out, 2000);

                            function fade_out() {
                                $(".alert").fadeOut().empty();
                            }
                        }
                    },
                    error: function (msg) {
                        console.log(msg)
                    }
                });
            } , 500)
        })


    </script>
@stop