@extends('companyuser::layouts.master')
@section('title',__('companyuser::sidebar.Settings'))
@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>

    .vompay-header{
        background-image: url(/landing_page/images/vom-pay/vom-pay-header.png);
        height: 123px;
        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: -1rem !important;   
            background: linear-gradient(to left, transparent,#00000026);
            @else 
            right: 0;
            background: linear-gradient(to right, transparent,#00000026);
            @endif
            top: 50%;
            width: 90%;
            height: 2px;
        }
        &:after {
            content:attr(data-content);
            position: relative;
            display: inline-block;
            color: #404E67;
            padding: 0 0.5em;
            line-height: 1.5em;
            font-size: 20px;
            font-weight: lighter;
        }
    }
    .hr-text-ar{
        &:before {
            content: '';
            left: 0 !important;     
        }
    }
    .header-text
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color:white;

    }


    .submit-btn{
        border-color: #ff7300 !important;
        background-color: #ff7300 !important;
        box-shadow: -2px 4px 4px -3px black;
        width: 24%;
        border-radius:8px;
    }
    .submit-btn h5{
        margin:0 !important;
        font-size: 22px;
        font-weight: bold;
    }  
    .submit-box{
        margin:1rem 0 1rem 0;
        font-weight: bold;
    }
    .submit-box .btn-primary:hover,.btn-primary:focus {
        background-color: #f16d00e8 !important;
        border-color: #f16d00e8 !important;
    }

    .integration-page h3{
        font-size:20px;
    }

    #default-account, #cost-center, #payment-links{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: center;
    }
    .p-text
    {
        margin-left: inherit;
        font-size: medium;
        color: #abaaaa;
    }
    .hr-dots{
        order: none;
        border-top: 3px dotted #ccc;
        color: #f5f7fa00;
        background-color: #f5f7fa00;
        height: 1px;
    }

    /* The container */
    .container {
        display: block;
        position: relative;
        @if ($currentLang == 'ar')
            padding-left: 0;
            padding-right: 32px;
        @else
            padding-left: 32px;
            padding-right: 0;        
        @endif
        cursor: pointer;
        font-size: 18px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
    position: absolute;
    top: 0;
    @if ($currentLang == 'ar')
        left: auto;
        right: 0;
    @else
        left: 0;
        right:auto;
    @endif
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #11b99f;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
    background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
    background-color: #11b99f;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
    display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    .fa-plus-square-o{
    color:#00a5a8;   
    }
</style>
@endsection

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">@lang('companyuser::sidebar.VomPay')</li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Settings')</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>
       
                @include('vompay::settings.header')
                @include('superadmin::errors.lists')
                <form method="POST" action="{{ route('company.vompay-settings.store',[$subdomain]) }}">
                    @csrf
                    @include('vompay::settings.default-account')
                    @include('vompay::settings.cost-center')
                    @include('vompay::settings.payments-link')
                    <div class="submit-box text-center">
                        <button id="submitButton" class="submit-btn btn btn-primary  mb-1" type="submit">
                            <h5>@lang('vompay::vompay.save')</h5>
                        </button> 
                    </div>
                </form>
                <div class="modal fade" id="warningDeactivatedMessage" 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.deactivatedWarningMessage')
                                </p>
                                <p>
                                </p>
                            </div>
                            <div class="modal-footer text-center">
                                <button type="button" class="btn btn-primary mx-1" data-dismiss="modal">{{__('OK')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                @include('vompay::modal')
</section>
@endsection
@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>
        window.addEventListener('DOMContentLoaded', function() {

            const submitButton = document.getElementById('submitButton');
            const form = document.getElementById('vompaySettingsForm');

            function setupButton(isDeactivated) {
                if (isDeactivated) {
                    submitButton.classList.add('disabled');
                    submitButton.addEventListener('click', showPopup);
                } else {
                    submitButton.classList.remove('disabled');
                    submitButton.removeEventListener('click', showPopup);
                    submitButton.addEventListener('click', submitForm);
                }
            }

            function showPopup(e) {
                e.preventDefault();
                $('#warningDeactivatedMessage').modal()
            }

            function submitForm() {
                form.submit();
            }

            setupButton({{ $deactivatedSupplier ? 'true' : 'false' }});

            $(document).ready(function () {
                if($('#payment_account_id').val() != null){
                    localStorage.setItem("payment_account_id",$('#payment_account_id').val());
                }
                if($('#expense_account_id').val() != null){
                    localStorage.setItem("expense_account_id",$('#expense_account_id').val());
                }
              
                if($('#cost_center_id').val() != null){
                    localStorage.setItem("cost_center_id",$('#cost_center_id').val());
                }

                let paymentId = localStorage.getItem("payment_account_id");
                let expenseId =  localStorage.getItem("expense_account_id");
                let costCenterId =  localStorage.getItem("cost_center_id");
                $('#payment_account_id').val(paymentId)
                $('#expense_account_id').val(expenseId)
                $('#cost_center_id').val(costCenterId);
     
            });

            
            $('#payment_account_id').change(function () {
                localStorage.setItem("payment_account_id",$(this).val());
            });

            $('#expense_account_id').change(function () {
                localStorage.setItem("expense_account_id",$(this).val());
            })

            $('#cost_center_id').change(function () {
                localStorage.setItem("cost_center_id",$(this).val());
            })

            function toggleRequirmentsDiv() {
                let div = document.getElementById("requirments");
                if (div.style.display === "none") {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            }
    })


    function showWarning(link){
            let warningModal = $('#warningModal');
            let anchorTag = warningModal.find('a');
            anchorTag.attr('href',link);
            warningModal.modal()
    }

</script>
@endsection