@extends('layouts.adminlte.adminlte')

@section('title')
    Payments
@endsection

@section('content_header')
    @parent
    <span align="center"><h1>Payments</h1></span>
@endsection

@section('modals')
    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="changeAgentPaidStateModal" class="modal" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="changeTotalPaidStateModal" class="modal" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="isFeedbackModal" class="modal" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="paymentsStateModal" class="modal" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="totToBePaidAgentModal" class="modal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="center overlay">
                        <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                    </div>
                    <div class="modal-header">
                        <h4 class="modal-title center"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="totToBePaidSellerModal" class="modal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="center overlay">
                        <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                    </div>
                    <div class="modal-header">
                        <h4 class="modal-title center"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="changeAgentComm" class="modal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="center overlay">
                        <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                    </div>
                    <div class="modal-header">
                        <h4 class="modal-title center"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="changeTotalComm" class="modal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="center overlay">
                        <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                    </div>
                    <div class="modal-header">
                        <h4 class="modal-title center"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('payments_list_table')
    <table id="paymentsListTable" class="table resp-table table-striped small table-bordered table-hover dataTable center" role="grid" aria-describedby="example2_info">
        <thead>
            <tr role="row">
                <th id="col_pl_order_date" class="col_pl_order_date sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Order date</th>
                <th id="col_pl_order_id" class="col_pl_order_id sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Order ID</th>
                @if (in_array(auth()->user()->user_type, ['agent', 'admin', 'manager']))
                    <th id="col_pl_state" class="col_pl_state sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">State</th>
                    <th id="col_pl_agent_comm" class="col_pl_agent_comm" rowspan="1" colspan="1">Agent Comm.</th>
                @endif
                @if (in_array(auth()->user()->user_type, ['admin', 'manager', 'seller']))
                    <th id="col_pl_total_comm" class="col_pl_total_comm" rowspan="1" colspan="1">Total Comm.</th>
                    <th id="col_pl_seller_comm" class="col_pl_seller_comm sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Seller Comm.</th>
                @endif
                @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
                    <th id="col_pl_seller" class="col_pl_seller sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Seller</th>
                @endif
                @if (in_array(auth()->user()->user_type, ['agent', 'admin']))
                    <th id="col_pl_manager" class="col_pl_manager sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Manager</th>
                @endif
                @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
                    <th id="col_pl_agent_name" class="col_pl_agent_name sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Agent</th>
                    <th id="col_pl_agent_pp" class="col_pl_agent_pp sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Agent Paypal</th>
                @endif
                <th id="col_pl_product_name" class="col_pl_product_name sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Product Name</th>
                <th id="col_pl_order_n" class="col_pl_order_n sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Order n.</th>
                @if (in_array(auth()->user()->user_type, ['agent', 'admin', 'manager']))
                    <th id="col_pl_payment_date" class="col_pl_payment_date sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment date</th>
                @endif
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
@endsection

@section('payments_table_agents')
    @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
        <table id="paymentsTableAgents" class="table resp-table table-striped small table-bordered table-hover dataTable center" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th id="col_pa_agent_id" class="col_pa_agent_id sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Agent ID</th>
                    <th id="col_pa_agent" class="col_pa_agent sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Agent</th>
                    <th id="col_pa_telegram" class="col_pa_telegram sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Telegram</th>
                    <th id="col_pa_paypal" class="col_pa_paypal sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Paypal</th>
                    <th id="col_pa_n_orders" class="col_pa_n_orders sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">N. orders</th>
                    <th id="col_pa_total" class="col_pa_total" rowspan="1" colspan="1">Total</th>
                    <th id="col_pa_paid" class="col_pa_paid" rowspan="1" colspan="1">Paid</th>
                    <th id="col_pa_to_be_paid" class="col_pa_to_be_paid" rowspan="1" colspan="1">To be paid</th>
                    <th id="col_pa_feedback" class="col_pa_feedback sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Feedback</th>
                    <th id="col_pa_last_pay" class="col_pa_last_pay" rowspan="1" colspan="1">Last pay</th>
                    <th id="col_pa_last_login" class="col_pa_last_login sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Last login</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    @endif
