@extends('layouts.app')

@section('title', 'Accurate')
@section('breadcrumb', 'Accurate Setting')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Create Accurate
    </a>
@endsection
@section('accurate', 'kt-menu__item--open kt-menu__item--here')
@section('create-accurate', 'kt-menu__item--active')
@section('content')
    <div class="col-md-12">
        <div class="kt-portlet">
            <div class="kt-portlet__body">
                @include('layouts.notification')
                {{-- begin: Description --}}
                <p>
                    Halaman ini merupakan halaman untuk melakukan konfigurasi account developer dari Accurate untuk dilakukan konfigurasi dengan outlet yang ada di dalam aplikasi.
                </p>
                {{-- begin: Description --}}

               <div class="row mt-2">
                   {{-- begin: Step --}}
                    <div class="col-md-6">
                        <h5>Step</h5>
                        <ul class="p-4">
                            <li class="mb-3">
                                Buka dan Login Account Accurate <a href="https://account.accurate.id/" target="_blank">https://account.accurate.id/</a>
                            </li>
                            <li class="mb-3">
                                Masukan Credential untuk login
                            </li>
                            <li class="mb-3">
                                Pilih Profile masuk ke Area Developer, jika tidak ada mohon hubungi pihak yang bersangkutan (<a href="#" onClick="javascript:openModal('{{asset('accurate/area.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Setelah masuk, Pilih Aplikasi, lalu masuk ke aplikasi yang tersedia, jika belum terdapat aplikasi, mohon menghubungi pihak yang bersangkutan(<a href="#" onClick="javascript:openModal('{{asset('accurate/aplikasi.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Setelah Aplikasi terbuka anda akan mendapat Client ID dan Client Secret(<a href="#" onClick="javascript:openModal('{{asset('accurate/key.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Lalu pilih sidebar Setting Aplikasi untuk mendapatkan URL OAuth Callback (<a href="#" onClick="javascript:openModal('{{asset('accurate/url.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Isi API Key, OAuth Secret, Signature Secret dan  URL OAuth Callback, kemudian klik tombol dapatkan code
                            </li>
                            <li class="mb-3">
                                Akan Ada Pilihan Otorisasi pada accurate (<a href="#" onClick="javascript:openModal('{{asset('accurate/permision.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Copy code yang sudah didapat dan masukan kedalam field yang sudah tersedia
                            </li>
                            <li class="mb-3">
                                Kemudian klik generate database, untuk mendapatkan database apa saja yang sudah terinstalasi pada Accurate
                            </li>
                            <li class="mb-3">
                                Terakhir pilih database yang telah tergenerate lalu klik create untuk membuat accurate setting
                            </li>
                        </ul>

                        {{-- NB <span style="color:red;">*</span>:Code hanya berlaku sekali, jika gagal disaran kan untuk generate ulang code. --}}
                    </div>
                    <div class="col-md-6">
                        <h5>Form</h5>
                    <form id="createAccurate" action="{{route('accurate.store')}}" method="POST">
                        @csrf
                            <div class="form-group">
                                <label>Name Accurate <span style="color:red;">*</span></label>
                            <input name="name" id="name" type="text" class="form-control" placeholder="E.g: Akun Accurate 1" value="{{old('name')}}">
                            </div>
                            <div class="form-group">
                                <label>Brands</label>
                                <div class="input-group">
                                    <select name="id_brand" id="searchBrands" class="js-example-basic-single"  style="width:100%!important;">
                                        <option value="">--Choose Brands--</option>
                                        @foreach ($brand['result'] as $item)
                                            <option value="{{$item['id']}}">{{$item['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Description Accurate <span style="color:red;">*</span></label>
                                <textarea name="description" id="description" class="form-control" cols="20" rows="3" placeholder="E.g: Akun Accurate untuk jilid 1 - 100"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Client ID <span style="color:red;">*</span></label>
                                <input name="api_key" id="api_key" type="text" class="form-control" placeholder="E.g:24fd0fc4-7968-442d-8086-25ba17b3b739" value="{{old('api_key')}}">
                            </div>
                            <div class="form-group">
                                <label>Client Secret <span style="color:red;">*</span></label>
                                <input name="oauth_secret" id="oauth_secret" type="text" class="form-control" placeholder="E.g: 4c028e271e6684bc19c3377ee7b2a2c9" value="{{old('oauth_secret')}}">
                            </div>
                            {{-- <div class="form-group">
                                <label>Signature Secret <span style="color:red;">*</span></label>
                                <input name="signature_secret" id="signature_secret" type="text" class="form-control" placeholder="E.g: 1de3cd571458b1cecc70823323760633" value="{{old('signature_secret')}}">
                            </div> --}}
                            <div class="form-group">
                                <label>URL OAuth Callback <span style="color:red;">*</span></label>
                                <input name="url_oauth_callback" id="url_oauth_callback" type="text" class="form-control" placeholder="E.g: https:// ..." value="{{old('url_oauth_callback')}}">
                            </div>
                            <div class="form-group pull-right">
                                <a href="#" class="badge badge-primary" id="get_code">Dapatkan Code</a>
                            </div><br>
                            <div class="form-group">
                                <label>Code <span style="color:red;">*</span></label>
                                <input name="code" id="code" type="text" class="form-control" placeholder="E.g: UgKUKiGjeCo9oPzk1Q19" value="{{old('code')}}">
                            </div>

                            {{-- begin: modal database accurate --}}
                            <div class="modal fade" id="databaseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Database Accurate</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div id="database-content">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> create</button>
                                    </div>
                                </div>
                                </div>
                            </div>
                            {{-- end: modal database accurate --}}

                            <div class="form-group pull-right">
                                <button class="btn btn-primary  text-white" id="create"><i class="fa fa-database"></i> Generate Database</button>
                            </div>
                        </form>
                    </div>
                   {{-- begin: Step --}}
               </div>

                <div class="kt-separator kt-separator--dashed"></div>
               {{-- begin: modal --}}
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" style="max-width: 90%;" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <img id="gambar" src="" style="width:100%;">
                        </div>
                    </div>
                    </div>
                </div>
               {{-- end: modal --}}
            </div>
        </div>
    </div>

@endsection
@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
        function openModal(data) {
            $('#gambar').attr("src", data);
            $('#exampleModal').modal('show');
        }
    </script>

    <script>
        $( "#get_code" ).click(function() {
            let link = "https://accurate.id/oauth/authorize";
            let api_key = $('#api_key').val();
            let scope = "item_view sales_order_save customer_view delivery_order_save delivery_order_view sales_order_save sales_order_view sales_invoice_save sales_invoice_view sales_receipt_view item_transfer_view item_transfer_save sales_receipt_save item_save customer_save warehouse_view warehouse_save branch_view sellingprice_adjustment_view";
            let url_oauth_callback = $('#url_oauth_callback').val();
            window.open('https://accurate.id/oauth/authorize?client_id='+api_key+'&response_type=code&redirect_uri='+url_oauth_callback+'&scope='+scope, '_blank');
        });
    </script>

    <script>
        $('#create').click(function (event) {
            event.preventDefault();
            $('#loading').show();
            var form = $('#createAccurate'),
                url = "{{route('accurate.check')}}",
                method = 'POST';

            form.find('.help-block').remove();
            form.find('.form-group input').removeClass('is-invalid');

            $.ajax({
                url : url,
                method: method,
                data : form.serialize(),
                success: function (response) {
                    $('#loading').hide();
                    // console.log(response);
                    if (response.status == "fail") {
                        // console.log('gagal')
                        swal.fire({
                            type : 'error',
                            title : 'Failed!',
                            timer: 5000,
                            text : response.messages
                        })
                    }
                    if (response.status == "success") {
                        // console.log('berhasil')
                        $('#databaseModal').modal('show');
                        $.each(response.result, function (key, value) {
                            $('#database-content')
                                .append(
                                    '<label class="kt-radio">'+
                                    '<input name="database" id="database" type="radio" value="'+value.id+'">'+value.alias+
                                    '<span></span>'+
                                    '</label><br>'
                                    );
                        });
                    }
                },
                error : function (xhr) {
                    $('#loading').hide();
                    // console.log(xhr);
                    swal.fire({
                        type : 'error',
                        title : 'Failed!',
                        text : 'An error Occured!'
                    });
                }
            })
        });
    </script>
@endsection