@include('admin.layouts.header')
@include('admin.layouts.sidebar')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Settlement
                </h3>
            </div>

        </div>
    </div>
    <?php setlocale(LC_MONETARY, 'en_IN.UTF-8'); ?>
    <!-- END: Subheader -->
    <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 class="m-portlet__head">
                <div class="m-portlet__head-caption" style="position: relative;">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-file-text-o"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Settlement
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body" style="padding-left: 0;padding-right: 0;padding-top: 10px;">
                <div class="m-section">
                    <div class="m-section__content">

                    <!-- Filter Bar -->
                    <div class="panel-body" style="padding: 16px 20px 0;">
                        <form method="GET" action="{{ url('admin/payment/settlement-logs') }}" id="filterForm">
                            <div class="row" style="align-items: flex-end;">
                                <div class="col-md-3">
                                    <div class="form-group" style="margin-bottom: 12px;">
                                        <label style="font-size:13px; font-weight:600; margin-bottom:4px; display:block;">
                                            Application ID
                                        </label>
                                        <input type="text"
                                            class="form-control"
                                            name="application_id"
                                            id="filter_application_id"
                                            value="{{ $filterAppId ?? '' }}"
                                            placeholder="Enter Application ID"
                                            style="font-size:13px;">
                                    </div>
                                </div>
                                <div class="col-md-2" style="padding-bottom: 12px;">
                                    <button type="submit" class="btn btn-primary btn-sm" style="margin-right:6px;">
                                        <i class="fa fa-search"></i> Filter
                                    </button>
                                    @if($filterAppId)
                                    <a href="{{ url('admin/payment/settlement-logs') }}" class="btn btn-default btn-sm">
                                        Clear
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Table -->
                    <div class="panel-body" style="padding: 8px 20px 20px; overflow-x: auto;">
                        @if($makerCheckerLogs->count() > 0)
                        <table class="table table-bordered table-sm" style="font-size: 13px; margin-bottom: 0;">
                            <thead style="background-color: #f1f1f1;">
                                <tr>
                                    <th>App ID</th>
                                    <th>POS</th>
                                    <th>Settlement Amount</th>
                                    <th>Waiver %</th>
                                    <th>Requested To</th>
                                    <th>Status</th>
                                    <th>Maker</th>
                                    <th>Checker</th>
                                    <th>Action At</th>
                                    <th>Remark</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($makerCheckerLogs as $index => $log)
                                @php
                                    $isChecker    = auth()->check() && auth()->user()->canApproveSettlementWaiver($log->waiver_percentage);
                                    $isPending    = $log->status === 'pending';
                                    $appRecord    = $applications[$log->application_id] ?? null;
                                    $isSettled    = ($appRecord && ($appRecord->secondary_status ?? '') === 'settled');
                                    $isPaid       = $settlementPaidMap[$log->id] ?? false;
                                    $customerEmail = $appRecord ? ($appRecord->email ?? '') : '';
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ url('admin/payment/settlement/' . $log->application_id) }}"
                                            target="_blank"
                                            style="font-weight:600;">
                                            {{ $log->application_id }}
                                        </a>
                                    </td>
                                    <td>₹{{ number_format($log->pos, 2) }}</td>
                                    <td>₹{{ number_format($log->settlement_amount, 2) }}</td>
                                    <td>{{ $log->waiver_percentage }}%</td>
                                    <td>
                                        <small style="color:#888;">Approvers with POS waiver limit ≥ {{ round($log->waiver_percentage, 2) }}%</small>
                                    </td>
                                    <td>
                                        @if($log->status === 'approved')
                                            <span class="badge badge-success">Approved</span>
                                        @elseif($log->status === 'rejected')
                                            <span class="badge badge-danger">Rejected</span>
                                        @else
                                            <span class="badge badge-warning">Pending</span>
                                        @endif
                                    </td>
                                    <td>{{ $log->maker ? $log->maker->name : '-' }}</td>
                                    <td>{{ $log->checker ? $log->checker->name : '-' }}</td>
                                    <td>{{ $log->action_at ? \Carbon\Carbon::parse($log->action_at)->format('d-m-Y H:i') : '-' }}</td>
                                    <td>
                                        @if($isChecker && $isPending)
                                            <input type="text" class="form-control form-control-sm checker-remark"
                                                data-id="{{ $log->id }}"
                                                placeholder="Add remark"
                                                value="{{ $log->remark ?? '' }}"
                                                style="min-width:160px;">
                                        @else
                                            {{ $log->remark ?? '-' }}
                                        @endif
                                    </td>
                                    <td>
                                        @if($isChecker && $isPending)
                                            <button class="btn btn-sm btn-success approve-mc-btn" data-id="{{ $log->id }}" style="margin-bottom:4px;">Approve</button>
                                            <button class="btn btn-sm btn-danger reject-mc-btn" data-id="{{ $log->id }}">Reject</button>
                                        @elseif($log->status === 'approved')
                                            @if($isSettled)
                                                <span style="color:#27ae60; font-size:12px; font-weight:600;">Loan Settled</span>
                                                <br>
                                                <button class="btn btn-sm btn-primary send-letter-btn" data-app-id="{{ $log->application_id }}" data-customer-email="{{ $customerEmail }}" style="margin-top:4px;">
                                                    Send Settlement Letter
                                                </button>
                                            @elseif($isPaid)
                                                <span style="color:#27ae60; font-size:12px; font-weight:600;">Amount Received</span>
                                                <br>
                                                <button class="btn btn-sm btn-warning mark-settled-btn"
                                                    data-id="{{ $log->id }}"
                                                    style="margin-top:4px;">
                                                    Mark Settled
                                                </button>
                                            @else
                                                @if($appRecord->secondary_status == 'settlement-aborted')
                                                    <span style="color:#FF0000; font-size:12px; font-weight:600;">Settlement Aborted</span>
                                                @else
                                                    <button class="btn btn-sm btn-primary send-proposal-btn" data-id="{{ $log->id }}" data-customer-email="{{ $customerEmail }}">
                                                        Settlement Proposal Letter
                                                    </button>
                                                @endif
                                            @endif
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Pagination -->
                        <div style="margin-top: 16px;">
                            {{ $makerCheckerLogs->links() }}
                        </div>

                        @else
                        <p style="margin: 12px 0; color: #888;">
                            @if($filterAppId)
                                No approval requests found for Application ID <strong>{{ $filterAppId }}</strong>.
                            @else
                                No approval requests found.
                            @endif
                        </p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Settlement Proposal Letter Modal -->
