@extends('companyuser::layouts.master')
@section('title', __('companyuser::integration.integration'))
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a>@lang('companyuser::integration.integration')</a></li>
                <li class="breadcrumb-item active"><a href="#">@lang('companyuser::integration.all_apps')</a></li>
            </ol>
        </div>
    </div>
@endsection
@section('extra-styles')
    <style>
        .swal2-container.swal2-center{
            z-index: 99999999;
        }
        .zap-power-bar{
            direction: ltr !important;
        }
        .coming-soon-flag{
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 3px;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            border-radius: 10px;
            float: left;
            font-size: 15px;
            /*width: 33%;*/
            margin-top: 28px;
        }
        .coming-soon-flag-position-ar{
            float: left;
            transform-origin: top left;
            /*transform: rotate(316deg) translateX(-34%);*/
            margin-left: 21px;
        }

        .coming-soon-flag-position-en{
            float: right;
            transform-origin: top right;
            /*transform: rotate(44deg) translateX(34%);*/
            margin-top: 14px;
            margin-right: 21px;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        #configuration .card button.btn.btn-link{
            font-size: 1.5em;
        }
        .rotated{
            transform: rotate(180deg);
        }
        .row-eq-height {
            display: flex;
            flex-wrap: wrap;
        }
        .row-eq-height > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/reports/index.css') }}">
