@extends('layouts.admin')


@section('style')
    <style>
        .select2-container,
        .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
            width: unset !important;
        }
    </style>
@endSection

@php
    $voucher_statuses = collect($voucher_statuses ?? []);
@endphp

@section('content')

<!-- Main content -->
@component('admin.components.tabs')

    <div style="margin-left: 10px; display: none;">
        <select name="status_filter" class="form-control select2 select2bs4" data-placeholder="Select the status" style="width: 250px;" multiple>
            {{--
            @foreach ($voucher_statuses as $status)
                <option value="{{ $status }}" {{ $status === 'active' ? 'selected' : '' }}>{{ $status }}</option>
            @endforeach
            --}}
        </select>
    </div>

    <table id="voucher_series_table" class="table table-bordered table-hover dataTable">
        <thead>
        <tr>
            <th>No.</th>
            <th>Image</th>
            <th>Voucher Series</th>
            <th>Title</th>
            <th>Locations</th>
            <th>Downloaded</th>
            <th>Used</th>
            <th>Average Transaction Value</th>
            <th>Total Transaction Value</th>
            <th>Total Expired Voucher</th>
            <th>Voucher Type</th>
            <th>Marketplace Voucher</th>
            <th>Is Hidden</th>
            <th>Redemption Period</th>
            {{--<th>SKU</th>--}}
            {{--<th>Discount Value</th>--}}
            <th>Created Date</th>
            <th>Status</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach($voucher_series as $series)
            <tr>
                <td></td>
                <td><img width="50" src="{{ url($series['image']) }}"></td>
                <td>{{$series['series_id']}}</td>
                <td>{{$series['title']}}</td>
                <td>
                    {{ count($series['retail_stores']) }}
                    {{--<ul>--}}
                    {{--@foreach($series['retail_stores'] as $store)--}}
                    {{--<li>{{ $store['name'] }}</li>--}}
                    {{--@endforeach--}}
                    {{--</ul>--}}
                </td>
                <td>{{$series['downloaded']}}</td>
                <td>{{$series['used']}}</td>
                <td>{{$series['average_transaction_value']}}</td>
                <td>{{$series['total_transaction_value']}}</td>
                <td>{{$series['total_expired_voucher'] ?? 0}}</td>
                <td>{{$series['voucher_type'] ?? 0}}</td>
                <td>{{data_get($series, 'isExclusiveReward') ? 'Yes' : 'No'}}</td>
                <td>{{$series['is_private']}}</td>
                <td>{{ date('d/m/Y', strtotime($series['redeem_start'])) }} - {{ date('d/m/Y', strtotime($series['redeem_end'])) }}</td>
                {{--<td>{{ $series['sku']}}</td>--}}
                {{--<td>{{ $series['discount_value']}}</td>--}}
                <td>{{ $series['created_at']}}</td>
                <td>
                    @switch($series['status'])
                        @case('active')
                        <span class="text-green">{{ $vstatus = ucfirst($series['status']) }}</span>
                        @break

                        @case('fully_used')
                        <span class="text-red">{{ $vstatus = 'Fully Redeemed' }}</span>
                        @break

                        @case('fully_redeemed')
                        <span class="text-light-blue">{{ $vstatus = 'Fully Downloaded' }}</span>
                        @break

                        @default
                        <span class="text-muted">{{ $vstatus = ucfirst($series['status']) }}</span>
                        @break

                    @endswitch

                    @php $voucher_statuses->add([
                        'key' => $series['status'],
                        'val' => $vstatus,
                        'selected' => in_array($series['status'], [
                            'active', 'fully_used', 'fully_redeemed',
                        ]),
                    ]); @endphp
                </td>
                <td><a href="{{ route('view_voucher_series', $series['series_id']) }}"><button type="button" class="btn btn-block btn-primary btn-xs">View</button></a></td>
            </tr>
        @endforeach
        </tbody>
    </table>
@endcomponent

@endsection

@section('script')
    <script>
        $(function () {
            var status_filter = $('select[name=status_filter]');
            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>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                autoWidth: false,
                @if(($version ?? null) === 2)
                    processing: true,
                    serverSide: true,
                    ajax: '{{ request()->url() }}?voucher_status=active',
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                        {data: 'image', name: 'image'},
                        {data: 'series_id', name: 'series_id'},
                        {data: 'title', name: 'title'},
                        {data: 'retail_stores', name: 'retail_stores', orderable: false, searchable: false},
                        {data: 'redeem_count', name: 'redeem_count'},
                        {data: 'use_count', name: 'use_count'},
                        {data: 'average_transaction_value', name: 'average_transaction_value'},
                        {data: 'total_transaction_value', name: 'total_transaction_value'},
                        {data: 'total_expired_voucher', name: 'total_expired_voucher'},
                        {data: 'voucher_type', name: 'voucher_type'},
                        {data: 'is_exclusive_reward', name: 'is_exclusive_reward', orderable: false, searchable: false},
                        {data: 'is_private', name: 'is_private', orderable: false, searchable: false},
                        {data: 'redeem_period', name: 'redeem_period'},
                        {data: 'created_at', name: 'created_at'},
                        {data: 'status', name: 'status', orderable: false, searchable: false},
                        {data: 'action', name: 'action', orderable: false, searchable: false},
                    ],
                    order: [[13, 'desc']]
                @endif
            });

            var tmp_opts = [];
            $.each(@json($voucher_statuses->unique('key')), function (k, v) {
                tmp_opts.push(
                    $('<option>').val(v.val).text(v.val)
                        .attr('selected', v.selected).prop('outerHTML')
                );
            });
            console.log(tmp_opts);
            status_filter.html(tmp_opts.join('')).select2();

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

            $('.dataTables_length').append(
                status_filter.parent('div').css('display', 'inline-block').show()
            ).addClass('d-flex').find('label').addClass('my-auto');

            status_filter.siblings('.select2-container')
                {{-- .css('width', '120px') --}}
                .find('.select2-search__field')
                {{-- .css('width', '120px') --}}
                .css('padding-left', '5px');
            var timeout = null;
            status_filter.on('change', function (e) {
                @if(($version ?? null) === 2)
                    clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        var val = $(this).val().join(',');
                        t.ajax.url(`?voucher_status=${val}`).load();
                    }, 500);
                @else
                    var val = $(this).val().join('\\b|\\b');
                    var col = t.column( 14 );
                    if (val) {
                        col.search('\\b' + val + '\\b', true, false);
                    } else {
                        col.search('');
                    }
                    col.draw();
                @endif
            }).trigger('change');


            var create_btn = `<a role='button' href="{{ route('create_voucher_series') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Add New Voucher</a>`;
            var import_csv = `<a role='button' href="{{ route('import_voucher_series') }}" class="mr-2 btn btn-sm btn-default"><i class="fas fa-file-import"></i> Import CSV</a>`;
            $('#import_export .dt-buttons').prepend(import_csv);
            $('#create_voucher').prepend(create_btn);

        });

    </script>

@endSection