<div class="modal fade" id="proposalLetterModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width:480px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Settlement Proposal Letter<p class="download-letter" style="cursor:pointer;color:blue;font-size: 12px;">Download Letter</p></h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="proposal_mc_id" value="">
                <div class="form-group">
                    <label style="font-weight:600; font-size:13px;">Customer Email</label>
                    <input type="email" class="form-control" id="proposal_customer_email" readonly>
                </div>
                <div class="form-group">
                    <label style="font-weight:600; font-size:13px;">Additional Email ID</label>
                    <input type="email" class="form-control" id="proposal_additional_email" placeholder="Enter additional email (optional)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="proposalProceedBtn">Proceed</button>
            </div>
        </div>
    </div>
</div>

<!-- Settlement Letter Modal -->
<div class="modal fade" id="settlementLetterModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width:480px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Settlement Letter<p class="download-settlement-letter" style="cursor:pointer;color:blue;font-size: 12px;">Download Letter</p></h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="letter_app_id" value="">
                <div class="form-group">
                    <label style="font-weight:600; font-size:13px;">Customer Email</label>
                    <input type="email" class="form-control" id="letter_customer_email" readonly>
                </div>
                <div class="form-group">
                    <label style="font-weight:600; font-size:13px;">Additional Email ID</label>
                    <input type="email" class="form-control" id="letter_additional_email" placeholder="Enter additional email (optional)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="letterProceedBtn">Proceed</button>
            </div>
        </div>
    </div>
</div>

