@extends('layouts.master')
@section('title', 'Payment History')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title">
            <strong>Payment History (Loan & DPS)</strong>
        </h1>
    </div>
</header>
@endsection

@section('content')
<div class="col-md-12">

    {{-- 🔍 Filter --}}
    <div class="card card-body mb-2">
        <form method="GET">
            <div class="form-row">

                <div class="form-group col-md-3">
                    <select name="customer_id" class="form-control" data-provide="selectpicker" data-live-search="true">
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                        <option value="{{ $customer->id }}"
                            {{ request('customer_id') == $customer->id ? 'selected' : '' }}>
                            {{ $customer->name }} ({{ $customer->mobile_no }}) {{ $customer->account_no }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-2">
                    <input type="text" class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd"
                        name="from_date" placeholder="Start Date" value="{{ request('from_date') }}">
                </div>

                <div class="form-group col-md-2">
                    <input type="text" class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd"
                        name="to_date" placeholder="End Date" value="{{ request('to_date') }}">
                </div>

                <div class="form-group col-md-3">
                    <button class="btn btn-primary">Filter</button>
                    <a href="{{ route('payments.index') }}" class="btn btn-info">Reset</a>
                </div>

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

    {{-- 📋 Table --}}
    <div class="card">
        <div class="card-header">
            <h4 class="card-title fw-400">All Payments</h4>
        </div>

        <div class="card-body table-responsive">
            <form method="POST" action="{{ route('payments.bulk.delete') }}"
                onsubmit="return confirm('Delete selected payments?')">
                @csrf
                @method('DELETE')

                <button class="btn btn-danger mt-2">Delete Selected</button>

                <table class="table table-bordered table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Customer</th>
                            <th>Reference</th>
                            <th>Amount</th>
                            <th>Bank</th>
                            <th width="80">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($payments as $payment)
                        <tr>
                            <td>
                                <input type="checkbox" name="payments[]"
                                    value="{{ $payment['type_key'] }}|{{ $payment['id'] }}" class="payment-checkbox">
                            </td>
                            <td>{{ $payment['date'] }}</td>
                            <td>
                                @if($payment['type_key'] == 'loan')
                                <span class="badge bg-primary">Loan</span>
                                @else
                                <span class="badge bg-success">DPS</span>
                                @endif
                            </td>
                            <td>{{ $payment['customer'] }}</td>
                            <td>{{ $payment['details'] }}</td>
                            <td>{{ number_format($payment['amount'], 2) }}</td>
                            <td>{{ $payment['bank'] }}</td>
                            <td>
                                <form method="POST" action="{{ $payment['type_key'] == 'loan'
                            ? route('payments.loan.delete', $payment['id'])
                            : route('payments.dps.delete', $payment['id']) }}"
                                    onsubmit="return confirm('Delete this payment?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center">No payments found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>

            </form>

            <div class="mt-3">
                {{ $payments->links() }}
            </div>

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

<script>
    document.getElementById('selectAll').addEventListener('change', function () {
        document.querySelectorAll('.payment-checkbox').forEach(cb => {
            cb.checked = this.checked;
        });
    });

</script>
