@extends('layouts.app')

@section('content')

<div class="container-fluid">

    <h2 class="mb-4">💰 Customer Payment Collection</h2>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="card shadow">
        <div class="card-header">
            Collect Payment
        </div>

        <div class="card-body">

            <form action="{{ route('payments.store') }}" method="POST">

                @csrf

                <div class="row">

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Customer</label>

                        <select
                            name="customer_id"
                            class="form-control"
                            required>

                            <option value="">
                                Select Customer
                            </option>

                            @foreach($customers as $customer)

                                <option value="{{ $customer->id }}">

                                    {{ $customer->customer_id }}
                                    -
                                    {{ $customer->name }}
                                    (৳{{ $customer->monthly_bill }})

                                </option>

                            @endforeach

                        </select>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">
                            Bill Month
                        </label>

                        <input
                            type="month"
                            name="bill_month"
                            class="form-control"
                            required>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">
                            Amount
                        </label>

                        <input
                            type="number"
                            name="amount"
                            class="form-control"
                            required>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label class="form-label">
                            &nbsp;
                        </label>

                        <button
                            type="submit"
                            class="btn btn-success w-100">

                            Collect

                        </button>
                    </div>

                </div>

            </form>

        </div>
    </div>

    <div class="card shadow mt-4">

        <div class="card-header">
            Payment History
        </div>

        <div class="card-body">

            <table class="table table-bordered table-striped">

                <thead>

                    <tr>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Bill Month</th>
                        <th>Amount</th>
                        <th>Payment Method</th>
                        <th>Date</th>
                    </tr>

                </thead>

                <tbody>

                    @forelse($payments as $payment)

                        <tr>

                            <td>{{ $payment->id }}</td>

                            <td>
                                {{ $payment->customer->name ?? 'N/A' }}
                            </td>

                            <td>
                                {{ $payment->bill_month }}
                            </td>

                            <td>
                                ৳{{ number_format($payment->amount,2) }}
                            </td>

                            <td>
                                {{ $payment->payment_method }}
                            </td>

                            <td>
                                {{ $payment->created_at->format('d-m-Y') }}
                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="6" class="text-center">

                                No Payment Found

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

@endsection