@extends('layouts.app')
@section('title', __('lang_v1.bounce_rate'))

@section('content')
<section class="content-header">
    <h1><i class="fa fa-user-times"></i> @lang('lang_v1.bounce_rate')
        <small>@lang('lang_v1.bounce_rate_desc')</small>
    </h1>
</section>

<section class="content">
    @include('layouts.partials.error')

    {{-- Scope. Every figure and chart below obeys these, so the board reads for the
         whole chain, one state, one store, or one kind of failure. --}}
    <div class="box box-solid">
        <div class="box-body">
            {!! Form::open(['route' => 'bounce-rate.index', 'method' => 'get', 'class' => 'form-inline']) !!}
                {{-- Native date inputs rather than the bootstrap-datepicker used
                     elsewhere: that one is configured globally to the business's
                     DISPLAY format, and these values are parsed server-side, so a
                     dd/mm/yyyy would be read as an American date or not at all.
                     type=date always submits ISO. --}}
                <div class="form-group">
                    {!! Form::label('start_date', __('report.start_date') . ':') !!}
                    {!! Form::date('start_date', $filters['start_date'] ?? null, ['class' => 'form-control', 'id' => 'start_date', 'style' => 'width:160px;']) !!}
                </div>
                <div class="form-group" style="margin-left:10px;">
                    {!! Form::label('end_date', __('report.end_date') . ':') !!}
                    {!! Form::date('end_date', $filters['end_date'] ?? null, ['class' => 'form-control', 'id' => 'end_date', 'style' => 'width:160px;']) !!}
                </div>
                <div class="form-group" style="margin-left:10px;">
                    {!! Form::label('state', __('business.state') . ':') !!}
                    {!! Form::select('state', ['' => __('lang_v1.all_states')] + $states->mapWithKeys(fn($s) => [$s => $s])->all(),
                        $filters['state'] ?? null, ['class' => 'form-control']) !!}
                </div>
                <div class="form-group" style="margin-left:10px;">
                    {!! Form::label('business_id', __('lang_v1.store') . ':') !!}
                    {!! Form::select('business_id', ['' => __('lang_v1.all_stores')] + $businesses->all(),
                        $filters['business_id'] ?? null, ['class' => 'form-control select2', 'style' => 'width:220px;']) !!}
                </div>
                <div class="form-group" style="margin-left:10px;">
                    {!! Form::label('bounce_type', __('lang_v1.bounce_reason') . ':') !!}
                    {!! Form::select('bounce_type', [
                            '' => __('lang_v1.all'),
                            'out_of_stock' => __('lang_v1.bounce_out_of_stock'),
                            'not_listed' => __('lang_v1.bounce_not_listed'),
                        ], $filters['bounce_type'] ?? null, ['class' => 'form-control']) !!}
                </div>
                <button type="submit" class="btn btn-primary" style="margin-left:10px;">
                    <i class="fa fa-filter"></i> @lang('messages.filter')
                </button>
                <a href="{{ route('bounce-rate.index') }}" class="btn btn-default">@lang('lang_v1.reset')</a>
            {!! Form::close() !!}
        </div>
    </div>

    {{-- The rate, and the three numbers needed to argue with it. Kept separate on
         purpose: the rate is the KPI, the count is the volume, the value is the
         business case, and the store count is the blast radius. --}}
    <div class="row">
        <div class="col-md-3 col-sm-6">
            @php
                // Banded rather than a single colour: a bounce rate is only
                // meaningful against a threshold, and a flat red on 0.4% would
                // train people to ignore it.
                $rate_class = $rate['rate'] >= 10 ? 'bg-maroon' : ($rate['rate'] >= 5 ? 'bg-orange' : 'bg-green');
            @endphp
            <div class="info-box {{ $rate_class }}">
                <span class="info-box-icon"><i class="fa fa-percent"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('lang_v1.bounce_rate')</span>
                    <span class="info-box-number">{{ $rate['rate'] }}%</span>
                    <span class="progress-description">
                        @lang('lang_v1.bounce_rate_of_requests', ['demand' => number_format($rate['demand'])])
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-maroon">
                <span class="info-box-icon"><i class="fa fa-user-times"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('lang_v1.total_bounces')</span>
                    <span class="info-box-number">{{ number_format($totals['bounces']) }}</span>
                    <span class="progress-description">
                        {{ number_format($totals['out_of_stock']) }} @lang('lang_v1.bounce_out_of_stock') &middot;
                        {{ number_format($totals['not_listed']) }} @lang('lang_v1.bounce_not_listed')
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-orange">
                <span class="info-box-icon"><i class="fa fa-rupee-sign"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('lang_v1.estimated_lost_sales')</span>
                    <span class="info-box-number">@format_currency($totals['lost_value'])</span>
                    <span class="progress-description">@lang('lang_v1.lost_sales_help_short')</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-navy">
                <span class="info-box-icon"><i class="fa fa-store"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('lang_v1.stores_affected')</span>
                    <span class="info-box-number">{{ $totals['stores'] }}</span>
                    <span class="progress-description">
                        {{ number_format($totals['products']) }} @lang('lang_v1.distinct_products')
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- What to do about it, in words. Generated only where the data supports it. --}}
    @if(!empty($insights))
        @component('components.widget', ['class' => 'box-solid', 'title' => __('lang_v1.what_this_means')])
            @foreach($insights as $i)
                @php
                    $cls = ['high' => 'alert-danger', 'medium' => 'alert-warning', 'info' => 'alert-info'][$i['severity']] ?? 'alert-info';
                    $icon = ['high' => 'fa-exclamation-circle', 'medium' => 'fa-exclamation-triangle', 'info' => 'fa-info-circle'][$i['severity']] ?? 'fa-info-circle';
                @endphp
                <div class="alert {{ $cls }}" style="margin-bottom:8px;">
                    <i class="fa {{ $icon }}"></i> {{ $i['text'] }}
                </div>
            @endforeach
        @endcomponent
    @endif

    @php
        // One empty-state block, reused wherever a chart has nothing to draw.
        $empty = '<div class="text-center text-muted" style="padding:60px 10px;"><i class="fa fa-chart-bar fa-2x" style="opacity:.25;"></i><p style="margin-top:10px;">'.__('lang_v1.chart_no_data').'</p></div>';
    @endphp

    <div class="row">
        <div class="col-md-8">
            <div class="box box-solid"><div class="box-body">
                @if($chart_has_data['trend']){!! $charts['trend']->container() !!}@else{!! $empty !!}@endif
                @unless($trend['sufficient'])
                    {{-- Never let three points imply a direction of travel. --}}
                    <p class="text-muted" style="margin-top:-8px;">
                        <i class="fa fa-info-circle"></i>
                        @lang('lang_v1.bounce_insufficient_trend', ['days' => $trend['days_of_data']])
                    </p>
                @endunless
            </div></div>
        </div>
        <div class="col-md-4">
            <div class="box box-solid"><div class="box-body">
                @if($chart_has_data['split']){!! $charts['split']->container() !!}@else{!! $empty !!}@endif
                <p class="text-muted" style="margin-top:-8px;">
                    <i class="fa fa-info-circle"></i> @lang('lang_v1.bounce_split_note')
                </p>
            </div></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-7"><div class="box box-solid"><div class="box-body">
            @if($chart_has_data['hour']){!! $charts['hour']->container() !!}@else{!! $empty !!}@endif
            <p class="text-muted" style="margin-top:-8px;">
                <i class="fa fa-info-circle"></i> @lang('lang_v1.bounce_hour_note')
            </p>
        </div></div></div>
        <div class="col-md-5"><div class="box box-solid"><div class="box-body">
            @if($chart_has_data['weekday']){!! $charts['weekday']->container() !!}@else{!! $empty !!}@endif
        </div></div></div>
    </div>

    <div class="row">
        <div class="col-md-7"><div class="box box-solid"><div class="box-body">
            @if($chart_has_data['product']){!! $charts['product']->container() !!}@else{!! $empty !!}@endif
        </div></div></div>
        <div class="col-md-5"><div class="box box-solid"><div class="box-body">
            @if($chart_has_data['state']){!! $charts['state']->container() !!}@else{!! $empty !!}@endif
        </div></div></div>
    </div>

    {{-- PREDICTIVE. The only part of the board that tells the buyer what to do
         BEFORE the sale is lost, rather than counting the ones already lost. --}}
    @component('components.widget', ['class' => 'box-danger', 'title' => __('lang_v1.bounce_forecast')])
        <p class="help-block">@lang('lang_v1.bounce_forecast_help')</p>
        @if($forecast->isEmpty())
            <p class="text-muted"><i class="fa fa-info-circle"></i> @lang('lang_v1.bounce_forecast_no_data')</p>
        @else
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="forecast_table" style="width:100%;">
                    <thead><tr>
                        <th>@lang('sale.product')</th>
                        <th class="text-right">@lang('lang_v1.weeks_observed')</th>
                        <th class="text-right">@lang('lang_v1.avg_per_week')</th>
                        <th>@lang('lang_v1.direction')</th>
                        <th class="text-right">@lang('lang_v1.projected_bounces_30d')</th>
                        <th class="text-right">@lang('lang_v1.projected_lost_value')</th>
                        <th class="text-right">@lang('lang_v1.suggested_qty')</th>
                        <th>@lang('lang_v1.confidence')</th>
                    </tr></thead>
                    <tbody>
                        @foreach($forecast as $f)
                            <tr>
                                <td>{{ $f->product_name }}</td>
                                <td class="text-right">{{ $f->observed_weeks }}</td>
                                <td class="text-right">{{ $f->avg_per_week }}</td>
                                <td>
                                    @if($f->direction === 'rising')
                                        <span class="label label-danger"><i class="fa fa-arrow-up"></i> @lang('lang_v1.rising')</span>
                                    @elseif($f->direction === 'falling')
                                        <span class="label label-success"><i class="fa fa-arrow-down"></i> @lang('lang_v1.falling')</span>
                                    @else
                                        <span class="label label-default"><i class="fa fa-minus"></i> @lang('lang_v1.flat')</span>
                                    @endif
                                </td>
                                <td class="text-right"><strong>{{ number_format($f->projected_bounces) }}</strong></td>
                                <td class="text-right">@format_currency($f->projected_lost_value)</td>
                                <td class="text-right"><strong>{{ number_format($f->suggested_qty) }}</strong></td>
                                <td>
                                    {{-- Confidence shown as a bar, not just a number: it is
                                         the difference between an order and a guess. --}}
                                    @php $conf_cls = $f->confidence >= 60 ? 'progress-bar-green' : ($f->confidence >= 30 ? 'progress-bar-yellow' : 'progress-bar-red'); @endphp
                                    <div class="progress progress-xs" style="margin-bottom:2px;">
                                        <div class="progress-bar {{ $conf_cls }}" style="width: {{ $f->confidence }}%"></div>
                                    </div>
                                    <small class="text-muted">{{ $f->confidence }}%</small>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    @endcomponent

    {{-- STORE LEAGUE TABLE. Volume alone just ranks the busy shops; the rate is
         what makes two stores of different sizes comparable, so both are shown. --}}
    @component('components.widget', ['class' => 'box-primary', 'title' => __('lang_v1.bounce_by_store')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="store_table" style="width:100%;">
                <thead><tr>
                    <th>@lang('lang_v1.store')</th>
                    <th>@lang('business.state')</th>
                    <th class="text-right">@lang('lang_v1.bounces')</th>
                    <th class="text-right">@lang('lang_v1.served_requests')</th>
                    <th class="text-right">@lang('lang_v1.bounce_rate')</th>
                    <th class="text-right">@lang('lang_v1.estimated_lost_sales')</th>
                    <th class="text-right">@lang('lang_v1.distinct_products')</th>
                    <th class="not-export">@lang('messages.action')</th>
                </tr></thead>
                <tbody>
                    @foreach($by_business as $b)
                        <tr>
                            <td>{{ $b->business_name }}</td>
                            <td>{{ $b->state }}</td>
                            <td class="text-right">{{ number_format($b->bounces) }}</td>
                            <td class="text-right">{{ number_format($b->served) }}</td>
                            <td class="text-right">
                                <span class="label {{ $b->rate >= 10 ? 'label-danger' : ($b->rate >= 5 ? 'label-warning' : 'label-success') }}">
                                    {{ $b->rate }}%
                                </span>
                            </td>
                            <td class="text-right">@format_currency($b->lost_value)</td>
                            <td class="text-right">{{ $b->products }}</td>
                            <td>
                                <a href="{{ route('bounce-rate.log', array_merge($filters, ['business_id' => $b->business_id])) }}"
                                   class="btn btn-xs btn-info"><i class="fa fa-search"></i> @lang('lang_v1.view_log')</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endcomponent

    {{-- STATE ROLL-UP. The geographic filter as a table, so a regional manager can
         read their own line without re-filtering. --}}
    @component('components.widget', ['class' => 'box-solid', 'title' => __('lang_v1.bounce_by_state')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="state_table" style="width:100%;">
                <thead><tr>
                    <th>@lang('business.state')</th>
                    <th class="text-right">@lang('lang_v1.stores')</th>
                    <th class="text-right">@lang('lang_v1.bounces')</th>
                    <th class="text-right">@lang('lang_v1.distinct_products')</th>
                    <th class="text-right">@lang('lang_v1.estimated_lost_sales')</th>
                    <th class="not-export">@lang('messages.action')</th>
                </tr></thead>
                <tbody>
                    @foreach($by_state as $s)
                        <tr>
                            <td>{{ $s->state }}</td>
                            <td class="text-right">{{ $s->stores }}</td>
                            <td class="text-right">{{ number_format($s->bounces) }}</td>
                            <td class="text-right">{{ $s->products }}</td>
                            <td class="text-right">@format_currency($s->lost_value)</td>
                            <td>
                                <a href="{{ route('bounce-rate.index', array_merge($filters, ['state' => $s->state])) }}"
                                   class="btn btn-xs btn-default"><i class="fa fa-filter"></i> @lang('lang_v1.drill_in')</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endcomponent

    {{-- THE BUYING LIST. Ranked by how often the chain had to say no. --}}
    @component('components.widget', ['class' => 'box-solid', 'title' => __('lang_v1.most_bounced_products')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="product_table" style="width:100%;">
                <thead><tr>
                    <th>@lang('sale.product')</th>
                    <th>@lang('product.sku')</th>
                    <th class="text-right">@lang('lang_v1.bounces')</th>
                    <th class="text-right">@lang('lang_v1.stores_affected')</th>
                    <th class="text-right">@lang('lang_v1.estimated_lost_sales')</th>
                    <th>@lang('lang_v1.last_bounced')</th>
                </tr></thead>
                <tbody>
                    @foreach($by_product as $p)
                        <tr>
                            <td>{{ $p->product_name }}</td>
                            <td>{{ $p->sku }}</td>
                            <td class="text-right">{{ number_format($p->bounces) }}</td>
                            <td class="text-right">{{ $p->stores }}</td>
                            <td class="text-right">@format_currency($p->lost_value)</td>
                            <td>{{ $p->last_bounced_at ? \Carbon::parse($p->last_bounced_at)->format('d M Y H:i') : '' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endcomponent

    {{-- RANGE EXTENSION. What customers ask for that the chain does not sell at
         all — a different decision to a reorder, so it gets its own table. --}}
    @if($unlisted->isNotEmpty())
        @component('components.widget', ['class' => 'box-warning', 'title' => __('lang_v1.unlisted_demand')])
            <p class="help-block">@lang('lang_v1.unlisted_demand_help')</p>
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="unlisted_table" style="width:100%;">
                    <thead><tr>
                        <th>@lang('lang_v1.searched_for')</th>
                        <th class="text-right">@lang('lang_v1.times_asked')</th>
                        <th class="text-right">@lang('lang_v1.stores_affected')</th>
                        <th>@lang('lang_v1.last_bounced')</th>
                    </tr></thead>
                    <tbody>
                        @foreach($unlisted as $u)
                            <tr>
                                <td>{{ $u->term }}</td>
                                <td class="text-right">{{ number_format($u->bounces) }}</td>
                                <td class="text-right">{{ $u->stores }}</td>
                                <td>{{ $u->last_bounced_at ? \Carbon::parse($u->last_bounced_at)->format('d M Y H:i') : '' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endcomponent
    @endif

    <a href="{{ route('bounce-rate.log', $filters) }}" class="btn btn-default">
        <i class="fa fa-list"></i> @lang('lang_v1.view_full_bounce_log')
    </a>
</section>
@endsection

@section('javascript')
@if($chart_has_data['trend']){!! $charts['trend']->script() !!}@endif
@if($chart_has_data['split']){!! $charts['split']->script() !!}@endif
@if($chart_has_data['hour']){!! $charts['hour']->script() !!}@endif
@if($chart_has_data['weekday']){!! $charts['weekday']->script() !!}@endif
@if($chart_has_data['product']){!! $charts['product']->script() !!}@endif
@if($chart_has_data['state']){!! $charts['state']->script() !!}@endif
<script type="text/javascript">
    $(document).ready(function () {
        // Standard DataTables everywhere: pagination, search and export come from
        // the project defaults.
        $('#forecast_table').DataTable({ order: [[4, 'desc']] });
        $('#store_table').DataTable({ order: [[2, 'desc']] });
        $('#state_table').DataTable({ order: [[2, 'desc']] });
        $('#product_table').DataTable({ order: [[2, 'desc']] });
        $('#unlisted_table').DataTable({ order: [[1, 'desc']] });
    });
</script>
@endsection