@extends('layouts.master')
@section('title', 'Pending DPS Installments Report')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title"><strong>Pending DPS Installments Report</strong></h1>
    </div>
</header>
@endsection

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

    <!-- Installments Table -->
    <div class="card">
        <div class="card-header">
            <h4 class="card-title fw-400">Pending DPS Installments</h4>
            <form method="GET" action="{{ route('dps.installments.report') }}" class="mb-3 d-flex gap-2">
            <select name="interest_type" class="form-control" onchange="this.form.submit()">
                <option value="">All Types</option>
                <option value="daily" {{ request('interest_type') == 'daily' ? 'selected' : '' }}>Daily</option>
                <option value="weekly" {{ request('interest_type') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                <option value="monthly" {{ request('interest_type') == 'monthly' ? 'selected' : '' }}>Monthly</option>
            </select>
            <select name="customer_id" class="form-control" onchange="this.form.submit()"
                    data-provide="selectpicker" data-live-search="true">
                    <option value="">All Customers</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}"
                        {{ old(key: 'customer_id') == $customer->id ? 'selected' : '' }}>
                        {{ $customer->name }} ({{ $customer->mobile_no }}) {{ $customer->account_no }}
                    </option>
                    @endforeach
                </select>
        </form>
        </div>
        <div class="card-body table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>DPS No</th>
                        <th>Customer</th>
                        <th>Installment Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    
                    @forelse($installments as $installment)
                    @php
                        $paidAmount = $installment->amount - $installment->remaining_amount;
                        $remainingAmount = $installment->remaining_amount;
                    @endphp
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $installment->dpsAccount->id }}</td>
                            <td>{{ $installment->dpsAccount->customer->name ?? 'N/A' }}</td>
                            <td>{{ \Carbon\Carbon::parse($installment->installment_date)->format('d-m-Y') }}</td>
                           <!-- <td>{{ number_format($installment->amount, 2) }}</td> -->
                           <td>{{ number_format($remainingAmount, 2) }}</td>
                            <td>
                                @if($installment->is_paid)
                                    <span class="badge badge-success">Paid</span>
                                @else
                                    <span class="badge badge-warning">Pending</span>
                                @endif
                            </td>
                            <td>
                                @if(!$installment->is_paid)
                                <!-- Collect Payment Modal Trigger -->
                                <button type="button" class="btn btn-sm btn-success" data-toggle="modal"
                                    data-target="#collectPaymentModal{{ $installment->id }}">
                                    Collect Payment
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="collectPaymentModal{{ $installment->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <form action="{{ route('dps.installments.collect', $installment->id) }}" method="POST">
                                            @csrf
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Collect Payment - DPS {{ $installment->dpsAccount->id }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label>Payment Amount</label>
                                                        <input type="number" step="0.01" name="amount" class="form-control"
                                                            value="{{ $installment->amount }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Payment Date</label>
                                                        <input type="date" name="paid_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Bank Account</label>
                                                        <select name="bank_account_id" class="form-control" required>
                                                            @foreach(App\BankAccount::all() as $account)
                                                                <option value="{{ $account->id }}">{{ $account->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-success">Collect Payment</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                @else
                                    <span class="text-muted">Paid</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">No pending installments found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection
