@extends('layouts.admin')

@section('content')
<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">New Members vs Lapsed Members</h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ url('/covers-report/new-vs-lapsed') }}" class="row g-3 mb-4">
            <div class="col-md-4">
                <label for="start_date" class="form-label">Start Date</label>
                <input type="date" name="start_date" class="form-control"
                    value="{{ $startDate ?? now()->startOfYear()->format('Y-m-d') }}">
            </div>
            <div class="col-md-4">
                <label for="end_date" class="form-label">End Date</label>
                <input type="date" name="end_date" class="form-control"
                    value="{{ $endDate ?? now()->format('Y-m-d') }}">
            </div>
            <div class="col-md-4 align-self-end">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-search"></i> Filter
                </button>
            </div>
        </form>

        <div class="dt-responsive table-sm table-responsive">
            <table class="table table-sm table-bordered table-striped nowrap">
                <thead class="bg-200 text-900">
                    <tr>
                        <th>#</th>
                        <th>Month</th>
                        <th>New Members</th>
                        <th>Lapsed Members</th>
                        <th>Lapse Ratio (%)</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stats as $index => $row)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $row->month }}</td>
                        <td>{{ $row->joined }}</td>
                        <td>{{ $row->lapsed }}</td>
                        <td>
                            {{ $row->joined > 0 ? number_format(($row->lapsed / ($row->joined + $row->lapsed)) * 100, 2) : '0.00' }}%
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
