@extends('layouts.app')

@section('title', 'Vendor')


@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="page-title">
                    <h2>{{ $retailer->name }}</h2>
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>

                    <div class="tabs-container">
                        <ul class="nav nav-tabs" role="tablist">
                            <li><a class="nav-link active" data-toggle="tab" href="#tab-settings"> Settings</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-keys"> API</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" id="tab-settings" class="tab-pane active">

                                <div class="panel-body">

                                </div>
                            </div>
                            <div role="tabpanel" id="tab-keys" class="tab-pane">
                                <div class="panel-body">
                                    <h3>API Keys</h3>
                                    <a href="javascript:void(0)" class="btn btn-primary pull-right new_key_generate">Generate New Key</a>
                                    <div class="clearfix">
                                    <table class="table table-bordered table-hover">
                                        @foreach($keys as $key)
                                        <tr id="key-{{ $key->id }}" data-id="{{ $key->id }}">
                                            <td>{{ $key->key }}</td>
                                            <td><a href="javascript:void(0)" class="btn btn-xs btn-danger remove_key"> <i class="fa fa-trash"></i></a></td>
                                        </tr>
                                        @endforeach
                                    </table>
                                        <hr />
                                        {!! Form::open(['id' => 'form','novalidate' => 'novalidate' ]) !!}
                                        <div class="form-group">
                                            {!! Form::label('webhook_url','Webhook Url') !!}
                                            {!! Form::text('webhook_url' , $retailer->webhook_url , ['class' => 'form-control','placeholder' => 'Webhook Url','required'=>'true']) !!}
                                        </div>
                                        <div class="pull-right">
                                            <button class="btn btn-primary" type="submit">Update</button>
                                        </div>
                                        <div class="clearfix"></div>
                                        {!! Form::close() !!}
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function () {
           $('.new_key_generate').click(function() {
               $.ajax({
                   method: 'POST',
                   url: '{{ url('retailer/key-generate')}}',
                   data: 'retailer_id={{ $retailer->id }}&_token='+csrf_token,
               }).done(function() {
                   location.reload();
               });
           });
           $('.remove_key').click(function () {
                var id = $(this).closest('tr').attr('data-id');
                if(confirm('Are you sure want to delete ?')) {
                    $.ajax({
                        method: 'POST',
                        url: '{{ url('retailer/key-delete')}}',
                        data: 'key_id='+id+'&_token='+csrf_token,
                    }).done(function() {
                        $('#key-'+id).remove();
                    });
                }
           });
        });
    </script>
@endsection