@extends('layouts.master-vnext')
@inject('dateranges', 'App\Services\DateRangePickerService')

@section('page-title')
Agent: {{ $productName }}
@endsection

@section('content')

<div class="row">
    <div class="col-md-4">
        <div class="box">
            <div class="box-body">
                <form action="{{ action("Report\AgentReportController@index") }}" method="GET" class="form-inline">
                    <div class="form-group has-feedback" style="margin-left: 15px;">
                        <input type="text" class="form-control" id="filter-datetimerange" style="width: 100%;">
                        <span class="fa fa-calendar form-control-feedback"></span>
                    </div>

                    <input type="hidden" id="filterFrom" name="filterFrom" />
                    <input type="hidden" id="filterTo" name="filterTo" />
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
<div class="col-md-4">
<div class="box">

    <div class="box-header with-border">
        <h3 class="box-title">Sales by division</h3>
    </div>

    <div class="box-body no-padding">

    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th>Division</th>
                <th class="text-right text-bold">Amount</th>
            </tr>
        </thead>

        <tbody>

        @foreach($divisions->sortBy('sort_order') as $division)
        <tr>
            <td>
                {{ $division->name }}
            </td>

            <td class="text-right">
                @include('report.agent.detail-link', ['divisionId' => $division->id, 'filterFrom' => $filterFrom, 'filterTo' => $filterTo, 'productName' => $productName])
            </td>
        </tr>
        @endforeach
        </tbody>

        <tfoot>
            <td>
                Totals
            </td>

            <td class="text-right">
                @include('report.agent.detail-link', ['filterFrom' => $filterFrom, 'filterTo' => $filterTo, 'productName' => $productName])
            </td>

        </tfoot>
    </table>
    </div>
</div>
</div>


@endsection

@section('js')
<script type="text/javascript">
$('#filter-datetimerange').daterangepicker({
    timePicker: true,
    timePicker24Hour: true,
    showDropdowns: true,

    startDate: moment('{{ $filterFrom->setTimezone('Asia/Manila')->toIso8601String() }}'),
    endDate: moment('{{ $filterTo->setTimezone('Asia/Manila')->toIso8601String() }}'),

    ranges: {
        @foreach($dateranges->default() as $range)
        '{{ $range["label"] }}': [moment('{{ $range["start"]->toIso8601String() }}'), moment('{{ $range["end"]->toIso8601String() }}')],
        @endforeach
    },
});

$('#filter-datetimerange').on('apply.daterangepicker', function(ev, picker) {
    $('#filterFrom').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
    $('#filterTo').val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));

    $(this).closest('form').submit();
});

</script>
@endsection