@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>
 
 .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; */
  padding: 0;
  &:before {
    content: '';
    position: absolute;
    @if ($currentLang == 'ar')
      left: -40px !important;
      background: linear-gradient(to left, transparent,#00000026);
    @else 
        right: -5rem !important;
        background: linear-gradient(to right, transparent,#00000026);
    @endif
    top: 50%;
    width: 100%;
    height: 2px;
  }
  &:after {
    content:attr(data-content);
    position: relative;
    display: inline-block;
    color: #404E67;
    @if ($currentLang == 'ar')
    padding: 0 ;
    @else 
    /* padding: 0 0.5em; */
    @endif
    line-height: 1.5em;
    font-size: 20px;
    font-weight: lighter;
  }

}

.ar-hr::before{
    background: linear-gradient(to left, transparent,#00000026);
    left: 0;
}

.en-hr::before{
    background: linear-gradient(to right, transparent,#00000026);
    right: 0;
}


.categories span
{
  padding: 0 !important;
  text-align: end;
  font-weight: bolder;
  font-size: medium;
  color: #ff7300;
  width:auto;
}

.requirments{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
}

.requirments span{
    height: 30px;
    width: 30px;
    /* background-color: #fff; */
    border-radius: 50%;
    display: inline-block;
    /* box-shadow: 5px 2px 4px -3px; */
    font-size: 25px;
    padding: 0 !important;
    text-align: center;
}

#requirments table ul{
    margin-top: 0;
    padding: 0;
    text-align: start;
}

#requirments thead {
 
    color:white;
    font-size: 22px;

}

#requirments table.table {
  border-collapse: separate;
  border-radius: 1rem;
  /* border: 1px solid ; */
  box-shadow:-3px 3px 4px -3px;
  margin-bottom: 22px;
  margin-top: 15px;
}
#requirments table td{
    border-top: none;
    padding: 3px 22px 3px 22px;
    width: 0%;

}
.ar-thead th:first-child {
  border-radius: 0 1rem 0 0;
  overflow: visible;

}
.ar-thead th:last-child {
  overflow: visible;
  border-radius: 1rem 0 0 0;

}
.ar-thead th:last-child, th:nth-child(2), th:first-child {
  background-color: #11B99F;
}
.ar-tbody td:first-child {
  overflow: visible;
  border-radius: 0 0 1rem 0;
}
.ar-tbody td:first-child, td:nth-child(2), td:last-child{
  background-color: #e5f0f6;
}
.ar-tbody td:last-child {
  overflow: visible;
  border-radius: 0 0 0 1rem;
}

.en-thead th:first-child {
  border-radius: 1rem 0 0 0;
  overflow: visible;

}
.en-thead th:last-child {
  overflow: visible;
  border-radius: 0 1rem 0 0;

}
.en-thead th:last-child, th:nth-child(2), th:first-child {
  background-color: #11B99F;
}
.en-tbody td:first-child {
  overflow: visible;
  border-radius: 0 0 0 1rem;
}
.en-tbody td:first-child, td:nth-child(2), td:last-child{
  background-color: #e5f0f6;
}
.en-tbody td:last-child {
  overflow: visible;
  border-radius:0 0 1rem 0;
}

.requirments-table li::marker {
    font-size:20px;

}
.requirments-table li{
    font-size: 16px;
}
.requirments-table li::before {content: "•";
  color: black;
  display: inline-block;
  width: 0.5em;
  font-size:15px;
}
[dir="rtl"] .requirments-table li::before {content: "•";
  margin-right: -0.5em;
}
[dir="ltr"] .requirments-table li::before {content: "•";
  margin-left: -0.5em;
}

/* .categories-content div{
    display: flex;
    flex-direction: column;
} */
.categories-content .btn{
    @if ($currentLang == 'ar')
    box-shadow: -6px 6px 8px 0px #c6c6c4d9;
    @else 
    box-shadow: 6px 6px 8px 0px #c6c6c4d9;
    @endif
}
.category-btn{
    color: white;
    padding: 16px;
    font-size: 22px;
    outline: none;
    @if ($currentLang == 'ar')
    border-radius: 0 8px 8px 0;
    @else 
    border-radius: 8px 0 0 8px;
    @endif
    font-weight: bold;
    width: 64%;
    /* margin-right: 69px; */
}
.category-icon-btn{
    background-color: white;
    color: white;
    padding: 0px;
    font-size: 16px;
    border: none;
    outline: none;
    position: absolute;
    display: inline-block;
    @if ($currentLang == 'ar')
    border-radius: 8px 0 0 8px;
    @else 
    border-radius: 0 8px 8px 0;
    @endif
    height: 100%;
    width: 13.3%;
    cursor: auto;

}
.individual-btn {
    background-color: #14baa2;
}
.cooperatives-btn {
    background-color: #498bc8;
}
.company-btn {
    background-color: #f57421;
}
.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;

    }