@endsection

@section('payments_table_sellers')
    @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
        <table id="paymentsTableSellers" class="table resp-table table-striped small table-bordered table-hover dataTable center" role="grid" aria-describedby="example2_info">
        <thead>
            <tr role="row">
                <th id="col_ps_seller_id" class="col_ps_seller_id sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Seller ID</th>
                <th id="col_ps_seller" class="col_ps_seller sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Seller</th>
                <th id="col_ps_telegram" class="col_ps_telegram sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Telegram</th>
                <th id="col_ps_wechat" class="col_ps_wechat sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Wechat</th>
                <th id="col_ps_n_orders" class="col_ps_n_orders sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">N. orders</th>
                <th id="col_ps_total" class="col_ps_total" tabindex="0" rowspan="1" colspan="1">Total</th>
                <th id="col_ps_paid" class="col_ps_paid" tabindex="0" rowspan="1" colspan="1">Paid</th>
                <th id="col_ps_to_be_paid" class="col_ps_to_be_paid" tabindex="0" rowspan="1" colspan="1">To be paid</th>
                <th id="col_ps_feedback" class="col_ps_feedback sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Feedback</th>
                <th id="col_ps_last_pay" class="col_ps_last_pay" tabindex="0" rowspan="1" colspan="1">Last pay</th>
                <th id="col_ps_last_login" class="col_ps_last_login sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Last login</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    @endif
@endsection

@section('payments_table_sellers_only')
    @if (auth()->user()->user_type == 'seller')
        <table id="paymentsTableSellersOnly" class="table resp-table table-striped small table-bordered table-hover dataTable center" role="grid" aria-describedby="example2_info">
            <thead>
            <tr role="row">
                <th id="col_pso_manager" class="col_pso_manager" tabindex="0" rowspan="1" colspan="1">Manager</th>
                <th id="col_pso_paypal" class="col_pso_paypal" tabindex="0" rowspan="1" colspan="1">Paypal</th>
                <th id="col_pso_telegram" class="col_pso_telegram" tabindex="0" rowspan="1" colspan="1">Telegram</th>
                <th id="col_pso_wechat" class="col_pso_wechat" tabindex="0" rowspan="1" colspan="1">Wechat</th>
                <th id="col_pso_n_orders" class="col_pso_n_orders" tabindex="0" rowspan="1" colspan="1">N. orders</th>
                <th id="col_pso_total" class="col_pso_total" tabindex="0" rowspan="1" colspan="1">Total</th>
                <th id="col_pso_paid" class="col_pso_paid" tabindex="0" rowspan="1" colspan="1">Paid</th>
                <th id="col_pso_to_be_paid" class="col_pso_to_be_paid" tabindex="0" rowspan="1" colspan="1">To be paid</th>
                <th id="col_pso_feedback" class="col_pso_feedback" tabindex="0" rowspan="1" colspan="1">Feedback</th>
                <th id="col_pso_last_pay" class="col_pso_last_pay " tabindex="0" rowspan="1" colspan="1">Last pay</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    @endif
@endsection

