@if ($amazon_sellers)
<div class="pos-tab-content active">
    <div class="row">
        {{-- <div class="col-sm-3">
            <div class="form-group">
                {!! Form::label('amazon_enable', __('business.enable-disable') . ':') !!}
                <div class="checkbox">                    
                    <label>
                    {!! Form::radio('amazon_enable', '1',  $marketplace_settings['amazon_enable'] == 1 ? true : false, 
                        [ 'class' => 'input-iradio', 'onchange' => 'get_input(this.value, "amazon")']); !!} {{ __( 'business.enable' ) }}
        {!! Form::radio('amazon_enable', '0', $marketplace_settings['amazon_enable'] == 0 ? true : false,
        [ 'class' => 'input-iradio', 'onchange' => 'get_input(this.value, "amazon")']); !!} {{ __( 'business.disable' ) }}

        </label>
    </div>
</div>
</div> --}}
{{-- <div class="col-sm-4">
            <div class="form-group">
                {!! Form::label('amazon_api_url', __('business.api_url') . ':') !!}
                {!! Form::text('amazon_api_url', $marketplace_settings['amazon_api_url'] ?? null, ['class' => 'form-control']); !!}
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                {!! Form::label('amazon_api_access_token', __('business.api_access_token') . ':') !!}
                {!! Form::text('amazon_api_access_token', $marketplace_settings['amazon_api_access_token'] ?? null, ['class' => 'form-control']); !!}
            </div>
        </div> --}}
{{-- <div id="amazon_space" class="col-sm-12">&nbsp;</div> --}}
<div class="col-sm-4" id="location_amazon">
    <div class="form-group" style="display: flex">
        {!! Form::label('product_locations_amazon', __('business.amazon_store') . ':', ['style' => 'width: 75%; margin-top: 6px;']) !!}
        {!! Form::select('product_locations_amazon[]', $amazon_sellers_dropdown, null, ['class' => 'form-control select2', 'id' => 'product_locations_amazon', 'style' => 'width: 100%', 'onchange' => 'getSellerPerformanceReport(this.value)']) !!}
    </div>
</div>
<div class="col-lg-8" style="display: flex">
    <button type="button" class="btn btn-primary no-print" id="amazon-dashboard-button" onclick="updateSellerPerformanceReport($('#product_locations_amazon').val())"><i class="fa fa-microchip"></i> Update Dashboard</button>&nbsp;&nbsp; <h4 style="margin-left: 10px;" id="updated_at_dashboard" class="red-cross-table-detail">Updated at : </h4>
</div>
{{-- <div class="col-sm-4">
            <div class="form-group">
                {!! Form::label('amazon_api_key', __('business.api_key') . ':') !!}
                {!! Form::text('amazon_api_key', $marketplace_settings['amazon_api_key'] ?? null, ['class' => 'form-control']); !!}
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                {!! Form::label('amazon_api_secret', __('business.api_secret') . ':') !!}
                {!! Form::text('amazon_api_secret', $marketplace_settings['amazon_api_secret'] ?? null, ['class' => 'form-control']); !!}
            </div>
        </div> --}}
