@extends('companyuser::layouts.master')
@section('title',__('companyuser::sidebar.Dashboard'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/custom/radio-buttons-custom.css')}}">
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{ url('assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .total-matrics
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .total
    {
        border-radius: 0.7rem;
        box-shadow: -5px 5px 8px -3px #afafaf;

    }
    .total-text
    {
        text-align: center;
        padding: 1rem;
        background: #17baa3;
        color: #fff;
    }

    .total-text h5{
        font-size: large;
    }

    .card-header:first-child {
        border-radius: 0.7rem 0.7rem 0 0;
    }

    .total .card-body{
        text-align: center;
        font-size: large;
    }
    
    .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: 0 !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;

    }

    table thead{
        background: #17baa3;
        color: #fff;
        font-size: medium;
    }

    .daterangepicker.dropdown-menu{
        z-index: 99999 !important;
    }
    .filter-section-collapse form .input-group .input-group-addon.h-45 {
        height: 45px !important;
    }
    .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;
        z-index: 1;
    }
    .container-fluid .logo img{
        width: 302px;
        top: 15px;
        position: absolute;
        z-index: 2;

    }
</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.Dashboard')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section id="configuration">
    <div class="container-fluid">
        @include('vompay::dashboard.header')
        <div class="row">
            @include('vompay::dashboard.total-section')
            @include('vompay::dashboard.operations-table')
            @include('vompay::dashboard.transactions-table')

        </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 () {
                buildDataTable()
            });

            $('#reset').on('click', function(e) {
                let url = window.location.href;
                let baseUrl = url.split('?')[0];
                // Update the browser's address bar
                window.history.replaceState(null, null, baseUrl);
                // Refresh the page
                location.reload();
 
            });
            const paymentStatuses = {
                'CREATED': "{{ __('vompay::vompay.CREATED') }}",
                'SUCCESS': "{{ __('vompay::vompay.SUCCESS') }}",
                'FAILED': "{{ __('vompay::vompay.FAILED') }}",
                'CANCELED': "{{ __('vompay::vompay.CANCELED') }}",
                'AUTHORIZE': "{{ __('vompay::vompay.AUTHORIZE') }}",


            };

            function buildDataTable(){
                $('#operations_table').DataTable({
                    processing: true,
                    serverSide: true,
                    search: true,
                    ajax: {
                        url: "{{route('company.dashboard.index',$subdomain)}}",
                        data: