@extends('layouts.master')

@section('head')
    <style>
        .notification {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #333;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            opacity: 0.9;
            z-index: 1;
        }

        .select2-dropdown{
            z-index: 99999;
        }

        #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;*/
            }
        }

        .custom-card {
            box-shadow: 0px 0px 8px 1px #cacaca;
            padding: 20px;
            border-radius: 8px;
        }

        .card .icon-list li:after {
            content: "→" !important;
        }

        .custom-icon {
            left: 50% !important;
            transform: translateX(-50%) !important;
            top: 0 !important;
        }

        .custom-label {
            width: 100%;
        }

        .card-input-element {
            display: none;
        }

        .card-input {
            margin: 10px;
            padding: 10px;
            border-radius: 8px;
        }

        .card-input:hover {
            cursor: pointer;
            box-shadow: 0 0 1px 1px #ccc;
        }

        .card-input-element:checked + .card-input {
            box-shadow: 0 0 1px 1px #070707;
        }

        .custom-close {
            width: 30px; /* Adjust the width as needed for a square button */
            height: 30px; /* Adjust the height to match the width */
            background-color: transparent; /* Initial background color */
            border: none; /* Remove the default border */
            font-size: 30px; /* Adjust the font size for the 'X' */
            line-height: 1; /* Center the 'X' vertically */
            color: red; /* Color of the 'X' */
            transition: background-color 0.3s; /* Smooth transition on hover */
        }

        .custom-close:hover {
            background-color: #e70a0a; /* Red background on hover */
            color: white; /* White 'X' color on hover */
        }

        .custom-close-div {
            width: 9px; /* Adjust the width as needed for a square button */
            height: 20px; /* Adjust the height to match the width */
            background-color: transparent; /* Initial background color */
            border: none; /* Remove the default border */
            font-size: 20px; /* Adjust the font size for the 'X' */
            line-height: 1; /* Center the 'X' vertically */
            color: red; /* Color of the 'X' */
            transition: background-color 0.3s; /* Smooth transition on hover */
        }

        .custom-close-div:hover {
            background-color: transparent; /* Red background on hover */
            color: #a90e0e; /* White 'X' color on hover */
        }

        .test-action-response-container {
            display: flex;
            justify-content: space-between;
        }

        .test-action-response {
            flex: 1;
            margin-right: 10px;
        }

    </style>
    <style>
        /* ============================================================
           Sync (bulk transfer) — 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-warn-soft: rgba(217, 119, 6, .10);
            --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-welcome__head > div:last-child { margin-top: -22px; }
        @media (max-width: 540px) {
            .dv-welcome__head > div:last-child { margin-top: 0; }
        }
        .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: 14px; 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,
        .dashboard-v2 button.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 button.dv-btn--primary:hover {
            background: var(--dv-accent-strong);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(102, 191, 151, .35);
        }
        .dashboard-v2 .dv-btn--ghost,
        .dashboard-v2 button.dv-btn--ghost {
            background: var(--dv-surface); color: #1a1a1a;
            border-color: var(--dv-border);
        }
        .dashboard-v2 .dv-btn--ghost:hover,
        .dashboard-v2 button.dv-btn--ghost:hover {
            border-color: var(--dv-accent);
            color: var(--dv-accent-strong);
            background: var(--dv-accent-soft);
        }
        .dashboard-v2 .dv-btn--warn,
        .dashboard-v2 button.dv-btn--warn {
            background: var(--dv-warn-soft); color: var(--dv-warn) !important;
            border-color: rgba(217, 119, 6, .25);
        }
        .dashboard-v2 .dv-btn--warn:hover,
        .dashboard-v2 button.dv-btn--warn:hover {
            background: var(--dv-warn); color: #fff !important;
            border-color: var(--dv-warn);
        }

        /* 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 + .dv-card { margin-top: 16px; }
        .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: 18px 22px 14px;
            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 { padding: 18px 22px 22px; }
        .dv-card__body--flush { padding: 0; }

        /* Progress card */
        .dv-progress-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 14px; flex-wrap: wrap;
        }
        .dv-progress-row__label {
            font-size: 13px; font-weight: 600; color: #1a1a1a;
        }
        .dv-progress-row__status {
            font-size: 12px; color: var(--dv-accent-strong);
            margin-left: 6px;
        }
        .dv-progress-bar {
            height: 12px; border-radius: 999px;
            background: var(--dv-border-soft);
            overflow: hidden; margin: 12px 0 8px;
        }
        .dv-progress-bar > .progress-bar {
            height: 100% !important;
            background: linear-gradient(90deg, var(--dv-accent), var(--dv-success)) !important;
            border-radius: 999px;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 12px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: width .4s ease;
        }
        .dv-progress-help {
            font-size: 12px; color: var(--dv-muted); margin: 0;
        }

        /* DataTable inside dv-card */
        .dv-table-wrap { padding: 0; }
        .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;
        }
        .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; }
        .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);
        }

        /* Modal — refined */
        .dashboard-v2-modal .modal-dialog { max-width: 720px; }
        .dashboard-v2-modal .modal-content {
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius);
            box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .25);
            overflow: hidden;
        }
        .dashboard-v2-modal .modal-header {
            background: linear-gradient(135deg, #66bf97 0%, #3a9c70 100%);
            color: #fff;
            border: 0;
            padding: 18px 22px;
            position: relative;
        }
        .dashboard-v2-modal .modal-title {
            color: #fff !important;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.01em;
            margin: 0;
        }
        .dashboard-v2-modal .modal-header .custom-close {
            position: absolute;
            top: 12px; right: 14px;
            width: 32px; height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .15) !important;
            color: #fff !important;
            border: none !important;
            font-size: 22px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color .15s ease;
            cursor: pointer;
        }
        .dashboard-v2-modal .modal-header .custom-close:hover {
            background: rgba(255, 255, 255, .28) !important;
            color: #fff !important;
        }
        .dashboard-v2-modal .modal-body { padding: 22px; background: #fff; }
        .dashboard-v2-modal .modal-body .col-md-12 { padding-left: 0; padding-right: 0; }

        /* Direction option cards in modal */
        .dv-direction-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 14px;
        }
        @media (max-width: 540px) {
            .dv-direction-grid { grid-template-columns: 1fr; }
        }
        .dashboard-v2-modal .custom-label {
            display: block;
            margin: 0;
            cursor: pointer;
        }
        .dashboard-v2-modal .card-input-element { display: none; }
        .dashboard-v2-modal .card-input {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 18px 16px;
            background: var(--dv-surface);
            border: 1.5px solid var(--dv-border);
            border-radius: var(--dv-radius-sm);
            text-align: center;
            transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease;
            cursor: pointer;
            margin: 0;
            box-shadow: none;
        }
        .dashboard-v2-modal .card-input:hover {
            border-color: var(--dv-accent);
            background: var(--dv-accent-soft);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .12);
        }
        .dashboard-v2-modal .card-input-element:checked + .card-input {
            border-color: var(--dv-accent);
            background: var(--dv-accent-soft);
            box-shadow: 0 0 0 3px rgba(102, 191, 151, .18);
        }
        .dashboard-v2-modal .card-input h6 {
            font-size: 14px;
            font-weight: 700;
            margin: 4px 0 2px;
            color: #1a1a1a;
        }
        .dashboard-v2-modal .card-input p {
            font-size: 12px;
            color: var(--dv-muted);
            margin: 0;
            line-height: 1.4;
        }

        /* Direction icons inside option cards */
        .dv-dir-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .dv-dir-icons__node {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: #fff;
            border: 1px solid var(--dv-border-soft);
            display: flex; align-items: center; justify-content: center;
            padding: 6px;
        }
        .dv-dir-icons__node img {
            max-width: 100%; max-height: 100%; object-fit: contain;
        }
        .dv-dir-icons__arrow {
            color: var(--dv-accent);
            font-size: 12px;
        }

        /* Account / event selector in modal */
        .dv-modal-section { margin-top: 18px; }
        .dv-modal-section-head {
            text-align: center;
            margin-bottom: 12px;
        }
        .dv-modal-section-head h4 {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 4px;
            color: #1a1a1a;
        }
        .dv-modal-section-head p {
            font-size: 12px;
            color: var(--dv-muted);
            margin: 0;
        }
        .dashboard-v2-modal .custom-card {
            background: var(--dv-surface);
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius-sm);
            box-shadow: none;
            padding: 16px;
        }
        .dashboard-v2-modal .custom-card h6 {
            font-size: 14px; font-weight: 700;
            margin: 0 0 4px;
            text-align: left;
            color: #1a1a1a;
        }
        .dashboard-v2-modal .custom-card p {
            font-size: 12px; color: var(--dv-muted);
            margin: 0 0 10px; text-align: left;
        }
        .dashboard-v2-modal .custom-card label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--dv-muted);
            margin: 0 0 6px;
        }
        .dashboard-v2-modal .Polaris-Labelled__HelpText {
            font-size: 12px;
            color: var(--dv-muted);
            margin-top: 6px;
        }

        /* Response alert in modal */
        .dashboard-v2-modal #responseMessage.alert {
            border-radius: var(--dv-radius-sm);
            padding: 12px 14px 12px 38px;
            position: relative;
            font-size: 13px;
            margin-bottom: 14px;
            border: 1px solid transparent;
        }
        .dashboard-v2-modal #responseMessage.alert-success {
            background: var(--dv-success-soft);
            color: #14532d;
            border-color: rgba(22, 163, 74, .25);
        }
        .dashboard-v2-modal #responseMessage.alert-danger {
            background: var(--dv-danger-soft);
            color: #7f1d1d;
            border-color: rgba(220, 38, 38, .25);
        }
        .dashboard-v2-modal #responseMessage::before {
            content: "\f05a";
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            position: absolute;
            top: 13px; left: 14px;
            color: inherit;
            opacity: .7;
        }
        .dashboard-v2-modal .custom-close-div {
            background: transparent !important;
            border: none;
            color: inherit !important;
            opacity: .55;
            position: absolute;
            top: 8px; right: 10px;
            cursor: pointer;
        }
        .dashboard-v2-modal .custom-close-div:hover { opacity: 1; }

        /* Action buttons row at modal bottom */
        .dv-modal-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding-top: 14px;
            border-top: 1px solid var(--dv-border-soft);
            margin-top: 18px;
        }
        .dashboard-v2-modal .test-action-btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px; padding: 10px 18px;
            border-radius: 10px;
            font-size: 14px; font-weight: 600; line-height: 1;
            background: var(--dv-surface);
            color: #1a1a1a;
            border: 1px solid var(--dv-border);
            cursor: pointer;
            transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
        }
        .dashboard-v2-modal .test-action-btn:hover {
            border-color: var(--dv-accent);
            color: var(--dv-accent-strong);
            background: var(--dv-accent-soft);
        }

        /* select2 inside modal — sane sizing */
        .dashboard-v2-modal .select2-container .select2-selection--single {
            height: 40px !important;
            border-radius: 10px;
            border-color: var(--dv-border);
        }
        .dashboard-v2-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px !important;
            padding-left: 14px;
        }
        .dashboard-v2-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px !important;
        }

        /* Notification toast */
        .notification {
            display: none;
            position: fixed;
            top: 20px; right: 20px;
            background-color: #1a1a1a;
            color: #fff;
            padding: 10px 14px;
            border-radius: var(--dv-radius-sm);
            opacity: 0.95;
            z-index: 1;
        }
        .select2-dropdown { z-index: 99999; }

        /* Original utility — keep for compat with rich textarea */
        .test-action-response-container { display: flex; justify-content: space-between; }
        .test-action-response { flex: 1; margin-right: 10px; }

        /* Mobile */
        @media (max-width: 540px) {
            .dv-title { font-size: 24px; }
            .dv-card__head { padding: 16px 18px 12px; }
            .dv-card__body { padding: 16px 18px 18px; }
            .dashboard-v2 #sample_1 thead th,
            .dashboard-v2 #sample_1 tbody td { padding: 10px 12px; }
            .dv-welcome__head { gap: 14px; }
        }
    </style>
    <link href="{{ URL::asset('css/datatable.css?v=1') }}" rel="stylesheet" type="text/css">
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

