@extends('layouts.master')
@section('content')
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
        <script>
            setTimeout(function() {
                $('.alert-success').fadeOut('fast');
            }, 30000); // 30 seconds
        </script>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
        <script>
            setTimeout(function() {
                $('.alert-danger').fadeOut('fast');
            }, 30000); // 30 seconds
        </script>
    @endif
    <main id="main">

        <div class="banner">
            <div class="container">
                <div class="mainbox">
                    <div class="row">
                        <div class="banner-text text-center">
                            <h1>Connect & automate workflows between shopify store and {{ str_replace("_", " ", config('channel.name')) }} </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        @if(count($register_webhooks))
                            <div class="mainbox mb-4">
                                <div class="row">
                                    <h5>Registered Webhooks</h5>
                                    <div class="col-md-12">
                                        <table class="table bordered">
                                            <thead>
                                            <tr>
                                                <th>Channel</th>
                                                <th>Name</th>
                                                <th>Webhook</th>
                                                <th>Event Name</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($register_webhooks as $register_webhook)
                                                <tr>
                                                    <td width="50" >
                                                        <div class="img-box">
                                                            <img src="{{ config('channel.icon_path') }}" alt="">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span>{{ ucwords(str_replace("_", " ", config('channel.name'))) }}</span>
                                                    </td>
                                                    <td>{{ ucwords(str_replace("/", " -> ", $register_webhook->topic_name)) }}</td>
                                                    @php
                                                        $event_name = $register_webhook->channel_event_settings->channel_event->name ?? ($register_webhook->channel_event_settings->object_text) ?? '';
                                                        if(strlen($event_name) > 35) $event_name = substr($event_name, 0, 30).'...';
                                                    @endphp
                                                    <td>{{ $event_name }}</td>
                                                    <td>
                                                        <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><a href="{{ route('channel_config'  ,[$register_webhook->webhook_event_slug,$register_webhook->id]) }}"><i class="fal fa-pencil-square-o"></i></a> </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if(count($favorites))
                            <div class="mainbox">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Quickly Connect</h5>

                                        <div id="favorites">
                                            @foreach($favorites as $favorite)
                                                <div class="card horizontally">
                                                    <div class="card-body">
                                                        <ul class="icon-list small">
                                                            <li>
                                                                <div class="icon-box">
                                                                    <img src="{{ config('app.url').'icons/shopify-img.png' }}">
{{--                                                                    <img src="https://appscorridor.com/webhook_setup_stage/css/appdesign/images/shopify-img.png">--}}
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="icon-box">
                                                                    <img src="{{ config('channel.icon_path') }}">
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <p>{{ $favorite->message }}</p>
                                                        <a href="{{ route('channel_config', ['webhook_event_id' => $favorite->webhook_event->slug, 'id' => 0, 'favourite_id' => $favorite->id]) }}" class="btn">Try it</a>                                                        </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="overflow-hidden">
                                            <a class="btn d-block" href="{{ route('automate') }}">View All</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="mainbox">
                            <div class="row">
                                <div class="col-md-12">
                                    <di class="card-deck mb-3">
                                        <di class="card mb-4 shadow-sm">
                                            <h4>Twilio Tools Setup Guide</h4>
                                            <div class="card-body">
                                                <strong>Lets get started by following the guide.</strong>
                                                <p style="margin-top: 20px;margin-bottom: 5px;font-size: 14px;">Step 1: To send sms you must have an account in <a href="https://www.twilio.com/" target="blank">Twilio</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 webhook from dropdown and click on connect button</li>
                                                    <li>Add your Twilio account credentials(or select the previous account)</li>
                                                    <li>Choose webhook topic from "Select Webhook Topic" dropdown</li>
                                                    <li>Select notification type(Text message/Call)</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 'Registered Webhook' menu from the top.Check/verify all configured webhooks 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 create Twilio Account</button>
                                                <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal2">Video 2: How to Automate SMS for every order</button>
                                                <button type="button" class="custom-btn" data-bs-toggle="modal" data-bs-target="#modal3">Video 3: How to send bulk marketing SMS</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/gmONYJBAp44" title="How to create Twilio Account &amp; get Credentials" 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/AO56Lh1luv0" title="How to automate SMS for every order 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/J2FkrIf6Uz0" title="How to send bulk marketing SMS"  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>
                                        </di>
                                    </di>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="mainbox mb-4">
                            <div class="YourplanCard p-0 bg-transparent">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="mb-3 font-16">Your Plan</h4>
                                    <div class="mb-3">
                                        <a href="{{ route('plans_listing') }}" class="btn font-12">Upgrade your Plan <i class="fas fa-angle-right"></i> </a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 py-3">
                                        <h6 class="font-14">Plan</h6>
                                        <div>
                                                    <span class="tag">
                                                        {{ ucfirst($shop->current_plan_type) }}
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 py-3">
                                        <h6 class="font-14">Next Billing Date</h6>
                                        {{ $plan_history_next_date }}
                                    </div>
                                    <div class="col-lg-6 py-3">
                                        <h6 class="font-14">Price</h6>
                                        ${{ user_plan_price($shop->current_plan_type) }}
                                    </div>
                                    <div class="col-lg-6 py-3">
                                        <h6 class="font-14">Tasks per month </h6>
                                        {{ number_format($allowed_webhooks_tasks) }} per month
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mainbox  mb-4">
                            <div class="YourplanCard p-0 bg-transparent">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="mb-3 font-16">Usage</h4>
                                    <div class="mb-3">
                                        <div class="text-muted">Resets on {{ $plan_history_next_date }}</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <p class="fst-normal mt-3"><strong>{{ $processed_webhooks }}</strong> of {{ $allowed_webhooks_tasks }} automations used</p>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: {{ $allowed_webhooks_tasks ? ($processed_webhooks/$allowed_webhooks_tasks)*100 : 0 }}%" aria-valuenow="{{ $processed_webhooks }}" aria-valuemin="0" aria-valuemax="{{ $allowed_webhooks_tasks }}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mainbox">
                            <div class="card mb-5">
                                <div class="card-body p-0 bg-transparent">
                                    <ul class="icon-list">
                                        <li>
                                            <div class="icon-box" widhth="50">
                                                <img src="{{ config('app.url').'icons/shopify-img.png' }}">
{{--                                                <img src="https://appscorridor.com/webhook_setup_stage/css/appdesign/images/14.png">--}}
                                            </div>
                                        </li>
                                        <li>
                                            <div class="icon-box">
                                                <img src="{{ config('channel.icon_path') }}" style="max-width: 40px">
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="text-center">
                                        <h5 class="text-blue my-3">Discover all the possible integrations for Shopify</h5>
                                        <a href="{{ route('automate') }}" class="btn">Discover</a>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-5">
                                    <div class="card">
                                        <div class="card-body  p-0 bg-transparent">
                                            <h6>Request An Integration</h6>
                                            <p>Can't find the software you're looking for? Dont't worry! We're constantly adding new intergrations based on our customer's requests. </p>
                                            <a target="_blank" href="{{ route("customer_support_email") }}">Request an Integration</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('partials.models_html')
    {{--    <footer id="footer">--}}
    {{--        <div class="container">--}}
    {{--            <svg viewBox="0 0 20 20"  focusable="false" aria-hidden="true">--}}
    {{--                <path fill-rule="evenodd" d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-9 3a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0v2zm0-6a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path>--}}
    {{--            </svg>--}}
    {{--            Learn more about--}}
    {{--            <a href="https://connectify.co/" target="_blank" rel="noopener noreferrer" data-polaris-unstyled="true">CONNECTIFY--}}
    {{--                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">--}}
    {{--                    <path d="M14 13v1a1 1 0 0 1-1 1h-7c-.575 0-1-.484-1-1v-7a1 1 0 0 1 1-1h1c1.037 0 1.04 1.5 0 1.5-.178.005-.353 0-.5 0v6h6v-.5c0-1 1.5-1 1.5 0zm-3.75-7.25a.75.75 0 0 1 .75-.75h4v4a.75.75 0 0 1-1.5 0v-1.44l-3.22 3.22a.75.75 0 1 1-1.06-1.06l3.22-3.22h-1.44a.75.75 0 0 1-.75-.75z"></path>--}}
    {{--                </svg>--}}
    {{--            </a> at the--}}
    {{--            <a href="{{ route('faqs') }}" target="_blank" rel="noopener noreferrer" data-polaris-unstyled="true" class="Polaris-Link">Help Docs--}}
    {{--                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">--}}
    {{--                    <path d="M14 13v1a1 1 0 0 1-1 1h-7c-.575 0-1-.484-1-1v-7a1 1 0 0 1 1-1h1c1.037 0 1.04 1.5 0 1.5-.178.005-.353 0-.5 0v6h6v-.5c0-1 1.5-1 1.5 0zm-3.75-7.25a.75.75 0 0 1 .75-.75h4v4a.75.75 0 0 1-1.5 0v-1.44l-3.22 3.22a.75.75 0 1 1-1.06-1.06l3.22-3.22h-1.44a.75.75 0 0 1-.75-.75z"></path>--}}
    {{--                </svg>--}}
    {{--            </a>.--}}
    {{--        </div>--}}
    {{--    </footer>--}}
@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: "