@extends('layouts.adminlte.adminlte')

@section('title')
    Orders
@endsection

@section('content_header')
    @parent
    @if (in_array(auth()->user()->user_type, ['admin', 'manager', 'agent']))
        <span align="center">
            <h1>Orders
                <i title="Click here to show the deleted orders!" id="more_info_deleted" class="fas fa-folder-minus"></i>
            </h1>
        </span>
    @else
        <span align="center">
            <h1>Orders</h1>
        </span>
    @endif
@endsection

@section('modals')
    <div id="ImageZoomModal" class="modal">
        <span class="close_img">&times;</span>
        <img class="modal-content" id="ImageZoomModalContent">
        <div id="caption"></div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="orderEditModal" 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="ordersStateModal" 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:0;" id="showProductModal" 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">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title center">Product Info</h4>
                </div>
                <div class="modal-body">
                    <div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @if(in_array(auth()->user()->user_type, ['admin', 'manager', 'agent']))
        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="deleteOrderModal" 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

    @if(in_array(auth()->user()->user_type, ['admin', 'manager']))
        <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="restoreOrderModal" 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

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="addEditReviewModal" 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="addRefundModal" 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>
@endsection

@section('boxes')
    <div class="row">
        @if (in_array(auth()->user()->user_type, ['manager', 'admin', 'seller']))
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div id="box_total" class="small-box bg-info">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Total Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a id="more_info_total" 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_refunded" class="small-box bg-success">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Refunded Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a id="more_info_refunded" 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_waiting_review" class="small-box bg-warning">
                            <div style="color:#fff!important;" class="inner">
                                <h3>0</h3>
                                <p>Waiting Review</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a id="more_info_waiting_review" 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_reviewed" class="small-box bg-danger">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Reviewed Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a id="more_info_reviewed" 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-4">
                <div class="row">
                    <div class="col-lg-6 col-6">
                        <!-- small box -->
                        <div id="box_forwarded" style="background-color:#39365d !important" class="small-box bg-danger">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Forwarded Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a id="more_info_forwarded" 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-6 col-6">
                        <!-- small box -->
                        <div id="box_to_refund" style="background-color: #ff8100!important;" class="small-box bg-danger">
                            <div class="inner">
                                <h3>0</h3>
                                <p>Orders To Refund</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a id="more_info_to_refund" 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>
        @else
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div id="box_total" class="small-box bg-info">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Total Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a id="more_info_total" 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_refunded" class="small-box bg-success">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Refunded Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a id="more_info_refunded" 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_waiting_review" style="color:#fff!important;" class="small-box bg-warning">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Waiting Review</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a id="more_info_waiting_review" 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_reviewed" class="small-box bg-danger">
                    <div class="inner">
                        <h3>0</h3>
                        <p>Reviewed Orders</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a id="more_info_reviewed" 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 -->
        @endif
    </div>
@endsection