@section('boxes')
    @if (in_array(auth()->user()->user_type, ['seller', 'agent']))
        <div class="row">
            <div class="col-lg-5">
                <div class="row">
                    <div class="col-lg-6 col-6">
                        <!-- small box -->
                        <div id="box_total_refunded" class="small-box bg-info">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Total Refunded Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a id="more_info_total_refunded_orders" href="javascript:void(0);" style="z-index:0;" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-6 col-6">
                        <!-- small box -->
                        <div id="box_paid" class="small-box bg-success">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Paid Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a id="more_info_paid_orders" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                </div>
            </div>
            <div class="col-lg-7">
                <div class="row">
                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div id="box_feedback" style="color:#fff!important;" class="small-box bg-warning">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Feedback Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a id="more_info_feedback_orders" style="color:#fff!important;" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div id="box_to_be_paid" class="small-box bg-danger">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Orders to be paid</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a id="more_info_orders_to_be_paid" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div id="box_to_be_paid_in_euro" style="background-color:#39365d !important;" class="small-box bg-danger">
                            <div class="inner">
                                <h3>0 €</h3>
                                <p>Orders to be paid in €</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a id="more_info_orders_to_be_paid_in_euro" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                </div>
            </div>
        </div>
    @elseif (in_array(auth()->user()->user_type, ['admin', 'manager']))
        <div class="row">
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_refunded" class="small-box bg-info">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Total Refunded Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a id="more_info_total_refunded_orders" href="javascript:void(0);" style="z-index:0;" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_paid_agents" class="small-box bg-success">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Paid Agents Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a id="more_info_paid_agents_orders" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_to_be_paid_agents" style="color:#fff!important;" class="small-box bg-warning">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Agents orders to be paid</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a id="more_info_agents_orders_to_be_paid" style="color:#fff!important;" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_to_be_paid_in_euro_agents" class="small-box bg-danger">
                    <div class="inner">
                        <h3>0 €</h3>
                        <p>Agents orders to be paid in €</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a id="more_info_agents_orders_to_be_paid_in_euro" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <div class="row">
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_feedback" style="background-color: #39365d !important;" class="small-box bg-info">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Feedback Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a id="more_info_feedback_orders" href="javascript:void(0);" style="z-index:0;" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_paid_sellers" style="background-color: #ff8100!important;" class="small-box bg-success">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Paid Sellers Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a id="more_info_paid_sellers_orders" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_to_receive_sellers" style="background-color:#133f4c !important; color: #fff0f0 !important;" class="small-box bg-warning">
                    <div class="inner">
                        <h3>0</h3>
                        <p>To Receive Sellers Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a id="more_info_to_receive_sellers_orders" style="color:#fff!important;" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_to_receive_in_euro_sellers" style="background-color: #437911 !important;" class="small-box bg-danger">
                    <div class="inner">
                        <h3>0 €</h3>
                        <p>To Receive Sellers Orders in €</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a id="more_info_to_receive_sellers_orders_in_euro" href="javascript:void(0);" class="small-box-footer dnt-stay-on-top">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        </div>
    @endif
@endsection

@section('content')
    @yield('modals')

    @yield('boxes')

    @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a id="payments_table_agents_switch" class="nav-link switch-table" href="javascript:void(0);">Payments table (agents)</a>
                    </li>
                    <li class="nav-item">
                        <a id="payments_table_sellers_switch" class="nav-link switch-table" href="javascript:void(0);">Payments table (sellers)</a>
                    </li>
                    <li class="nav-item">
                        <a id="payments_list_switch" class="nav-link active switch-table" href="javascript:void(0);">Payments list</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="dataTables_wrapper form-inline dt-bootstrap">
                    <div  class="resp-table tablerow">
                        <div class=" col-sm-12">
                            @yield('payments_list_table')
                        </div>
                    </div>
                    <div id="paymentsTableAgents_wrapp3r" style="display:none;" class="resp-table tablerow">
                        <div class=" col-sm-12">
                            @yield('payments_table_agents')
                        </div>
                    </div>
                    <div id="paymentsTableSellers_wrapp3r" style="display:none;" class="resp-table tablerow">
                        <div class=" col-sm-12">
                            @yield('payments_table_sellers')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        @if (auth()->user()->user_type == 'seller')
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a id="payments_table_sellers_only_switch" class="nav-link switch-table" href="javascript:void(0);">Payments table</a>
                        </li>
                        <li class="nav-item">
                            <a id="payments_list_switch" class="nav-link active switch-table" href="javascript:void(0);">Payments list</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="dataTables_wrapper form-inline dt-bootstrap">
                        <div  class="resp-table tablerow">
                            <div class=" col-sm-12">
                                @yield('payments_list_table')
                            </div>
                        </div>
                        <div id="paymentsTableSellersOnly_wrapper" style="display:none;" class="resp-table tablerow">
                            <div class=" col-sm-12">
                                @yield('payments_table_sellers_only')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="box">
                <div class="box-body">
                    <div class="dataTables_wrapper form-inline dt-bootstrap">
                        <div id="table_wrapper" class="resp-table tablerow">
                            <div class=" col-sm-12">
                                @yield('payments_list_table')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