<div class="clearfix"></div>
<div class="row">
    <div class="col-lg-3">
        <h5 style="text-align: center;"><strong>{{ __('business.performance_metrics') }}</strong></h5>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-yellow" style="margin-top: 20px; width: 44px; height: 44px;"><i class="fa fa-truck"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important; text-align: center;">
                    <span class="info-box-text-amazon">{{ __('business.late_shipment_rate') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 12px; text-align: left;">
                        Target&nbsp;&nbsp;: <span id="lateShipmentTarget">0%</span><br>
                        Rate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <span id="lateShipmentRate">0%</span>
                    </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-orange" style="margin-top: 30px; width: 44px; height: 44px;"><i class="fas fa-minus-circle"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important; text-align: center;">
                    <span class="info-box-text-amazon">{{ __('business.order_defect_rate') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 12px; text-align: left;">
                        <table style="text-align: center; width: 100%;">
                            <tr>
                                <td style="width: 5%">&nbsp;</td>
                                <td>AFN</td>
                                <td>MFN</td>
                            </tr>
                            <tr>
                                <td style="text-align: left;">Target&nbsp;&nbsp;:</td>
                                <td id="orderDefectTargetAFN">0%</td>
                                <td id="orderDefectTargetMFN">0%</td>
                            </tr>
                            <tr>
                                <td style="text-align: left;">Rate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</td>
                                <td id="orderDefectRateAFN">0%</td>
                                <td id="orderDefectRateMFN">0%</td>
                            </tr>
                        </table>
                    </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-green" style="margin-top: 20px; width: 44px; height: 44px;"><i class="fa fa-truck"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important; text-align: center;">
                    <span class="info-box-text-amazon">{{ __('business.on_time_delivery_rate') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 12px; text-align: left;">
                        Target&nbsp;&nbsp;: <span id="onTimeDeliveryTarget">0%</span><br>
                        Rate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <span id="onTimeDeliveryRate">0%</span>
                    </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>

    </div>
    <div class="col-lg-3">
        <h5 style="text-align: center"><strong>{{ __('business.inventory_metrics') }}</strong></h5>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-aqua" style="margin-top: 10px; width: 44px; height: 44px;"><i class="ion ion-ios-list-outline"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important;">
                    <span class="info-box-text-amazon">{{ __('business.total_product') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 15px;">46,517</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-aqua" style="margin-top: 10px; width: 44px; height: 44px;"><i class="ion ion-document"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important;">
                    <span class="info-box-text-amazon">{{ __('business.active_product') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 15px;">14,862</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <div class="col-xs-12 col-custom" style="padding-left: 0;">
            <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                <span class="info-box-icon bg-aqua" style="margin-top: 10px; width: 44px; height: 44px;"><i class="ion ion-ios-folder-outline"></i></span>

                <div class="info-box-content" style="margin-left: 40px !important;">
                    <span class="info-box-text-amazon">{{ __('business.category_count') }}</span>
                    <span class="info-box-number total_sell" style="font-size: 15px;">18</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
    </div>
    <div class="col-lg-6">
        <!-- <h5><strong>Top 5 Categories</strong></h5>
                <div class="box box-warning">
                    <div class="box-body">
                        <table class="table table-borderless w-100">
                            <thead>
                                <tr>
                                    <th style="font-size: medium"><strong>Category</strong></th>
                                    <th style="font-size: medium"><strong>Product Count</strong></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-size: small">Books</td>
                                    <td style="font-size: small">24,345</td>
                                </tr>
                                <tr>
                                    <td style="font-size: small">CDs & Vinyl</td>
                                    <td style="font-size: small">18,876</td>
                                </tr>
                                <tr>
                                    <td style="font-size: small">Movies & TV</td>
                                    <td style="font-size: small">2,654</td>
                                </tr>
                                <tr>
                                    <td style="font-size: small">Software</td>
                                    <td style="font-size: small">432</td>
                                </tr>
                                <tr>
                                    <td style="font-size: small">Sports & Outdoors</td>
                                    <td style="font-size: small">210</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>  -->
        <input type="hidden" id="aggregate_by" value="{{ $aggregateBy ?? 'MONTH' }}">
        <input type="hidden" id="first_date_sales_traffic" value="{{ $firstDate ?? date('Y-m-01') }}">
        <input type="hidden" id="today_sales_traffic" value="{{ $lastDate ?? date('Y-m-d') }}">
        <div class="container">
            <div class="row" style="display: none;">
                <div class="col-xs-6 col-custom" style="padding-left: 0;">
                    <span style="text-align: center; display:block;">📊 Sales Summary ({{ $firstDate }} - <span id="last_date_updated_at_sales">{{$lastDate}}</span>)</span>
                    <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                        <div class="info-box-content" style="margin-left: 40px !important;">
                            <p><strong>💰 Ordered Product Sales:</strong> $<span id="sales_order_product_amount"></span></p>
                            <p><strong>📦 Orders Shipped:</strong> <span id="sales_order_shipped"></span></p>
                            <p><strong>📊 Average Sales Per Order:</strong> $ <span id="sales_average_sales_per_order"></span></p>
                            <p><strong>📈 Average Selling Price:</strong> $<span id="sales_average_selling_price"></span></p>
                            <p><strong>🔄 Refund Rate:</strong> <span id="sales_refund_rate"></span>%</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6 col-custom" style="padding-left: 0;">
                    <span style="text-align: center; display:block;">📈 Traffic Summary ({{ $firstDate }} - <span id="last_date_updated_at_traffic">{{$lastDate}}</span>)</span>
                    <div class="info-box info-box-new-style" style="box-shadow: 4px 4px 0px rgb(19 103 199 / 15%) !important; margin-bottom: 20px !important; min-height: 60px;">
                        <div class="info-box-content" style="margin-left: 40px !important;">
                            <p><strong>🖥️ Browser Page Views:</strong> <span id="sales_browser_page_views"></span></p>
                            <p><strong>📱 Mobile App Page Views:</strong> <span id="sales_mobile_app_page_views"></span></p>
                            <p><strong>🏆 Buy Box Percentage:</strong> <span id="sales_buy_box_percentage"></span>%</p>
                            <p><strong>💬 Feedback Received:</strong> <span id="sales_feedback_received"></span></p>
                            <p><strong>❌ Negative Feedback:</strong> <span id="sales_negative_feedback"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12 mb-10">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilterAmazon"><i class="fa fas fa-cog"></i><i class="fa fa-caret-down"></i> Amazon Sync Settings</a>
</div>
</div>
</div>
@else
<div class="text-center active" style="margin-bottom: 20px">
    <h2>Connect Your Amazon Seller Account</h2>
    <p>Click the button below to authorize our app to access your Amazon seller data.</p>
    <a href="{{ route('amazon.auth.redirect') }}" class="btn-amazon btn-primary-amazon btn-lg-amazon">
        Authorize with Amazon
    </a>
</div>
@endif