@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>

    .table-container {
        /* This creates the scrollable box */
        max-height: 650px; /* Adjust height as needed */
        overflow-y: auto;
        position: relative;
    }

    .table-container thead {
        /* This makes the header stick to the top when scrolling */
        position: sticky;
        top: 0;
        background-color: #ffffff; /* Ensure it has a solid background */
        z-index: 10; /* Keeps it above the scrolling content */
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); /* Optional: visual separation */
    }

    /* --- CSS Counter for Row Numbers --- */
    .table-container table {
        /* Required for the counter */
        counter-reset: rowNum;
    }

    .table-container .app-body tr {
        /* Increment the counter for each row */
        counter-increment: rowNum;
    }

    .table-container .app-body tr td.row-counter::before {
        /* Display the counter number in the correct cell */
        content: counter(rowNum);
    }
    
    /* Optional: Center the counter */
    .table-container .app-body tr td.row-counter,
    .table-container thead th:nth-child(2) {
        text-align: center;
        width: 80px; /* Give it a fixed width */
    }

    .table-footer-info {
        padding: 15px;
        text-align: right;
        font-weight: bold;
        border-top: 1px solid #eee;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Over Due Reminder
                </h3>
            </div>
        </div>
    </div>
    <?php setlocale(LC_MONETARY, 'en_IN.UTF-8'); ?>
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div name="all_application_id" id="all_application_id" data-id="{!! $application_ids !!}" style="display: none"></div>
            <div name="application_id" id="application_id" data-id="" style="display: none"></div>

            <div class="m-portlet__body">

                <div class="row" style="margin-bottom: 20px;">
                    
                    <div class="col-md-6">
                        <form action="{{asset('admin/payment/over_due_reminder_v1')}}" method="get" id="search_course" name="search_course" class="form-horizontal">
                            <input name="_token" value="{{ csrf_token() }}" type="hidden">
                            <div class="row">

                                <div class="col-md-4" style="margin-bottom: 10px;">
                                    <select title="Select Lenders" 
                                            class="form-control selectpicker" 
                                            id="lender_ids" 
                                            name="lender_ids[]" 
                                            data-live-search="true" 
                                            multiple>

                                        @if(isset($lenders))
                                            @foreach($lenders as $lender)
                                                <option value="{{ $lender->id }}" 
                                                    @if(isset($_GET['lender_ids']) && in_array($lender->id, $_GET['lender_ids'])) selected @endif>
                                                    {{ $lender->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-4">
                                <input type="number" name="total_due_amount" id="total_due_amount" class="form-control" title="Total Due Amount" placeholder=" >Total Due Amount" value="{{ $_GET['total_due_amount'] ?? '' }}"/>
                                </div>

                                <div class="col-md-2">
                                    <button type="submit" id="search" style="background-color: #42d9e4;cursor: pointer;color: white;" class="form-control">Search</button>
                                </div> 

                                <div class="col-md-2">
                                    <button type="button" id="clear-filter-btn" class="btn btn-primary">Clear Filter</button>
                                </div>

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

                    <div class="col-md-6 text-right">
                        <button class="btn btn-primary" style="margin-left: 5px;" onclick="sendoverreminder(1)">Send All Reminder</button>
                        <button class="btn btn-primary" style="margin-left: 5px;" onclick="sendoverreminder(2)">Send Selected Reminder</button>
                    </div>
                    
                </div>

                <hr> <div class="m-section">
                    <div class="m-section__content table-container">
                        @if(isset($response) && count($response) > 0)
                            <table class="table">
                                <thead>
                                <tr>
                                    <th style="width: 60px;">
                                        <input type="checkbox" name="updateallcheckbox" value="updateallcheckbox">
                                    </th>
                                    <th><strong>Sr. No.</strong></th>
                                    <th><strong>Applicant Name</strong></th>
                                    <th><strong>Merchant</strong></th>
                                    <th><strong>Total Due Amount</strong></th>
                                    <th><strong>Emi Due Amount</strong></th>
                                    <th><strong>Charges Due</strong></th>
                                    <th><strong>Delay days</strong></th>
                                    <th><strong>Action</strong></th>
                                </tr>
                                </thead>
                                <tbody class="app-body">

                                <?php setlocale(LC_MONETARY, 'en_IN.UTF-8');
                                $user_id = \Illuminate\Support\Facades\Auth::user() ? \Illuminate\Support\Facades\Auth::user()->id : 0;
                                ?>
                                @foreach($response as $application_id => $payment)
                                    <tr>
                                        <td> <input type="checkbox" name="{!! $payment['id']!!}" value="{!! $payment['id']!!}"></td>
                                        <td class="row-counter"></td>
                                        <td>{!! $payment['applicant_name']!!}</td>
                                        <td>{!! $payment['merchant_name']!!}</td>
                                        <td>{!! $payment['total_due_amount']!!}</td>
                                        <td>{!! $payment['emi_due_amount']!!}</td>
                                        <td>{!! $payment['charges_due']!!}</td>
                                        <td>{!! $payment['delay_days']!!}</td>
                                        <td><a class="btn btn-primary" style="background-color: #00c5dc; border-color: #349eab;" href="/admin/payment/start_v1/{!! $application_id !!}" target="_blank">Payment Details</a></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        @else
                            <b><center>No Data Found</center></b>
                        @endif
                    </div>
                    
                    @if(isset($response) && count($response) > 0)
                        <div class="table-footer-info">
                            Showing <span id="current-row-count">{{ count($response) }}</span>
                            of <span id="total-row-count">{{ $totalCount }}</span> records.
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
</div>
@include("admin.layouts.footer")
<script>

    $("#clear-filter-btn").on('click', function() {
        
        // 1. Clear the 'total_due_amount' filter input
        $('#total_due_amount').val('');

        // 2. Uncheck the "Check All" box in the header
        $("input[name='updateallcheckbox']").prop('checked', false);

        // 3. Uncheck all individual checkboxes in the table body
        $("tbody.app-body input[type='checkbox']").prop('checked', false);
        
        // 4. Reset the empty application_id div (as you requested)
        $("#application_id").data('id', '');

        // 5. This clears the value and tells Bootstrap Select to update its UI
        $('#lender_ids').val(null).selectpicker('refresh');

        var queryString = window.location.search;

        if (queryString && queryString.length > 1) {
            window.location.href = '{{ asset("admin/payment/over_due_reminder_v1") }}';
        }
    });

    let page = 0;
    let TOTAL_COUNT = parseInt($("#total-row-count").text());
    let IS_LOADING = false; // Flag to prevent multiple concurrent requests

    function getCurrentLoadedCount() {
        return $("tbody.app-body tr").length;
    }

    $("form#search_course").submit(function(){
        let amount = $('#total_due_amount').val();
        let lenders = $('#lender_ids').val(); // This is an array or null

        // Check if amount is empty
        let isAmountEmpty = (amount === '' || amount.length === 0);
        
        // Check if lenders are empty (null or 0-length array)
        let areLendersEmpty = (lenders === null || lenders.length === 0);
        if (isAmountEmpty && areLendersEmpty) {
            alert('Please enter an amount or select a lender to search.');
            return false; 
        }

        return true;
    });

    $("input[name='updateallcheckbox']").change(function(){
        if($(this).is(':checked')) {
            $("input[type='checkbox']").each(function (index, item) {
                if(typeof $(item).attr('disabled') === 'undefined') {
                    $(item).prop('checked', true);
                }
            });
        }else{
            $("input[type='checkbox']").prop('checked', false);
        }
    });

    function sendoverreminder(type) {
        var _token = '<?php echo csrf_token(); ?>';
        var application_ids = [];
        var applicationcount = 0;

        var element = $(".app-body").find("input[type='checkbox']");
        var _application_ids = [];
        $.each(element, function(){
            if($(this).is(':checked')) {
                _application_ids.push($(this).attr('name'));
                applicationcount = applicationcount + 1;
            }
        });
        _application_ids.join(',');
        if (_application_ids.length > 0) {
            application_ids = "[" + _application_ids + "]";
        }

        if(application_ids.length > 0) {
            $(".init-loader").css({display: 'block'});
            $.ajax({
                type: 'POST',
                url: "/admin/payment/check-payment-reminder",
                data: {
                    application_ids: application_ids,
                    _token: _token
                },
                dataType: "JSON",
                success: function (response) {
                    $(".init-loader").css({display: 'none'});
                    if (response.status === 'OK') {
                        let confirmation_message = 'Do you want to send over due payment reminder to '+applicationcount+' customers?  ';

                        if(response.count >  0){
                            confirmation_message = 'Do you want to resend over due payment reminder to '+applicationcount+' customers?  ';
                        }
                        if (confirm(confirmation_message)) {
                            $(".init-loader").css({display: 'block'});
                            $.ajax({
                                type: 'POST',
                                url: "/admin/payment/send-payment-reminder",
                                data: {
                                    application_ids: application_ids,
                                    _token: _token
                                },
                                dataType: "JSON",
                                success: function (response) {
                                    $(".init-loader").css({display: 'none'});
                                    if (response.status === 'OK') {
                                        alert(response.message);
                                        window.location.reload();
                                    } else {
                                        alert(response.message);
                                    }
                                }
                            });
                        }
                    } else {
                        alert(response.message);
                    }
                }
            });

        }else{
            alert('Please select application');
        }
    }
</script>