@section('content')
    @yield('boxes')

    <div class="box">
        <div class="box-body">
            <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                <div class="row">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6"></div>
                </div>
                <div class="resp-table tablerow">
                    <div class="col-sm-12">
                        <table id="ordersTable"
                            class="table center table-striped small resp-table table-bordered table-hover dataTable"
                            role="grid" aria-describedby="example2_info">
                            <thead>
                                <tr role="row">
                                    <th id="col_country" name="col_country" class="col_country no-print sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending"
                                        aria-label="Rendering engine: activate to sort column descending"></th>
                                    <th id="col_date" name="col_date" class="col_date sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending"
                                        aria-label="Rendering engine: activate to sort column descending">Date</th>
                                    <th id="col_id" name="col_id" class="col_id sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">ID</th>
                                    @if (in_array(auth()->user()->user_type, ['agent', 'seller']))
                                        <th id="col_chat" name="col_chat" class="col_chat no-print no-export" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1">Chat</th>
                                    @endif
                                    <th id="col_product_id" name="col_product_id" class="col_product_id sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Product ID</th>
                                    <th id="col_state" name="col_state" class="col_state sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Order State</th>
                                    <th id="col_review_type" name="col_review_type" class="col_review_type sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Review type</th>
                                    <th id="col_review_deleted" name="col_review_deleted" class="col_review_deleted sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Review deleted
                                    </th>
                                    <th id="col_review_link" name="col_review_link" class="col_review_link no-print sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Review</th>
                                    <th id="col_paypal" name="col_paypal" class="col_paypal sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Paypal</th>
                                    <th id="col_order_number" name="col_order_number" class="col_order_number sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Order Number</th>
                                    <th id="col_screen" name="col_screen" class="col_screen no-print sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Screen</th>
                                    <th id="col_refund_image" name="col_refund_image" class="col_refund_image no-print"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Refund Image</th>
                                    <th id="col_client_profile" name="col_client_profile"
                                        class="col_client_profile no-print sorting" tabindex="0" aria-controls="example2"
                                        rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Client Profile
                                    </th>
                                    <th id="col_product_name" name="col_product_name" class="col_product_name sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Product Name</th>
                                    <th id="col_store" name="col_store" class="col_store sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Store</th>
                                    <th id="col_feedback" name="col_feedback" class="col_feedback sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Feedback</th>
                                    <th id="col_perc_refund" name="col_perc_refund" class="col_perc_refund sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">% Refund</th>
                                    @if (auth()->user()->user_type == 'agent')
                                        <th id="col_product_link" name="col_product_link" class="col_product_link sorting"
                                            tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Product Link</th>
                                    @endif
                                    @if (auth()->user()->user_type == 'admin')
                                        <th id="col_sel_man" name="col_sel_man" class="col_sel_man" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Seller / Manager
                                        </th>
                                    @elseif (auth()->user()->user_type == 'manager')
                                        <th id="col_seller" name="col_seller" class="col_seller sorting" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Seller</th>
                                    @elseif (auth()->user()->user_type == 'agent')
                                        <th id="col_manager" name="col_manager" class="col_manager sorting" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Manager</th>
                                    @endif
                                    @if (auth()->user()->user_type != 'agent')
                                        <th id="col_asin" name="col_asin" class="col_asin sorting" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">ASIN</th>
                                    @endif
                                    @if (in_array(auth()->user()->user_type, ['seller', 'manager', 'admin']))
                                        <th id="col_agent" name="col_agent" class="col_agent sorting" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Agent</th>
                                    @endif
                                    <th id="col_review_date" name="col_review_date" class="col_review_date sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Review date</th>
                                    <th id="col_refund_date" name="col_refund_date" class="col_refund_date sorting"
                                        tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Refund date</th>
                                    @if (auth()->user()->user_type != 'seller')
                                        <th id="col_agent_comm" name="col_agent_comm" class="col_agent_comm" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Agent comm.</th>
                                    @endif
                                    @if (in_array(auth()->user()->user_type, ['manager', 'admin']))
                                        <th id="col_tot_comm" name="col_tot_comm" class="col_tot_comm" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Tot. comm.</th>
                                    @endif
                                    <th id="col_note" name="col_note" class="col_note sorting" tabindex="0"
                                        aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">Note</th>
                                    @if (auth()->user()->user_type == 'agent')
                                        <th id="col_agent_note" name="col_agent_note" class="col_agent_note sorting"
                                            tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending">Agent Note</th>
                                    @endif
                                    @if (auth()->user()->user_type != 'seller')
                                        <th id="col_delete" name="col_delete" class="col_delete no-print no-export" tabindex="0"
                                            aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending"
                                            aria-label="Rendering engine: activate to sort column descending"></th>
                                    @endif

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @yield('modals')
@endsection

