@extends('layouts.administrator.master')

@section('title')
    Donasi
@endsection

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{ __('Donasi') }}</h3>
                    <p>{{ __('Kelola data donasi') }}</p>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('admin.donation.index') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em>
                        Kembali</a>
                </div>
            </div>
        </div>
        <div class="nk-block">
            <div class="card card-preview">
                <div class="card-inner">

                    <div class="row filter-container"
                        style="width: 50%;
                            position: relative;
                            top:36px;
                            left:220px;
                        ">
                        <div class="col-sm-4" style="padding-left: 10px;padding-right: 5px;">
                            <select id="filterMember" class="form-control">
                                <option value="">-Semua Data-</option>
                                @foreach ($member as $item)
                                    <option value="{{$item['id']}}">{{$item['value']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-4" style="padding-left: 5px;padding-right: 5px;">
                            <select id="filterStatus" class="form-control">
                                <option value="">-Semua Status-</option>
                                @foreach ($status as $item)
                                    <option value="{{$item['id']}}">{{$item['value']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-4" style="padding-left: 5px;padding-right: 5px;">
                            <select id="filterPayment" class="form-control">
                                <option value="">-Semua Pembayaran-</option>
                                @foreach ($payment as $item)
                                    @if ($item != "")
                                        <option value="{{$item}}">{{$item}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <table class="datatable nowrap table" data-export-title="Export">
                        <thead>
                            <tr>
                                <th class="nk-tb-col"><span class="sub-text">Nama Lengkap</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Email</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Contact</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Nominal</span></th>
                                {{-- <th class="nk-tb-col"><span class="sub-text">Pesan</span></th> --}}
                                <th class="nk-tb-col"><span class="sub-text">Status</span></th>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
            </div>
        </div><!-- .nk-block -->

        {{-- Modal Import --}}
        {{-- <div class="modal fade" role="dialog" id="create-newsCategory">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-header">
                        <h5>Import Anggota</h5>
                    </div>
                    <div class="modal-body">

                        <form id="import-form" enctype="multipart/form-data">
                            @csrf
                            <div class="input-group mb-3">
                                <input type="file" class="form-control" id="excel_file" name="excel_file" required>
                            </div>
                            <button type="button" class="input-group-text btn btn-primary"
                                id="import-button">Import</button>
                        </form>

                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div> --}}
        
        @push('script')
            <script>
                var token = "{{ csrf_token() }}";
                NioApp.DataTable('.datatable', {
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('admin.donation.list') }}',
                        beforeSend: function () {
                            loadSpin(true, '.datatable');
                        },
                        complete: function () {
                            loadSpin(false, '.datatable');
                        },
                        type: 'POST',
                        data: function (d) {
                            d._token = token;
                            d.filterMember = $('#filterMember').val();
                            d.filterStatus = $('#filterStatus').val();
                            d.filterPayment = $('#filterPayment').val();
                        },
                    },
                    columns: [
                        { data: 'full_name' },
                        { data: 'email' },
                        { data: 'no_hp' },
                        { data: 'nominal' },
                        // { data: 'note' },
                        { data: 'status' },
                        { data: 'action', className: 'text-center' },
                    ],
                    ordering: false,
                    responsive: { details: true },
                });
            
                $('#filterMember').change(function () {
                    var filterValue = $(this).val();
                    $(".datatable").DataTable().ajax.reload();
                });
                $('#filterStatus').change(function () {
                    var filterStatus = $(this).val();
                    $(".datatable").DataTable().ajax.reload();
                });
                $('#filterPayment').change(function () {
                    var filterPayment = $(this).val();
                    $(".datatable").DataTable().ajax.reload();
                });

                // $("#import-button").click(function() {
                //     $('#create-newsCategory').modal('toggle');
                //     var formData = new FormData($('#import-form')[0]);
                //     $.ajax({
                //         url: '{{ route('admin.pages.landingPage.membership.import') }}',
                //         type: 'POST',
                //         data: formData,
                //         processData: false,
                //         contentType: false,
                //         success: function(r) {
                //             NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                //                 position: "top-right"
                //             });
                //             $(".datatable").DataTable().ajax.reload();
                //         },
                //         error: function(error) {
                //             console.log(error);
                //         }
                //     });
                // });
            </script>
        @endpush
    </div>
@endsection