{{-- Body of one "By property" card. Rendered lazily by
     LockStatisticsController@propertyCard when the card is expanded.
     Expects: $prop (buildPropertyView row), $propertyEmail, $hasCustomer. --}}
@php
    $formatIsk   = fn($amount) => number_format((float) $amount, 0, ',', '.') . ' ISK';
    $pendingList = collect($prop['months'])->filter(fn($m) => empty($m['is_invoiced']) && empty($m['is_skipped']))->values();
@endphp

<div class="card-body py-2 px-3">

    {{-- Why N locks? Opens the per-lock breakdown (last activity, flags, exclude from billing). --}}
    @php $lastMonthRow = collect($prop['months'])->last(); @endphp
    <div class="d-flex align-items-center gap-2 pb-2 mb-2 border-bottom text-xs">
        <span class="text-uppercase text-muted fw-semibold">Locks</span>
        <span class="fw-semibold">{{ (int) ($lastMonthRow['billable_unique_lock_count'] ?? 0) }} counted</span>
        <button type="button" class="btn btn-link btn-sm p-0 text-xs lock-breakdown-btn" data-property-id="{{ $prop['property_id'] }}" data-property-name="{{ $prop['property_name'] }}">
            <i class="material-icons text-xs align-middle">manage_search</i> Explain / exclude locks
        </button>
    </div>

    {{-- Inline customer editor — link / edit a dkPlus customer without leaving the page. --}}
    <div class="customer-cell pb-2 mb-2 border-bottom"
         data-layout="byproperty"
         data-property-id="{{ $prop['property_id'] }}">
        @if($hasCustomer)
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="text-xs text-uppercase text-muted fw-semibold">Customer</span>
                <span class="text-sm fw-semibold">{{ $propertyEmail->dkplus_customer_name ?: '—' }}</span>
                <span class="text-xs text-muted font-monospace">#{{ $propertyEmail->dkplus_customer_id }}</span>
                @if(!empty($prop['has_customer_history']))
                    <span class="badge bg-gradient-secondary text-xs" data-bs-toggle="tooltip" title="Earlier months are invoiced to a previous company — see the month rows and the gear dialog">
                        <i class="material-icons text-xs align-middle">swap_horiz</i> company change
                    </span>
                @endif
                <details class="ms-auto" data-details-key="cust_byprop_{{ $prop['property_id'] }}">
                    <summary class="text-xs text-primary" style="cursor:pointer">Edit</summary>
                    <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="billing-form mt-2" data-ajax="true">
                        @csrf
                        <input type="hidden" name="property_id" value="{{ $prop['property_id'] }}">
                        <div class="d-flex gap-1 mb-1 flex-wrap">
                            <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="ID" style="width:110px" value="{{ $propertyEmail->dkplus_customer_id }}">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                                    data-fetch-url="{{ route('locks-by-month.dkplus.customer.fetch', ['customerId' => '__ID__']) }}"
                                    data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                                <i class="material-icons text-sm" style="line-height:1">search</i>
                            </button>
                            <input type="text" name="dkplus_customer_name" class="form-control form-control-sm flex-grow-1" placeholder="Name" value="{{ $propertyEmail->dkplus_customer_name ?? '' }}">
                            <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                        </div>
                    </form>
                </details>
            </div>
        @else
            <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
                <span class="text-xs text-uppercase text-warning fw-semibold">
                    <i class="material-icons text-xs align-middle">link_off</i> No dkPlus customer linked
                </span>
                <span class="text-xs text-muted">— enter the customer ID and click Save.</span>
            </div>
            <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="billing-form" data-ajax="true">
                @csrf
                <input type="hidden" name="property_id" value="{{ $prop['property_id'] }}">
                <div class="d-flex gap-1 flex-wrap">
                    <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" style="width:140px">
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                            data-fetch-url="{{ route('locks-by-month.dkplus.customer.fetch', ['customerId' => '__ID__']) }}"
                            data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                        <i class="material-icons text-sm" style="line-height:1">search</i>
                    </button>
                    <input type="text" name="dkplus_customer_name" class="form-control form-control-sm flex-grow-1" placeholder="Name (auto-fills after Fetch)">
                    <button type="submit" class="btn btn-outline-primary btn-sm mb-0">
                        <i class="material-icons text-sm align-middle me-1">link</i>Save
                    </button>
                </div>
            </form>
        @endif
    </div>

    <form method="POST"
          action="{{ route('locks-by-month.dkplus.invoice.consolidated', request()->query()) }}"
          class="consolidated-invoice-form"
          data-property-id="{{ $prop['property_id'] }}">
        @csrf
        <input type="hidden" name="property_id" value="{{ $prop['property_id'] }}">

        <div class="table-responsive">
            <table class="table table-sm align-middle mb-2 card-month-table">
                <thead>
                    <tr class="text-xs text-uppercase text-muted">
                        <th class="cb-cell"></th>
                        <th class="text-start">Month</th>
                        <th class="text-end">Locks</th>
                        <th class="text-end">Subtotal</th>
                        <th class="text-start status-cell">Status</th>
                        <th class="text-end action-cell">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($prop['months'] as $m)
                        @php
                            $rowStatus = !empty($m['is_invoiced']) ? 'invoiced' : (!empty($m['is_skipped']) ? 'skipped' : 'pending');
                            $origSubtotal = (int) ($m['original_subtotal'] ?? $m['subtotal']);
                            $displaySubtotal = $rowStatus === 'skipped' ? 0 : $origSubtotal;
                        @endphp
                        <tr class="month-row"
                            data-month="{{ $m['month'] }}"
                            data-status="{{ $rowStatus }}"
                            data-current="{{ !empty($m['is_current_month']) ? '1' : '0' }}"
                            data-original-subtotal="{{ $origSubtotal }}"
                            data-locks="{{ $m['billable_unique_lock_count'] }}"
                            data-invoice-id="{{ $m['invoice_id'] ?? '' }}"
                            data-invoice-status="{{ $m['invoice_status'] ?? '' }}">
                            <td class="cb-cell">
                                @if($rowStatus === 'pending')
                                    <input type="checkbox" name="months[]" value="{{ $m['month'] }}" class="form-check-input month-cb" {{ $hasCustomer ? '' : 'disabled' }}>
                                @else
                                    <span class="text-xs text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-sm">
                                {{ $m['month'] }}
                                @if(!empty($m['is_current_month']))
                                    <span class="badge bg-gradient-secondary text-xs ms-1" data-bs-toggle="tooltip" title="Running month — billed once it is over, so it is not part of Select all">current</span>
                                @endif
                                @if(!empty($m['customer_is_historical']))
                                    <span class="badge bg-gradient-dark text-xs ms-1" data-bs-toggle="tooltip" title="Invoiced to the previous company #{{ $m['customer_id'] }}">
                                        {{ $m['customer_name'] !== '' ? $m['customer_name'] : '#' . $m['customer_id'] }}
                                    </span>
                                @endif
                            </td>
                            <td class="text-sm text-end">{{ $m['billable_unique_lock_count'] }}</td>
                            <td class="text-sm text-end fw-semibold subtotal-cell">{{ $formatIsk($displaySubtotal) }}</td>
                            <td class="status-cell">
                                @if($rowStatus === 'invoiced')
                                    <span class="badge bg-gradient-success text-xs">Invoiced</span>
                                    @if(!empty($m['invoice_id']))
                                        <span class="text-xs text-muted ms-1 font-monospace">#{{ $m['invoice_id'] }}</span>
                                    @endif
                                    @if(!empty($m['invoice_status']))
                                        <span class="badge text-xs ms-1 invoice-status-badge" data-status="{{ $m['invoice_status'] }}">{{ strtoupper($m['invoice_status']) }}</span>
                                    @endif
                                @elseif($rowStatus === 'skipped')
                                    <span class="badge bg-gradient-info text-xs">Skipped</span>
                                    @if(!empty($m['skip_reason']))
                                        <span class="text-xs text-muted ms-1 skip-reason-text">— {{ $m['skip_reason'] }}</span>
                                    @endif
                                @else
                                    <span class="badge bg-gradient-warning text-dark text-xs">Pending</span>
                                @endif
                            </td>
                            <td class="text-end action-cell">
                                @if($rowStatus === 'invoiced' && !empty($m['invoice_id']))
                                    <span class="d-inline-flex gap-1 invoice-actions">
                                        <button type="button" class="btn btn-outline-secondary btn-sm mb-0 px-2 invoice-sync-btn"
                                                data-month="{{ $m['month'] }}" data-bs-toggle="tooltip" title="Sync status from dkPlus">
                                            <i class="material-icons" style="font-size:14px">sync</i>
                                        </button>
                                        <a href="{{ route('locks-by-month.dkplus.invoice.pdf', $m['invoice_id']) }}" target="_blank" rel="noopener"
                                           class="btn btn-outline-success btn-sm mb-0 px-2" data-bs-toggle="tooltip" title="Open PDF">
                                            <i class="material-icons" style="font-size:14px">picture_as_pdf</i>
                                        </a>
                                        <button type="button" class="btn btn-outline-info btn-sm mb-0 px-2 invoice-email-btn"
                                                data-invoice-id="{{ $m['invoice_id'] }}" data-bs-toggle="tooltip" title="Send invoice by email via dkPlus">
                                            <i class="material-icons" style="font-size:14px">email</i>
                                        </button>
                                    </span>
                                @elseif($rowStatus === 'pending')
                                    <span class="d-inline-flex align-items-center gap-2">
                                        {{-- Single-month invoice for just this row (the header button does all closed months) --}}
                                        <button type="button" class="btn btn-outline-primary btn-sm mb-0 px-2 invoice-month-btn"
                                                data-month="{{ $m['month'] }}" {{ $hasCustomer ? '' : 'disabled' }}
                                                title="{{ $hasCustomer ? 'Create a dkPlus invoice for this month only' : 'Link a dkPlus customer first' }}">
                                            <i class="material-icons text-xs align-middle me-1">receipt_long</i>Invoice
                                        </button>
                                        <button type="button"
                                                class="btn btn-link btn-sm p-0 text-xs skip-toggle-btn"
                                                data-property-id="{{ $prop['property_id'] }}"
                                                data-month="{{ $m['month'] }}"
                                                data-action="skip">Skip</button>
                                    </span>
                                @else
                                    <button type="button"
                                            class="btn btn-link btn-sm p-0 text-xs skip-toggle-btn"
                                            data-property-id="{{ $prop['property_id'] }}"
                                            data-month="{{ $m['month'] }}"
                                            data-action="unskip">Unskip</button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Per-card settled-months toggle (hidden in the "All" view, where every month is shown) --}}
        <div class="settled-toggle-wrap text-xs {{ ($prop['settled_count'] ?? 0) > 0 ? '' : 'd-none' }}">
            <button type="button" class="btn btn-link btn-sm p-0 text-xs settled-toggle-btn">
                <i class="material-icons text-xs align-middle">visibility</i>
                <span class="settled-toggle-label">Show</span> <span class="settled-count">{{ $prop['settled_count'] ?? 0 }}</span> settled months (invoiced / skipped)
            </button>
        </div>

        {{-- Action bar — always rendered so JS can show/hide as state changes inline --}}
        <div class="card-action-bar {{ $pendingList->count() > 0 ? '' : 'd-none' }}">
            <div class="d-flex flex-wrap align-items-center gap-2 border-top pt-3 mt-2">
                <div class="btn-group" role="group" aria-label="Selection">
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 select-all-unbilled-btn">
                        <i class="material-icons text-sm align-middle me-1">done_all</i>Select all
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 select-none-btn">
                        <i class="material-icons text-sm align-middle">close</i>
                    </button>
                </div>

                <button type="button" class="btn btn-outline-info btn-sm mb-0 bulk-skip-btn" disabled title="Pick months first">
                    <i class="material-icons text-sm align-middle me-1">block</i>Skip selected
                </button>

                <div class="ms-auto text-end" style="min-width:200px">
                    <div class="fw-semibold selected-total">0 ISK</div>
                    <div class="text-xs text-muted selected-count-line"><span class="selected-count">0</span> of <span class="unbilled-cap">{{ $pendingList->count() }}</span> pending selected</div>
                </div>
            </div>

            <div class="row g-2 mt-2 align-items-center">
                <div class="col-md">
                    <div class="input-group input-group-outline">
                        <label class="form-label">Custom note (appended to invoice text)</label>
                        <input type="text" name="user_note" class="form-control" maxlength="500">
                    </div>
                </div>
                <div class="col-md-auto d-flex align-items-center">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input auto-email-cb" type="checkbox" name="auto_email" value="1" id="auto_email_{{ $prop['property_id'] }}">
                        <label class="form-check-label text-sm ms-2" for="auto_email_{{ $prop['property_id'] }}">Email after create</label>
                    </div>
                </div>
                <div class="col-md-auto text-end">
                    <button type="submit"
                            class="btn bg-gradient-primary btn-sm mb-0 text-nowrap create-consolidated-btn"
                            disabled
                            @if(!$hasCustomer) data-no-customer="1" @endif
                            title="{{ $hasCustomer ? 'Pick at least one month' : 'Link a dkPlus customer first' }}">
                        <i class="material-icons text-sm align-middle me-1">receipt_long</i>Create invoice
                    </button>
                </div>
            </div>
        </div>

        <div class="all-done-msg text-center text-sm text-muted py-3 {{ $pendingList->count() > 0 ? 'd-none' : '' }}">
            <i class="material-icons text-sm align-middle me-1">check_circle</i>
            All months for this property are either invoiced or marked as non-billable.
        </div>
    </form>
</div>