@extends('layouts.master')

@section('head')
    <style>
        #sample_1 tr td:first-child {
            padding-right: 0;
        }

        #sample_1 .Polaris-Choice__Control {
            margin: 0 !important;
        }

        @media only screen and (max-width: 768px) {

            .table-scroll {
                width: 100%;
                overflow-x: auto;
            }

            table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
                top: 28px;
                left: -1px;
            }
        }

        @media only screen and (max-width: 680px) {

            #sample_1 th:first-child, #sample_1 td:first-child {
                padding-left: 4px;
            }
        }

        @media only screen and (max-width: 580px) {
            /*.channel_icon{margin-left: 15px;}*/
        }

        @media only screen and (max-width: 380px) {
            #sample_1 th, #sample_1 td {
                /*padding-left: 0px !important;*/
            }
        }


    </style>
    <link href="{{ URL::asset('css/datatable.css?v=1') }}" rel="stylesheet" type="text/css">

@endsection

@section('content')
    <section class="section">
        <div class="container">
            <div class="section-main-heading"
                 style="--top-bar-background:#00848e; --top-bar-color:#f9fafb; --top-bar-background-lighter:#1d9ba4;">
                <h4>Webhook Logs</h4>
            </div>

            <form>
                <div class="row flex-wrap">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label> Status </label>
                            <select class="form-control select2 webhook_status" id="webhook_status"
                                    name="webhook_status">
                                <option value="">Select status</option>
                                <option value="success">Success</option>
                                <option value="failure">Failed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label> Triggered At </label>
                            <input type="date" dateformat="yyyy-mm-dd" name="trigger_at" class="form-control"
                                   id="trigger_at" placeholder="Trigger At">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group" style="padding-top: 24px">
                            <button type="button" style="background: #66bf97 !important;" class="btn btn-success"
                                    onclick="clearLogFilters();">Clear Filters
                            </button>
                        </div>
                    </div>
                </div>

            </form>

            <div>

                @include('partials.top_bar_action_list')
            </div>
            <div class="">
                <div class="">
                    <div class="logs-page table-scroll">
                        <table class="registered-webhook-table responsive table table-hover table-checkable order-column dataTable no-footer dtr-inline"
                               id="sample_1">
                            <thead>
                            <tr class="">
                                <th class="selectAll"></th>
                                <th> Channel</th>
                                <th> Topic Name</th>
                                <th> Notification Type </th>
                                <th> Status</th>
                                <th> Message</th>
                                <th> Triggered At</th>
                                <th> Action</th>
                                <th> Webhook Data</th>

                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="justify-content:flex-start;">
                    <h4 class="modal-title">Request Body</h4>
                    <div style="position: absolute; top: 10px; right: 5px;">
                        <button type="button" class="close custom-close" data-dismiss="modal">&times;</button>
                    </div>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('last_scripts')
    <script type="text/template" id="checkbox-template">
        <label class="Polaris-Choice" for="PolarisCheckbox_@id" style="display:inline-block">
            <span class="Polaris-Choice__Control">
                <span class="Polaris-Checkbox">
                    <input id="PolarisCheckbox_@id" value="@id" type="checkbox" class="Polaris-Checkbox__Input"
                           aria-invalid="false" role="checkbox" aria-checked="false"><span
                            class="Polaris-Checkbox__Backdrop"></span>
                    <span class="Polaris-Checkbox__Icon">
                        <span class="Polaris-Icon">
                            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                            </svg>
                        </span></span></span></span>
        </label></script>
    <script type="text/javascript">
        function clearLogFilters() {
            $('#webhook_status').val('');
            $('#trigger_at').val('');
            table.search("").draw();
        }

        $(document).on('click', '.retry-failed-job-button', function () {
            let action_obj = $(this);
            action_obj.attr('disabled', true);
            var url = action_obj.data('retry-action');
            show_loading_img();
            $("#test-action-response").html('');
            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': "