@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    .popover-body > ul {
        padding: 0;
    }
    .popover{
        z-index: 2061;
    }
    .popover-body > ul > li {
        list-style: none;
        cursor: pointer;
        border-bottom-style: solid;
        border-bottom-color: #c5bbbb;
        border-bottom-width: 1px;
        padding: 6px;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    vAPI
                </h3>
                <?php echo isset($vendor->name) ? ucwords($vendor->name) : ''; ?>
            </div>

        </div>
    </div>
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-vcard"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            API Credentials
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <div class="m-section">
                    @if(count($init['keys']) == 0 || !$init['key'])
                        <div style="margin-bottom: 12px;" class="btn btn-primary"><a style="color: white;text-decoration: none;" href="/admin/vendor/api-en/{!! $vendor_id !!}">Enable Integration</a></div>
                    @endif
                    <div class="m-section__content">
                        @if(isset($init['keys']) && count($init['keys']) > 0)
                        @if($init['key'])
                        <table class="table m-table merchant-form">
                            <tbody>
                                <tr>
                                    <td style="width: 0;"><div class="btn bnt-primary">Active Key</div></td>
                                    <td style="position: relative;"><i style="color: #1f803a; position: absolute; top: 20px; left: -11px; font-size: 20px;" class="fa fa-check-circle-o" aria-hidden="true"></i> <input style="width: 60%;" class="form-control" id="ackMc" type="text" disabled="" value="{!! $init['key'] !!}"/><span style="position: absolute; top: 18px; right: 33%; background-color: whitesmoke; border-color: #d8d6d6; border-style: solid; border-width: 1px; padding-left: 7px; padding-right: 7px; cursor: pointer;" onclick="copyText()">Copy</span></td>
                                </tr>
                                <tr>
                                    <td style="width: 0;"><div class="btn bnt-primary">Active Secret</div></td>
                                    <td style="position: relative;"><i style="color: #1f803a; position: absolute; top: 20px; left: -11px; font-size: 20px;" class="fa fa-check-circle-o" aria-hidden="true"></i> <input style="width: 60%;" class="form-control" id="ackMc" type="text" disabled="" value="{!! $init['secret'] !!}"/><span style="position: absolute; top: 18px; right: 33%; background-color: whitesmoke; border-color: #d8d6d6; border-style: solid; border-width: 1px; padding-left: 7px; padding-right: 7px; cursor: pointer;" onclick="copyText()">Copy</span></td>
                                </tr>
                            </tbody>
                        </table>
                        @endif

                        <table class="table m-table merchant-form">
                            <thead>
                            <tr>
                                <td>Key</td>
                                <td>Secret</td>
                                <td>Status</td>
                                <td>Last Used</td>
                                <td>Created At</td>
                                <td>Created By</td>
                                <td>Action</td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($init['keys'] as $key)
                            <tr>
                                <td><input type="text" disabled="" class="form-control" value="{!! $key->key !!}" style="width: 60%;"/></td>
                                <td><input type="text" disabled="" class="form-control" value="{!! $key->secret !!}" style="width: 60%;"/></td>
                                <td class="td-cls-status"><?php echo $key->status ? 'Active' : 'Inactive'; ?></td>
                                <td>{!! $key->last_used or '-' !!}</td>
                                <td>{!! $key->created_at !!}</td>
                                <td><?php echo $key->user ? ucwords($key->user->name) : ''; ?></td>
                                <td>@if($key->status)<span data-id="{!! $key->id !!}" class="btn status-mapi @if($key->status == 1) disable-mapi btn-danger @else enable-mapi btn-primary @endif"><?php echo $key->status == 1 ? 'Disable'  : 'Enable'; ?></span>@else Disable @endif</td>
                            </tr>
                            @endforeach
                            <tr>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                        @else
                            <center>No Integration</center>
                        @endif

                        <table class="table">
                            <tr>
                                <td>IP Whitelist</td>
                            </tr>
                            <tr>
                                <td><input type="text" class="form-control" placeholder="Ips 172.121.123.12,122.22.125.21" value="{!! $vendor->ips or '' !!}" name="ips"></td>
                            </tr>
                            <tr>
                                <td><div class="btn btn-primary update-ips">Update</div></td>
                            </tr>
                        </table>
                        <table class="table">
                            <tr>
                                <td colspan="4">Webhooks
                                    <p><code>Listen for events on your account so integrations can automatically trigger reactions</code></p>
                                </td>
                            </tr>
                            @if(isset($vendor->webhook) && count($vendor->webhook))
                            <tr><td>Name</td><td>URL</td><td>Status</td><td>Created</td><td>Events</td><td>Action</td></tr>
                            @foreach($vendor->webhook as $webhook)
                            <tr id="web{!! $webhook->id !!}">
                                <td class="webName">{!! $webhook->name !!}</td><td class="webURL">{!! $webhook->endpoint !!}</td><td class="webStatus" @if($webhook->status == 1) style="color: forestgreen;" @endif>{{ ($webhook->status) ? 'Active' : 'Inactive' }}</td><td>{!! $webhook->created_at !!}</td><td class="webEvents" data-events="{!! $webhook->events !!}">@foreach(explode(',', $webhook->events) as $event) <div>{!! $event !!}</div> @endforeach</td><td><i data-id="{!! $webhook->id !!}" style="cursor: pointer;" class="delete-webhook fa fa-trash"></i> | <i data-id="{!! $webhook->id !!}" style="cursor: pointer;" class="edit-webhook fa fa-edit"></i></td>
                            </tr>
                            @endforeach
                            @endif
                            @if(!isset($vendor->webhook) || count($vendor->webhook) < 2)
                                <tr>
                                    <td><div class="btn btn-primary" type="button" data-toggle="modal" data-target=".webhook-md">Add Webhook</div></td>
                                </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade webhook-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="padding: 20px;">
            <table class="table">
                <tr>
                    <td>
                        <b>Details</b>
                    </td>
                    <td>
                        <div>Webhook name<input type="text" placeholder="Enter Webhook Name" name="webhook_name" class="form-control"/></div>
                        <div>Webhook URL<input type="text" placeholder="https://Enter Webhook URL" name="webhook_url" class="form-control"/></div>
                    </td>
                </tr>
            </table>
            <table class="table">
                <tr>
                    <td>
                        <b>Events</b>
                        <p>Select the events.</p>
                    </td>
                    <td>
                        <div><select type="text" name="events[]" id="events" class="form-control" multiple>
                                <option value="">Select Events</option>
                                @foreach($status as $item)
                                    <option value="{!! $item !!}">{!! $item !!}</option>
                                @endforeach
                            </select></div>
                    </td>
                </tr>
                <tr>
                    <td><div class="btn btn-primary create-webhook" data-id="0">Create</div></td>
                </tr>
            </table>
        </div>
    </div>
</div>
@include("admin.layouts.footer")

<script>

    $(".edit-webhook").click(function(){
        let id = $(this).data('id');

        $(".create-webhook").html('Create');
        $(".create-webhook").attr('data-id', 0);

        if(id) {
            $(".webhook-md").modal('show');
            $("input[name='webhook_name']").val($("#web"+id).find('.webName').html());
            $("input[name='webhook_url']").val($("#web"+id).find('.webURL').html());

            let events = $("#web"+id).find('.webEvents').attr('data-events');
            events = events.split(',');

            $.each(events, function(index, item){
                $("#events option[value='" + item + "']")
                    .attr("selected", 1);
            });

            $(".create-webhook").html('Update');
            $(".create-webhook").attr('data-id', id);
        }
    });

    $(".delete-webhook").click(function(){
        let id = $(this).data('id');

        if(id) {
            if(window.confirm('Are you sure?')) {
                $(".init-loader").css({display: 'block'});
                var _token = '<?php echo csrf_token(); ?>';
                var user_id = '<?php echo Auth::user() ? Auth::user()->id : ''; ?>';
                var vendor_id = '<?php echo $vendor_id; ?>';
                $.ajax({
                    type: 'POST',
                    url: "/admin/vendor/api/delete-webhook",
                    data: {'_token': _token, id: id, user_id: user_id, vendor_id: vendor_id},
                    dataType: "JSON",
                    success: function (response) {
                        $(".init-loader").css({display: 'none'});
                        alert(response.message);
                        window.location.reload();
                    }
                });
            }
        }
    });

    $(".create-webhook").click(function(){
        let webhook_name = $("input[name='webhook_name']").val();
        let webhook_url = $("input[name='webhook_url']").val();
        let exists = $(this).attr('data-id');
        let eventsS = [];
        $('#events :selected').each(function(){
            eventsS.push($(this).val())
        });

        if(webhook_name.length > 0 && webhook_url.length > 0 && eventsS.length > 0) {

            $(".init-loader").css({display: 'block'});
            var _token = '<?php echo csrf_token(); ?>';
            var user_id = '<?php echo Auth::user() ? Auth::user()->id : ''; ?>';
            var id = '<?php echo $vendor_id; ?>';
            $.ajax({
                type: 'POST',
                url: "/admin/vendor/api/whitelist-webhook",
                data: {'_token': _token, id: id, user_id: user_id, webhook_name: webhook_name, webhook_url : webhook_url, events : eventsS, exists: exists},
                dataType: "JSON",
                success: function (response) {
                    $(".init-loader").css({display: 'none'});
                    alert(response.message);
                    window.location.reload();
                }
            });
        }
    });

    function copyText() {

        let copyText = document.getElementById("ackMc");

        copyText.select();
        copyText.setSelectionRange(0, 99999);

        navigator.clipboard.writeText(copyText.value);
    }

    $(".status-mapi").click(function(){
        $(".init-loader").css({display:'block'});
        let event = $(this);
        event.attr('data-is-live',1);
        var id = $(this).attr('data-id');
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user() ? Auth::user()->id : ''; ?>';
        $.ajax({
            type: 'POST',
            url: "/admin/vendor/api/status",
            data: {'_token': _token, 'id' : id, 'user_id': user_id},
            dataType: "JSON",
            success: function (response) {
                $(".init-loader").css({display:'none'});
                if(response.status == 'FAIL'){
                    alert(response.message);
                }
                window.location.reload();
            }
        });
    });

    $(".update-ips").click(function(){
        $(".init-loader").css({display:'block'});
        var _token = '<?php echo csrf_token(); ?>';
        var user_id = '<?php echo Auth::user() ? Auth::user()->id : ''; ?>';
        var id = '<?php echo $vendor_id; ?>';
        let ips = $("input[name='ips']").val();
        $.ajax({
            type: 'POST',
            url: "/admin/vendor/api/whitelist-ip",
            data: {'_token': _token, 'ips': ips, id: id, user_id: user_id},
            dataType: "JSON",
            success: function (response) {
                $(".init-loader").css({display:'none'});
                alert(response.message);
                window.location.reload();
            }
        });
    });

</script>