@include("admin.layouts.footer")
<script>
$(document).ready(function () {

    // Helper: get remark value for a log row
    function getMcRemark(id) {
        var input = $('.checker-remark[data-id="' + id + '"]');
        return input.length ? input.val().trim() : '';
    }

    // Approve
    $(document).on('click', '.approve-mc-btn', function () {
        var id     = $(this).data('id');
        var remark = getMcRemark(id);
        var btn    = $(this);
        btn.prop('disabled', true).text('...');
        $.ajax({
            url: '/admin/payment/settlement-maker-checker/' + id + '/approve',
            type: 'POST',
            data: { _token: document.querySelector('meta[name="_token"]').getAttribute('content'), remark: remark },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    setTimeout(function () { location.reload(); }, 800);
                } else {
                    toastr.error(res.message);
                    btn.prop('disabled', false).text('Approve');
                }
            },
            error: function () {
                toastr.error('An error occurred.');
                btn.prop('disabled', false).text('Approve');
            }
        });
    });

    // Reject
    $(document).on('click', '.reject-mc-btn', function () {
        var id     = $(this).data('id');
        var remark = getMcRemark(id);
        if (!remark) {
            toastr.warning('Please add a remark before rejecting.');
            return;
        }
        var btn = $(this);
        btn.prop('disabled', true).text('...');
        $.ajax({
            url: '/admin/payment/settlement-maker-checker/' + id + '/reject',
            type: 'POST',
            data: { _token: document.querySelector('meta[name="_token"]').getAttribute('content'), remark: remark },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    setTimeout(function () { location.reload(); }, 800);
                } else {
                    toastr.error(res.message);
                    btn.prop('disabled', false).text('Reject');
                }
            },
            error: function () {
                toastr.error('An error occurred.');
                btn.prop('disabled', false).text('Reject');
            }
        });
    });

    // Open Settlement Proposal Letter modal
    $(document).on('click', '.send-proposal-btn', function () {
        var id            = $(this).data('id');
        var customerEmail = $(this).data('customer-email');
        $('#proposal_mc_id').val(id);
        $('#proposal_customer_email').val(customerEmail);
        $('#proposal_additional_email').val('');
        $('#proposalLetterModal').modal('show');
    });

    $('.download-letter').on('click', function () {
        var id = $('#proposal_mc_id').val();
        window.location.href = '/admin/payment/settlement-maker-checker/' + id + '/download-proposal?action=download';
    });

    // Proceed — send proposal letter
    $('#proposalProceedBtn').on('click', function () {
        var id              = $('#proposal_mc_id').val();
        var additionalEmail = $('#proposal_additional_email').val().trim();
        var btn             = $(this);
        btn.prop('disabled', true).text('Sending...');

        $.ajax({
            url: '/admin/payment/settlement-maker-checker/' + id + '/send-proposal',
            type: 'POST',
            data: {
                _token:           document.querySelector('meta[name="_token"]').getAttribute('content'),
                additional_email: additionalEmail
            },
            success: function (res) {
                btn.prop('disabled', false).text('Proceed');
                if (res.status === 'success') {
                    toastr.success(res.message);
                    $('#proposalLetterModal').modal('hide');
                } else {
                    toastr.error(res.message);
                }
            },
            error: function () {
                btn.prop('disabled', false).text('Proceed');
                toastr.error('An error occurred. Please try again.');
            }
        });
    });

    // Open Settlement Letter modal
    $(document).on('click', '.send-letter-btn', function () {
        var appId         = $(this).data('app-id');
        var customerEmail = $(this).data('customer-email');
        $('#letter_app_id').val(appId);
        $('#letter_customer_email').val(customerEmail);
        $('#letter_additional_email').val('');
        $('#settlementLetterModal').modal('show');
    });

    $('.download-settlement-letter').on('click', function () {
        var appId = $('#letter_app_id').val();
        window.open('/admin/consumer-applications/download-settlement-letter/' + appId, '_blank');
    });

    // Proceed — send settlement letter
    $('#letterProceedBtn').on('click', function () {
        var appId           = $('#letter_app_id').val();
        var additionalEmail = $('#letter_additional_email').val().trim();
        var btn             = $(this);
        btn.prop('disabled', true).text('Sending...');

        $.ajax({
            url: '/admin/payment/settlement-letter/' + appId + '/send',
            type: 'POST',
            data: {
                _token:           document.querySelector('meta[name="_token"]').getAttribute('content'),
                additional_email: additionalEmail
            },
            success: function (res) {
                btn.prop('disabled', false).text('Proceed');
                if (res.status === 'success') {
                    toastr.success(res.message);
                    $('#settlementLetterModal').modal('hide');
                } else {
                    toastr.error(res.message);
                }
            },
            error: function () {
                btn.prop('disabled', false).text('Proceed');
                toastr.error('An error occurred. Please try again.');
            }
        });
    });

    // Mark Settled
    $(document).on('click', '.mark-settled-btn', function () {
        var btn = $(this);
        var id  = btn.data('id');
        if (!confirm('Are you sure you want to mark this application as Settled?')) return;
        btn.prop('disabled', true).text('Marking...');
        $.ajax({
            url: '/admin/payment/settlement-maker-checker/' + id + '/mark-settled',
            type: 'POST',
            data: { _token: document.querySelector('meta[name="_token"]').getAttribute('content') },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    setTimeout(function () { location.reload(); }, 1000);
                } else {
                    toastr.error(res.message);
                    btn.prop('disabled', false).text('Mark Settled');
                }
            },
            error: function () {
                toastr.error('An error occurred. Please try again.');
                btn.prop('disabled', false).text('Mark Settled');
            }
        });
    });

    // Auto-save remark on blur
    $(document).on('blur', '.checker-remark', function () {
        var id     = $(this).data('id');
        var remark = $(this).val().trim();
        $.ajax({
            url: '/admin/payment/settlement-maker-checker/' + id + '/remark',
            type: 'POST',
            data: { _token: document.querySelector('meta[name="_token"]').getAttribute('content'), remark: remark },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.info('Remark saved.');
                }
            }
        });
    });

});
</script>