@extends('companyuser::layouts.master')
@section('title',__('vompay::vompay.integration'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/custom/radio-buttons-custom.css')}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .integration-page{
        font-size: 1rem;
    }
    .vompay-header{
        background-image: url(../../landing_page/images/vom-pay/vom-pay-header.png);
        height: 170px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: 1;
        width: 99%;
        margin-left: 12px;
    }
    .container-fluid .logo img{
        width: 302px;
        top: 41px;
        position: absolute;
        z-index: 2;
    }
    .hr-text {
        line-height: 1em;
        position: relative;
        outline: 0;
        border: 0;
        color: #404E67;
        text-align: start;
        height: 1.5em;
        padding-left: 0 !important;
        margin-left: 0;
        margin-right:1rem;
        &:before {
            content: '';
            position: absolute;
            @if ($currentLang == 'ar')
            left: -40px !important;
            background: linear-gradient(to left, transparent,#00000026);

            @else 
                right: 0;
                background: linear-gradient(to right, transparent,#00000026);
            @endif
            top: 50%;
            width: 84%;
            height: 2px;
        }
        &:after {
            content:attr(data-content);
            position: relative;
            display: inline-block;
            color: #404E67;
            padding: 0 0.5em;
            line-height: 1.5em;
            font-size: 22px;
            font-weight: lighter;
        }
    }
    .header-text {
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        font-size: 16.5px;
        color:white;
        font-weight: bold;
    }
    .features-header{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
    }
    .features-header span{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: inline-block;
        font-size: 25px;
        padding: 0 !important;
        text-align: center;
    }
    .integration-box {  
        background-color: #ecf1f9!important;
        border-radius: 6px;
    }
    .features{
        box-shadow: -2px 4px 4px -3px;
        font-weight: bold;
        display: inline;
        float: inline-start;
        padding: 0.5rem;
        width: 100%;
        height: 270px;
    }
    .features p{
        font-size: 16px !important;
    }
    .prices-header span{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: inline-block;
        font-size: 25px;
        padding: 0 !important;
        text-align: center;
    }
    .prices {
        padding:1rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .fa-li {
        padding: 3px;
    }
    li .features-text {
        display: inline-block;
        margin-top: 0.4rem;
        font-size: 14px;
        font-weight: 100;
    } 
    .unlimited-package-text {
        background-color: #17baa3;
    }
    .prices .card hr{
        margin-top:0 !important;
        margin-bottom:0.5rem m !important;
        width:80%
    }
    .prices .card {
        border-radius: 8px;
        width: 22rem !important;
    }
    .prices .card img{
        width: 95px;
        height:auto;
        margin: 0.5px;
    }
    .prices .card-header{
        padding: 6px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .prices .card-header h5{
        color: white;
        margin-top: 8px;
        text-align: center;
        font-size:25px;
        font-weight: bold;
    }
    .card-body p{
        margin:1rem;
        font-weight: bolder;
        text-align: center;
        padding: 5px;
        font-size:18px;
        height:6%;
    }
    .card-body-image {
        text-align: center;
    }
    .advanced-package-text{
        background: #0594ff;
    }
    .advanced-package p{
        background:#0594ff4a;
    }
    .unlimited-package p{
        background:#79cbc25e;
    }
    .integrate-btn{
        border-color: #ff7300 !important;
        background-color: #ff7300 !important;
        box-shadow: -2px 4px 4px -3px black;
        width: 31%;
        border-radius:8px;
    }
    .integrate-btn h5{
        margin:0 !important;
        font-size: 22px;
        font-weight: bold;
    }  
    .integrate-box{
        margin:1rem 0 1rem 0;
        font-weight: bold;
    }
    .integrate-box .btn-primary:hover,.btn-primary:focus {
        background-color: #f16d00e8 !important;
        border-color: #f16d00e8 !important;
    }

    .integration-page h3{
        font-size:20px;
    }
    .custom-bullet {
        list-style-type: none;
        position: relative;
    }

    .custom-bullet::before {
        content: '';
        position: absolute;
        @if ($currentLang == 'ar')
        right: -20px;
        @else
        left: -20px;
        @endif
        top: 8px;
        width: 7px;
        height: 7px;
        border: 2px solid white;
        background-color: white;
        border-radius: 50%;
    }
    /* less common and old versions ( older laptops and budget models, mid-range laptops) */
    @media (min-width: 600px) and (max-width: 1600px) {
        .hr-text {
            &:before {
                @if ($currentLang == 'ar')
                left: -7rem !important;
                @else 
                    right: 0;
                @endif    
            }
        }
        .header-text{
            font-size: 15.1px;
        }
    }

    /* MATCHES modern laptops, including many ultrabooks,high-end laptops and gaming laptops. */
    @media (min-width: 1600px) and (max-width:2560px){
        .hr-text {
            &:before {
                @if ($currentLang == 'ar')
                left: -5rem !important;
                @else 
                    right: 0;
                @endif
            }
        }
        .header-text{
            font-size: 15.1px;
        }
    }

    /* MATCHES MacBook Pros, MacBook Pros, */
    @media (min-width: 2560px){
        .hr-text {
            &:before {
                @if ($currentLang == 'ar')
                left: -2rem !important;
                @else 
                    right: 0;
                @endif
                width:85%;
            }
        }
        .header-text{
            font-size: 15.1px;
        }
    }
    /*  older MacBooks and mid-range laptops. */
    @media screen and (min-width: 1440px) and (max-width: 1440px), screen and (min-height: 900px) and (max-height: 900px) {
        .hr-text {
            &:before {
                @if ($currentLang == 'ar')
                    left: -7rem !important;
                @else 
                    right: 0;
                @endif
            }
        }
        .header-text{
            font-size: 15.1px;
        }
        .features {
            display: block !important;
            float: none !important;
            width: 100% !important;
            box-sizing: border-box;
        }
        #features {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        #features .col-lg-3 {
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 1rem;
            flex: 0 0 25%;
            max-width: 25%;
        }
    }

    /* scale 125%. */
    @media screen and (min-width: 1512px) and (max-width: 1512px) {
        .features {
            width: 104%;
        }
        .hr-text {
            &:before {
                @if ($currentLang == 'ar')
                left: -7rem !important;
                @else 
                    right: 0;
                @endif    
            }
        }
        .header-text{
            font-size: 15.1px;
        }
    }
</style>
@endsection

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">@lang('companyuser::sidebar.Integration')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section id="configuration">
    <div class="container-fluid">
        <div class="row my-1">
            <div class="col-xs-6 headTitle">
                <h3 class="d-inline">@lang('tenant::subscription.subscription')</h3>
            </div>
        </div>
        <div class="row integration-page">
            @include('vompay::intergrationPage.header')
            @include('vompay::intergrationPage.features')
            @include('vompay::intergrationPage.vom_pay_prices')
            @include('vompay::intergrationPage.integration_button')
            <p class="text-center">{!! __('vompay::vompay.integration_disclaimer') !!}</p>
        </div>
    </div>
</section>
@endsection
<div class="modal fade" id="integrationModalMessage" tabindex="-1" role="dialog" aria-labelledby="invoiceLabel">
    <div class="modal-dialog" role="document">
        <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="invoiceLabel">@lang('Warning')</h4>
            </div>
            <div class="modal-body">
                <p>@lang('vompay::vompay.integrationModalMessage')</p>
            </div>
            <div class="modal-footer text-center">
                <button type="button" id="continue" class="btn btn-primary mx-1" data-dismiss="modal">{{__('OK')}}</button>
            </div>
        </div>
    </div>
</div>
@section('extra_scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://secure.gosell.io/js/sdk/tap.min.js"></script>
<script>
        function integrationButton(completeProfile,vompayPackage) {
            if(completeProfile == true) {
                $('#integrationModalMessage  .modal-body p').html('{{__("vompay::vompay.completeProfileWarning")}}');
                $('#integrationModalMessage').modal();
            }else if(vompayPackage == false){
                $('#integrationModalMessage  .modal-body p').html('{{__("vompay::vompay.vompayPackagesWarning")}}');
                $('#integrationModalMessage').modal();
            }
        }
        function toggleDiv(divId) {
            let div = document.getElementById(divId);
            if (div.style.display === "none") {
                if(divId == "prices"){
                    div.style.display = "flex";
                }else if(divId == "features"){
                    div.style.display = "block";
                }
                else{
                    div.style.display = "contents";
                }
            } else {
                div.style.display = "none";
            }
        }
</script>
@endsection