@endsection

@section('content')
    <div class="dashboard-v2">
    <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;">
                <div class="row">
                    <div class="col-md-9">
                        <h4>Perform two-way bulk synchronization of existing data.</h4>
                    </div>

                    <div class="col-md-3">
                        <button id="sync" style="background: #66bf97 !important;" class="btn btn-success">Start
                            Syncing
                        </button>
                    </div>
                </div>
            </div>

            <div class="row flex-wrap">
                {{-- Progress Bar --}}
                <div id="progress-container" class="form-group" style="display: none;">
                    <div class="col-md-9">
                        <label>Data Syncing <span id="data_syncing_status"></span> </label>
                        <div class="progress" style="height: 30px">
                            <div class="progress-bar progress-bar-striped bg-success" id="progress_bar_process"
                                 role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 0%">
                                0%
                            </div>
                        </div>
                        <p>You can close the window and return to it once the synchronization is completed.</p>
                    </div>
                    <div class="col-md-3">
                        <button record-id="" type="button" id="cancel-sync" style="margin-top: 19px"
                                class="btn btn-sm btn-warning">Cancel
                        </button>
                    </div>
                </div>
            </div>
            {{--   logs table starts here  --}}
            <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>
                        <th> Account Name</th>
                        <th> Event Name</th>
                        <th> Data Direction</th>
                        <th> Total Records</th>
                        <th> Added Records</th>
                        <th> Failed Records</th>
                        <th> Status</th>
                        <th> Time</th>
                        <th> Logs</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    {{--  modal html starts here--}}
    <div id="manualMappingModal" class="modal fade" role="dialog" data-backdrop="static"
         data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="justify-content:flex-start;">
                    <h4 class="modal-title">Data Transfer</h4>
                    <div style="position: absolute; top: 10px; right: 5px; color: red">
                        <button type="button" id="close" class="close custom-close" data-dismiss="modal">
                            &times;
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{route('syncing')}}" id="sync_form">
                        @csrf
                        <div class="col-md-12">
                            <!-- Response Message -->
                            <div class="test-action-response alert alert-dismissible" role="alert"
                                 style="display: none;" id="responseMessage">
                                <button type="button" class="close custom-close-div" aria-label="Close"
                                        onclick="document.getElementById('responseMessage').style.display ='none';">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <span id="test-action-message"></span>
                            </div>
                        </div>
                        {{--data diraction start--}}
                        <div class="col-md-12">
                            <div class="text-center mb-0 py-4">
                                <h4>Choose data direction</h4>
                                <p class="mb-0">Data direction sets how information syncs.</p>
                                <p class="mb-0">Shopify to Brevo OR Brevo to Shopify.</p>
                            </div>
                            {{-- div for chose data_directions  --}}
                            <div class="row">
                                {{-- div for  data_direction_shopify_to_platform  --}}
                                <div class="col-md-6">
                                    <label class="custom-label">
                                        <input type="radio" id="data_direction_shopify_to_platform"
                                               name="data_direction" value="shopify_to_platform" required
                                               class="card-input-element"/>

                                        <div class="card-input text-center">
                                            <div class="card horizontally">
                                                <div class="card-body"
                                                     style="background: transparent; min-height: 50px">
                                                    <ul class="icon-list small custom-icon">
                                                        <li>
                                                            <div class="icon-box">
                                                                <img alt="Shopify"
                                                                     src="{{ asset('icons/shopify-img.png') }}">
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="icon-box">
                                                                <img alt="ZB" src="{{ config('channel.icon_path') }}">
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <h6>1. Shopify → Brevo</h6>
                                            <p class="mb-0">Sync bulk data from Shopify to Brevo.</p>
                                        </div>
                                    </label>
                                </div>

                                {{-- div for  data_direction_platform_to_shopify  --}}
                                <div class="col-md-6">
                                    <label class="custom-label">
                                        <input id="data_direction_platform_to_shopify" type="radio"
                                               name="data_direction"
                                               value="platform_to_shopify" required class="card-input-element"/>
                                        <div class="card-input text-center">
                                            <div class="card horizontally">
                                                <div class="card-body"
                                                     style="background: transparent; min-height: 50px">
                                                    <ul class="icon-list small custom-icon">
                                                        <li>
                                                            <div class="icon-box">
                                                                <img alt="SB" src="{{ config('channel.icon_path') }}">
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="icon-box">
                                                                <img alt="Shopify"
                                                                     src="{{ asset('icons/shopify-img.png') }}">
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <h6>2. Brevo → Shopify</h6>
                                            <p class="mb-0">Sync bulk data from Brevo to Shopify.</p>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        {{-- End data direction --}}

                        {{-- Start data mapping --}}
                        <div class="col-md-12" id="data_mapping_div" hidden>
                            <div class="text-center mb-0 py-4">
                                <h4>Choose data mapping option</h4>
                                <p class="mb-0">
                                    Select either the suggested field mapping provided in the application or generate a
                                    custom mapping for data fields..</p>
                            </div>
                            {{-- div for chose data mapping  --}}
                            <div class="row">
                                {{-- div for auto_mapping  --}}
                                <div class="col-md-6">
                                    <label class="custom-label">
                                        <input id="auto_mapping" type="radio" name="data_mapping"
                                               value="auto_mapping" required
                                               class="card-input-element"/>

                                        <div class="card-input text-center">
                                            <h6>1. Auto Mapping</h6>
                                            <p class="mb-0">The data will automatically synchronize with the required
                                                API fields, ensuring that only fundamental data is synced.</p>
                                        </div>
                                    </label>
                                </div>
                                {{-- div for manual_mapping  --}}
                                <div class="col-md-6">
                                    <label class="custom-label">
                                        <input id="manual_mapping" type="radio" name="data_mapping"
                                               value="manual_mapping" required
                                               class="card-input-element"/>
                                        <div class="card-input text-center">
                                            <h6>2. Manual Mapping</h6>
                                            <p class="mb-0">User involvement is required for mapping the fields on both
                                                platforms. Suitable to synchronize detailed data.Not available from Brevo
                                                to Shopify. </p>
                                        </div>

                                    </label>
                                </div>
                            </div>
                        </div>
                        {{-- End data mapping --}}

                        {{-- Start div for Brevo accounts and Events --}}
                        <div class="col-md-12" id="accounts_selection_div" hidden>
                            <div class="row">
                                {{-- div for chose connector accounts  --}}
                                <div class="col-md-6" id="connector_accounts">
                                    <div class="form-group">
                                        <div class="card custom-card">
                                            <h6 class="text-center">Select Brevo Account</h6>
                                            <p class="text-center">Your Brevo account.</p>
                                            <label>Choose Account</label>
                                            <select class="form-control select2 account_id mb-3" id="channel_account_id"
                                                    name="channel_account_id" required>
                                                <option value="" selected disabled>Select Account</option>
                                                @foreach($channel_accounts as $channel_account)
                                                    <option value="{{$channel_account->id}}">{{$channel_account->login_credentials['name']}}</option>
                                                @endforeach
                                            </select>
                                            <div class="Polaris-Labelled__HelpText">
                                                <span>Add more<a target="_blank" href="{{route('channel_config', ["webhook_event_id" => "sb-accounts"])}}"> accounts </a></span>
                                            </div>

                                            {{-- here code for ograniztion --}}
                                            <div id="select_list" hidden>
                                                <label>Choose List</label>
                                                <select id="listIds" data-object="Lists"
                                                        name="list_id"
                                                        class="form-control select2 account_id mb-3 channel_object_listing">
                                                    <option value="" selected disabled>Select List</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- div for chose connector events  --}}
                                <div class="col-md-6" id="events">
                                    <div class="form-group">
                                        <div class="card custom-card">
                                            <h6 class="text-center">Select Event</h6>
                                            <p class="text-center">Select which data you want to Sync.</p>
                                            <label>Choose Event</label>
                                            <select class="form-control select2 account_id mb-3" id="sync_event"
                                                    name="sync_event" required>
                                                <option value="" selected disabled>Select Sync Event</option>
                                                <!--make sure to channel event id of Customer in data-channel-event-id-->
                                                <option value="customers" data-webhook-event-slug="customer"
                                                        data-webhook-event-name="Customer" data-channel-event-id="2">
                                                    Customers
                                                </option>
                                                <option class="order_product_event" value="products" data-webhook-event-slug="product"
                                                        data-webhook-event-name="Product" data-channel-event-id="7">
                                                    Products
                                                </option>
                                                <option class="order_product_event" value="orders" data-webhook-event-slug="order"
                                                        data-webhook-event-name="Order" data-channel-event-id="6">
                                                    Orders
                                                </option>
                                            </select>
                                            <div class="Polaris-Labelled__HelpText">
                                                <button class="btn btn-primary" type="button" style="display:none" id="condition_btn">Conditions</button>

                                                {{--                                                <span>Auto mapping not available for products from shopify to QBO.</span>--}}
                                            </div>
                                            <div id="checkbox-template">
                                                <span> Sync marketting consent</span>
                                                <div class="d-flex align-items-center mt-3 gap-3">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="checkbox" id="smsCheckbox" name="notification_type[]" value="sms">
                                                        <label class="form-check-label ms-1" style="vertical-align: sub;" for="smsCheckbox">SMS</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="checkbox" id="emailCheckbox" name="notification_type[]" value="email">
                                                        <label class="form-check-label ms-1" style="vertical-align: sub;" for="emailCheckbox">Email</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div style="border-top: none; display:none" id="condition_div"
                                     class="Polaris-Card__Section">
                                    @include('partials.conditional_execution_partial', ['customText' => 'Set conditions for your Syncing'])
                                </div>
                            </div>
                        </div>
                        {{-- End div for Brevo accounts and Events --}}

                        {{-- Start div for dynamic form load --}}
                        <div class="col-md-12 form-group" id="dynamicFormContent">
                            {{--dynamic form --}}
                        </div>
                        {{-- End div for dynamic form load --}}

                        <div class="col-md-12" id="action-buttons" hidden>
                            <div class="row">

                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary">Sync Now</button>
                                </div>
                                <div class="col-md-3" id="test_button" hidden="true">
                                    <button class="test-action-btn" type="button" id="test_action">Test Action</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('last_scripts')
    <script>
        var sendinblue_query_param;
        // Function to hide the loader after 2 seconds
        function hideLoaderAfterDelay() {
            setTimeout(function () {
                hide_loading_img()
            }, 2000); // 2 seconds delay
        }

        function showResponseMessage(status, message) {
            $('#manualMappingModal').scrollTop(0);
            $('#test-action-message').html(message);
            if (status === true) {
                $('#responseMessage').removeClass('alert-danger').addClass('alert-success');
            } else {
                $('#responseMessage').removeClass('alert-success').addClass('alert-danger');
            }
            $('#responseMessage').show();
        }




        var radioValue = $('input[name="data_direction"]:checked').val();
        console.log(radioValue);
        if(radioValue == 'shopify_to_platform') {
            function show_conditions_div(conditions) {
                console.log(conditions);
                if (conditions) {
                    // Build the filters array
                    let filters = conditions.map((filter_value) => {
                        let condition = {
                            id: filter_value.id,
                            label: filter_value.label,
                            type: filter_value.type,
                            operators: filter_value.operators,
                        };

                        // Add conditional properties dynamically
                        if (filter_value.input_function !== undefined && filter_value.input_function !== null) {
                            // Parse the input_function string into a valid JavaScript function
                            try {
                                condition.input = new Function('rule', 'name', filter_value.input_function);
                                condition.valueGetter = filter_value.value_getter;
                                condition.valueSetter = filter_value.value_setter;
                            } catch (e) {
                                console.error("Error parsing input_function:", e);
                            }
                        } else {
                            condition.input = filter_value.input;
                        }

                        if (filter_value.plugin) {
                            condition.plugin = filter_value.plugin;
                            if (filter_value.plugin === 'select2') {
                                condition.plugin_config = {
                                    placeholder: filter_value.label,
                                    width: "100%",
                                    allowClear: true,
                                };
                            } else if (filter_value.plugin === 'datepicker') {
                                condition.plugin_config = {
                                    format: 'yyyy-mm-dd',
                                    todayBtn: 'linked',
                                    todayHighlight: true,
                                    autoclose: true,
                                };
                            }
                        }
                        condition.values = {};
                        Object.entries(filter_value.values).forEach(([key, value]) => {
                            condition.values[key] = value;
                        });

                        return condition;
                    });

                    // Initialize queryBuilder with the built filters array
                    $('#conditional-selection').queryBuilder({
                        plugins: ['bt-tooltip-errors'],
                        default_group_flags: {
                            no_add_group: false,
                            max_rules: 2,
                            max_groups: 3,
                        },
                        filters: filters,
                        @if(isset($registered_webhook) && $registered_webhook->execution_conditions)
                        rules: {!! $registered_webhook->execution_conditions !!}
                                @endif
                    });
                }

                $('#condition_div').show();
            }
        }

        function show_conditions_div(conditions) {
            console.log(conditions);
            if (conditions) {
                // Build the filters array
                let filters = conditions.map((filter_value) => {
                    let condition = {
                        id: filter_value.id,
                        label: filter_value.label,
                        type: filter_value.type,
                        operators: filter_value.operators,
                    };

                    // Add conditional properties dynamically
                    if (filter_value.input_function !== undefined && filter_value.input_function !== null) {
                        // Parse the input_function string into a valid JavaScript function
                        try {
                            condition.input = new Function('rule', 'name', filter_value.input_function);
                            condition.valueGetter = filter_value.value_getter;
                            condition.valueSetter = filter_value.value_setter;
                        } catch (e) {
                            console.error("Error parsing input_function:", e);
                        }
                    } else {
                        condition.input = filter_value.input;
                    }

                    if (filter_value.plugin) {
                        condition.plugin = filter_value.plugin;
                        if (filter_value.plugin === 'select2') {
                            condition.plugin_config = {
                                placeholder: filter_value.label,
                                width: "100%",
                                allowClear: true,
                            };
                        } else if (filter_value.plugin === 'datepicker') {
                            condition.plugin_config = {
                                format: 'yyyy-mm-dd',
                                todayBtn: 'linked',
                                todayHighlight: true,
                                autoclose: true,
                            };
                        }
                    }
                    condition.values = {};
                    Object.entries(filter_value.values).forEach(([key, value]) => {
                        condition.values[key] = value;
                    });

                    return condition;
                });

                // Initialize queryBuilder with the built filters array
                $('#conditional-selection').queryBuilder({
                    plugins: ['bt-tooltip-errors'],
                    default_group_flags: {
                        no_add_group: false,
                        max_rules: 2,
                        max_groups: 3,
                    },
                    filters: filters,
                    @if(isset($registered_webhook) && $registered_webhook->execution_conditions)
                    rules: {!! $registered_webhook->execution_conditions !!}
                            @endif
                });
            }

            $('#condition_div').show();
        }



        $('#condition_btn').on('click' , function(){

            let selectedOption = $('#sync_event option:selected');
            let webhook_event = selectedOption.attr('data-webhook-event-name');
            show_loading_img();
            $.ajax({
                url: '{{ route('fetch_bulk_conditions') }}',
                type: 'GET',
                data: {
                    _method: 'GET',
                    event_name:webhook_event
                },
                cache: false,
                success: function (result) {
                    if (result && result.status==='success') {
                        var radioValue = $('input[name="data_direction"]:checked').val();
                        console.log(radioValue);
                        if(radioValue == 'shopify_to_platform') {
                            show_conditions_div(result.data);
                        }
                    }else{
                        swal('Warning', 'Failed to load Conditions. Try again !!', 'warning');
                    }
                    hide_loading_img();
                }, error: function (response) {
                    swal('Warning', 'Failed to update . Try again !!', 'warning');

                    hide_loading_img();},
                timeout: 15000
            })
                .fail(function (jqXHR, textStatus) {
                    if (textStatus === 'timeout') {
                        swal("Sorry", 'Please Wait... Slow connection!', "error");
                        element.prop('checked', status == 1 ? false : true);
                    }
                    hide_loading_img();
                });
        });

        $("#sync_form").submit(function (e) {
            e.preventDefault();

            // Check if the queryBuilder plugin is initialized
            if ($('#conditional-selection').data('queryBuilder') !== undefined) {
                let conditions_applied = $('#conditional-selection').queryBuilder('getRules', {
                    get_flags: true,
                    skip_empty: true
                });

                if (conditions_applied == null)
                    $('.execution_conditions').val("");
                else if (conditions_applied)
                    $('.execution_conditions').val(JSON.stringify(conditions_applied));
            }
            // Manually submit the form
            this.submit();
        });

        $('#conditional-selection').on('change.queryBuilder', function (e, rule, value) {

            if ($('#conditional-selection').queryBuilder('getRules', {get_flags: true, skip_empty: true}) != null) {
                $('.condition-section-title').addClass('condition-tab-color');
                $('.only-if-conditions').show()
            }
        });

        $('#conditional-selection').on('afterDeleteRule.queryBuilder', function (e, rule, value) {

            if ($('#conditional-selection').queryBuilder('getRules') == null) {
                $('.condition-section-title').removeClass('condition-tab-color');
                $('.only-if-conditions').hide()
            }
        });

        var sample_customer_data = [
                @foreach($sample_data_customer  as $shopify_event_request_field_key=>$shopify_event_request_field_value)
            {
                label: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only ui-textarea-dropdown"> <span class="dropdown-shopify-img-span"><div class="shopify-img dropdown-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>',
                value: {
                    value: '{{ $shopify_event_request_field_key }}',
                    content: '<span contenteditable="true" data-value="{{ $shopify_event_request_field_key }}" class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only field-text-parent"> <span class="shopify-img-span"><div class="shopify-img shopify-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>&nbsp;'
                }
            },
            @endforeach
        ];
        var sample_order_data = [
                @foreach($sample_data_order  as $shopify_event_request_field_key=>$shopify_event_request_field_value)
            {
                label: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only ui-textarea-dropdown"> <span class="dropdown-shopify-img-span"><div class="shopify-img dropdown-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>',
                value: {
                    value: '{{ $shopify_event_request_field_key }}',
                    content: '<span contenteditable="false" data-value="{{ $shopify_event_request_field_key }}" class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only field-text-parent"> <span class="shopify-img-span"><div class="shopify-img shopify-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>&nbsp;'
                }
            },
            @endforeach
        ];

        var sample_product_data = [
                @foreach($sample_data_product  as $shopify_event_request_field_key=>$shopify_event_request_field_value)
            {
                label: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only ui-textarea-dropdown"> <span class="dropdown-shopify-img-span"><div class="shopify-img dropdown-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>',
                value: {
                    value: '{{ $shopify_event_request_field_key }}',
                    content: '<span contenteditable="false" data-value="{{ $shopify_event_request_field_key }}" class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only field-text-parent"> <span class="shopify-img-span"><div class="shopify-img shopify-img-size"></div></span> <span class="field-key">{{ $shopify_event_request_field_value }}</span> <span class="field-value"></span> </span>&nbsp;'
                }
            },
            @endforeach
        ];

        $(document).ready(function() {
            // Show loader when the page loads initially
            show_loading_img();

            // Hide the loader once the page has fully loaded
            $(window).on('load', function () {
                setTimeout(function () {
                    hide_loading_img()
                }, 2000); // 2 seconds delay
            });
            // When the form is submitted (Sync Now button is clicked), show the loader
            $('form').submit(function () {
                show_loading_img();
            });
            $(document).on('click', '#cancel-sync', function () {
                var record_id=$(this).attr('record-id');
                show_loading_img();
                $.ajax({
                    url: '{{ route('cancel_sync_job') }}',
                    type: 'POST',
                    data: {
                        _method: 'POST',
                        _token: "