@extends('layouts.frontend')
@section('styles')
<style>
    td.details-control {
        background: url('/img/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('/img/details_close.png') no-repeat center center;
    }
</style>
@endsection
@section('content')
<div class="container">
    @can('sandbox_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{ route('frontend.sandboxes.create') }}">
                {{ trans('global.create') }} {{ trans('cruds.sandbox.title_singular') }}
            </a>
        </div>
    </div>
    @endcan
    <div class="card">
        <div class="card-header">
            {{ trans('cruds.sandbox.title_singular') }} {{ trans('global.list') }}
        </div>

        <div class="card-body">
            <table id="sandbox-table" class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-sandbox">
                <thead>
                    <tr>
                        <th width="10">

                        </th>
                        <th width="10">

                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.id') }}
                        </th>
                        <th width=10">
                            Trx ID
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.payment_channel') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.merchant') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.merchant_trxid') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.name') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.amount') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.request_datetime') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.expire_datetime') }}
                        </th>
                        <th>
                            {{ trans('cruds.sandbox.fields.status') }}
                        </th>
                        <th>
                            &nbsp;
                        </th>
                    </tr>
                    <!-- <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <select class="search">
                                <option value>{{ trans('global.all') }}</option>
                                @foreach($payment_methods as $key => $item)
                                <option value="{{ $item->code }}">{{ $item->code }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select class="search">
                                <option value>{{ trans('global.all') }}</option>
                                @foreach($merchants as $key => $item)
                                <option value="{{ $item->code }}">{{ $item->code }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                            <select class="search" strict="true">
                                <option value>{{ trans('global.all') }}</option>
                                @foreach(App\Models\Sandbox::STATUS_SELECT as $key => $item)
                                <option value="{{ $key }}">{{ $item }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                        </td>
                    </tr> -->
                </thead>
            </table>
        </div>
    </div>
</div>

@endsection
@section('scripts')
@parent
<script id="details-template" type="text/x-handlebars-template">
    @verbatim
        <table class="table">
            <tr>
                <td>Payment Channel:</td>
                <td>{{payment_channel_code}}</td>
            </tr>
            <tr>
                <td>Merchant:</td>
                <td>{{merchant_code}}</td>
            </tr>
            <tr>
                <td>Merchant Trx ID:</td>
                <td>{{merchant_trx}}</td>
            </tr>
            <tr>
                <td>Full name:</td>
                <td>{{name}}</td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>{{email}}</td>
            </tr>
            <tr>
                <td>Phone Number:</td>
                <td>{{phone_number}}</td>
            </tr>
            <tr>
                <td>Request Datetime:</td>
                <td>{{request_datetime}}</td>
            </tr>
            <tr>
                <td>Expire Datetime:</td>
                <td>{{expire_datetime}}</td>
            </tr>
            <tr>
                <td>Created At:</td>
                <td>{{created_at}}</td>
            </tr>
            <tr>
                <td>Paid At:</td>
                <td>{{paid_at}}</td>
            </tr>
            <tr>
                <td>Expired At:</td>
                <td>{{expired_at}}</td>
            </tr>
            <tr>
                <td>Canceled At:</td>
                <td>{{canceled_at}}</td>
            </tr>
        </table>
    @endverbatim
</script>

<script>
    var template = Handlebars.compile($("#details-template").html());

    $(document).ready(function() {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "{{ route('frontend.sandboxes.index') }}",
            columns: [{
                    data: 'placeholder',
                    name: 'placeholder'
                },
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'trxid',
                    name: 'trxid'
                },
                {
                    data: 'payment_channel_code',
                    name: 'payment_channel.code'
                },
                {
                    data: 'merchant_code',
                    name: 'merchant.code'
                },
                {
                    data: 'merchant_trxid',
                    name: 'merchant_trxid'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'request_datetime',
                    name: 'request_datetime'
                },
                {
                    data: 'expire_datetime',
                    name: 'expire_datetime'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'actions',
                    name: '{{ trans('global.actions') }}'
                }
            ],
            orderCellsTop: true,
            order: [
                [1, 'desc']
            ],
            pageLength: 100,
            columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }, {
                    orderable: false,
                    searchable: false,
                    targets: -1
                },
                {
                    targets: [2, 4, 5, 6, 10],
                    visible: false,
                },
                {
                    targets: [ 1 ],
                    searchable: false
                }
            ]
        };

        let table = $('.datatable-sandbox').DataTable(dtOverrideGlobals);

        $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e) {
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
        });

        // let visibleColumnsIndexes = null;
        // $('.datatable thead').on('input', '.search', function() {
        //     let strict = $(this).attr('strict') || false
        //     let value = strict && this.value ? "^" + this.value + "$" : this.value

        //     let index = $(this).parent().index()
        //     if (visibleColumnsIndexes !== null) {
        //         index = visibleColumnsIndexes[index]
        //     }

        //     table
        //         .column(index)
        //         .search(value, strict)
        //         .draw()
        // });

        // table.on('column-visibility.dt', function(e, settings, column, state) {
        //     visibleColumnsIndexes = []
        //     table.columns(":visible").every(function(colIdx) {
        //         visibleColumnsIndexes.push(colIdx);
        //     });
        // })

        $('#sandbox-table tbody').on('click', 'td.details-control', function() {
            console.log('kodong!');
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                row.child(template(row.data())).show();
                tr.addClass('shown');
            }
        });

    });

</script>

@endsection