@section('css')
    @parent
    <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/select/1.3.1/css/select.bootstrap4.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />
    <style>
        #more_info_deleted.deleted_filter_on {
            color: #ff0000cf;
        }

        #ordersTable .deleted_filter_on {
            background-color: #ff00003d;
        }

        p#filters_text {
            text-align: center;
        }

        div.dummyhbar_wrapper {
            position: fixed;
            top: 10px;
            z-index: 1000;
            overflow-x: scroll;
            overflow-y: hidden;
            border: 0px;
        }

        /* width */
        div.dummyhbar_wrapper::-webkit-scrollbar {
            width: 14px;
        }

        /* Track */
        div.dummyhbar_wrapper::-webkit-scrollbar-track {
            box-shadow: inset 0 0 4px grey;
            border-radius: 10px;
        }

        /* Handle */
        div.dummyhbar_wrapper::-webkit-scrollbar-thumb {
            background: #007bff;
            border-radius: 10px;
        }

        /* Handle on hover */
        div.dummyhbar_wrapper::-webkit-scrollbar-thumb:hover {
            background: #004cff;
        }

        div.resp-table.tablerow::-webkit-scrollbar {
            display: none;
        }

        div.resp-table.tablerow {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .dummyhbar {
            height: 1px;
        }

        .show_table {
            font-size: smaller !important;
            text-align: center;
        }

        .show_table tr {
            padding: 4px;
        }

        #ordersTable::-webkit-scrollbar {
            display: none !important;
        }

        #ordersTable {
            display: inline-table !important;

            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }

        #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;
        }

        #ordersTable_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;
        }

        .ordered-span {
            background-color: #ffc107 !important;
        }

        .reviewed-span {
            background-color: #dc3545 !important;
        }

        .forwarded-span {
            background-color: #39365d !important;
            color: white !important;
        }

        .refunded-span {
            background-color: #28a745 !important;
        }

        #ImageZoomModal.modal {
            background-color: #020202ab !important;
        }

        .modal {
            background-color: transparent !important;
        }

        .swal2-container {
            z-index: 2002 !important;
        }

        .agent-note-btn {
            background-color: #17a2b8;
        }

        .agent-note-btn>i.fas {
            color: white;
        }

        #more_info_deleted {
            cursor: pointer;
        }

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

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

        .order-edit-img {
            max-width: 100%;
            max-height: 300px;
            display: block;
            margin: 0 auto;
        }

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

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

        .orders_state_button {
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

        .orders_state_button:hover {
            background-color: #138496;
            border-color: #117a8b;
        }

        .filter_btn {
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

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

        .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 {
            display: block;
            width: 100%;
            overflow-x: auto;
        }

        #ordersTable td {
            vertical-align: middle;
        }

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


        img.image-zoom-on-click {
            max-width: 200px;
            max-height: 100px;
            width: auto;
            height: auto;

            border-radius: 4%;
            cursor: pointer;
            transition: 0.3s;
        }

        img.image-zoom-on-click:hover {
            opacity: 0.7;
        }

        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 2000;
            /* Sit on top */
            padding-top: 60px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.9);
            /* Black w/ opacity */
        }

        .modal-content {
            margin: auto;
            display: block;
            width: auto;
            max-width: 100vw;
            height: auto;
            max-height: 100% !important;
        }

        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 4px;
            height: 100px;
        }

        .modal-content,
        #caption {
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        .close_img {
            position: absolute;
            top: 20px;
            right: 16px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close_img:hover,
        .close_img:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        @media only screen and (max-width: 700px) {
            .modal-content {
                max-height: 80vh;
                width: auto;
                max-width: 100vw;
            }
        }

        .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/select/1.3.1/js/dataTables.select.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.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/orders/f.js"></script>

    @if (auth()->user()->user_type == 'agent')
        <script type="text/javascript" src="/js/orders/f_agent.js"></script>
    @endif

    {{-- modals js --}}
    <script>
        $(document).on('show.bs.modal', '#showProductModal.modal', function (e) {
            let prod_id = e.relatedTarget.getAttribute('data-product-id');

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

        $(document).on('show.bs.modal', '#orderEditModal.modal', function (e) {
            let order_id = e.relatedTarget.id.match(/order_edit_(.*)/)[1];
            $.ajax({
                //async: true,
                type: 'get',
                url: '/orders/' + order_id + '/edit',
                data: 'order_id=' + order_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function (html) {
                    updateModal('orderEditModal', html);
                    $('#orderEditModal .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#orderEditModal .modal-header').css('cursor', 'move');
                    show_file_name('feedback_image');
                    show_file_name('order_screen_image');
                    check_review_type();
                    check_refund_image();
                    show_file_name('order_refund_image');
                }
            });
        });

        $(document).on('show.bs.modal', '#ordersStateModal.modal', function () {
            let selected = [];
            let col_id = getColumnIndex("col_id");
            $('#ordersTable').find('tr.selected').each(function () {
                selected.push(parseInt($(this).find(`td:nth-child(${col_id + 1})`).text()));
            });

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

        @if(auth()->user()->user_type != 'seller')
            $(document).on('show.bs.modal', '#deleteOrderModal.modal', function (e) {
                let order_id = e.relatedTarget.id.match(/order_delete_(.*)/)[1];
                $.ajax({
                    type: 'post',
                    url: '/orders/pre_delete',
                    data: 'order_id=' + order_id,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function (html) {
                        updateModal('deleteOrderModal', html);
                        $('#deleteOrderModal .modal-dialog').draggable({
                            handle: ".modal-header"
                        });
                        $('#deleteOrderModal .modal-header').css('cursor', 'move');
                    }
                });
            });
        @endif

        @if(in_array(auth()->user()->user_type, ['admin', 'manager']))
            $(document).on('show.bs.modal', '#restoreOrderModal.modal', function (e) {
                let order_id = e.relatedTarget.id.match(/order_restore_(.*)/)[1];
                $.ajax({
                    type: 'post',
                    url: '/orders/restore',
                    data: 'order_id=' + order_id,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function (html) {
                        updateModal('restoreOrderModal', html);
                        $('#restoreOrderModal .modal-dialog').draggable({
                            handle: ".modal-header"
                        });
                        $('#restoreOrderModal .modal-header').css('cursor', 'move');
                    }
                });
            });
        @endif

        $(document).on('show.bs.modal', '#addEditReviewModal.modal', function (e) {
            let order_id = e.relatedTarget.id.match(/add_review_(.*)/)[1];
            $.ajax({
                type: 'post',
                url: '/orders/review/add',
                data: 'order_id=' + order_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function (html) {
                    updateModal('addEditReviewModal', html);
                    $('#addEditReviewModal .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#addEditReviewModal .modal-header').css('cursor', 'move');
                    check_review_type();
                    show_file_name('feedback_image');
                }
            });
        });

        $(document).on('show.bs.modal', '#addRefundModal.modal', function (e) {
            let order_id = e.relatedTarget.id.match(/add_refund_(.*)/)[1];
            $.ajax({
                type: 'post',
                url: '/orders/refund/add',
                data: 'order_id=' + order_id,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function (html) {
                    updateModal('addRefundModal', html);
                    $('#addRefundModal .modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                    $('#addRefundModal .modal-header').css('cursor', 'move');
                    show_file_name('order_refund_image');
                }
            });
        });
    </script>

    <script>
        async function tableHorizontalBar(table_name) {
            await sleep(1000);

            if (document.getElementsByClassName('dummyhbar').length === 0) {
                $('<div class="dummyhbar_wrapper"> <div class="dummyhbar"> </div> </div>').insertAfter(`#${table_name}_wrapper > div:first-child`);

                $('div.dummyhbar_wrapper').width($('div.resp-table.tablerow').width() * 0.996);
                $('div.dummyhbar').width($(`table#${table_name}`).width());

                $('div.dummyhbar_wrapper').on('scroll', function () {
                    $(`#${table_name}_wrapper > div:nth-child(3)`).scrollLeft($(this).scrollLeft())

                    $('div.dummyhbar').width($(`table#${table_name}`).width());
                    $('div.dummyhbar_wrapper').width($('div.resp-table.tablerow').width() * 0.996);
                });

                $(`#${table_name}_wrapper > div:nth-child(3)`).on('scroll', function () {
                    $('div.dummyhbar_wrapper').scrollLeft($(this).scrollLeft());
                });
            }
        }

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

                let filters = [];

                let country = localStorage.getItem('orders_selected_country_val');
                let seller = localStorage.getItem('orders_selected_seller_val');
                let agent = localStorage.getItem('orders_selected_agent_val');

                @if (auth()->user()->user_type == 'admin')
                    let manager = localStorage.getItem('orders_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('#ordersTable_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>' +