@endsection
@section('content')
    @include('superadmin::errors.lists')
    {{--    <script type="text/javascript"--}}
    {{--            src="https://zapier.com/apps/embed/widget.js?buttonColor=%2311B99F&button={{__('companyuser::dashboard.Use this Zap')}}&guided_zaps={{$zaps_ids}}"></script>--}}

    <section id="reports">
        <div class="container-fluid">
            <div class="row text-right">
                <div class="col-md-6 headTitle">
                    <h3 class="py-half">@lang('companyuser::integration.integration')</h3>
                </div>
            </div>
            @include('companyuser::errors.all')
            @include('companyuser::errors.lists')
            <section id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card bg-transparent">
                            <div class="card-body collapse in px-0">
                                <div class="mb-2">
                                    <h2 class="arbFont-bold">@lang('companyuser::integration.integration')</h2>
                                </div>
                                <div class="container-fluid p-0">
                                    <div class="row row-eq-height">
                                        <div class="col-lg-12 col-md-12 col-xs-12 mb-3">
                                            <div class="widget rounded bg-white p-lg text-center p-2 h-100">
                                                <div class="m-b-mdc p-half">
                                                    <div class="d-flex @if(app()->getlocale() == 'ar') text-right @else text-left @endif ">
                                                        <img class="report-img" src="{{asset('marketplace/icons/zatca.png')}}" style="height: 50px;margin-top: 8px;"/>
                                                        <div style="padding-left: 10px;padding-right: 10px">
                                                            <h3 class="arbFont-md no-margins" style="padding-top: 15px; width: fit-content; font-size: 20px; @if(app()->getlocale() == 'ar') text-align:right; @else text-align:left; @endif">@lang('companyuser::integration.zatca.title')</h3>
                                                            <p style="font-size: 16px;">@lang('companyuser::integration.zatca.description')</p>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex" style="justify-content: flex-end;">
                                                        <a href="https://forms.gle/H2PWWDxRYaXFSr6U8" target="_blank" class="text-white btn btn-primary mx-1">@lang('companyuser::integration.zatca.connect_now')</a>
                                                        <a href="@lang('companyuser::integration.zatca.more_details_link')" class="btn" style="color: #00b5b8; border: 2px solid #00b5b8;" download="">@lang('companyuser::integration.zatca.more_details')</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row row-eq-height">
                                        {{-- Add your own integration START --}}
                                        <div class="col-lg-12 col-md-12 col-xs-12 mb-3">
                                            <div class="widget rounded bg-white p-lg text-center p-2 h-100">
                                                <div class="m-b-mdc p-half">
                                                    <div
                                                        class="d-flex @if(app()->getlocale() == 'ar') text-right @else text-left @endif ">
                                                        <img class="report-img"
                                                             src="{{asset('assets/images/icons/add-icon.png')}}"
                                                             style="height: 50px;min-width: 45px;margin-top: 8px;"/>
                                                        <div style="padding-left: 10px;padding-right: 10px">
                                                            <h3 class="arbFont-md no-margins" style="padding-top: 15px; width: fit-content; font-size: 20px; @if(app()->getlocale() == 'ar') text-align:right; @else text-align:left; @endif">
                                                                {{__('companyuser::integration.integration request')}}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex" style="justify-content: flex-end;">
                                                        <a href="{{env('REQUEST_INTEGRATION_FORM_LINK')}}" class="text-white" style="cursor: pointer;">
                                                            <button name="action" type="button" style="border-radius: 25px;"
                                                                    class="btnWidth btn btn-primary btn-custom-padding save-and-new-btn-color btn-custom form-submit-button">
                                                                {{__('companyuser::integration.request')}}
                                                            </button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Add your own integration END --}}
                                        {{-- List of available integrations --}}
                                    </div>
                                    <div id="accordion" style="height: auto;">
                                        <div class="card">
                                            <div class="card-header" id="headingOne">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link accordion-toggler" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                        <i class="fa fa-chevron-down rotated"></i>
                                                        @lang('companyuser::integration.integrations_panel_header')
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapseOne" class="collapse show in" aria-labelledby="headingOne" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="row">
                                                    @php
                                                        // Generate a collection based on the data in the ENUM, We are using groupBy here to generate sub arrays each with its integrations
                                                        $categories = collect(\App\Enums\IntegrationConfigTypesEnum::INTEGRATION_TYPES_INDEX)
                                                                        ->groupBy('category')
                                                                        ->sortBy(function ($intergation) {
                                                                        return $intergation[0]['order'];
                                                                    });
            
                                                    @endphp
                                                    {{-- Loop therough the main categories array, this array contains the categories not the integrations --}}
                                                    @foreach($categories as $categoryArray)
                                                        <div class="col-md-12">
                                                            <h2 style="font-weight: bold;border-bottom: 1px solid #ccc;margin:50px 0 15px 0;padding: 0px 15px 0px 15px;">{{ __('companyuser::integration.'.$categoryArray[0]['category']) }}</h2>
                                                            <div class="row row-eq-height">
                                                            @forelse($categoryArray as $integration)
                                                                @if((env('SYNC_INTEGRATED_ORDERS_ON') && env('SYNC_INTEGRATED_'. strtoupper($integration['label']).'_ORDERS_ON')) || !$integration['enabled'])
                                                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
                                                                        @if(!$integration['enabled'])
                                                                            <label class="bg-white p-lg text-center coming-soon-flag col-lg-4 col-md-5 col-sm-5 col-xs-8 @if(app()->getLocale() == 'ar') coming-soon-flag-position-ar @else coming-soon-flag-position-en @endif">
                                                                                {{__('companyuser::integration.coming soon')}}
                                                                            </label>
                                                                        @endif
                                                                        <div class="widget rounded bg-white p-lg text-center p-2 h-100" style="min-height: 180px;border: 1px solid #b0b0b0;">
                                                                            <div class="m-b-mdc p-half">
                                                                                <div class="d-flex w-100 p-0" style="@if(app()->getlocale() == 'ar') text-align:right; @else text-align:left; @endif">
                                                                                    <img class="report-img" src="{{asset('assets/images/icons/' . $integration['label'] .'-icon.png')}}" style="height: 50px;min-width: 45px;margin-top: 8px;" />
                                                                                    <div style="padding-left: 10px;padding-right: 10px">
                                                                                        <h2 class="arbFont-md no-margins" style="padding-top: 15px;">
                                                                                            {{__('companyuser::integration.' . $integration['label'])}}
                                                                                        </h2>
                                                                                        <label class="arbFont-md no-margins" style="color: #a4a4a4 !important;font-size: 16px;">
                                                                                            {{__('companyuser::integration.connect your ' . $integration['label'] . ' account and automate workflow')}}
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                @if($integration['enabled'])
                                                                                    <div class="d-flex report-actions">
                                                                                        @if(request()->has_applications_integration == 1)
                                                                                            <a class="active" style="cursor: pointer;" data-href="{{route('company.' . $integration['label'] . '.index',$subdomain)}}" 
                                                                                                onclick="checkAddOnAppActivity(this, '{{$integration['label']}}')">
                                                                                                @else
                                                                                                    <a  class="active" style="cursor: pointer;" onclick="confirm()">
                                                                                                        @endif
                                                                                                        @if(app()->getlocale() == 'ar')
                                                                                                            <i style="font-size: 40px !important;" class="feather icon-arrow-left"
                                                                                                                aria-hidden="true"></i>
                                                                                                        @else
                                                                                                            <i style="font-size: 40px !important;" class="feather icon-arrow-right"
                                                                                                                aria-hidden="true"></i>
                                                                                                        @endif
                                                                                                    </a>
                                                                                            </a>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @empty
                                                                <p>Coming Soon ...</p>
                                                            @endforelse
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="headingTwo">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link accordion-toggler" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                                    <i class="fa fa-chevron-down rotated"></i>
                                                    @lang('companyuser::integration.marketplace') 
                                                </button>
                                                <span style="margin: 0 1px;background-color: orange; border-radius: 50px;font-size: 1em;color: #fff;padding: 3px 10px;">@lang('companyuser::sidebar.new')</span>
                                            </h5>
                                            </div>
                                            <div id="collapseTwo" class="collapse show in" aria-labelledby="headingTwo" data-parent="#accordion">
                                            <div class="card-body">
                                                @php
                                                    $MarketplaceItems = json_decode(file_get_contents(public_path('marketplace/marketplace.json')));
                                                @endphp
                                                <div class="row row-eq-height">
                                                    @foreach($MarketplaceItems as $Item)
                                                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
                                                            <div class="widget rounded bg-white p-lg text-center p-2 h-100" style="border: 1px solid #b0b0b0;">
                                                                @if($Item->discountAmount)
                                                                    <span style="position:absolute; top:20px; @if(app()->getLocale() == 'en') right: 40px; @else left: 40px; @endif margin: 0 1px;background-color: orange; border-radius: 50px;font-size: 1em;color: #fff;padding: 3px 10px;">{{ $Item->discountAmount }} @lang('companyuser::integration.discount')</span>
                                                                @endif
                                                                <div class="m-b-mdc p-half">
                                                                    <div class="d-flex w-100 p-0" style="@if(app()->getlocale() == 'ar') text-align:right; @else text-align:left; @endif">
                                                                        <img class="report-img" src="{{asset('marketplace/icons/' . $Item->logo)}}" style="height: 50px;min-width: 45px;margin-top: 8px;" />
                                                                        <div style="padding-left: 10px;padding-right: 10px">
                                                                            <h2 class="arbFont-md no-margins" style="padding-top: 15px;">@if(app()->getlocale() == 'ar') {{ $Item->title_ar }} @else {{ $Item->title_en }} @endif</h2>
                                                                            <label class="arbFont-md no-margins" style="color: #a4a4a4 !important;font-size: 16px;">@if(app()->getlocale() == 'ar') {{ $Item->shortDescription_ar }} @else {{ $Item->shortDescription_en }} @endif</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="d-flex report-actions">
                                                                        <a  class="active" style="cursor: pointer;" href="{{route('company.apps-integration.marketplace.single',[$subdomain,$Item->id])}}" >
                                                                            @if(app()->getlocale() == 'ar')
                                                                                <i style="font-size: 40px !important;" class="feather icon-arrow-left" aria-hidden="true"></i>
                                                                            @else
                                                                                <i style="font-size: 40px !important;" class="feather icon-arrow-right" aria-hidden="true"></i>
                                                                            @endif
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        {{-- confirmation for addvance package modal --}}
        <div class="modal fade" id="advanceMessage" tabindex="-1" role="dialog" aria-labelledby="advanceMessageLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="advanceMessageLabel">@lang('companyuser::integration.subscription')</h4>
                    </div>
                    <div class="modal-body">
                        <p style="font-size: 16px;">
                            @lang('companyuser::integration.addvanceMessage')
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('companyuser::integration.close')</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('extra_scripts')
    <script>
        gtag('event', 'web_apps_list');
        console.log('web_apps_list event');
    </script>