@endsection

@section('css')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css"/>

    <style>
        #more_info_deleted, {
            cursor: pointer;
        }

        div.dataTables_wrapper {
            max-width: 100%;
        }

        p#filters_text {
            text-align: center;
        }

        div#paymentsListTable_wrapper.dataTables_wrapper > div.row:nth-child(2),
        div#paymentsTableAgents_wrapper > div.row:nth-child(2),
        div#paymentsTableSellers_wrapper > div.row:nth-child(2),
        div#paymentsTableSellersOnly_wrapper > div.row:nth-child(2)
        {
            overflow-x: scroll;
        }

        div.card > div.card-body {
            margin: 0 auto;
        }

        #loading_dt_img {
            height: 198px;
            border-radius: 50%;
            box-shadow: 0 10px 16px 0 rgba(23,162,184,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        }

        #paymentsListTable_processing, #paymentsTableAgents_processing, #paymentsTableSellers_processing, #paymentsTableSellersOnly_processing {
            padding: 0;
            background-color: transparent !important;
            height: 200px;
            border: 1px solid black;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            border-radius: 50%;
            z-index: 100 !important;
        }

        #paymentsListTable, #paymentsTableAgents, #paymentsTableSellers, #paymentsTableSellersOnly {
            display: inline-table !important;
        }

        .filter_btn {
            background-color: #17a2b8;
            border-color: #17a2b8;
        }
        .filter_btn:hover {
            background-color: #138496;
            border-color: #117a8b;
        }

        .modal {
            background-color: transparent !important;
        }
        table td {
            vertical-align: middle !important;
        }

        .pp-btn {
            background-color: #ffffff00;
            border: 2px solid black;
        }

        .payments_state_button, .buttons-html5, .buttons-print {
            background-color: #bcc1c5 !important;
            border-color: #bcc1c5 !important;
        }
        .payments_state_button:hover, .buttons-html5:hover, .buttons-print:hover {
            background-color: #949c9c !important;
            border-color: #949c9c !important;
        }

        .container-fluid .nav-link.active{
            color: #ffffff !important;
            background-color: #BCC1C5 !important;
        }
        .card {
            background-color: rgba(0,0,0,0.04);
            text-align: center;
        }

        .card-header {
            background-color: rgba(0,0,0,0.06);
        }

        .card-body {
            padding: 20px 0;
        }

        label.custom-file-label {
            overflow: hidden;
        }

        .form-select {
            text-align-last:center;
        }

        .uploaded-feedback {
            max-width:100%;
            max-height:300px;
            display:block;
            margin:0 auto;
        }

        .uploaded-feedback-modal {
            max-width:100%;
            max-height:300px;
            display:block;
            margin:0 auto;
        }

        table.dataTable.fixedHeader-floating::-webkit-scrollbar {
            display: none;
        }
        table.dataTable.fixedHeader-floating {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        table.dataTable.fixedHeader-floating {
            background-color: #f4f6f9 !important;
        }

        .buttons-copy, .buttons-csv, .buttons-excel, .buttons-pdf, .buttons-print {
            margin-bottom: 6px;
        }

        .btn-id {
            width:44px;
            height:auto;
            margin: 0 auto;
            padding: 0;
            padding-left: 6px;
            padding-right: 6px;
            display: table-cell;
            vertical-align: middle;
        }
        .center {
            text-align:center;
            margin-left:auto;
            margin-right:auto;
            position:relative;
        }

        .resp-table {
            margin: auto;
            display: block;
            width: auto;
            max-width: 100%;
            /*overflow-x: auto;*/
        }

        div.card-body {
            display: contents;
        }

        #paymentsListTable td {
            vertical-align: middle;
        }

        div.dataTables_wrapper {
            margin: 0 auto;
        }

        #paymentsListTable td img {
            max-height: 60px;
        }

        .close {
            margin-left: 0px !important;
        }
    </style>
