@extends('admin.layouts.master')

@section('head')
    <style>
        @media screen and (max-width: 680px){
            .registered-webhook-table tbody tr td:first-child {
                padding: 6px 0 0 30px !important;
                text-align: left !important;
            }
            #sample_1 th, #sample_1 td{
                text-align: center;
            }
            .table-scroll{
                /*width: 100%;*/
                /*overflow-x: auto;*/
            }
            #sample_1 tr.child td ul li{
                display: block !important;
            }
            .table-scroll .dataTables_paginate{
                display: flex;
                justify-content: center;
            }
        }
    </style>
    <link href="{{ URL::asset('css/datatable.css') }}" rel="stylesheet" type="text/css">
@endsection


@section('breadcrumb')
    <section class="content-header">
        <h1>Configure Data Events</h1>
    </section>
@stop
@section('content')
    <div class="container-fluid my-style">
        <div class="wraper">
            <div class="content-div">
                <div class="form-group row">
                    <label for="status_id"
                           class="col-sm-2 col-form-label col-form-label-sm lable-style">Select Store</label>
                    <div class="col-sm-10">
                        <select id="stores" name="stores[]" data-rule-required="true"
                                class="form-control form-control-sm">
                        </select>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light bordered">
                            <div class="portlet-body">
                                <div class="reg-webhooks-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> Channel</th>
                                            <th> Topic Name</th>
                                            <th> Event Name</th>
                                            <th> Status</th>
                                            <th> Last modified</th>
                                            <th> Created At</th>
                                            <th> Description</th>

                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>
@stop
@section('last_scripts')
    <script>
        $(document).ready(function () {
            @if(isset($selected_shop))
            const shopId = "{{ $selected_shop->shop_id }}";
            let text = "{{ $selected_shop->name }} ({{ $selected_shop->myshopify_domain }})";
            var $option = $("<option selected></option>").val(shopId).text(text);
            let shopSelect = $('#stores');
            shopSelect.append($option).trigger('change');
            @endif
        });
        oric_Validation_application("form-settings");
        $('#stores').select2({
            placeholder: "Select Stores",
            ajax: {
                url: "{{ route('stores_select2_format') }}",
                minimumInputLength: 1,
                cache: true,
                data: function (params) {
                    var query = {
                        search: params.term || '',
                        page: params.page || 1
                    }
                    return query;
                }
            }
        });


        $('#stores').on('change' , function(e){

            //load data Tables
            loadDataTable($(this).val());

        });

        function loadDataTable(shop_id){

            if ($.fn.DataTable.isDataTable('#sample_1')) {
                // Destroy the existing DataTable instance
                $('#sample_1').DataTable().destroy();
            }

            var url = '{{ route('admin.store.configured_webhooks_ajax', ':shop_id') }}';
            url = url.replace(':shop_id', shop_id);

            var table = $('#sample_1').DataTable(
                {
                    processing: true,
                    serverSide: true,
                    "searching": true,
                    "paging": true,
                    'bSortable': true,
                    "bInfo": true,
                    iDisplayLength: 10,
                    "lengthChange": true,
                    "autoWidth": false,
                    responsive: true,
                    data:{
                        shop_id : shop_id
                    },
                    {{--sAjaxSource: '{{ route('admin.store.configured_webhooks_ajax') }}',--}}
                    sAjaxSource: url,
                    {{--ajax: {--}}
                    {{--    url: '{{ route('admin.store.configured_webhooks_ajax') }}',--}}
                    {{--    data: {--}}
                    {{--        shop_id: shop_id--}}
                    {{--    }--}}
                    {{--},--}}
                    "columnDefs": [
                        { "width": "120px", "targets": 0 },
                        { "width": "120px", "targets": 1 },
                        { "width": "120px", "targets": 2 },
                        { "width": "60px", "targets": 3 },
                        { "width": "60px", "targets": 4 },
                        { "width": "60px", "targets": 5 },
                        { "width": "60px", "targets": 6 }


                    ],
                    "columns": [
                        {
                            "data": "channel_name",
                            "orderable": true,
                            'render': function (data, type, row) {
                                return '<div class="channel_icon"><img alt="' + row.channel_name + '"  src="' + row.icon_path + '"  class=""/></div>'
                            }
                        },
                        {
                            "data": "topic_name"
                            , "orderable": true
                        },
                        {
                            "data": "channel_event_name"
                            , "orderable": true
                        },
                        {
                            "data": "status"
                            , "orderable": true,
                            'render': function (data, type, row) {
                                return '<label class="switch"><input data-action-target="' + row.update_status_route + '" type="checkbox" data-id="' + row.id + '" class="update-webhook-status" ' + ( row.status === true ? 'checked' : '') + '><div class="slider round" id="' + row.id + '"><span class="on">ON</span><span class="off">OFF</span></div> </label>'
                            }
                        },
                        {
                            "data": "updated_at"
                            , "orderable": true
                        },

                        {
                            "data": "created_at"
                            , "orderable": true
                        },

                        {
                            "data": "description",
                            "orderable": false,
                            render: function(data, type, row){
                                let description=  row.description;
                                return (description && description.length > 70)?description.substring(0, 70)+'...':description;
                            }
                        }

                    ],

                    order: [[3, "desc"]],
                    language: {
                        paginate: {
                            next: '&#85943;', // or '→'
                            previous: '&#8592;' // or '←'
                        },
                        "emptyTable": "No webhooks have been registered yet. Click <a href='{{ route('automate') }}' >Register webhooks</a> to get started.",
                        "sSearch": '',
                        searchPlaceholder: 'Search',
                        processing: "<small>Loading webhooks...</small>",
                        "sLengthMenu": '<span class="per-page-label cc">per page</span><select class="per_page_length form-control input-sm input-xsmall input-inline">' +
                            '<option value="10">10</option>' +
                            '<option value="30">30</option>' +
                            '<option value="50">50</option>' +
                            '<option value="100">100</option>' +
                            '<option value="-1">All</option>' +
                            '</select>'
                    },
                    drawCallback: function () {
                        var pageInfo = this.api().page.info();
                        var multiPage = pageInfo.pages > 1;
                        $('#sample_1_paginate').toggle(multiPage);
                        if (!multiPage && pageInfo.recordsTotal == pageInfo.recordsDisplay) {
                            $('#sample_1_info').text('Showing all ' + pageInfo.recordsTotal + ' entries');
                        }
                        if (pageInfo.recordsTotal == 0) {
                            $('#sample_1_info').text('');
                        }
                    },
                    // highlight ordered column

                    "oSearch": {"sSearch": "{{session('sSearch_hooks')}}"},
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.getJSON(sSource, aoData, function (json) {
                            $('#sample_1').show();
                            fnCallback(json)
                        });
                    },
                    "dom": ' <"search-filter"f><"length-dropdown"l>rt<"bottom"ip><"clear">'

                });


            $(document).on('change', '.update-webhook-status', function () {

                var element=$(this);
                if ($(this).prop('checked')) {
                    var status=1;
                }else{
                    var status=0;
                }


                $.ajax({
                    url: element.attr('data-action-target'),
                    type: 'POST',
                    data: {
                        _method: 'POST',
                        _token: "