@endsection
<script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
<script>
    function confirm() {
        $('#advanceMessage').modal('show');
    }
    function checkAddOnAppActivity(e, applicationName) {
        var isAddsOnIntegration = false;
        var activatedIntegration = false;
        var addsOnList = JSON.parse(("{{$addsOnList}}").replace(/&quot;/g,'"').replace(/\\/g, "\\\\"));
        addsOnList.forEach(element => {// if application name is exists in adds on list
            if(element.name_en == applicationName) 
                isAddsOnIntegration = true;
        });
        if (isAddsOnIntegration) {
            var addsOnCompany = JSON.parse(("{{$addOns}}").replace(/&quot;/g,'"').replace(/\\/g, "\\\\"));
            addsOnCompany.forEach(element => {
                if(element.addon.name_en == applicationName && element.status == 1) {
                    window.location.href = e.getAttribute('data-href');
                    activatedIntegration = true;
                }
            });
            if (!activatedIntegration) deactivatedIntegrationPopUp()
        }else{
            window.location.href = e.getAttribute('data-href');
        }
    }
    function deactivatedIntegrationPopUp() {
        Swal.fire({
            icon: 'error',
            text: "{{__('companyuser::integration.warning_message_for_deactivated_integration')}}",
            confirmButtonText: "{{__('sales::invoices.ok')}}",
            confirmButtonColor: "#11B99F",
        })
    }
    document.addEventListener("DOMContentLoaded", function() {
        // Select all buttons with the specified selector
        const buttons = document.querySelectorAll('#configuration .card button.btn.btn-link');

        // Add click event listener to each button
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                // Find the child <i> element and toggle the 'rotated' class
                const childElement = this.querySelector('i');
                childElement.classList.toggle('rotated');
            });
        });
    });
</script>