@extends('layout.app')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="color:#115548;">
                    <i class="fas fa-money-check-alt mr-2"></i>Product Installment — All Payments
                </h3>
                <div class="card-tools">
                    <a href="{{ route('product-installment.payments.export', request()->query()) }}" class="btn btn-sm btn-success">
                        <i class="fa fa-file-excel"></i> Excel
                    </a>
                    <a href="{{ route('product-installment.index') }}" class="btn btn-sm btn-secondary">
                        <i class="fa fa-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">

                <form method="GET" action="{{ route('product-installment.payments') }}" class="mb-3">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="mb-1">Manager</label>
                            <select name="reseller_id" id="payFilterManager" class="form-control select2">
                                <option value="">— All Managers —</option>
                                @foreach ($managers as $m)
                                    <option value="{{ $m->id }}" {{ request('reseller_id') == $m->id ? 'selected' : '' }}>
                                        {{ $m->name_with_type }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="mb-1">POP</label>
                            <select name="pop_id" id="payFilterPop" class="form-control select2">
                                <option value="">— All POPs —</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="mb-1">Product Name</label>
                            <input type="text" name="product_name" class="form-control"
                                   value="{{ request('product_name') }}" placeholder="Search product name">
                        </div>
                        <div class="col-md-3">
                            <label class="mb-1">Type</label>
                            <select name="pay_type" class="form-control select2">
                                <option value="">— All —</option>
                                <option value="own"   {{ request('pay_type') == 'own'   ? 'selected' : '' }}>Own</option>
                                <option value="other" {{ request('pay_type') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <label class="mb-1">From Date</label>
                            <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="mb-1">To Date</label>
                            <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="form-group mb-0">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-filter"></i> Filter</button>
                                <a href="{{ route('product-installment.payments') }}" class="btn btn-secondary">Reset</a>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table id="dataTable" class="table table-bordered table-striped table-hover table-sm">
                        <thead class="thead-dark">
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>Product</th>
                                <th>Manager</th>
                                <th>POP</th>
                                <th>Type</th>
                                <th class="text-right">Amount</th>
                                <th>Note</th>
                                <th>Paid By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($payments as $i => $p)
                                <tr>
                                    <td>{{ $i + 1 }}</td>
                                    <td>{{ $p->created_at->format('d M Y') }}</td>
                                    <td>{{ optional($p->installment)->product_name ?? '—' }}</td>
                                    <td>{{ optional($p->reseller)->name_with_type ?? '—' }}</td>
                                    <td>{{ optional(optional($p->installment)->pop)->popname ?? '—' }}</td>
                                    <td><span class="badge badge-{{ $p->pay_type === 'own' ? 'primary' : 'secondary' }}">{{ ucfirst($p->pay_type) }}</span></td>
                                    <td class="text-right font-weight-bold">{{ number_format($p->amount, 2) }}</td>
                                    <td>{{ $p->note ?: '—' }}</td>
                                    <td>{{ optional($p->createdBy)->name ?? '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center text-muted py-3">No payments found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot>
                            <tr style="font-weight:bold;background:#f4f6f9;">
                                <td colspan="6" class="text-right">Total</td>
                                <td class="text-right">{{ number_format($payments->sum('amount'), 2) }}</td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@section('ajax')
<script>
$(function () {
    var resellerPopUrl = "{{ route('reseller-pop') }}";
    var currentPopId   = "{{ request('pop_id') }}";

    function loadPayFilterPops(resellerId, selectedPopId) {
        var $pop = $('#payFilterPop');
        $pop.empty().append('<option value="">— All POPs —</option>');
        if (!resellerId) { $pop.trigger('change.select2'); return; }
        $.get(resellerPopUrl, { reseller: resellerId }, function (data) {
            $.each(data.popes, function (i, pop) {
                var sel = (selectedPopId && pop.id == selectedPopId) ? 'selected' : '';
                $pop.append('<option value="' + pop.id + '" ' + sel + '>' + pop.popname + '</option>');
            });
            $pop.trigger('change.select2');
        });
    }

    $('#payFilterManager').on('change', function () {
        loadPayFilterPops($(this).val(), null);
    });

    if ($('#payFilterManager').val()) {
        loadPayFilterPops($('#payFilterManager').val(), currentPopId);
    }
});
</script>
@endsection