@extends('layouts.admin')

@section('style')
@endSection

@php
    $showPasscodeAndUserCount = config('sys.reg_by_passcode_only');
@endphp

@section('script')
    <script>
        $(function () {

            var vouchers_table = $('#vouchers_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'justify-content-center justify-content-sm-between row'<''l><'col text-right'f><'#import_export.text-right'B>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
                pageLength: 25,
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                processing: true,
                serverSide: true,
                ajax: '{{ request()->url() }}',
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'serial', name: 'serial'},
                    {data: 'redemption_code', name: 'redemption_code', orderable: false, searchable: false},
                    {data: 'user_uid', name: 'user_uid', orderable: false, searchable: false},
                    @if($showPasscodeAndUserCount)
                    {data: 'reg_order', name: 'reg_order', orderable: false, searchable: false},
                    {data: 'reg_code', name: 'reg_code', orderable: false, searchable: false},
                    @endif
                    {data: 'name', name: 'name', orderable: false, searchable: false},
                    {data: 'email', name: 'email', orderable: false, searchable: false},
                    {data: 'mobile', name: 'mobile', orderable: false, searchable: false},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'status', name: 'status'},
                    {data: 'use_by', name: 'use_by', orderable: false, searchable: false},
                    {data: 'last_use', name: 'last_use'},
                    {data: 'use_count', name: 'use_count'},
                    {data: 'transaction_amount', name: 'transaction_amount', orderable: false, searchable: false},
                    {data: 'receipts', name: 'receipts', orderable: false, searchable: false},
                    {data: 'redeem_code', name: 'redeem_code', orderable: false, searchable: false,
                        render: function (data) {
                            if (data && data !== '-') {
                                return '*'.repeat(data.length);
                            } else {
                                return data;
                            }
                        }
                        },
                    {data: 'campaign', name: 'campaign'},
                    {data: 'source', name: 'source'},
                    {data: 'medium', name: 'medium'},
                    {data: 'referral', name: 'referral'},
                ],
                order:[[7, 'desc']],
                drawCallback: settings => {
                    var json = settings.json;
                    $.each(['count_total', 'total_transaction_amount', 'count_expired', 'count_burnt'], (k, v) => {
                        $(`div[data-name="${v}"] .info-box-number`).text(json[v] ?? '');
                    });
                },
            });

            var redeem_codes_table = $('#redeem_codes_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row'<'col-sm-6'l><'col-sm-6'f>>" + //<'col-sm-6 text-center'B>
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i>>", //<'col-sm-7'p>
                // buttons: [{
                //     extend: 'csv',
                //     className: 'btn-sm btn-default'
                // },{
                //     extend: 'copy',
                //     className: 'btn-sm btn-default'
                // }],
            });


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

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


            {{--
            var table = $('#receipts_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
                pageLength: 25,
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                "autoWidth": true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.receipts-list', ['series_id' => $voucher_series['series_id'] ]) }}",
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'plain_name', name: 'plain_name'},
                    {data: 'plain_email', name: 'plain_email'},
                    {data: 'plain_mobile', name: 'plain_mobile'},
                    {data: 'identifier', name: 'identifier'},
                    {data: 'transaction_amount', name: 'amount'},
                    {data: 'business_asset_id', name: 'business_asset_id'},
                    {data: 'receipt_path', name: 'receipt_path'},
                    {data: 'created_at', name: 'created_at'},
                ],

            });
            --}}

        });

    </script>

@endSection

@section('content')


