@extends('layouts.app')

@section('title', 'Moka')
@section('breadcrumb', 'Moka Setting')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
<a href="{{route('moka.list')}}" class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('moka', 'kt-menu__item--open kt-menu__item--here')
@section('list-moka', 'kt-menu__item--active')
@section('content')
    <div class="col-md-12">
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        <i class="fa fa-edit"></i> &nbsp; Edit Moka Setting
                    </h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                {{-- begin: Description --}}
                <p>
                    Halaman ini merupakan halaman untuk melakukan edit konfigurasi account developer dari Mokapos untuk dilakukan konfigurasi dengan outlet yang ada di dalam aplikasi.
                </p>
                {{-- begin: Description --}}
                @include('layouts.notification')

               <div class="row mt-2">
                   {{-- begin: Step --}}
                    <div class="col-md-6">
                        <h5>Step</h5>
                        <ul class="p-4">
                            <li class="mb-3">
                                Buka Account Developer mokapos <a href="https://connect.mokapos.com" target="_blank">https://connect.mokapos.com</a>
                            </li>
                            <li class="mb-3">
                                Masukan Credential untuk login
                            </li>
                            <li class="mb-3">
                                Jika kosong harap hubungi yang bersangkutan (<a href="#" onClick="javascript:openModal('{{asset('moka/dev_dashboard_kosong.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Jika ada, klik tombol dengan tiga titik vertical, pilih edit (<a href="#" onClick="javascript:openModal('{{asset('moka/dev_dashboard_ada.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Setelah terbuka anda akan mendapat aplication id, secret dan app-id(di url nya) (<a href="#" onClick="javascript:openModal('{{asset('moka/open.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Untuk mendapatkan code nya bisa menggunakan App ID dengan menggunakan url <a href="https://backoffice.mokapos.com/apps/[app-id]/learn-more" target="_blank">https://backoffice.mokapos.com/apps/[app-id]/learn-more</a>
                            </li>
                            <li class="mb-3">
                                Setelah terbuka, klik "Get Started" (<a href="#" onClick="javascript:openModal('{{asset('moka/app_view.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-3">
                                Lalu akan muncul sebuah popup yang memperlihatkan permission yang diperlukan applikasi, lalu pilih "Allow" (<a href="#" onClick="javascript:openModal('{{asset('moka/auth_modal.png')}}')">Lihat Gambar</a>)
                            </li>
                            <li class="mb-2">
                                Anda akan mendapat code yang diperlukan untuk pengisian form(<a href="#" onClick="javascript:openModal('{{asset('moka/code.png')}}')">Lihat Gambar</a>)
                            </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 action="{{route('moka.update')}}" method="POST">
                            @csrf
                            <input name="id" id="id" type="hidden" value="{{$data['id'] ?? null}}">
                            <div class="form-group">
                                <label>Name Mokapos <span style="color:red;">*</span></label>
                                <input name="name" id="name" type="text" class="form-control" placeholder="E.g: Akun Moka 1" value="{{$data['name'] ?? null}}">
                            </div>
                            <div class="form-group">
                                <label>Description Mokapos <span style="color:red;">*</span></label>
                                <textarea name="desc" id="desc" class="form-control" cols="20" rows="3" placeholder="E.g: Akun Moka untuk jilid 1 - 100">{{$data['desc'] ?? null}}</textarea>
                            </div>
                            <div class="form-group">
                                <label>Aplication ID <span style="color:red;">*</span></label>
                                <input name="application_id" id="application_id" type="text" class="form-control" placeholder="E.g: 2351205648407891d7e4155b105907e37304534977f2f08cd06d675eca255bc6" value="{{$data['application_id'] ?? null}}" disabled>
                            </div>
                            <div class="form-group">
                                <label>Secret <span style="color:red;">*</span></label>
                                <input name="secret" id="secret" type="text" class="form-control" placeholder="E.g: 1c0bb93c8fe54e754f1297ba63d9e498f118bcf8edbbff9d1638eb135d111b66" value="{{$data['secret'] ?? null}}" disabled>
                            </div>
                            <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: 762e2a0564ebb6ff13b8451b3739795832d8bec70b3decaa1d118d408bfff156" value="{{$data['code'] ?? null}}" disabled>
                            </div>
                            <div class="form-group">
                                <label>Brands</label>
                                <div class="input-group">
                                    <select name="id_brand" id="searchOutlet" class="js-example-basic-single"  style="width:100%!important;">
                                        <option value="">--Choose Brands--</option>
                                        @foreach ($brand['result'] as $item)
                                            <option value="{{$item['id']}}" {{($data['id_brand'] == $item['id']) ? 'selected' : ''}}>{{$item['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group text-right">
                                <button class="btn btn-secondary btn-back" type="button">Back</button>
                                <button class="btn btn-warning" type="reset"> Reset</button>
                                <button class="btn btn-primary" type="submit"><i class="fa fa-edit"></i> Update</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');
}
$(".btn-back").on("click", function(){
         window.history.back();
     });
</script>

@endsection