@extends('layouts.horizontalLayout')

@section('title', 'Dashboard')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/animate-css/animate.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/sweetalert2/sweetalert2.js'])
@endsection

@section('content')
    @if (!empty($storeRequests))
        @include('partials.store-requests-progress-alerts', [
            'storeRequestForAlerts' => $storeRequests,
        ])
    @endif

    <div class="container-fluid px-3">
        {{-- <div class="col-md-12 mt-4">
            <div class="alert alert-solid-info alert-dismissible" role="alert">
                <h5 class="alert-heading">Marketplace Bridge works best in Google Chrome</h5>
                <p class="mb-0">Using browsers other than Chrome may cause limited functionality or unexpected behavior.
                    Browsers other than Chrome lack the necessary capabilities to support all features and may handle
                    certain operations differently, causing errors or incomplete functionality within Shopify. To ensure
                    a seamless and reliable experience, please use Google Chrome.</p>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div> --}}

        <div class="row mt-4">
            <div class="col-md-6">

                <div class="card mb-6">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0">
                            <h4 class="mb-1">Products</h4>
                            <h6 class="mb-1">Unlimited Product Imports</h6>
                            <p class="card-subtitle">Import your entire product catalog from Amazon sales channel
                                into Shopify — no limits, no hassle.</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <a href="javascript:void(0)" onclick="changeRedirectURL('{{ route('shopify.products',['shop' => $sd]) }}')"
                            class="btn btn-primary waves-effect btn-sm">Manage Products</a>
                    </div>
                </div>
                <div class="card mb-6">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0">
                            <h4 class="mb-1">Orders</h4>
                            <h6 class="mb-1">Instant Order, Refund and Fulfillment Updates</h6>
                            <p class="card-subtitle">Automatically sync all orders, refunds and fulfillments in real
                                time to keep your Shopify store up to date across every channel.</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <a href="javascript:void(0)" onclick="changeRedirectURL('{{ route('amazon.orders.index',['shop' => $sd]) }}')"
                            class="btn btn-primary waves-effect btn-sm">Manage Orders</a>
                    </div>
                </div>
                <div class="card">
                    <!-- Current Plan -->
                    <h5 class="card-header">Current Plan</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-6">
                                    <p class="mb-1">Your Current Plan: <b>{{ $storeBilling->plan_name }}</b></p>
                                    <p>Price: <b class="me-1">${{ $storeBilling->total_price }} / Month</b></p>

                                                                    </div>
                                <div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Current Plan -->
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-6">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0">
                            <h4 class="mb-1">Settings</h4>
                            <p class="card-subtitle">These settings help you control how products and orders are synced
                                between Shopify and Amazon, making multi-channel management simple and efficient. You
                                can choose how products are linked, which orders to import, and how to automatically tag
                                orders and customers.</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <a href="javascript:void(0)" onclick="changeRedirectURL('{{ route('shopify.settings', ['shop' => $sd]) }}')"
                            class="btn btn-primary waves-effect btn-sm">Manage Settings</a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0">
                            <h5 class="mb-1">Integrations Overview</h5>
                            <p class="card-subtitle">You currently have {{ count($storeIntegrations) }} sales channel
                                integration for this Shopify store.</p>
                        </div>
                        <!-- <a onclick="changeRedirectURL('{{ route('shopify.connect_amazon', ['shop' => $sd]) }}')" class="btn btn-primary waves-effect btn-sm" href="javascript:void(0);">Connect Marketplace</a> -->
                    </div>

                    <div class="card-body">
                        <div class="row row-gap-6">
                            <div class="col-md-12 mb-1">
                                <h5 class="mb-1">Current Active Integrations</h5>
                                @if (!empty($storeIntegrations) && count($storeIntegrations) > 0)
                                    @foreach ($storeIntegrations as $integration)
                                        @foreach ($integration->marketplaces as $marketplace)
                                            <div class="d-flex w-100 align-items-center justify-content-between gap-2">
                                                <div class="me-2 w-100">
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/amazon.png') }}" alt="amazon"
                                                            width="50" class="img-fluid text-center">
                                                        <h6 class="mb-0 me-1">{{ $marketplace->store_name }}
                                                            ({{ $marketplace->location_name }} - {{ $integration->name }})
                                                        </h6>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="dropdown">
                                                        <button
                                                            class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1 waves-effect"
                                                            type="button" id="earningReportsTabsId"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i
                                                                class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-end"
                                                            aria-labelledby="earningReportsTabsId" style="">
                                                            <button class="dropdown-item waves-effect"
                                                                onclick='disconnectIntegration("{{ $integration->id }}")'>Disconnect</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const closeElementList = Array.from(document.querySelectorAll('.card-close'));
            closeElementList.forEach(function(closeElement) {
                closeElement.addEventListener('click', function(event) {
                    event.preventDefault();
                    closeElement.closest('.card').classList.add('d-none');
                });
            });
        });

        function disconnectIntegration(integrationId) {
            Swal.fire({
                title: 'Are you sure to disconnect marketplace?',
                text: "If you disconnect, Marketplace Bridge will stop syncing products, orders and fulfillemnts between this marketplace and Shopify.",
                showCancelButton: true,
                confirmButtonText: 'Yes, Disconnect it!',
                customClass: {
                    confirmButton: 'order-2 btn btn-primary',
                    cancelButton: 'order-1 mx-4 btn btn-label-secondary'
                },
                buttonsStyling: false
            }).then(function(result) {
                if (result.isConfirmed) {
                    fetch('{{ route('amazon.auth.disconnect') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                integration_id: integrationId,
                                s: '{{ $s }}',
                                shop: '{{ $sd }}',
                                host: '{{ $h }}'
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status && data.status == 'success') {
                                window.notyf.success(data.message);
                            } else {
                                window.notyf.error(data.message);
                            }
                        })
                        .catch(() => window.notyf.error('An error occured.'))
                        .finally(() => window.location.reload());
                }
            });
        }
    </script>
@endsection