@extends('layouts.master')
@section('head')
    <link href="{{ URL::asset('css/datatable.css') }}" rel="stylesheet" type="text/css">

    <style>
        /* ============================================================
           Registered Webhooks — v2 aesthetic
           ============================================================ */

        .dashboard-v2 {
            --dv-bg: #f6f7f9;
            --dv-surface: #ffffff;
            --dv-ink: inherit;
            --dv-ink-soft: inherit;
            --dv-muted: #6b7280;
            --dv-border: #e5e7eb;
            --dv-border-soft: #eef0f3;
            --dv-accent: #66bf97;
            --dv-accent-strong: #2f7a55;
            --dv-accent-soft: rgba(102, 191, 151, .12);
            --dv-warn: #d97706;
            --dv-danger: #dc2626;
            --dv-danger-soft: rgba(220, 38, 38, .10);
            --dv-success: #16a34a;
            --dv-success-soft: rgba(22, 163, 74, .12);
            --dv-radius: 14px;
            --dv-radius-sm: 10px;
            --dv-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
            --dv-shadow-lift: 0 8px 24px rgba(15, 23, 42, .08);
            background-color: var(--dv-bg);
        }
        .dashboard-v2 a { color: var(--dv-accent-strong); }
        .dashboard-v2 a:hover { color: var(--dv-accent); }

        /* Welcome strip */
        .dv-welcome {
            padding: 28px 0 22px;
            background:
                radial-gradient(900px 280px at 0% 0%, var(--dv-accent-soft), transparent 60%),
                linear-gradient(180deg, #ffffff 0%, var(--dv-bg) 100%);
            border-bottom: 1px solid var(--dv-border-soft);
        }
        .dv-welcome__head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 24px; flex-wrap: wrap;
        }
        .dv-tagline {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11px; font-weight: 600;
            letter-spacing: .12em; text-transform: uppercase;
            color: var(--dv-accent-strong); margin-bottom: 10px;
        }
        .dv-tagline__dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--dv-accent);
            box-shadow: 0 0 0 4px var(--dv-accent-soft);
            animation: dv-pulse 2.4s ease-in-out infinite;
        }
        @keyframes dv-pulse {
            0%, 100% { box-shadow: 0 0 0 4px var(--dv-accent-soft); }
            50%      { box-shadow: 0 0 0 8px rgba(102, 191, 151, .04); }
        }
        .dv-title {
            font-size: 30px; font-weight: 700;
            letter-spacing: -0.02em; line-height: 1.15;
            margin: 0 0 8px;
        }
        .dv-sub {
            color: var(--dv-muted); font-size: 14px;
            line-height: 1.55; max-width: 580px; margin: 0;
        }

        /* Buttons */
        .dashboard-v2 .dv-btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px; padding: 10px 18px;
            border-radius: 10px;
            font-size: 13px; font-weight: 600; line-height: 1;
            border: 1px solid transparent; cursor: pointer;
            text-decoration: none; white-space: nowrap;
            transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        .dashboard-v2 .dv-btn i { font-size: 12px; transition: transform .18s ease; }
        .dashboard-v2 .dv-btn:hover i { transform: translateX(2px); }
        .dashboard-v2 .dv-btn--primary,
        .dashboard-v2 a.dv-btn--primary {
            background: var(--dv-accent); color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(102, 191, 151, .25);
        }
        .dashboard-v2 .dv-btn--primary:hover,
        .dashboard-v2 a.dv-btn--primary:hover {
            background: var(--dv-accent-strong);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 191, 151, .35);
        }

        /* Main + cards */
        .dv-main { padding: 24px 0 48px; }
        .dv-card {
            background: var(--dv-surface);
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius);
            box-shadow: var(--dv-shadow);
            overflow: hidden;
            transition: box-shadow .2s ease;
        }
        .dv-card:hover { box-shadow: var(--dv-shadow-lift); }
        .dv-card__head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 16px; padding: 16px 22px 12px;
            border-bottom: 1px solid var(--dv-border-soft);
        }
        .dv-card__title {
            font-size: 16px; font-weight: 700;
            letter-spacing: -0.01em; margin: 0;
        }
        .dv-card__sub {
            font-size: 13px; color: var(--dv-muted); margin: 4px 0 0;
        }
        .dv-card__body--flush { padding: 0; }

        /* DataTable */
        .dashboard-v2 #sample_1 {
            width: 100% !important;
            border-collapse: collapse;
            margin: 0 !important;
        }
        .dashboard-v2 #sample_1 thead th {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--dv-muted);
            background: #fafbfc;
            padding: 12px 16px;
            border-bottom: 1px solid var(--dv-border-soft);
            border-top: 0;
            text-align: left;
        }
        .dashboard-v2 #sample_1 tbody td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--dv-border-soft);
            font-size: 13px;
            vertical-align: middle;
            text-align: left;
        }
        .dashboard-v2 #sample_1 tbody tr:last-child td { border-bottom: 0; }
        .dashboard-v2 #sample_1 tbody tr { transition: background-color .15s ease; }
        .dashboard-v2 #sample_1 tbody tr:hover { background: #fafbfc; }

        /* Channel-account cell: icon + name on top, action chips below */
        .dashboard-v2 #sample_1 .channel_icon {
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.3;
            margin-bottom: 6px;
        }
        .dashboard-v2 #sample_1 .channel_icon img {
            width: 22px; height: 22px;
            border-radius: 6px;
            background: var(--dv-bg);
            padding: 2px;
            border: 1px solid var(--dv-border-soft);
            object-fit: contain;
        }
        .dashboard-v2 #sample_1 .channel_icon a {
            font-weight: 600;
            color: #1a1a1a !important;
        }
        .dashboard-v2 #sample_1 .channel_icon a:hover {
            color: var(--dv-accent-strong) !important;
        }
        .dashboard-v2 #sample_1 .editDell_btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }
        .dashboard-v2 #sample_1 .editDell_btn .vl {
            width: 1px;
            height: 12px;
            background: var(--dv-border);
        }
        .dashboard-v2 #sample_1 .editDell_btn .snippet-action-btns {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--dv-muted) !important;
            text-decoration: none;
            transition: color .15s ease;
        }
        .dashboard-v2 #sample_1 .editDell_btn .snippet-action-btns:hover {
            color: var(--dv-accent-strong) !important;
        }
        .dashboard-v2 #sample_1 .editDell_btn .delete-webhook:hover {
            color: var(--dv-danger) !important;
        }

        /* Toggle switch — refined */
        .dashboard-v2 #sample_1 .switch {
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }
        .dashboard-v2 #sample_1 .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
        .dashboard-v2 #sample_1 .switch .slider {
            position: relative;
            display: inline-block;
            width: 56px;
            height: 26px;
            background-color: #d1d5db;
            border-radius: 999px;
            cursor: pointer;
            transition: background-color .2s ease;
            overflow: hidden;
        }
        .dashboard-v2 #sample_1 .switch .slider::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,.15);
            transition: transform .2s ease;
        }
        .dashboard-v2 #sample_1 .switch input:checked + .slider {
            background-color: var(--dv-accent);
        }
        .dashboard-v2 #sample_1 .switch input:checked + .slider::after {
            transform: translateX(30px);
        }
        .dashboard-v2 #sample_1 .switch .on,
        .dashboard-v2 #sample_1 .switch .off {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            letter-spacing: .04em;
        }
        .dashboard-v2 #sample_1 .switch .on { left: 8px; opacity: 0; transition: opacity .2s ease; }
        .dashboard-v2 #sample_1 .switch .off { right: 8px; color: #6b7280; opacity: 1; transition: opacity .2s ease; }
        .dashboard-v2 #sample_1 .switch input:checked + .slider .on { opacity: 1; }
        .dashboard-v2 #sample_1 .switch input:checked + .slider .off { opacity: 0; }

        /* DataTable controls — unified across all v2 pages */
        .dashboard-v2 .dataTables_paginate {
            padding: 14px 22px !important;
            border-top: 1px solid var(--dv-border-soft);
        }
        .dashboard-v2 .dataTables_info {
            padding: 14px 22px !important;
            font-size: 12px; color: var(--dv-muted);
        }
        .dashboard-v2 .dataTables_filter,
        .dashboard-v2 .dataTables_length {
            padding: 14px 22px !important;
            font-size: 13px;
            color: var(--dv-muted);
        }
        .dashboard-v2 .dataTables_filter label {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            color: var(--dv-muted);
            font-weight: 500;
        }
        .dashboard-v2 .dataTables_length label {
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--dv-muted);
            font-weight: 500;
        }
        .dashboard-v2 .dataTables_filter {
            display: block;
        }
        .dashboard-v2 .dataTables_filter input,
        .dashboard-v2 .dataTables_filter input[type="search"] {
            flex: 1 1 auto;
            width: 100% !important;
            min-width: 0 !important;
            border-radius: 10px;
            border: 1px solid var(--dv-border);
            padding: 8px 12px;
            font-size: 13px;
            background-color: var(--dv-surface);
            color: #1a1a1a;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .dashboard-v2 .dataTables_filter input:focus {
            outline: none;
            border-color: var(--dv-accent);
            box-shadow: 0 0 0 3px var(--dv-accent-soft);
        }
        .dashboard-v2 .dataTables_length {
            padding-top: 18px !important;
        }
        .dashboard-v2 .per-page-label {
            font-size: 13px;
            color: var(--dv-muted);
            font-weight: 600;
            margin-right: 6px;
        }
        .dashboard-v2 .per_page_length {
            display: inline-block !important;
            width: auto !important;
            min-width: 78px;
            height: auto !important;
            padding: 9px 30px 9px 14px !important;
            font-size: 14px !important;
            line-height: 1.2 !important;
            color: #1a1a1a !important;
            background-color: var(--dv-surface) !important;
            border: 1px solid var(--dv-border) !important;
            border-radius: 10px !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 12px;
            transition: border-color .15s ease, box-shadow .15s ease;
            cursor: pointer;
            margin: 0 6px !important;
        }
        .dashboard-v2 .per_page_length:focus {
            outline: none;
            border-color: var(--dv-accent);
            box-shadow: 0 0 0 3px var(--dv-accent-soft);
        }
        .dashboard-v2 .search-filter,
        .dashboard-v2 .length-dropdown {
            display: inline-block;
            vertical-align: middle;
        }

        /* Empty-state link inside emptyTable copy */
        .dashboard-v2 .dataTables_empty {
            padding: 32px 22px !important;
            text-align: center;
            color: var(--dv-muted);
            font-size: 13px;
        }

        /* Responsive collapse "+" button — small green pill, vertically aligned */
        .dashboard-v2 #sample_1.dtr-inline.collapsed > tbody > tr > td:first-child {
            padding-left: 36px !important;
            position: relative;
        }
        .dashboard-v2 #sample_1.dtr-inline.collapsed > tbody > tr > td:first-child:before {
            position: absolute !important;
            top: 18px !important;
            left: 12px !important;
            margin: 0 !important;
            width: 18px !important;
            height: 18px !important;
            line-height: 16px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            background-color: var(--dv-accent) !important;
            border: 0 !important;
            color: #fff !important;
            border-radius: 50% !important;
            text-align: center;
            box-shadow: 0 2px 4px rgba(102, 191, 151, .25) !important;
            box-sizing: border-box !important;
        }
        .dashboard-v2 #sample_1.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {
            background-color: var(--dv-danger) !important;
            box-shadow: 0 2px 4px rgba(220, 38, 38, .25) !important;
        }

        @media (max-width: 768px) {
            .table-scroll {
                width: 100%;
                overflow-x: auto;
            }
        }
        @media (max-width: 680px) {
            .dashboard-v2 #sample_1 tr.child td ul li { display: block !important; }
            .dashboard-v2 .dataTables_paginate {
                display: flex;
                justify-content: center;
            }
        }
        @media (max-width: 540px) {
            .dv-title { font-size: 24px; }
            .dv-card__head { padding: 14px 16px 10px; }
            .dashboard-v2 #sample_1 thead th,
            .dashboard-v2 #sample_1 tbody td { padding: 10px 12px; }
        }
    </style>
