@extends('layouts.app')

@section('title', 'Rent Checklist — ' . $property->title)
@section('page-title', 'Rent Collection Checklist')

@section('content')

<div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <a href="{{ route('admin.managed-rentals.index') }}" class="btn btn-sm btn-light">
        <i class="bi bi-arrow-left me-1"></i>Back to Overview
    </a>
</div>

{{-- Property + Agreement Summary --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="row g-3 align-items-center">
            <div class="col-md-6">
                <div class="text-muted small mb-1">Property</div>
                <div class="fw-semibold">
                    <a href="{{ route('admin.property.show', $property) }}" class="text-decoration-none text-dark">
                        {{ $property->title }}
                    </a>
                </div>
                @if($property->city)
                    <div class="text-muted small"><i class="bi bi-geo-alt me-1"></i>{{ $property->city }}</div>
                @endif
            </div>
            <div class="col-md-3">
                <div class="text-muted small mb-1">Tenant</div>
                @php $client = $agreement->lead && $agreement->lead->requirement ? $agreement->lead->requirement->client : null; @endphp
                @if($client)
                    <a href="{{ route('admin.client.show', $client) }}" class="fw-semibold text-decoration-none">
                        {{ $client->full_name }}
                    </a>
                @else
                    <div class="fw-semibold">{{ $agreement->client_name ?: '—' }}</div>
                @endif
            </div>
            <div class="col-md-3">
                <div class="text-muted small mb-1">Agreement Period</div>
                <div class="fw-semibold small">
                    {{ $agreement->agreement_start_date ? $agreement->agreement_start_date->format('d M Y') : '—' }}
                    &mdash;
                    {{ $agreement->agreement_end_date ? $agreement->agreement_end_date->format('d M Y') : '—' }}
                </div>
                @if($agreement->monthly_rent)
                    <div class="text-muted small">₹{{ number_format((float) $agreement->monthly_rent, 0) }} / month</div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Month-by-month grid --}}
<div class="row g-3" id="checklist-grid">
    @foreach($months as $month)
        @php
            $monthKey  = $month->format('Y-m');
            $monthDate = $month->format('Y-m-d');
            /** @var \App\Models\RentCollectionRecord|null $rec */
            $rec       = $records->get($monthKey);
            $status    = $rec ? $rec->status : 'not_marked';
            $isFuture  = $month->gt($thisMonth);
            $isPast    = $month->lt($thisMonth);
            $isCurrent = $month->eq($thisMonth);

            if ($status === 'collected') {
                $cardBorder = 'border-success';
            } elseif ($status === 'not_collected') {
                $cardBorder = 'border-danger';
            } else {
                $cardBorder = $isFuture ? 'border-light' : 'border-secondary';
            }
        @endphp
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card border {{ $cardBorder }} shadow-sm h-100"
                 id="month-card-{{ $monthKey }}"
                 data-month="{{ $monthDate }}"
                 data-agreement="{{ $agreement->id }}">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div class="fw-semibold">{{ $month->format('F Y') }}</div>
                        @if($isCurrent)
                            <span class="badge bg-primary bg-opacity-10 text-primary small">Current</span>
                        @elseif($isFuture)
                            <span class="badge bg-light text-muted small border">Future</span>
                        @endif
                    </div>

                    {{-- Status badge --}}
                    <div class="mb-3 status-display"
                         data-status="{{ $status }}">
                        @if($status === 'collected')
                            <span class="badge bg-success bg-opacity-10 text-success">
                                <i class="bi bi-check-circle me-1"></i>Collected
                            </span>
                        @elseif($status === 'not_collected')
                            <span class="badge bg-danger bg-opacity-10 text-danger">
                                <i class="bi bi-x-circle me-1"></i>Not Collected
                            </span>
                        @else
                            <span class="badge bg-secondary bg-opacity-10 text-secondary">
                                <i class="bi bi-dash-circle me-1"></i>Not Marked
                            </span>
                        @endif
                    </div>

                    {{-- Action buttons --}}
                    <div class="d-flex gap-2 mb-2">
                        <button type="button"
                                class="btn btn-sm btn-success flex-fill mark-btn"
                                data-action="collected"
                                @if($isFuture) disabled @endif>
                            <i class="bi bi-check-lg me-1"></i>Collected
                        </button>
                        <button type="button"
                                class="btn btn-sm btn-danger flex-fill mark-btn"
                                data-action="not_collected"
                                @if($isFuture) disabled @endif>
                            <i class="bi bi-x-lg me-1"></i>Not Collected
                        </button>
                    </div>

                    {{-- Meta --}}
                    <div class="meta-info small text-muted">
                        @if($rec && $rec->marked_at)
                            <i class="bi bi-person me-1"></i>{{ $rec->markedBy ? $rec->markedBy->name : '—' }}<br>
                            <i class="bi bi-clock me-1"></i>{{ $rec->marked_at->format('d M Y, H:i') }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

@push('scripts')
<script>
(function () {
    var markUrl  = '{{ $markUrl }}';
    var csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    document.getElementById('checklist-grid').addEventListener('click', function (e) {
        var btn = e.target.closest('.mark-btn');
        if (!btn || btn.disabled) return;

        var card        = btn.closest('[data-month]');
        var month       = card.dataset.month;
        var agreementId = card.dataset.agreement;
        var action      = btn.dataset.action;

        // Optimistic disable while saving
        card.querySelectorAll('.mark-btn').forEach(function (b) { b.disabled = true; });

        fetch(markUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ agreement_id: agreementId, month: month, status: action }),
        })
        .then(function (r) { return r.json(); })
        .then(function (res) {
            if (!res.ok) {
                card.querySelectorAll('.mark-btn').forEach(function (b) { b.disabled = false; });
                return;
            }

            // Update status badge
            var display  = card.querySelector('.status-display');
            var metaInfo = card.querySelector('.meta-info');
            var cardEl   = card.closest('.card');

            if (res.status === 'collected') {
                display.innerHTML = '<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle me-1"></i>Collected</span>';
                cardEl.className  = cardEl.className.replace(/border-\w+/g, 'border-success');
            } else {
                display.innerHTML = '<span class="badge bg-danger bg-opacity-10 text-danger"><i class="bi bi-x-circle me-1"></i>Not Collected</span>';
                cardEl.className  = cardEl.className.replace(/border-\w+/g, 'border-danger');
            }

            metaInfo.innerHTML = '<i class="bi bi-person me-1"></i>' + (res.markedBy || '—') + '<br>'
                               + '<i class="bi bi-clock me-1"></i>' + res.markedAt;

            // Re-enable non-future buttons
            card.querySelectorAll('.mark-btn').forEach(function (b) { b.disabled = false; });
        })
        .catch(function () {
            card.querySelectorAll('.mark-btn').forEach(function (b) { b.disabled = false; });
            Swal.fire({ icon: 'error', title: 'Error', text: 'Could not save. Please try again.' });
        });
    });
}());
</script>
@endpush

@endsection