@extends('layouts.adminlte.adminlte')
@include('notifications.admin_msg_show')
@include('notifications.first_login_agreement')

@section('title')
    Products - {{strtoupper($country)}}
@endsection

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

@section('4boxes')
    <div class="row">
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div id="box_total_products" class="small-box bg-info">
                <div class="inner">
                    <h3>0</h3>
                    <p>Total Products</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_enabled_products" class="small-box bg-success">
                <div class="inner">
                    <h3>0</h3>
                    <p>Enabled Products</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                <a id="more_info_enabled" 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_{{auth()->user()->user_type == 'agent' ? 'finished' : 'disabled'}}_products" class="small-box bg-warning">
                <div class="inner">
                    <h3>0</h3>
                    <p>{{auth()->user()->user_type == 'agent' ? 'Finished Products For Today' : 'Disabled Products'}}</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
                <a id="more_info_{{auth()->user()->user_type == 'agent' ? 'finished' : 'disabled'}}" 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_sold_out_products" class="small-box bg-danger">
                <div class="inner">
                    <h3>0</h3>
                    <p>Sold Out Products</p>
                </div>
                <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                </div>
                <a id="more_info_sold_out" 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>
@endsection

@section('table')
<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="productsTable" class="table resp-table table-striped small table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                        <thead>
                            <tr role="row">
                                @if ($country == 'all')
                                    <th id="col_country" class="col_country sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending"></th>
                                @endif
                                <th id="col_state" class="col_state sorting no-export" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">State</th>
                                @if (in_array(auth()->user()->user_type, ['admin', 'agent', 'manager']))
                                    <th id="col_book_order" class="col_book_order no-export" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Book/Order</th>
                                @endif
                                <th id="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>
                                <th id="col_name" class="col_name sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">Name</th>
                                <th id="col_image" class="col_image no-export" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Image</th>
                                <th id="col_link" class="col_link no-export" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Link</th>
                                @if(in_array(auth()->user()->user_type, ['admin', 'manager', 'seller']))
                                    <th id="col_asin" class="col_asin sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">ASIN</th>
                                @endif
                                @if(in_array(auth()->user()->user_type, ['admin', 'manager']))
                                        <th id="col_seller" class="col_seller sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Seller</th>
                                @endif
                                <th id="col_seller_shop" class="col_seller_shop sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Seller shop</th>
                                <th id="col_manager" class="col_manager sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Manager</th>
                                <th id="col_total" class="col_total" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Total</th>
                                <th id="col_daily" class="col_daily" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Daily</th>
                                <th id="col_available" class="col_available" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Available</th>
                                <th id="col_paypal_fee" class="col_paypal_fee sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Paypal fee</th>
                                <th id="col_review_type" class="col_review_type sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Review type</th>
                                <th id="col_feedback" class="col_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_perc_refund" class="col_perc_refund" tabindex="0" rowspan="1" colspan="1">% Refund</th>
                                <th id="col_note" class="col_note sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Note</th>
                                @if (auth()->user()->user_type != 'seller')
                                    <th id="col_agent_comm" class="col_agent_comm" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Agent Comm.</th>
                                    @if (auth()->user()->user_type != 'agent')
                                        <th id="col_total_comm" class="col_total_comm" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Total Comm.</th>
                                    @endif
                                @endif
                                @if (in_array(auth()->user()->user_type, ['admin', 'manager', 'seller']))
                                    <th id="col_added_by" class="col_added_by" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Added by</th>
                                @endif
                                @if (in_array(auth()->user()->user_type, ['admin', 'manager']))
                                        <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>
@endsection

@section('modals')
    <div id="imgModal" class="modal">
        <span class="close_img">&times;</span>
        <img class="modal-content" id="imgModalContent">
        <div id="ImgModalCaption"></div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="bookingModal" class="modal" tabIndex="-1" 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 id="orderModal" 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">Product Info</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="deleteProductModal" 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="stateChangeModal" 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="editProductModal" 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="multiActionsModal" 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="deleteProductModal" 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="restoreProductModal" 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('content')
    @yield('4boxes')
    @yield('table')
    @yield('modals')
@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/select/1.3.1/js/dataTables.select.min.js"></script>
    <script 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/products/f.js"></script>

    @if (in_array(auth()->user()->user_type, ['admin', 'manager', 'seller']))
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/bloodhound.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script type="text/javascript" src="/js/products/typeahead.js"></script>

        @if(auth()->user()->user_type != 'seller')
        <script>
            function showFiltersText() {
                $('#filters_text').remove();

                let filters = [];

                @if($country == 'all')
                let country = localStorage.getItem('products_selected_country_val');
                @else
                let country = null;
                @endif

                let seller = localStorage.getItem('products_selected_seller_val');

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

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

                @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('#productsTable_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:
                        @if($country == 'all')
                        '<div class="form-group">' +
                        '<select class="custom-select" name="filter_country_select" id="filter_country_select">' +
                        '<option value="" selected>Select a country</option>' +