@extends('layout.app')

@section('content')

@if(session('success_message'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success_message') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif
@if(session('error_message'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error_message') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

<div class="row">
    {{-- Search / List --}}
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="color:#115548;">Manager Advance Commission</h3>
                <div class="card-tools">
                    @can('reseller-advance-commission-history')
                        <a href="{{ route('manager-finance-log.index', ['type' => 'ResellerAdvanceCommission']) }}"
                            class="btn btn-sm btn-secondary mr-1">
                            <i class="fas fa-list-alt"></i> Edit &amp; Delete Log
                        </a>
                    @endcan
                    @can('reseller-advance-commission-create')
                        <button type="button" data-toggle="modal" data-target="#addAdvanceModal" class="btn btn-sm btn-primary">
                            <i class="fa fa-plus-circle"></i> Give Advance Commission
                        </button>
                    @endcan
                </div>
            </div>
            <div class="card-body py-2">
                {{-- One compact search line: the two month fields, the two optional entry-date
                     fields, manager and status, then the buttons and a one-line note. --}}
                <form id="searchForm">
                    <div class="form-row align-items-end">
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">From Month</label>
                            <input type="month" name="from_month" class="form-control form-control-sm"
                                   value="{{ $currentMonth }}">
                        </div>
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">To Month</label>
                            <input type="month" name="to_month" class="form-control form-control-sm"
                                   value="{{ $currentMonth }}">
                        </div>
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">From Date</label>
                            <div class="input-group input-group-sm date" id="searchFrom" data-target-input="nearest">
                                <input type="text" name="from_date" value=""
                                    class="form-control form-control-sm datetimepicker-input"
                                    data-toggle="datetimepicker" data-target="#searchFrom" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">To Date</label>
                            <div class="input-group input-group-sm date" id="searchTo" data-target-input="nearest">
                                <input type="text" name="to_date" value=""
                                    class="form-control form-control-sm datetimepicker-input"
                                    data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">Manager</label>
                            <select name="reseller_id" class="select2 form-control">
                                <option value="">All Managers</option>
                                @foreach($resellers as $r)
                                    <option value="{{ $r->id }}">{{ $r->name_with_type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="mb-0 small text-muted">Status</label>
                            <select name="status" class="form-control select2">
                                <option value="">All</option>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="modification">Modification</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center mt-2">
                        <small class="text-muted mr-auto">
                            <strong>Month</strong> = the month the advance belongs to (what the Manager Commission
                            report recovers against); <strong>Date</strong> = when the entry was typed in. Leave a
                            range blank to ignore it.
                        </small>
                        <button type="submit" class="btn btn-sm btn-primary ml-2" id="searchBtn">
                            <i class="fa fa-search"></i> Search
                        </button>
                        <button type="button" class="btn btn-sm btn-default ml-2" id="resetBtn">
                            <i class="fa fa-undo"></i> Reset
                        </button>
                    </div>
                </form>

                <div id="result" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

{{-- Add Advance Commission Modal --}}
@can('reseller-advance-commission-create')
<div class="modal fade" id="addAdvanceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:#115548;color:#fff;">
                <h5 class="modal-title"><i class="fa fa-plus-circle mr-2"></i>Give Advance Commission</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form action="{{ route('reseller-advance-commission.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Manager (Own Type) <span class="text-danger">*</span></label>
                        <select name="reseller_id" class="select2 form-control" required>
                            <option value="">-- Select Manager --</option>
                            @foreach($resellers as $r)
                                <option value="{{ $r->id }}" {{ old('reseller_id') == $r->id ? 'selected' : '' }}>
                                    {{ $r->name_with_type }}
                                </option>
                            @endforeach
                        </select>
                        @error('reseller_id')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Month <span class="text-danger">*</span></label>
                                <input type="month" name="advance_month" class="form-control"
                                       value="{{ old('advance_month', $currentMonth) }}" required>
                                @error('advance_month')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Recovery Start Month</label>
                                <input type="month" name="recovery_start_month" class="form-control"
                                       value="{{ old('recovery_start_month') }}">
                                <small class="text-muted">Leave empty to start from the advance month.</small>
                                @error('recovery_start_month')<small class="text-danger d-block">{{ $message }}</small>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Advance Amount (TK) <span class="text-danger">*</span></label>
                                <input type="number" name="amount" id="advAmount" class="form-control"
                                       value="{{ old('amount') }}" min="1" step="0.01" required>
                                @error('amount')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Installment Count <span class="text-danger">*</span></label>
                                <input type="number" name="installment_count" id="advCount" class="form-control"
                                       value="{{ old('installment_count', 1) }}" min="1" step="1" required>
                                <small class="text-muted">Per month: <span id="advPerInstall">0.00</span> TK (Amount ÷ Count)</small>
                                @error('installment_count')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" class="form-control" rows="2"
                                  placeholder="Reason for advance...">{{ old('description') }}</textarea>
                        @error('description')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Save Advance
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

{{-- Advance Recovery Schedule Modal --}}
<div class="modal fade" id="advScheduleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:#115548;color:#fff;">
                <h5 class="modal-title"><i class="fa fa-calendar-alt mr-2"></i>Advance Recovery Schedule</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div id="advScheduleContent">
                    <div class="text-center p-4"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Advance Payment Modal --}}
@can('reseller-advance-commission-payment')
<div class="modal fade" id="advPayModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:#f39c12;color:#fff;">
                <h5 class="modal-title"><i class="fa fa-money-bill-wave mr-2"></i>Advance Payment</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form method="POST" action="" id="advPayForm">
                @csrf
                <div class="modal-body">
                    <div class="row mb-2">
                        <div class="col-6"><strong>Manager:</strong> <span id="advPayManager"></span></div>
                        <div class="col-3"><strong>Advance:</strong> <span id="advPayAmount"></span></div>
                        <div class="col-3"><strong>Remaining:</strong> <span class="text-danger" id="advPayRemaining"></span></div>
                    </div>
                    <div class="form-group">
                        <label>Payment Amount (TK) <span class="text-danger">*</span></label>
                        <input type="number" name="amount" id="advPayInput" class="form-control" min="0.01" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label>Note</label>
                        <textarea name="note" class="form-control" rows="2" placeholder="Optional note..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-warning"><i class="fa fa-money-bill-wave mr-1"></i> Confirm Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Advance Payment History Modal --}}
<div class="modal fade" id="advPayLogModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="fa fa-history mr-2"></i>Advance Payment History</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div id="advPayLogContent">
                    <div class="text-center p-4"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endcan

@endsection

@section('ajax')
<script>
$(function () {
    loadList();

    var advScheduleUrlTemplate = "{{ route('reseller-advance-commission.schedule', ['id' => '__ID__']) }}";

    $(document).on('click', '.schedule-adv-btn', function () {
        var id = $(this).data('id');
        $('#advScheduleContent').html('<div class="text-center p-4"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
        $('#advScheduleModal').modal('show');

        $.get(advScheduleUrlTemplate.replace('__ID__', id))
            .done(function (res) {
                var html = '<div class="row mb-3 px-2">'
                    + '<div class="col-md-4"><strong>Manager:</strong> ' + (res.manager || '-') + '</div>'
                    + '<div class="col-md-4"><strong>Advance:</strong> ' + res.amount + ' TK</div>'
                    + '<div class="col-md-4"><strong>Advance Month:</strong> ' + res.advance_month
                    + '<br><strong>Recovery From:</strong> ' + res.recovery_from + '</div>'
                    + '</div>'
                    + '<div class="row mb-3 px-2">'
                    + '<div class="col-md-3"><strong>Installments:</strong> ' + res.count + '</div>'
                    + '<div class="col-md-3"><strong>Per Month:</strong> ' + res.per + ' TK</div>'
                    + '<div class="col-md-3"><strong>Paid:</strong> <span class="text-success">' + res.total_paid + '</span></div>'
                    + '<div class="col-md-3"><strong>Remaining:</strong> <span class="text-danger">' + res.remaining + '</span></div>'
                    + '</div>';

                html += '<div class="table-responsive"><table class="table table-bordered table-sm">'
                    + '<thead class="thead-dark"><tr>'
                    + '<th>#</th><th>Month</th><th class="text-right">Amount (TK)</th><th>Status</th>'
                    + '</tr></thead><tbody>';

                if (!res.schedule.length) {
                    html += '<tr><td colspan="4" class="text-center text-muted">No schedule.</td></tr>';
                } else {
                    $.each(res.schedule, function (i, s) {
                        var badge = s.status === 'Paid' ? 'badge-success'
                                  : (s.status === 'Partial' ? 'badge-warning'
                                  : (s.status === 'Overdue' ? 'badge-danger' : 'badge-secondary'));
                        html += '<tr>'
                            + '<td>' + s.no + '</td>'
                            + '<td>' + s.month + '</td>'
                            + '<td class="text-right">' + s.amount + '</td>'
                            + '<td><span class="badge ' + badge + '">' + s.status + '</span></td>'
                            + '</tr>';
                    });
                }
                html += '</tbody></table></div>';
                $('#advScheduleContent').html(html);
            })
            .fail(function () {
                $('#advScheduleContent').html('<div class="alert alert-danger m-3">Failed to load schedule.</div>');
            });
    });

    // ── Advance Payment ───────────────────────────────────────────────────
    var advPayUrlTemplate     = "{{ route('reseller-advance-commission.pay', ['id' => '__ID__']) }}";
    var advPayLogUrlTemplate  = "{{ route('reseller-advance-commission.payment-history', ['id' => '__ID__']) }}";
    var advPayDeleteTemplate  = "{{ route('reseller-advance-commission.payment-delete', ['payment' => '__ID__']) }}";
    var advCsrf               = "{{ csrf_token() }}";

    $(document).on('click', '.pay-adv-btn', function () {
        var $b = $(this);
        var remaining = String($b.data('remaining')).replace(/,/g, '');
        $('#advPayForm').attr('action', advPayUrlTemplate.replace('__ID__', $b.data('id')));
        $('#advPayManager').text($b.data('manager'));
        $('#advPayAmount').text($b.data('amount') + ' TK');
        $('#advPayRemaining').text($b.data('remaining') + ' TK');
        $('#advPayInput').attr('max', remaining).val('');
        $('textarea[name="note"]', '#advPayForm').val('');
        $('#advPayModal').modal('show');
    });

    $('#advPayForm').on('submit', function () {
        var amt = parseFloat($('#advPayInput').val());
        var max = parseFloat($('#advPayInput').attr('max'));
        if (isNaN(amt) || amt <= 0) { alert('Enter a valid amount.'); return false; }
        if (amt > max) { alert('Amount cannot exceed remaining (' + max.toFixed(2) + ').'); return false; }
    });

    $(document).on('click', '.pay-log-adv-btn', function () {
        var id = $(this).data('id');
        $('#advPayLogContent').html('<div class="text-center p-4"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
        $('#advPayLogModal').modal('show');

        $.get(advPayLogUrlTemplate.replace('__ID__', id))
            .done(function (res) {
                var html = '<div class="row mb-3 px-2">'
                    + '<div class="col-md-4"><strong>Manager:</strong> ' + (res.manager || '-') + '</div>'
                    + '<div class="col-md-3"><strong>Advance:</strong> ' + res.amount + ' TK</div>'
                    + '<div class="col-md-2"><strong>Paid:</strong> <span class="text-success">' + res.total_paid + '</span></div>'
                    + '<div class="col-md-3"><strong>Remaining:</strong> <span class="text-danger">' + res.remaining + '</span></div>'
                    + '</div>';
                var col = res.can_delete ? 5 : 4;
                html += '<div class="table-responsive"><table class="table table-bordered table-sm">'
                    + '<thead class="bg-info text-white"><tr><th>#</th><th>Amount (TK)</th><th>Note</th><th>Paid By</th><th>Date</th>'
                    + (res.can_delete ? '<th>Action</th>' : '') + '</tr></thead><tbody>';
                if (!res.payments.length) {
                    html += '<tr><td colspan="' + col + '" class="text-center text-muted">No payments recorded.</td></tr>';
                } else {
                    $.each(res.payments, function (i, p) {
                        var act = '';
                        if (res.can_delete) {
                            var du = advPayDeleteTemplate.replace('__ID__', p.id);
                            act = '<td><form method="POST" action="' + du + '" class="d-inline" onsubmit="return confirm(\'Delete this payment?\')">'
                                + '<input type="hidden" name="_token" value="' + advCsrf + '">'
                                + '<input type="hidden" name="_method" value="DELETE">'
                                + '<button type="submit" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button></form></td>';
                        }
                        html += '<tr><td>' + (i + 1) + '</td><td>' + p.amount + '</td><td>' + p.note + '</td><td>' + p.created_by + '</td><td>' + p.date + '</td>' + act + '</tr>';
                    });
                }
                html += '</tbody></table></div>';
                $('#advPayLogContent').html(html);
            })
            .fail(function () {
                $('#advPayLogContent').html('<div class="alert alert-danger m-3">Failed to load payment history.</div>');
            });
    });

    @if($errors->any())
        $('#addAdvanceModal').modal('show');
    @endif

    function advRecalc() {
        var amt = parseFloat($('#advAmount').val()) || 0;
        var cnt = parseInt($('#advCount').val()) || 0;
        $('#advPerInstall').text(amt > 0 && cnt > 0 ? (amt / cnt).toFixed(2) : '0.00');
    }
    $('#advAmount, #advCount').on('input', advRecalc);
    advRecalc();

    // Bound on submit, not the button, so Enter in a month/date field searches
    // instead of reloading the page through the action-less form.
    $('#searchForm').on('submit', function (e) {
        e.preventDefault();
        loadList();
    });

    $('#resetBtn').on('click', function () {
        $('#searchForm')[0].reset();
        $('#searchForm').find('.select2').val('').trigger('change');
        loadList();
    });

    function loadList() {
        $('#processing').show();
        $.ajax({
            type: 'GET',
            url: '{{ route('reseller-advance-commission.search') }}',
            data: $('#searchForm').serialize(),
            success: function (result) {
                $('#result').html(result);
                $('#processing').hide();
            }
        });
    }

    // The approve modal reloads just this ajax list after approving.
    window.approveCommentRefresh = loadList;
});
</script>
@endsection

@include('partials.finance-sticky-table')
@include('partials.approve-comment-modal')