@extends('layouts.admin')


@section('style')
@endSection

@section('script')


    <script>
        $(function () {

            var t = $('#voucher_series_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                pageLength: -1,
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
            });


            var t1 = $('#voucher_series_table_sku').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                pageLength: -1,
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
            });

            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();

            t1.on( 'order.dt search.dt', function () {
                t1.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();
        });

    </script>

@endSection

@section('content')


    <!-- Content Header (Page header) -->
    @php
        $page_title = 'Voucher Download and Use Rate';
    @endphp

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#by-cycle" data-toggle="tab">By Cycle</a></li>
                        {{--<li><a href="#by-store" data-toggle="tab">By Store</a></li>--}}
                        <li><a href="#by-sku" data-toggle="tab">By SKU</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="tab-pane active" id="by-cycle">
                            <div class="col-md-12">
                                <div class="">
                                    {{--<div class="card-header" style="height: 50px;">--}}
                                        {{--<h3 class="card-title">Vocuhers Download </h3>--}}

                                        {{--<div class="text-right" style="position: absolute; float: right; margin-top: 0; margin-bottom: 0; top: 15px; right: 10px;">--}}
                                        {{--<a role='button' href="{{ route('import_voucher_series') }}" class="btn btn-sm btn-info float-right">Import</a>--}}

                                        {{--<button class="btn btn-sm btn-primary">Import</button>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                    <!-- /.card-header -->
                                    <div class="card-body table-responsive p-0">

                                        <table id="voucher_series_table" class="table table-bordered table-hover dataTable">
                                            <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>Redemption Period</th>
                                                <th>Total Download (#)</th>
                                                <th>Total Used (#)</th>
                                                {{--<th>Used Rate (%)</th>--}}
                                                <th>Business Account</th>
                                                <th>Unique Download (#)</th>
                                                <th>Unique Used (#)</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($voucher_series as $series)
                                                <tr>
                                                    <td></td>
                                                    <td>{{ date('d/m/Y', strtotime($series['redeem_start'])) }} - {{ date('d/m/Y', strtotime($series['redeem_end'])) }}</td>
                                                    <td>{{$series['redeem_count']}}</td>
                                                    <td>{{$series['use_count']}}</td>
                                                    {{--<td>{{ $series['redeem_count'] != 0 ? number_format( (($series['use_count']/$series['redeem_count']) *100), 2, '.', '') : 0}}</td>--}}
                                                    <td>{{$series['business_account_id'] == '1' ? 'prong1' : 'prong2'}}</td>
                                                    <td>{{$series['unique_redeem_count']}}</td>
                                                    <td>{{$series['unique_use_count']}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                            {{--<tfoot>--}}
                                            {{--<tr>--}}
                                            {{--<th>No.</th>--}}
                                            {{--<th>Voucher Series</th>--}}
                                            {{--<th>Title</th>--}}
                                            {{--<th>Retail Store</th>--}}
                                            {{--<th>Downloaded</th>--}}
                                            {{--<th>Used</th>--}}
                                            {{--<th>Redemption Period</th>--}}
                                            {{--<th>Created Date</th>--}}
                                            {{--</tr>--}}
                                            {{--</tfoot>--}}
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="by-sku">
                            <div class="col-md-12">
                                <div class="">
                                {{--<div class="card-header" style="height: 50px;">--}}
                                {{--<h3 class="card-title">Vocuhers Download </h3>--}}

                                {{--<div class="text-right" style="position: absolute; float: right; margin-top: 0; margin-bottom: 0; top: 15px; right: 10px;">--}}
                                {{--<a role='button' href="{{ route('import_voucher_series') }}" class="btn btn-sm btn-info float-right">Import</a>--}}

                                {{--<button class="btn btn-sm btn-primary">Import</button>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                <!-- /.card-header -->
                                    <div class="card-body table-responsive p-0">

                                        <table id="voucher_series_table_sku" class="table table-bordered table-hover dataTable">
                                            <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>Name</th>
                                                <th>Total Download (#)</th>
                                                <th>Total Used (#)</th>
                                                {{--<th>Used Rate (%)</th>--}}
                                                {{--<th>Business Account</th>--}}
                                                <th>Unique Download (#)</th>
                                                <th>Unique Used (#)</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($voucher_stat_by_sku as $stat)
                                                <tr>
                                                    <td></td>
                                                    <td>{{ $stat['name'] }}</td>
                                                    <td>{{ $stat['redeem_count']}}</td>
                                                    <td>{{ $stat['use_count']}}</td>
                                                    {{--<td>{{ $series['redeem_count'] != 0 ? number_format( (($series['use_count']/$series['redeem_count']) *100), 2, '.', '') : 0}}</td>--}}
{{--                                                    <td>{{$series['business_account_id'] == '1' ? 'prong1' : 'prong2'}}</td>--}}
                                                    <td>{{ $stat['unique_redeem_count']}}</td>
                                                    <td>{{ $stat['unique_use_count']}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                            {{--<tfoot>--}}
                                            {{--<tr>--}}
                                            {{--<th>No.</th>--}}
                                            {{--<th>Voucher Series</th>--}}
                                            {{--<th>Title</th>--}}
                                            {{--<th>Retail Store</th>--}}
                                            {{--<th>Downloaded</th>--}}
                                            {{--<th>Used</th>--}}
                                            {{--<th>Redemption Period</th>--}}
                                            {{--<th>Created Date</th>--}}
                                            {{--</tr>--}}
                                            {{--</tfoot>--}}
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane" id="by-store">

                        </div>
                    </div>

                </div>
            </div>


        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

@endsection