@endsection

@section('js')
    @parent
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="/js/jquery-ui-1.12.0.js"></script>
    <script type="text/javascript" src="/js/f.js"></script>
    <script type="text/javascript" src="/js/payments/f.js"></script>

    {{-- modals js --}}
    @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
    <script>
        $(document).on('show.bs.modal', '#totToBePaidAgentModal.modal', function(e){
            let agent_id = e.relatedTarget.id.match(/tot_to_be_paid_(.*)/)[1];

            $.ajax({
                type : 'post',
                url : '/payments/tot_to_be_paid',
                data :  'agent_id=' + agent_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success : function(html){
                    updateModal('totToBePaidAgentModal', html);
                    $('#totToBePaidAgentModal .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#totToBePaidAgentModal .modal-header').css('cursor', 'move');
                }
            });
        });

        $(document).on('show.bs.modal', '#totToBePaidSellerModal.modal', function(e){
            let seller_id = e.relatedTarget.id.match(/tot_to_be_paid_(.*)/)[1];

            $.ajax({
                type : 'post',
                url : '/payments/tot_to_be_paid',
                data :  'seller_id=' + seller_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success : function(html){
                    updateModal('totToBePaidSellerModal', html);
                    $('#totToBePaidSellerModal .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#totToBePaidSellerModal .modal-header').css('cursor', 'move');
                }
            });
        });

        $(document).on('show.bs.modal', '#changeAgentComm.modal', function(e){
            let payment_id = e.relatedTarget.id.match(/change_agent_comm_(.*)/)[1];

            $.ajax({
                type : 'post',
                url : '/payments/change_agent_comm/' + payment_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success : function(html){
                    updateModal('changeAgentComm', html);
                    $('#changeAgentComm .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#changeAgentComm .modal-header').css('cursor', 'move');
                }
            });
        });

        $(document).on('show.bs.modal', '#changeTotalComm.modal', function(e){
                let payment_id = e.relatedTarget.id.match(/change_total_comm_(.*)/)[1];

                $.ajax({
                    type : 'post',
                    url : '/payments/change_total_comm/' + payment_id,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success : function(html){
                        updateModal('changeTotalComm', html);
                        $('#changeTotalComm .modal-dialog').draggable({
                            handle: ".modal-header"
                        });
                        $('#changeTotalComm .modal-header').css('cursor', 'move');
                    }
                });
            });
    </script>
    @endif

    <script>
        @if (in_array(auth()->user()->user_type, ['manager', 'admin']))
        function showFiltersText() {
            $('#filters_text').remove();

            let filters = [];

            let country = localStorage.getItem('payments_selected_country_val');
            let seller = localStorage.getItem('payments_selected_seller_val');
            let agent = localStorage.getItem('payments_selected_agent_val');

            @if (auth()->user()->user_type == 'admin')
            let manager = localStorage.getItem('payments_selected_manager_val');
            @endif

            let vars = [ 'country', 'seller', 'agent' ];

            @if (auth()->user()->user_type == 'admin')
            vars.push('manager');
            @endif

                for (filter_type of vars) {
                let filter = eval(filter_type);

                if (filter) {
                    if (filter_type === 'country') {
                        filter = filter.substring(0,4);
                    }

                    filters.push(filter);
                }
            }

            if (filters.length !== 0) {
                let text = filters.join(' - ');

                $(`<p id="filters_text">${text}</p>`).insertAfter('#paymentsListTable_wrapper > div:first')
            }
        }

        function filterBtn() {
            Swal.fire({
                title: '<strong>Choose one or more filters</strong>',
                icon: 'info',
                iconHtml: '<i style="margin-top:10px;" class="fas fa-filter"></i>',
                html:
                    '<div class="form-group">' +
                    '<select class="custom-select" name="filter_country_select" id="filter_country_select">' +
                    '<option value="" selected>Select a country</option>' +