@extends('layouts.master')
@section('content')

    @php
        $channel_label = ucwords(str_replace('_', ' ', config('channel.name')));
        $usage_percent = $allowed_webhooks_tasks
            ? min(100, round(($processed_webhooks / $allowed_webhooks_tasks) * 100))
            : 0;
        $usage_color = $usage_percent >= 90 ? 'danger' : ($usage_percent >= 75 ? 'warning' : 'success');
    @endphp

    <main id="main" class="dashboard-v2">

        {{-- ========== Welcome strip + KPI tiles ========== --}}
        <section class="dv-welcome">
            <div class="container">
                <div class="dv-welcome__head">
                    <div>
                        <span class="dv-tagline"><span class="dv-tagline__dot"></span> Live · syncing in real time</span>
                        <h1 class="dv-title">Shopify <span class="dv-title__sep">↔</span> {{ $channel_label }}</h1>
                        <p class="dv-sub">Connect &amp; automate your workflows. Configure events on the left; monitor your usage and discover integrations on the right.</p>
                    </div>
                    <div class="dv-welcome__cta">
                        @if($shop->current_plan_type != "enterprise")
                            <a href="{{ route('plans_listing') }}" class="dv-btn dv-btn--primary">
                                Upgrade plan <i class="fas fa-arrow-right"></i>
                            </a>
                        @endif
                        <a href="{{ route('automate') }}" class="dv-btn dv-btn--ghost">
                            New automation
                        </a>
                    </div>
                </div>

                {{-- § Trial DISPLAY parity: prominent countdown banner (guarded — no-trial shops render nothing) --}}
                @if(($is_on_trial ?? false) && ($trial_hours_remaining ?? 0) > 0)
                    <div class="dv-trial">
                        <span class="dv-trial__icon"><i class="fas fa-gift"></i></span>
                        <div class="dv-trial__text">
                            <strong>Free trial active</strong>
                            <span>
                                @if(($trial_days_remaining ?? 0) > 0)
                                    Your {{ $trial_days_remaining }}-day free trial ends on {{ optional($trial_ends_at)->format('M j, Y') }}
                                @else
                                    Your free trial ends in {{ $trial_hours_remaining }} {{ $trial_hours_remaining == 1 ? 'hour' : 'hours' }} ({{ optional($trial_ends_at)->format('M j, Y g:i A') }})
                                @endif
                            </span>
                        </div>
                    </div>
                @endif

                <div class="dv-kpis">
                    <div class="dv-kpi">
                        <div class="dv-kpi__label">Current plan</div>
                        <div class="dv-kpi__value">
                            <span class="dv-plan dv-plan--{{ strtolower($shop->current_plan_type) }}">{{ ucfirst($shop->current_plan_type) }}</span>
                            @if($is_on_trial && $trial_hours_remaining > 0)
                                <span class="dv-pill dv-pill--success">Trial</span>
                            @endif
                        </div>
                        <div class="dv-kpi__meta">
                            @if($is_on_trial && $trial_hours_remaining > 0)
                                Trial ends · <strong>{{ optional($trial_ends_at)->format('M j, Y') }}</strong>
                            @else
                                Next billing · <strong>{{ $plan_history_next_date }}</strong>
                            @endif
                        </div>
                    </div>

                    <div class="dv-kpi">
                        <div class="dv-kpi__label">Plan cost</div>
                        <div class="dv-kpi__value dv-kpi__value--num">
                            <span class="dv-currency">$</span>{{ user_plan_price($shop->current_plan_type) }}
                            <span class="dv-suffix">/ mo</span>
                        </div>
                        <div class="dv-kpi__meta">
                            @if($is_on_trial && $trial_hours_remaining > 0)
                                Free during trial
                            @else
                                Recurring monthly
                            @endif
                        </div>
                    </div>

                    <div class="dv-kpi">
                        <div class="dv-kpi__label">Monthly allowance</div>
                        <div class="dv-kpi__value dv-kpi__value--num">
                            {{ number_format($allowed_webhooks_tasks) }}
                        </div>
                        <div class="dv-kpi__meta">Tasks per month</div>
                    </div>

                    <div class="dv-kpi dv-kpi--usage" id="usage">
                        <div class="dv-kpi__label">
                            Used this period
                            <span class="dv-pill dv-pill--{{ $usage_color }}">{{ $usage_percent }}%</span>
                        </div>
                        <div class="dv-kpi__value dv-kpi__value--num">
                            {{ number_format($processed_webhooks) }}
                            <span class="dv-suffix">/ {{ number_format($allowed_webhooks_tasks) }}</span>
                        </div>
                        <div class="dv-progress">
                            <div class="dv-progress__bar dv-progress__bar--{{ $usage_color }}" style="width: {{ $usage_percent }}%"></div>
                        </div>
                        <div class="dv-kpi__meta">Resets {{ $plan_history_next_date }}</div>
                    </div>
                </div>
            </div>
        </section>

        {{-- ========== Main grid ========== --}}
        <section class="dv-main">
            <div class="container">
                <div class="row g-4">

                    <div class="col-lg-8">

                        {{-- Configured Data Events --}}
                        @if(count($register_webhooks))
                            <article class="dv-card" id="configured-data-events">
                                <header class="dv-card__head">
                                    <div>
                                        <h2 class="dv-card__title">Recently configured events</h2>
                                        <p class="dv-card__sub">Active automations forwarding to {{ $channel_label }}</p>
                                    </div>
                                    <span class="dv-counter">{{ count($register_webhooks) }}</span>
                                </header>
                                <div class="dv-card__body dv-card__body--flush">
                                    <table class="dv-table">
                                        <thead>
                                            <tr>
                                                <th>Channel Account</th>
                                                <th>Webhook</th>
                                                <th>Event</th>
                                                <th class="dv-th-status">Status</th>
                                                <th class="dv-th-action"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($register_webhooks as $register_webhook)
                                                @php
                                                    $loginCreds = $register_webhook->channelAccount?->login_credentials ?? [];
                                                    $Name = $loginCreds['name'] ?? $loginCreds['email'] ?? '';
                                                    $account_name = !empty(trim($Name)) ? $Name : ucwords(str_replace('_', ' ', config('channel.name')));

                                                    $connectorEventName = $register_webhook->channel_event_settings?->channel_event?->name
                                                        ?? $register_webhook->channel_event_settings?->object_text
                                                        ?? '';
                                                    $event_name = $register_webhook->webhook_event_name ?: $connectorEventName;
                                                    if(strlen($event_name) > 35) $event_name = substr($event_name, 0, 30).'...';
                                                @endphp
                                                <tr>
                                                    <td>
                                                        <div class="dv-channel">
                                                            <span class="dv-channel__icon">
                                                                <img src="{{ config('channel.icon_path') }}" alt="{{ $account_name }}">
                                                            </span>
                                                            <span class="dv-channel__name">{{ $account_name }}</span>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <code class="dv-code">{{ str_replace('/', ' → ', $register_webhook->topic_name) }}</code>
                                                    </td>
                                                    <td class="dv-event-name">{{ $event_name }}</td>
                                                    <td class="dv-th-status">
                                                        <label class="switch">
                                                            <input data-action-target="{{ route('update_event_status', [$register_webhook->id]) }}" type="checkbox" data-id="{{ $register_webhook->id }}" class="update-webhook-status" {{ $register_webhook->status ? 'checked' : '' }}>
                                                            <div class="slider round" id="{{ $register_webhook->id }}"><span class="on">ON</span><span class="off">OFF</span></div>
                                                        </label>
                                                    </td>
                                                    <td class="dv-th-action">
                                                        <a href="{{ route('channel_config', [$register_webhook->webhook_event_slug, $register_webhook->id]) }}" class="dv-icon-btn" title="Edit configuration" aria-label="Edit configuration">
                                                            <i class="fal fa-pencil-square-o"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </article>
                        @endif

                        {{-- Quickly Connect --}}
                        @if(count($favorites))
                            <article class="dv-card mt-4">
                                <header class="dv-card__head">
                                    <div>
                                        <h2 class="dv-card__title">Quickly Connect</h2>
                                        <p class="dv-card__sub">Pre-built starting points for common workflows</p>
                                    </div>
                                    <a href="{{ route('automate') }}" class="dv-link">View all <i class="fas fa-arrow-right"></i></a>
                                </header>
                                <div class="dv-card__body">
                                    <div id="favorites" class="dv-favorites">
                                        @foreach($favorites as $favorite)
                                            <a href="{{ route('channel_config', ['webhook_event_id' => $favorite->webhook_event->slug, 'id' => 0, 'favourite_id' => $favorite->id]) }}" class="dv-fav">
                                                <div class="dv-fav__bridge">
                                                    <span class="dv-fav__icon">
                                                        <img src="https://sendinblue-tools.connectify.co/css/appdesign/images/shopify-img.png" alt="Shopify">
                                                    </span>
                                                    <span class="dv-fav__connector"><i class="fas fa-arrow-right"></i></span>
                                                    <span class="dv-fav__icon">
                                                        <img src="{{ config('channel.icon_path') }}" alt="{{ $channel_label }}">
                                                    </span>
                                                </div>
                                                <p class="dv-fav__msg">{{ $favorite->message }}</p>
                                                <span class="dv-fav__cta">Try it <i class="fas fa-arrow-right"></i></span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </article>
                        @endif

                        {{-- Setup Guide (Brevo service-specific content preserved) --}}
                        <article class="dv-card mt-4">
                            <header class="dv-card__head">
                                <div>
                                    <h2 class="dv-card__title">Brevo Setup Guide</h2>
                                    <p class="dv-card__sub">Get from zero to first automation in a few minutes</p>
                                </div>
                                <a href="{{ route('guide') }}" class="dv-link">All tutorials <i class="fas fa-arrow-right"></i></a>
                            </header>
                            <div class="dv-card__body">
                                <strong>Lets get started by following the guide.</strong>
                                <p style="margin-top: 20px;margin-bottom: 5px;font-size: 14px;">Step 1: Forward new customers to Brevo you must have an account in <a href="https://onboarding.brevo.com/account/register" target="blank">Brevo</a></p>
                                <p style="margin-top: 20px;margin-bottom: 3px;font-size: 14px;">Step 2: Step by step configuration:</p>
                                <ul style="margin-top:5px; margin-bottom: 15px; font-size: 13px;">
                                    <li>Go to automate tab</li>
                                    <li>Choose Shopify Data Event or Webhook from dropdown and click on connect button</li>
                                    <li>Add your Brevo account credentials(or select the previous account)</li>
                                    <li>Choose Shopify Data Event or Webhook topic from "Select Webhook Topic" dropdown</li>
                                    <li>Choose Brevo event from "Select channel Event" dropdown</li>
                                    <li>Map the shopify variables in input fields</li>
                                    <li>Check the status/Enable button and press save button</li>
                                    <li>You can check saved webhook events by click 'Configured Data Events' menu from the top.Check/verify all Configured Data Events including current under this screen.</li>
                                </ul>
                                <!-- Modal Buttons-->
                                <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal1">Video 1: How to Get Credentials and connect the Brevo Account with app</button>
                                <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal2">Video 2: How to Automate Contacts for every new customers</button>
                                <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal3">Video 3: How to execute the Bulk Data Sync functionality</button>
                                {{--                                                        <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal4">Video 4: <strong>How to enable phone as required field in checkout</strong></button>--}}

                                <!-- Modal 1 -->
                                <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="modal1Label">Video 1</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <iframe width="875" height="315" src="https://www.youtube.com/embed/P5486h1lOpw?si=SHZPZ3zfJd3XGWo1" title="How to Get Credentials and connect the Brevo Account with app" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal 2 -->
                                <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="modal2Label">Video 2</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <iframe width="875" height="315" src="https://www.youtube.com/embed/-RtYKHkJh30?si=uolNSraQYbc3bgPV" title="How to Automate Contact for every new customers on Shopify" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal 3 -->
                                <div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="modal3Label" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="modal3Label">Video 3</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <iframe width="875" height="315" src="https://www.youtube.com/embed/mc7LGaz9me0?si=LlAKn985yxjmVS3i" title="How to execute the Bulk Data Sync functionality"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal 4 -->
                                {{--                                                <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="modal4Label" aria-hidden="true">--}}
                                {{--                                                    <div class="modal-dialog modal-lg">--}}
                                {{--                                                        <div class="modal-content">--}}
                                {{--                                                            <div class="modal-header">--}}
                                {{--                                                                <h5 class="modal-title" id="modal4Label">Video 4</h5>--}}
                                {{--                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
                                {{--                                                            </div>--}}
                                {{--                                                            <div class="modal-body">--}}
                                {{--                                                                <iframe width="875" height="315" src="https://www.youtube.com/embed/A2umBpnjPg8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>--}}
                                {{--                                                            </div>--}}
                                {{--                                                        </div>--}}
                                {{--                                                    </div>--}}
                                {{--                                                </div>--}}

                                <hr>
                                <strong>For video tutorials go to <a href="{{ route('guide') }}">Guide tab</a></strong>
                            </div>
                        </article>
                    </div>

                    {{-- ========== Right column ========== --}}
                    <div class="col-lg-4">

                        {{-- Discover integrations --}}
                        <article class="dv-card dv-card--accent">
                            <div class="dv-card__body text-center">
                                <div class="dv-bridge">
                                    <span class="dv-bridge__node">
                                        <img src="{{ asset('icons/shopify-img.png') }}" alt="Shopify">
                                    </span>
                                    <span class="dv-bridge__line">
                                        <span class="dv-bridge__pulse"></span>
                                    </span>
                                    <span class="dv-bridge__node">
                                        <img src="{{ config('channel.icon_path') }}" alt="{{ $channel_label }}">
                                    </span>
                                </div>
                                <h3 class="dv-card__title mt-3">Discover all integrations for Shopify</h3>
                                <p class="dv-card__sub">Browse every event you can connect today.</p>
                                <a href="{{ route('automate') }}" class="dv-btn dv-btn--primary mt-3">Discover integrations</a>
                            </div>
                        </article>

                        {{-- Request integration --}}
                        <article class="dv-card mt-4">
                            <div class="dv-card__body">
                                <div class="dv-request">
                                    <div class="dv-request__icon"><i class="fas fa-paper-plane"></i></div>
                                    <h3 class="dv-card__title">Request an integration</h3>
                                    <p class="dv-card__sub">Can't find the API or feature you're looking for? We're constantly adding new integrations based on customer requests.</p>
                                    <a href="{{ route('customer_support_email') }}" class="dv-btn dv-btn--ghost mt-3">Submit a request <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('partials.models_html')
@endsection
@section('last_scripts')

    <script type="text/javascript">
        {{--scripts here--}}
        const buttons = document.querySelectorAll('.custom-btn');

        // Function to show the respective modal
        function showModal(event) {
            const targetModal = event.target.getAttribute('data-bs-target');
            const modal = document.querySelector(targetModal);
            modal.classList.add('show');
            modal.style.display = 'block';
            document.body.classList.add('modal-open');
        }

        // Function to hide the respective modal
        function hideModal(event) {
            const modal = event.target.closest('.modal');
            modal.classList.remove('show');
            modal.style.display = 'none';
            document.body.classList.remove('modal-open');
        }

        // Add event listener to each button for modal toggle
        buttons.forEach((button) => {
            button.addEventListener('click', showModal);
        });

        // Add event listener to each modal close button for modal toggle
        const closeButtons = document.querySelectorAll('.modal .btn-close');
        closeButtons.forEach((closeButton) => {
            closeButton.addEventListener('click', hideModal);
        });



        $(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: "