{% extends 'super_admin_templates/base.html' %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
    .pagination-page-info {
        padding: .6em;
        padding-left: 0;
        width: 40em;
        margin: .5em;
        margin-left: 0;
        font-size: 12px;
    }

    .pagination-page-info b {
        color: black;
        background: #6aa6ed;
        padding-left: 2px;
        padding: .1em .25em;
        font-size: 150%;
    }

    select option:first-child {
        color: #000;
        /* grey for placeholders */
    }

    select:invalid {
        color: #000;
        /* force placeholder to stay grey on load */
    }

    select:valid {
        color: #000;
        /* normal black once a real value is chosen */
    }

    select option {
        color: #000;
        /* fallback color for all other options */
    }

    .centered {
        text-align: center;
    }
</style>

<script>
    function openUpdateModal(each_merchant) {
        console.log("in update ")
        // Set the form action URL using the ID
        const updateBankBaseURL = "{{ url_for('admin_reports.update_admin_payout_download_report', payoutDownloadReportId='__ID__') }}";
        const formAction = updateBankBaseURL.replace('__ID__', each_merchant.id);
        document.getElementById('updateReportForm').action = formAction;
        resetFormDataNew('updateReportForm');

        console.log("data", each_merchant)
        // Populate the form fields
        document.getElementById('editUserId').value = each_merchant.userId || '';
        $('#editUserId').trigger('chosen:updated');
        document.getElementById('editReportType').value = each_merchant.reportType || '';
        document.getElementById('editWalletType').value = each_merchant.walletType || '';
        console.log("eaccccc", each_merchant.startDate)
        console.log("eaccccc", each_merchant.endDate)
        if (window.startDatePicker) {
            window.startDatePicker.setDate(each_merchant.startdate || null);
        } else {
            document.getElementById('editStartdate').value = each_merchant.startdate || '';
        }

        if (window.endDatePicker) {
            window.endDatePicker.setDate(each_merchant.endDate || null);
        } else {
            document.getElementById('editEnddate').value = each_merchant.endDate || '';
        }

        // Show the modal
        const modal = new bootstrap.Modal(document.getElementById('updateTask'));
        modal.show();
    }
</script>
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Reports</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Generated Reports</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Generated Reports List
                        </div>

                        <div class="prism-toggle">
                            {% if 'add' in session.get('adminPayoutDownloadReportPermission', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#addtask"
                                onClick="resetFormDataNew('createReportForm')">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Generated New Report
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="GET"
                                    action="{{ url_for('admin_reports.admin_payout_download_reports_list')}}"
                                    class="row gy-2 gx-3 align-items-center mb-4">

                                    <!-- <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput"
                                            placeholder="Search...">
                                    </div>
                                    
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div> -->
                                </form>
                            </div>
                        </div>

                        <!-- Add some space -->
                        <div class="mt-3"></div>
                        <!-- End space -->

                        <div class="table-responsive">
                            <table id="datatable-basic" class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Merchant Name</th>
                                        <th scope="col">Report Type</th>
                                        <th scope="col">Generated On</th>
                                        <th scope="col">Transaction Startdate</th>
                                        <th scope="col">Transaction Enddate</th>
                                        <th scope="col">Wallet Type</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Download File</th>
                                        <th scope="col">File Size</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if downloadReportsList %}
                                    {% for each_report in downloadReportsList %}
                                    <tr>
                                        <td>{{ snoCount + loop.index}}</td>

                                        {% if each_report.userName %}
                                        <td>{{ each_report.userName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        
                                        {% if each_report.reportType %}
                                        <td>{{ each_report.reportType }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_report.generatedOn %}
                                        <td>{{ each_report.generatedOn }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_report.startDate %}
                                        <td>{{ each_report.startDate }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_report.endDate %}
                                        <td>{{ each_report.endDate }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_report.walletType %}
                                        <td>{{ each_report.walletType }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if 'edit' in session.get('adminPayoutDownloadReportPermission', []) %}
                                        <td>
                                            {% if each_report.actionText == "Approved" %}
                                            <a class="btn btn-sm btn-success-light">{{ each_report.actionText }}</a>
                                            {% else %}
                                            <a class="btn btn-sm btn-warning-light"
                                                href="{{ url_for('admin_reports.admin_payout_download_report_status', payoutDownloadReportId=each_report.id) }}">{{
                                                each_report.actionText }}</a>
                                            {% endif %}
                                        </td>
                                        {% endif %}

                                        <td><a href="{{each_report.downloadFile}}"><button type="button"
                                                    class="btn btn-secondary"><i
                                                        class='bx bx-download'></i></button></a></td>

                                        <td>{{ each_report.fileSize }}</td>

                                        <!-- {% if each_report.actionText == "Pending" %}
                                        <td>
                                            {% if 'edit' in session.get('adminPayoutDownloadReportPermission', []) %}
                                            <a href="javascript:void(0);" onclick='openUpdateModal({
                                                    "id": "{{ each_report.id }}",
                                                    "userId": {{ each_report.userId | string }},
                                                    "reportType": {{ each_report.reportType | tojson }},
                                                    "walletType": {{ each_report.walletType | tojson }},
                                                    "startDate": {{ each_report.startDate }},
                                                    "endDate": {{ each_report.endDate }}
                                                })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                                                data-bs-toggle="modal" data-bs-target="#updateTask">
                                                <i class="ri-edit-line"></i>
                                            </a>
                                            {% endif %}
                                        </td>
                                        {% endif %} -->

                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr>
                                        <td colspan="12" style="text-align: center;">No Data Found</td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                                {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                <ul class="flashes">
                                    {% for message in messages %}
                                    <h2>
                                        <b>
                                            <center style="color:green">{{ message }}</center>
                                        </b>
                                    </h2>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% endwith %}
                            </table>

                        </div>

                        <!-- Add some space -->
                        <div class="col-sm-12 col-md-12 mt-3">
                            <nav aria-label="Page navigation" class="pagination-style-1">
                                <ul class="pagination mb-0">
                                    {% if pagination %}
                                            <div class="pagination">
                                                {{ pagination.links }}
                                            </div>
                                        {% endif %}
                                </ul>
                            </nav>
                        </div>
                        <!-- End space -->
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Generated New Report</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin_reports.generate_new_report') }}"
                enctype="multipart/form-data" name="createReportForm" id="createReportForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <!-- Add your form fields here -->
                <div class="modal-body px-4">
                    <div class="col-auto">
                        <label for="userId">Merchant Name*</label>
                        <select class="form-control chosen-select" name="userId">
                            <option value="">Select merchant</option>
                            {% for each_merchant in merchantsList %}
                            <option value="{{each_merchant.id}}">{{each_merchant.fullName}}</option>
                            {% endfor %}
                        </select>
                        <span id="userId_edit_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="reportType">Report Type*</label>
                        <select class="form-select" name="reportType" required>
                            <option value="">Select</option>
                            <option value="ledger">ledger</option>
                            <option value="transactions">transactions</option>
                        </select>
                        <span id="reportType_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="walletType">Wallet Type*</label>
                        <select class="form-select" name="walletType" required>
                            <option value="">Select</option>
                            <option value="payin">payin</option>
                            <option value="payout">payout</option>
                        </select>
                        <span id="walletType_edit_error" class="error"></span>
                    </div>

                    <div class="form-group">
                        <label for="startDate">Transaction Startdate*</label>
                        <input type="text" class="form-control flatpickrdate" value="{{startDate}}" name="startDate"
                            placeholder="Select start date" required>
                        <span id="startDate_edit_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="endDate">Transaction Enddate*</label>
                        <input type="text" class="form-control flatpickrdate" value="{{endDate}}" name="endDate"
                            placeholder="Select end date" required>
                        <span id="endDate_edit_error" class="error"></span>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <span id="errorMessage" class="error"></span>
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

<div class="modal fade" id="updateTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel">Update Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" enctype="multipart/form-data" id="updateReportForm"
                    name="updateReportForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                    <div class="col-auto">
                        <label for="userId">Merchant Name*</label>
                        <select class="form-control chosen-select" name="userId" id="editUserId">
                            <option value="">Select merchant</option>
                            {% for each_merchant in merchantsList %}
                            <option value="{{each_merchant.id}}">{{each_merchant.fullName}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="reportType">Report Type*</label>
                        <select class="form-select" name="reportType" required id="editReportType">
                            <option value="">Select</option>
                            <option value="ledger">ledger</option>
                            <option value="transactions">transactions</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="walletType">Wallet Type*</label>
                        <select class="form-select" name="walletType" required id="editWalletType">
                            <option value="">Select</option>
                            <option value="payin">payin</option>
                            <option value="payout">payout</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="startDate">Transaction Startdate*</label>
                        <input type="text" class="form-control flatpickrdate" name="startDate"
                            placeholder="Select start date" required id="editStartDate">
                    </div>
                    <div class="form-group">
                        <label for="endDate">Transaction Enddate*</label>
                        <input type="text" class="form-control flatpickrdate" name="endDate"
                            placeholder="Select end date" required id="editEndDate">
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary form_submit">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $('#createReportForm').validate({

            rules: {
                userId: {
                    required: false,
                },
                reportType: {
                    required: true,
                },
                walletType: {
                    required: true,
                },
                startDate: {
                    required: true,
                },
                endDate: {
                    required: true,
                }
            },
            messages: {
                userId: {
                    required: 'Please Select a Merchant',
                },
                reportType: {
                    required: 'Report Type is required',
                },
                walletType: {
                    required: 'Wallet Type is required',
                },
                startDate: {
                    required: 'StartDate is required',
                },
                endDate: {
                    required: 'EndDate is required',
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
                event.preventDefault();
                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                    success: function (response) {
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                            form.reset();
                            location.reload();
                        } else if (response.responseStatus == 0) {
                            $('.form_submit').prop('disabled', false);
				            $('#newLoadingModel').hide();
                            $.each(response.result, function (key, value) {
                                $('#' + key + "_error").text(value)
                            });
                            return false;
                        } else if (response.responseStatus == 2) {
                            $('.form_submit').prop('disabled', false);
				            $('#newLoadingModel').hide();
                            $('#errorMessage').text(response.result);
                            return false;
                        } else {
                            location.reload();
                        }

                    },
                    error: function (xhr) {
                                // You can also reload page after error (e.g. CSRF token mismatch)
                                location.reload();
                            }
                });
            }
        });


        $('#updateReportForm').validate({
            rules: {
                userId: {
                    required: true,
                },
                reportType: {
                    required: true,
                },
                walletType: {
                    required: true,
                },
                startDate: {
                    required: true,
                },
                endDate: {
                    required: true,
                }
            },
            messages: {
                userId: {
                },
                reportType: {
                    required: 'Report Type is required',
                },
                walletType: {
                    required: 'Wallet Type is required',
                },
                startDate: {
                    required: 'StartDate is required',
                },
                endDate: {
                    required: 'EndDate is required',
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
                event.preventDefault();
                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                    success: function (response) {
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                            form.reset();
                            // location.reload();
                            window.location.href = "{{ url_for('admin_reports.admin_payout_download_reports_list',generateReportPage=generateReportPage) }}";
                        } else if (response.responseStatus == 0) {
                            $('.form_submit').prop('disabled', false);
				            $('#newLoadingModel').hide();
                            $.each(response.result, function (key, value) {
                                $('#' + key + "_edit_error").text(value)
                            });
                            return false;
                        } else if (response.responseStatus == 2) {
                            $('.form_submit').prop('disabled', false);
				            $('#newLoadingModel').hide();
                            $('#EditErrorMessage').text(response.result);
                            return false;
                        } else {
                            location.reload();
                        }

                    },
                    error: function (xhr) {
                                // You can also reload page after error (e.g. CSRF token mismatch)
                                location.reload();
                            }
                });
            }
        });
    });
</script>
{% endblock %}