.header-text
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        font-weight: bold;
        color:white
    }
</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="{{route('company.integration.index', $subdomain)}}">@lang('companyuser::sidebar.Integration')</a>
            </li>
        </ol>
    </div>
</div>
@endsection
<div class="modal fade" id="warningMessageModal" 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.typeDisabledMessage')
                </p>
                <p>
                    @lang('vompay::vompay.supplier_type') @lang('vompay::vompay.'.ucfirst($type))
                </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>
<div class="modal fade" id="infoMessageModal" tabindex="-1" role="dialog" aria-labelledby="infoMessageLabel">
    <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="infoMessageLabel">@lang('vompay::vompay.Alert')</h4>
            </div>
            <div class="modal-body">
                <p>
                    @lang('vompay::vompay.contactCustomerServiceMessage')
                </p>
            </div>
            <div class="modal-footer text-center">
                <button type="button" id="proceedToForm" class="btn btn-primary mx-1">@lang('vompay::vompay.Continue')</button>
            </div>
        </div>
    </div>
</div>

@section('content')
<section id="configuration">
    <div class="container-fluid">
        <div class="row my-1">
            <div class="col-xs-6 headTitle">
                <h3 class="d-inline"></h3>
            </div>
        </div>
        <div class="row">
       
          
            @include('vompay::DesignUserRequirementsScreen.header')
            @include('vompay::DesignUserRequirementsScreen.requirments')
            @include('vompay::DesignUserRequirementsScreen.categories')
        </div>
    </div>
</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() {
            $(document).ready(function () {

                $('#proceedToForm').on('click', function() {
                    $('#infoMessageModal').modal('hide');
                    // Redirect to the company supplier form
                    window.location.href = "{{ route('company.supplier-form', [$subdomain, 'type' => $company]) }}";
                });

                let app = document.getElementById('app');
                // // Get the direction of the text
                let appDirection = window.getComputedStyle(app).direction;

                //category section
                let categories = document.getElementsByClassName('categories-content');   
                let categoriesArray = Array.from(categories);

                categoriesArray.forEach(function(category) {
                    let buttonsDiv = category.querySelectorAll('.category-btn-div');

                    buttonsDiv.forEach(function(divElement) {
                        let buttons = divElement.querySelectorAll('.category-btn');
                        buttons.forEach(function (button) {
                            if (appDirection === 'rtl') {
                                button.style.marginRight = '69px'; 
                            } else if (appDirection === 'ltr') {
                                button.style.marginRight = ''; 
                        
                            }
                        })

                        if (appDirection === 'rtl') {
                            divElement.style.display = 'flex';
                            divElement.style.flexDirection = 'column'; 
                        } else if (appDirection === 'ltr') {
                            divElement.style.display = '';
                            divElement.style.flexDirection = '';
                        }
                    });
                });

                // requiremnts
                let theadThFirst = document.querySelector('thead');
                let tbodyTdFirst = document.querySelector('tbody');
                let hrText = document.querySelectorAll('.hr-text');


                if (appDirection === 'rtl') {
                    theadThFirst.classList.add('ar-thead');
                    tbodyTdFirst.classList.add('ar-tbody');
                    hrText.forEach(function (hr){
                        hr.classList.add('ar-hr');
                    })


                } else if (appDirection === 'ltr') {
                    theadThFirst.classList.add('en-thead');
                    tbodyTdFirst.classList.add('en-tbody');
                    hrText.forEach(function (hr){
                        hr.classList.add('en-hr');
                    })
                    // hrText.classList.add('en-hr');

                }
          
            });
        });

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

        function handleCompanyClick() {
            let isDisabled = document.getElementById('companyButton').classList.contains('disabled-category');
            
            if (isDisabled) {
                $('#warningMessageModal').modal('show');
            } else {
                $('#infoMessageModal').modal('show');
            }
        }

        function disabledMessage(divId){
            let isDisabled = document.getElementById(divId).classList.contains('disabled-category');

            if (isDisabled) {
                $('#warningMessageModal').modal('show');
            }

        }

        /*------------------------send email steps------------------------------*/
        function sendEmail(divId,type,isExist){    

            
            let isDisabled = document.getElementById(divId).classList.contains('disabled-category');       

            if(!isDisabled && !isExist){
                $.ajax({
                    url: "{{route('company.vompay-suppliers.email-tracker', request('subdomain'))}}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Accept-Language': '{{app()->getLocale()}}',
                    },
                    dataType: 'json',
                    data: {
                        step:'one',
                        supplier_type:type
                    },
                    success: (response) => {
                    },
                    error: (xhr, status, error) => {
                    }
                });
            }
        }

</script>
@endsection