<!-- Main content -->
<div class="content">
    <div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card card-outline shadow">
                <div class="card-body card-profile">
                    <img class="img-lg float-none rounded d-block mx-auto" src="{{ url($voucher_series['image']) }}" alt="Voucher Image">

                    <h3 class="profile-username text-center">{{ $voucher_series['title'] }}</h3>

                    <p class="text-muted text-center">{{ $voucher_series['series_id'] }}</p>

                    <ul class="list-group list-group-unbordered mb-3">
                        @php
                            $list = [
                                'sku'=>'SKU',
                                'discount_value'=>'Discount Value',
                                'downloaded'=>'Total Downloaded',
                                'used'=>'Total Used',
                                'redeem_max'=>'Total Downloadable',
                                'max_use'=>'Voucher Max Use',
                                'isExclusiveReward' => 'Marketplace Voucher',
                                 ]
                        @endphp
                        @foreach($list as $key=>$val)
                            @isset($voucher_series[$key])
                            <li class="list-group-item">
                                <b>{{$val}}</b> <a class="float-right">{{
                                    is_bool($voucher_series[$key])
                                        ? ($voucher_series[$key] ? 'Yes' : 'No')
                                        : $voucher_series[$key]
                                }}</a>
                            </li>
                            @endisset
                        @endforeach
                    </ul>
                    <div class="row">
                        <div class="col-12">
                            <a href="{{ route('vouchersingle', $voucher_series['series_id'] ) }}" class="btn btn-primary btn-block"><b>Landing Page</b></a>
                        </div>
                        <div class="col-12 mt-2">
                            <a href="{{ route('edit_voucher_series_summary', $voucher_series['series_id'] ) }}" class="btn btn-info btn-block"><b>Edit</b></a>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <div class="card card-secondary shadow">
                <div class="card-body table-responsive">
                    @include('admin.components.voucher.voucher_series_limit_schedule', ['voucher_series' => $voucher_series])
                </div>
            </div>

            <!-- About Me card -->
            <div class="card card-secondary shadow">
                <div class="card-header">
                    <h3 class="card-title">Details</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <strong><i class="fas fa-map-marker-alt mr-2"></i>Locations</strong>

                    <ul class="pl-4">
                        @foreach( $voucher_series['retail_stores'] as $retails_store)
                            <li class="text-muted">{{ $retails_store['address'] }}</li>
                        @endforeach
                    </ul>

                    <hr>

                    <strong><i class="fas fa-calendar mr-2"></i> Redemption Period</strong>

                    <p class="text-muted">{{ date('Y-m-d H:s:i', strtotime($voucher_series['redeem_start'])) .' - '. date('Y-m-d H:s:i', strtotime($voucher_series['redeem_end'])) }}</p>

                    <hr>

                    <strong><i class="fas fa-calendar mr-2"></i> Use By Date</strong>

                    <p class="text-muted">{{ date('Y-m-d', strtotime($voucher_series['use_by'])) }}</p>

                    @if( count($voucher_series['voucherSeriesTags']) > 0 )
                        <hr>

                        <strong><i class="fas fa-tags mr-2"></i>Tags</strong>

                        <p class="text-muted">
                            @foreach( $voucher_series['voucherSeriesTags'] as $tag)
                                <span class="badge badge-info">{{ $tag['name'] }}</span>
                            @endforeach
                        </p>

                    @endIf

                    @if( count($voucher_series['voucherSeriesGroups']) > 0 )
                        <hr>

                        <strong><i class="fas fa-layer-group mr-2"></i> Groups</strong>

                        <p class="text-muted">

                            @foreach( $voucher_series['voucherSeriesGroups'] as $group)
                                <a href="{{ url($group['slug'] ) }}"> <span class="label label-info">{{ $group['name'] }}</span></a>
                            @endforeach
                        </p>
                    @endIf

                    @if( $voucher_series['tc_link'] != '')
                        <hr>

                        <strong><i class="fas fa-link mr-2"></i> Privacy Link</strong>

                        <p class="text-muted">{{ $voucher_series['tc_link'] }}</p>

                    @endif

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->

        </div>

        <div class="col-md-9">
            <div class="row">
                @php $info_contents = [
                        [
                            'icon'=>'fas fa-download',
                            'color' => 'bg-info',
                            'title'=>'Total Vouchers Downloaded',
                            'data' => $count_total,
                            'name' => 'count_total',
                        ],[
                            'icon'=>'fas fa-fire',
                            'color' => 'bg-green',
                            'title'=>'Vouchers Redeemed',
                            'data' => $count_burnt,
                            'name' => 'count_burnt',
                        ],[
                            'icon'=>'fas fa-dollar-sign',
                            'color' => 'bg-warning',
                            'title'=>'Total Transaction Amount',
                            'data' => $total_transaction_amount,
                            'name' => 'total_transaction_amount',
                        ],[
                            'icon'=>'fas fa-calendar-times',
                            'color' => 'bg-danger',
                            'title'=>'Vouchers Expired',
                            'data' => $count_expired,
                            'name' => 'count_expired',
                        ],
                ]@endphp
                @foreach($info_contents as $info)
                    <div class="col-sm-6" data-name="{{$info['name']}}">
                        <div class="info-box shadow">
                        <span class="{{$info['color']}} info-box-icon"><i class="{{$info['icon']}}"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">{{$info['title']}}</span>
                                <span class="info-box-number">{{$info['data']}}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="card card-primary card-outline card-outline-tabs shadow">
                <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs">
                    <li class="nav-item active"><a class="nav-link active" href="#activity" data-toggle="tab">Vouchers</a></li>
                    <li class="nav-item"><a  class="nav-link" href="#redeem_codes" data-toggle="tab">Redeem Codes</a></li>

                    @if(getEnabledModules('receipt'))
                    <li class="nav-item"><a class="nav-link" href="#receipts" data-toggle="tab">Receipts</a></li>
                    @endif

                    <li class="nav-item"><a class="nav-link" href="#tnc" data-toggle="tab">Terms and Conditions</a></li>
                    <li class="nav-item"><a class="nav-link" href="#pixel" data-toggle="tab">Pixel Statistic</a></li>
                </ul>
                </div>
                <div class="card-body">
                <div class="tab-content">
                    <div class="active tab-pane" id="activity">


                        <div class="">
                            {{--<div class="card-header">--}}
                                {{--<h3 class="card-title">{{ __('heading.title_view_voucher_series') }}</h3>--}}
                            {{--</div>--}}
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0 overflow-hidden" style="clear: both;">

                                <table id="vouchers_table" class="table table-bordered table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Serial</th>
                                        <th>Code</th>
                                        <th>User UID</th>
                                        @if($showPasscodeAndUserCount)
                                        <th>{{ __('admin_dashboard.titleVoucherUserCount') }}</th>
                                        <th>Passcode</th>
                                        @endif
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                        <th>Downloaded date</th>
                                        <th>Status</th>
                                        <th>Expired date</th>
                                        <th>Used date</th>
                                        <th>Num of Transaction</th>
                                        <th>Transaction Amount</th>
                                        <th>Receipts</th>
                                        <th>Redeem Code</th>
                                        <th>Campaign</th>
                                        <th>Source</th>
                                        <th>Medium</th>
                                        <th>Referral</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{--
                                    @foreach($vouchers as $voucher)
                                        <tr>
                                            <td></td>
                                            <td>{{$voucher['serial']}}</td>


                                            @if($voucher_series['redemption_code'] == '13_digit_code')
                                                <td>{{$voucher->getVoucher()['redeem_code']}}</td>
                                            @else
                                                <td>{{$voucher->getCode()}}</td>
                                            @endif
                                            <td>{{$voucher['user_uid'] ?? ''}}</td>
                                            <td>{{$voucher['name']}}</td>
                                            <td>{{$voucher['email']}}</td>
                                            <td>{{$voucher['mobile_country_code'].$voucher['mobile']}}</td>
                                            <td>{{ $voucher['created_at']}}</td>
                                            <td>{{ $voucher['status'] }}</td>
                                            <td>{{ $voucher['use_by'] }}</td>
                                            <td>{{ $voucher['last_use']}}</td>
                                            <td>{{ $voucher['use_count']}}</td>
                                            <td>{{ $voucher['transaction_amount']}}</td>
                                            <td>
                                            @foreach($voucher['receipts'] as $receipt)
                                                <a target='blank' href='{{$receipt['receipt_path']}}'><img src="{{ $receipt['receipt_path']  }}" width="20px"></a>
                                            @endforeach
                                            </td>
                                            <td>{{ $voucher['redeem_code'] }}</td>
                                            <td>{{ $voucher['campaign'] }}</td>
                                            <td>{{ $voucher['source'] }}</td>
                                            <td>{{ $voucher['medium'] }}</td>
                                            <td>{{ $voucher['referral'] }}</td>
                                        </tr>
                                    @endforeach
                                    --}}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!-- /.tab-pane -->

                    <div class="tab-pane" id="tnc">
                        {!! $voucher_series['tc'] !!}
                    </div>
                    <!-- /.tab-pane -->

                    <div class="tab-pane" id="pixel">
                        <div class="">
                            <div class="card-body">
                                <h4 class="text-center">Coming Soon</h4>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!-- /.tab-pane -->

                    <div class="tab-pane" id="redeem_codes">
                    <div class="">
                    {{--<div class="card-header">--}}
                    {{--<h3 class="card-title">{{ __('heading.title_view_voucher_series') }}</h3>--}}
                    {{--</div>--}}
                    <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            @if($voucher_series['redemption_method'] == '13_digit_code')
                                <table id="redeem_codes_table" class="table table-bordered table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Redeem Code</th>
                                        <th>SKU</th>
                                        <th>Discount Value</th>
                                        <th>Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($redeem_codes as $redeem_code)
                                        <tr>
                                            <td></td>
                                            <td>{{ $redeem_code['code']}}</td>
                                            <td>{{ $redeem_code['sku']}}</td>
                                            <td>{{ $voucher_series['discount_value']}}</td>
                                            <td>{{ $redeem_code['status'] }}</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>
                            @endif


                            @if($voucher_series['redemption_method'] == '6_digit' || $voucher_series['redemption_method'] == '6_digit_with_promotion_code')
                                <table id="redeem_codes_table" class="table table-bordered table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Redeem Code</th>
                                        <th>Store Name</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($redeem_codes as $redeem_code)

                                        <tr>
                                            <td></td>
                                            <td>{{ $redeem_code['pivot']['code']}}</td>
                                            <td>{{ $redeem_code['name']}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @endif

                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                    <!-- /.tab-pane -->

                {{--
                    <div class="tab-pane" id="receipts">
                    <div class="">
                        <div class="card-body table-responsive p-0">
                                <table id="receipts_table" class="table table-bordered table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                        <th>Voucher</th>
                                        <th>Amount</th>
                                        <th>Store</th>
                                        <th>Receipt</th>
                                        <th>Date</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                        </tr>
                                    </tbody>
                                </table>



                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                    <!-- /.tab-pane -->
                --}}

                </div>
                </div>
            </div>
                <!-- /.tab-content -->
            </div>
            <!-- /.nav-tabs-custom -->
        </div>

    </div>

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

@endsection