@extends('layouts.admin')

@section('style')
<style>
    .dataTables_filter{
        text-align: center;
    }
    .dataTables_paginate{
        text-align: center;
    }
    .dataTables_filter {
        width: 50%;
        float: right;
        text-align: right;
        margin-right: 10px;
    }
    .pagination {
        float: right;
        text-align: right;
        margin-right: 10px;
    }
</style>
@endsection

@section('script')<script type="text/javascript">
        $(function() {
            const csrf = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrf
                }
            });

            $('#start_date, #end_date').daterangepicker({
                // todayBtn:'linked',
                singleDatePicker: true,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                },
                // autoclose: true
                // autoUpdateInput: false,
            });


            const table = $('.yajra-datatable').DataTable({
                serverSide: true,
                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>>",
                oLanguage: {
                    sLengthMenu: "_MENU_",
                },
                buttons: [
                    {
                        extend: 'csv',
                        footer: false,
                        exportOptions: {
                            columns: [0,1,2,3,4,5,6,8]
                        },
                        text: '<i class="fas fa-file-export"></i> Export CSV',
                        className: 'btn btn-sm btn-default'
                    },
                ],
                autoWidth: true,
                processing: true,
                serverSide: true,
                info: false,
                bInfo: false,
                ajax: {
                    url: "{{ route('admin.dstw.receipts-list-admin') }}",
                    data: {}
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'timestamp', name: 'timestamp'},
                    {data: 'receipt_uid', name: 'receipt_uid'},
                    {data: 'user_name', name: 'user_name'},
                    {data: 'user_email', name: 'user_email'},
                    {data: 'user_mobile', name: 'user_mobile'},
                    {data: 'prize_won', name: 'prize_won'},
                    {data: 'prize_period', name: 'prize_period'},
                    {data: 'receipt_path', name: 'receipt_path'},
                    {data: 'receipt_url', name: 'receipt_url', visible: false},
                    {data: 'status', name: 'status'},
                    {data: 'status_text', name: 'status_text', visible: false}
                ],
                columnDefs: [{
                    targets: [0,3,4,5,8,9,11],
                    searchable: false,
                    orderable: false,
                }]
            });

            $('.yajra-datatable').on('change', '.receipt_status', function(){
                const el = $(this);
                const id = el.attr("data-id");
                const receipt_uid = el.attr('data-receipt-uid');
                el.attr('disabled', true);
                const rowIdx = el.parent().parent().index();;

                $.ajax({
                    method: "post",
                    url: "{{ route('admin.dstw.change_status.post') }}",
                    data: {
                        receipt_uid: receipt_uid,
                        entry_id: id,
                        new_status: el.val()
                    }
                }).done(function (response) {
                    if (typeof response !== 'object' || response.status !== 'success') {
                        el.val(el.attr('data-default'));
                    } else {
                        el.find('option[value="pending"]').remove();
                    }
                    el.removeAttr('disabled');

                    // update data
                    let temp = table.row(rowIdx).data();
                    temp.status_text = el.val();
                }).fail(function() {
                    el.val(el.attr('data-default')).removeAttr('disabled');
                });
            });

            $('#search').click(function(){
                const start_date = $('#start_date').val();
                const end_date = $('#end_date').val();
                if ((start_date != '' && end_date == '') || (end_date != '' && start_date == '')) {
                    alert("Both Date is Required");
                    return;
                }
                table.ajax.url(`?start_date=${start_date}&end_date=${end_date}`).load();
            });
        });
    </script>
@endSection

@section('content')

    @component('admin.components.tabs')
        <div class="px-3 mb-2 row input-daterange">
            {{--        <div class="input-daterange">--}}
            <div class="col-6 col-md-4">
                <input type="text" placeholder="From Date" name="start_date" id="start_date" class="form-control" autocomplete="off" value="{{ '2021-01-01' }}"/>
            </div>
            <div class="col-6 col-md-4">
                <input type="text" placeholder="End Date" name="end_date" id="end_date" class="form-control" autocomplete="off"  value="{{ date('Y-m-d') }}"/>
            </div>
            {{--        </div>--}}
            <div class="col-md-4 mt-2 mt-md-0">
                <button class="btn btn-info w-100" type="button" name="search" id="search">Search</button>
            </div>
        </div>
        <div class="col-sm-12 overflow-auto">
            <table class="table table-bordered table-hover  yajra-datatable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Date Time</th>
                        <th>Receipt UID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Prize Won</th>
                        <th>Prize Period</th>
                        <th>Receipt</th>
                        <th>Receipt</th>
                        <th>Status</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    @endcomponent
@endsection