@php($line = $snapshot['line'])
<div class="card card-body mb-3">
    <div class="row">
        <div class="col-md-6">
            <p class="mb-1">{{ __('messages.phone') }}: <strong class="fs-4">{{ $line->phone_number }}</strong></p>
            <p class="mb-1">{{ __('messages.customer') }}: <strong>{{ $snapshot['customer']?->name ?: '—' }}</strong></p>
            <p class="mb-1">{{ __('messages.national_id') }}: {{ $snapshot['customer']?->national_id ?: '—' }}</p>
            @if($line->mainAccount || $line->subAccount)
            <p class="mb-1">{{ __('messages.main_account') }}: {{ $line->mainAccount?->name ?: '—' }}</p>
            <p class="mb-1">{{ __('messages.sub_account') }}: {{ $line->subAccount?->name ?: '—' }}</p>
            @endif
        </div>
        <div class="col-md-6">
            <p class="mb-1">{{ __('messages.plan') }}: {{ $snapshot['plan']?->name }} {{ $snapshot['plan'] ? money($snapshot['plan_price']).' / '.__('messages.month') : '' }}</p>
            <p class="mb-1">{{ __('messages.package_year') }}:
                @if($snapshot['year_start'])
                    {{ __('messages.package_year_n', ['n' => $snapshot['year_number'] ?? 1]) }}
                    — {{ $snapshot['year_start']->translatedFormat('F Y') }} / {{ $snapshot['year_end']->translatedFormat('F Y') }}
                @else
                    —
                @endif
            </p>
            @if(! empty($snapshot['new_year_opened']))
                <p class="small text-success">{{ __('messages.new_year_opened') }}</p>
            @endif
            <p class="mb-1">{{ __('messages.paid_through') }}: <strong>{{ $snapshot['paid_through']?->label() ?: '—' }}</strong></p>
            <p class="mb-1">{{ __('messages.outstanding') }}: <strong>{{ money($snapshot['outstanding']) }}</strong></p>
        </div>
    </div>
    <div class="mt-3">
        <div class="small text-muted mb-1">{{ __('messages.paid_months') }}</div>
        @forelse($snapshot['paid_periods'] ?? [] as $row)
            <span class="badge text-bg-success me-1 mb-1">{{ $row['period']->label() }}</span>
        @empty
            <span class="text-muted">—</span>
        @endforelse
    </div>
    <div class="mt-2">
        <div class="small text-muted mb-1">{{ __('messages.remaining_months') }}</div>
        @forelse($snapshot['unpaid_periods'] as $row)
            <span class="badge text-bg-warning me-1 mb-1">{{ $row['period']->label() }}</span>
        @empty
            <span class="text-muted">—</span>
        @endforelse
    </div>
</div>
@can('billing.create')
<form method="post" action="{{ route('billing.collect') }}" class="card card-body" id="collectForm">
    @csrf
    <input type="hidden" name="line_id" value="{{ $line->id }}">
    <h2 class="h6">{{ __('messages.select_periods') }}</h2>
    <p class="small text-muted">{{ __('messages.amount_may_change') }}</p>
    <div class="d-flex flex-wrap gap-2 mb-3">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-months="1">{{ __('messages.pay_months', ['count' => 1]) }}</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" data-months="2">{{ __('messages.pay_months', ['count' => 2]) }}</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" data-months="3">{{ __('messages.pay_months', ['count' => 3]) }}</button>
        <button type="button" class="btn btn-sm btn-outline-primary" data-months="all">{{ __('messages.pay_all_remaining') }}</button>
    </div>
    @forelse($snapshot['unpaid_periods'] as $row)
        <div class="row align-items-center g-2 mb-2">
            <div class="col-md-6">
                <div class="form-check">
                    <input class="form-check-input period-check" type="checkbox" name="period_ids[]" value="{{ $row['period']->id }}" id="p{{ $row['period']->id }}">
                    <label class="form-check-label" for="p{{ $row['period']->id }}">{{ $row['period']->label() }}</label>
                </div>
            </div>
            <div class="col-md-4">
                <input class="form-control" name="amounts[{{ $row['period']->id }}]" value="{{ $row['amount'] }}" inputmode="decimal">
            </div>
        </div>
    @empty
        <p>{{ __('messages.no_unpaid_periods') }}</p>
    @endforelse
    <div class="row g-2 mt-2">
        <div class="col-md-4"><select class="form-select" name="payment_method">@foreach(['cash','visa','bank','wallet','other'] as $m)<option value="{{ $m }}">{{ __('status.method_'.$m) }}</option>@endforeach</select></div>
        <div class="col-md-4"><input class="form-control" name="discount" value="0" placeholder="{{ __('messages.discount') }}"></div>
        <div class="col-md-4"><button class="btn btn-success w-100">{{ __('messages.collect') }}</button></div>
    </div>
</form>
<script>
document.querySelectorAll('#collectForm [data-months]').forEach((btn) => {
    btn.addEventListener('click', () => {
        const boxes = [...document.querySelectorAll('#collectForm .period-check')];
        const count = btn.dataset.months === 'all' ? boxes.length : Number(btn.dataset.months);
        boxes.forEach((box, i) => { box.checked = i < count; });
    });
});
</script>
@endcan