@extends('layout.marketing_template')

@section('marketingContent')
    <div class="titel-head pb-2">
        <h1 class="ms-4 mb-0">Withdraw Report</h1>
    </div>
    <div class="flash-message">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
                    <strong>{{ ucfirst($msg == 'danger' ? 'Error' : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
        @endforeach
    </div>
    <div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <div class="form-group mb-3">
                        <label><strong>Status :</strong></label>
                        <select id='status' class="form-control form-control-lg bg-dark">
                            <option value="">All</option>
                            <option value="Pending">Pending</option>
                            <option value="Approved" selected>Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <div class="form-group mb-3">
                        <label><strong>Payment Method :</strong></label>
                        <select id='paymentmethod' class="form-control form-control-lg bg-dark">
                            <option value="">All</option>
                            <option value="cash">Cash</option>
                            <option value="bank">Bank</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <div class="form-group mb-3">
                        <label><strong>From :</strong></label>
                        <input type="text" class="form-control form-control-lg bg-dark" name="fromdate" id="fromdate"
                            value="{{ date('Y-m-d', strtotime('-7 day')) }}" readonly />
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <div class="form-group mb-3">
                        <label><strong>To :</strong></label>
                        <input type="text" class="form-control form-control-lg bg-dark" name="todate" id="todate"
                            value="{{ date('Y-m-d') }}" readonly />
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <div class="form-group mb-3" style="padding-top:20px;">
                        <button type="button" id="dateSearch" class="btn btn-sm btn-primary">Search</button>
                    </div>
                </div>
            </div>
            <div class="bg-dark pb-4 rounded-3 box-shadow">
                <div class="table-responsive-lg table-p15">
                    <table id="withdrawreport_datatable"
                        class="table table-dark table-striped mb-0 text-center table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name Email</th>
                                <th>Account Id</th>
                                <th>Amount</th>
                                <th>Withdraw To</th>
                                <th>Payment Method</th>
                                <th>Note</th>
                                <th>Comment</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Approved/Rejected By</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            var table = $('#withdrawreport_datatable').DataTable({
                "autoWidth": false,
                "responsive": true,
                "order": [
                    [0, "desc"]
                ],
                "processing": true,
                "serverSide": true,
                "language": {
                    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
                },
                "ajax": {
                    url: "{{ route('marketing.report.withdrawreport') }}",
                    data: function(d) {
                        d.status = $('#status').val();
                        d.paymentmethod = $('#paymentmethod').val();
                        d.search = $('input[type="search"]').val();
                        d.fromdate = $('#fromdate').val();
                        d.todate = $('#todate').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'udata',
                        name: 'udata'
                    },
                    {
                        data: 'accountID',
                        name: 'accountID'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'withdraw_to',
                        name: 'withdraw_to'
                    },
                    {
                        data: 'paymentmethod',
                        name: 'paymentmethod'
                    },
                    {
                        data: 'note',
                        name: 'note'
                    },
                    {
                        data: 'comment',
                        name: 'comment'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'admindata',
                        name: 'admindata'
                    },
                ],
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excel'
                }, ],
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, 'All']
                ]
            });
            $('#status').change(function() {
                table.draw();
            });
            $('#paymentmethod').change(function() {
                table.draw();
            });
            $('#dateSearch').on('click', function() {
                table.draw();
            });
            $("#fromdate").datepicker({
                minDate: $("#fromdate").value,
                dateFormat: 'yy-mm-dd',
                changeYear: true,
                onSelect: function(date) {
                    $("#todate").datepicker('option', 'minDate', date);
                }
            });
            $("#todate").datepicker({
                maxDate: $("#todate").value,
                dateFormat: 'yy-mm-dd',
                changeYear: true,
                onSelect: function(date) {
                    $("#fromdate").datepicker('option', 'maxDate', date);
                }
            });
        });
    </script>
@endsection