@endsection

@section('content')

    <main class="dashboard-v2">

        {{-- Welcome strip --}}
        <section class="dv-welcome">
            <div class="container">
                <div class="dv-welcome__head">
                    <div>
                        <span class="dv-tagline"><span class="dv-tagline__dot"></span> Data Events</span>
                        <h1 class="dv-title">Configured Data Events</h1>
                        <p class="dv-sub">All Shopify events you've connected to {{ ucwords(config('channel.name')) }}. Toggle, edit, duplicate, or remove any of them below.</p>
                    </div>
                    <div>
                        <a href="{{ route('automate') }}" class="dv-btn dv-btn--primary">
                            <i class="fas fa-plus"></i> Configure data event
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="dv-main">
            <div class="container">

                <article class="dv-card">
                    <header class="dv-card__head">
                        <div>
                            <h2 class="dv-card__title">Active data events</h2>
                            <p class="dv-card__sub">Each row is one Shopify event mapped to a {{ ucwords(config('channel.name')) }} account.</p>
                        </div>
                    </header>
                    <div class="dv-card__body--flush reg-webhooks-page table-scroll" id="configured_webhooks">
                        <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 Account</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>
                </article>
            </div>
        </section>
    </main>
@endsection

@section('last_scripts')

    <script type="text/javascript">

        $(document).ready(function () {
            checkTour();
            $(document).on('change', '.update-webhook-status', function () {
                var element=$(this);
                if ($(this).prop('checked')) {
                    var status=1;
                }else{
                    var status=0;
                }

                show_loading_img();


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