@extends('layout.template')
@section('content')
<style>
    label {
        color: #666 !important;
        font-size: 14px !important;
    }

    .table {
        width: 100% !important;
    }

    element.style {}

    [dir] .btn:not(:disabled):not(.disabled) {
        cursor: pointer;
    }

    .btn:not(.btn-lg):not(.btn-sm) {
        font-size: .9375rem;
    }

    [dir] [type=button]:not(:disabled),
    [dir] [type=reset]:not(:disabled),
    [dir] [type=submit]:not(:disabled),
    [dir] button:not(:disabled) {
        cursor: pointer;
    }

    .app-settings-button--right[data-v-a69951d2] {
        display: none;
    }

    /* [dir] .table td,
    [dir] .table th {
        width: fit-content !important;
    } */
</style>
<div class="mdk-header-layout__content">

    <div data-push data-responsive-width="992px" class="mdk-drawer-layout js-mdk-drawer-layout">
        <div class="mdk-drawer-layout__content page ">

            <div class="container-fluid page__container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                    <li class="breadcrumb-item active">Charity Report</li>
                </ol>

                <div class="card border-left-3 border-left-primary card-2by1">
                    <div class="card-body">
                        <div class="media flex-wrap align-items-center">
                            <div class="media-body col-md-9">
                                <h3> <strong>Charity Report</strong></h3>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-left-3 border-left-primary card-2by1">
                    <div class="card-body">
                        <div class="media flex-wrap align-items-center">
                            <div class="media-body col-md-12">
                                <h5> <strong>Filter</strong></h5>
                                <div class="row mb-4">
                                    <div class="col-md-4">
                                        <label>Start Date</label>
                                        <input id="start_date" name="levi_amount_paid_date" type="text" class="form-control" data-toggle="flatpickr" value="{{now()->startOfMonth()}}">
                                        <!-- <input id="start_date" name="levi_amount_paid_date" type="text" class="form-control" data-toggle="flatpickr" value="{{now()->startOfMonth()}}"> -->
                                    </div>
                                    <div class="col-md-4">
                                        <label>End Date</label>
                                        <input id="end_date" name="levi_amount_paid_date" type="text" class="form-control" data-toggle="flatpickr" value="{{now()}}">
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" id="filter_btn" class="btn btn-danger mt-4">Filter Data</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <div class="card">
                    @if(Session::has('success'))
                    <div class="alert alert-success">{{Session::get('success')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {{ Session::flash('alert-success', 'success') }}
                    @endif
                    @if(Session::has('fail'))
                    <div class="alert alert-danger">{{Session::get('fail')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <div class="tab-content card-body">
                        <div class="table-responsive border-bottom" data-toggle="lists" data-lists-values="[&quot;js-lists-values-employee-name&quot;]">
                            <table class="table mb-0 data-table paid" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>Sl.no</th>
                                        <th>Member</th>
                                        <th>PAID AMOUNT</th>
                                        <th>PAID DATE</th>
                                        <th>Total Amount paid for Charity</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <script type="text/javascript">
            $(function() {
                list();
            });

            function list() {
                var startdate = $('#start_date').val();
                var enddate = $('#end_date').val();
                var table = $('.table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.charity-report-list') }}",
                        method: "GET",
                        data: {
                            'start_date': startdate,
                            'end_date': enddate
                        },
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'member',
                            name: 'member'
                        },
                        {
                            data: 'paid_amount',
                            name: 'paid_amount'
                        },
                        {
                            data: 'paid_date',
                            name: 'paid_date'
                        },
                        {
                            data: 'total_paid_amount',
                            name: 'total_paid_amount'
                        },
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'excel', 'pdf', 'csv'
                    ],
                    "select": {
                        'style': 'multi',
                        'selector': 'td:first-child' //only checkbox can select row
                    },
                });

            }

            $('body').on('click', '#filter_btn', function() {
                $('.table').DataTable().destroy();
                list();

            })
        </script>
        @endsection