{% extends 'super_admin_templates/base.html' %}
{% block content %}

<!-- Start::app-content -->


<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">Settlement</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>
                    </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">
                        <div class="card-title">
                            Total Unsettled Merchants
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="flashes">
                        <center>
                            {% 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 %}
                                
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                        </div>

                            <div class="row">
                                <div class="col-xl-12 d-flex justify-content-between">
                                    <form method="POST" action="{{ url_for('admin_reports.payin_settlement') }}" name="search-settlement" id="datevalidator-form" class="row gy-2 gx-3 align-items-center mb-4">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <div class="col-auto">
                                            <input type="text" class="form-control flatpickrdate" value="{{ startDate }}" name="startDate" id="startDate" placeholder="Select start date">
                                        </div>

                                        <div class="col-auto">
                                            <input type="text" class="form-control flatpickrdate" value="{{ endDate }}" name="endDate" id="endDate" placeholder="Select end date">
                                        </div>

                                        <div class="col-auto">
                                            <div class="form-group">
                                                <select class="form-control chosen-select" name="paymentGatewayId" id="paymentGatewayId" required title="select Payment Gateway" >
                                                    <option value="">Select payment gateway</option>
                                                    {% for each_pg in paymentgatewayList %}
                                                    {% if paymentGatewayId == each_pg.id %}
                                                    <option selected value="{{each_pg.id}}">{{each_pg.apiName}}</option>
                                                    {% else %}
                                                    <option value="{{each_pg.id}}">{{each_pg.apiName}}</option>
                                                    {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-auto">
                                            <button type="submit" class="btn btn-primary">Search</button>
                                        </div>
                                        <div class="col-auto">
                                        <a href="{{url_for('admin_reports.payin_settlement')}}"><button type="button"
                                                class="btn btn-warning">Reset</button></a>
                                    </div>
                                    </form>
                                    
                                </div>
                            </div>
                            {% for error in form.startDate.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                    {% for error in form.endDate.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                    {% for error in form.paymentGatewayId.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}

                            <p>Grand Total:{{total_amount}}</p>

                            <!-- Add some space -->
                            <div class="mt-3"></div>
                            <!-- End space -->
                            <div class="row">
                                <div class="col-xxl-12 col-lg-12 col-md-12">
                                    <div class="card-body">
                                    <div class="row">
                                        <div class="col-xxl-12 col-lg-12 col-md-12">
                                        <form method="POST" action="{{ url_for('admin_reports.payin_merchant_settlement') }}" class="row gy-2 gx-3 align-items-center mb-4" id="remarkForm">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude" name="latitude">
                                            <input type="hidden" id="longitude" name="longitude">
                                            <input type="hidden" name="settlement_paymentGatewayId" value="{{ paymentGatewayId }}"/>
                                            <input type="hidden" name="paymentGatewayName" value="{{ paymentGatewayName }}"/>
                                            <input type="hidden" name="settlement_startDate" value="{{startDate}}">
                                            <input type="hidden" name="settlement_endDate" value="{{endDate}}">
                                            <div class="table-responsive">
                                                <table id="" class="table text-nowrap">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col"><input type="checkbox" id="selectmerchant"/>S.No</th>
                                                        <th scope="col">Merchant Name</th>
                                                        <th scope="col">Amount(₹)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for each_payin_settlement_user in payinSettlementMerchantsList %}
                                                    <tr>
                                                        <td scope="col"><input type="checkbox" id="selectmerchantids" name="merchantId[]" value="{{ each_payin_settlement_user.merchantId }}"/>{{ loop.index }}

                                                        </td>
                                                        <td scope="col">{{ each_payin_settlement_user.merchantName }}</td>
                                                        <td scope="col">{{ each_payin_settlement_user.totalMerchantAmount }}<input type="hidden" name="totalAmount[]" value="{{ each_payin_settlement_user.totalMerchantAmount }}"/>
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                </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 %} -->
                                                <tfoot>
                                                    <tr><td colspan="3">&nbsp;</td></tr>
                                                </tfoot>
                                                </table>
                                            </div>
                                             <div >
                                                <div class="col-xxl-12 col-lg-12 col-md-12">
                                                    <div class="input-group">
                                                        <textarea class="form-control" rows="5" placeholder="Settlement reason" name="settlementedRemark" id="settlementedRemark" name="comment" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Settlement Reason must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  required></textarea>
                                                    </div>
                                                </div>
                                                <span id="settlementedRemark_status_error" class="error"></span>
                                                <div class="form-group mt-3">
                                                <button type="button" class="btn btn-warning generateOtpBtn" data-index="addsettlement" data-mail-type="Settlement Mail">Generate OTP</button>
                                                <input type="hidden" id="otpLogidaddsettlement" name="otpLogid">
                                            </div>

                                            <div class="form-group mt-3 otp-section" data-index="addsettlement" style="display: none;">
                                                <label for="otpCodeaddsettlement">Enter OTP*</label>
                                                <input type="text" class="form-control otp-input" id="otpCodeaddsettlement" name="otpCode" placeholder="Enter otp">
                                                <div class="mt-2">
                                                    <button type="button" class="btn btn-primary verifyOtpBtn" data-index="addsettlement">Verify OTP</button>
                                                    <button type="button" class="btn btn-secondary resendOtpBtn" data-index="addsettlement" data-mail-type="Settlement Mail">Resend OTP</button>
                                                </div>
                                                <div id="otpMessageaddsettlement" class="text-danger mt-2"></div>
                                            </div>

                                            <!-- Submit Button -->
                                            <div class="modal-footer justify-content-between">
                                                 <span id="remarkErrorMessage" class="error"></span>
                                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtnaddsettlement" disabled>Settlement</button>
                                            </div>
                                        <!-- <button type="submit" class="btn btn-primary">Settlement</button> -->
                                    </div>
                                </form>
                                        </div>

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

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->
        <script>
            $(document).ready(function() {
    $('#selectmerchant').click(function() {
        var checked = this.checked;
        $('input[name="merchantId[]"]').each(function() {
        this.checked = checked;
    });
    })
});
        </script>
    </div>
</div>
<!-- End::app-content -->


<script type="text/javascript">
    $(document).ready(function () {
        $('#remarkForm').each(function () {
            $(this).validate({
                rules: {
                    settlementedRemark: {
                        required: true,
                        minlength: 3,
                    },

                },
                messages: {
                    settlementedRemark: {
                        required: "Settlement Reason is required.",
                        minlength: "Settlement Reason must be at least 3 character."
                    },

                },
                submitHandler: function (form, event) {
                    $('.form_submit').prop('disabled', true);
                    $('#newLoadingModel').show();
                    event.preventDefault();
                    getLocationAndProceed(
                        function (lat, lng) {
                           
                            $(form).find('input[name="latitude"]').val(lat);
                            $(form).find('input[name="longitude"]').val(lng);
                                $('.error').text('');

                                        $.ajax({
                                            url: form.action,
                                            type: form.method,
                                            data: $(form).serialize(),
                                            success: function (response) {
                                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                                    form.reset();
                                                    window.location.reload();
                                                } else if (response.responseStatus == 0) {
                                                    $('.form_submit').prop('disabled', false);
                                                    $('#newLoadingModel').hide();
                                                    $.each(response.result, function (key, value) {
                                                        $('#' + key + "_status_error").text(value);
                                                    });
                                                } else if (response.responseStatus == 2) {
                                                    $('.form_submit').prop('disabled', false);
                                                    $('#newLoadingModel').hide();
                                                    $('#remarkErrorMessage').text(response.result);
                                                } else {
                                                    location.reload();
                                                }
                                            }
                                        });
                                    },
                                    function () {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                        alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }
            });
        });
    });

</script>


{% endblock %}