@extends('backEnd.layouts.master')
@section('title', match($pipeline) {
    'reminder' => 'CRM Reminder Follow-up',
    'cancelled_queue' => 'CRM Courier Cancelled',
    'all' => 'CRM — All Customers',
    default => 'CRM Active Customers',
})
@push('styles')
@include('backEnd.crm.partials.crm-theme-colors')
<style>
.crm-badge-no_status { background:#e5e7eb; color:#374151; }
.crm-badge-contact   { background:#dbeafe; color:#1e40af; }
.crm-badge-closed    { background:#d1fae5; color:#065f46; }
.crm-badge-renew_again { background:#f3e8ff; color:#6b21a8; }
.crm-overdue { color:#dc2626; font-weight:700; }
.crm-upcoming { color:#16a34a; }
.pipeline-cancelled_queue { background:#fee2e2; }
</style>
@endpush
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-headset me-2 text-primary"></i>
                @switch($pipeline)
                    @case('reminder') Reminder Follow-up @break
                    @case('cancelled_queue') Courier Cancelled @break
                    @case('all') All CRM Customers @break
                    @default Active CRM
                @endswitch
            </h4>
            <p class="text-muted small mb-0">Confirmed order থেকে auto entry · ৩০ দিন পর Reminder · Courier cancel queue</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('admin.crm.churn') }}" class="btn btn-outline-danger btn-sm">
                <i class="fas fa-user-clock me-1"></i> {{ $winBackSettings['label'] ?? 'Win-Back Alert' }}
                @if(($alertCounts['churn'] ?? 0) > 0)
                <span class="badge bg-danger">{{ $alertCounts['churn'] }}</span>
                @endif
            </a>
            <a href="{{ route('admin.crm.birthdays') }}" class="btn btn-outline-crm-birthday btn-sm">
                <i class="fas fa-birthday-cake me-1"></i> Birthday
                @if(($alertCounts['birthday'] ?? 0) > 0)
                <span class="badge badge-crm-birthday">{{ $alertCounts['birthday'] }}</span>
                @endif
            </a>
            <form method="POST" action="{{ route('admin.crm.sync') }}">
                @csrf
                <button type="submit" class="btn btn-outline-secondary btn-sm"><i class="fas fa-sync me-1"></i> Sync Existing</button>
            </form>
            <form method="GET" action="{{ url()->current() }}" class="d-flex gap-2 align-items-center">
                <input type="text" name="search" value="{{ $search }}" class="form-control form-control-sm" style="width:min(260px,100%)" placeholder="Name, phone, address…">
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search"></i></button>
            </form>
        </div>
    </div>

    <div class="d-flex gap-2 flex-wrap mb-3">
        @php
            $tabRoutes = [
                'active' => route('admin.crm.active'),
                'reminder' => route('admin.crm.reminder'),
                'cancelled_queue' => route('admin.crm.cancelled'),
            ];
        @endphp
        @foreach([
            ['active', 'Active CRM', 'btn-success'],
            ['reminder', 'Reminder (30+ days)', 'btn-crm-reminder-tab'],
            ['cancelled_queue', 'Courier Cancelled', 'btn-danger'],
        ] as [$key, $label, $btnClass])
        <a href="{{ $tabRoutes[$key] }}"
           class="btn btn-sm {{ $pipeline === $key ? $btnClass : 'btn-outline-secondary' }} fw-semibold">
            {{ $label }}
            <span class="badge bg-white text-dark ms-1">{{ $counts[$key] ?? 0 }}</span>
        </a>
        @endforeach
    </div>

    @if($pipeline === 'cancelled_queue' && $customers->count())
    <div class="mb-2">
        <button type="button" class="btn btn-sm btn-outline-danger" id="bulkDeleteCancelled"><i class="fas fa-trash me-1"></i> Delete Selected</button>
    </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 small">
                    <thead class="table-light">
                        <tr>
                            @if($pipeline === 'cancelled_queue')
                            <th style="width:36px"><input type="checkbox" id="checkAllCancelled"></th>
                            @endif
                            <th>Customer</th>
                            <th>Orders</th>
                            <th>Entered / Reminder</th>
                            <th>Next Contact</th>
                            <th>Note</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $c)
                        @php
                            $followDate = $c->follow_up_date;
                            $lastOrder = $c->lastOrder;
                            $firstItem = $lastOrder?->items->first();
                        @endphp
                        <tr class="{{ $c->pipeline === 'cancelled_queue' ? 'pipeline-cancelled_queue' : '' }}">
                            @if($pipeline === 'cancelled_queue')
                            <td><input type="checkbox" class="cancelled-check" value="{{ $c->id }}"></td>
                            @endif
                            <td>
                                <a href="{{ route('admin.crm.show', $c->id) }}" class="fw-semibold text-decoration-none text-primary">
                                    {{ $c->customer_name ?: '—' }}
                                </a>
                                <div class="text-muted">{{ $c->customer_phone }}</div>
                                <div class="text-muted" style="font-size:10px;max-width:200px">{{ Str::limit($c->customer_address, 60) }}</div>
                                @if($c->pipeline === 'cancelled_queue' && $c->lastCancelledOrder)
                                <div class="text-danger" style="font-size:10px">Cancelled: #{{ $c->lastCancelledOrder->invoice_id }}</div>
                                @endif
                                @if(!empty($churnFlags[$c->customer_phone]))
                                <span class="badge bg-danger mt-1" style="font-size:10px"><i class="fas fa-user-clock me-1"></i>{{ $winBackSettings['label'] ?? 'Win-Back' }} {{ $churnFlags[$c->customer_phone]['days_idle'] }}d</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-primary">{{ $c->order_count }} order(s)</span>
                                @if($firstItem)
                                <div class="text-muted mt-1" style="font-size:10px">Last: {{ Str::limit($firstItem->product_name ?? $firstItem->product?->name, 28) }}</div>
                                @endif
                            </td>
                            <td>
                                @if($c->entered_at)
                                <div style="font-size:11px">Entered: {{ $c->entered_at->format('d M Y') }}</div>
                                @endif
                                @if($c->reminder_at)
                                <div style="font-size:11px" class="text-muted">Auto reminder: {{ $c->reminder_at->format('d M Y') }}</div>
                                @endif
                            </td>
                            <td>
                                @if($pipeline === 'reminder' || $c->pipeline === 'reminder')
                                <div class="{{ $c->is_follow_up_overdue ? 'crm-overdue' : 'crm-upcoming' }}" style="font-size:12px">
                                    {{ $c->follow_up_label }}
                                </div>
                                @if($followDate)
                                <div class="text-muted" style="font-size:10px">{{ $followDate->format('d M Y, h:i A') }}</div>
                                @endif
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                @if($c->note)
                                <div class="crm-note-preview">{{ Str::limit($c->note, 120) }}</div>
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge crm-badge-{{ $c->contact_status }}">{{ $c->contact_status_label }}</span>
                            </td>
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center flex-wrap">
                                    <a href="{{ route('admin.crm.show', $c->id) }}" class="btn btn-sm btn-outline-primary py-1 px-2" title="Profile"><i class="fas fa-user"></i></a>
                                    <a href="tel:{{ $c->customer_phone }}" class="btn btn-sm btn-outline-success py-1 px-2"><i class="fas fa-phone"></i></a>
                                    <button type="button" class="btn btn-sm btn-outline-crm-schedule py-1 px-2 crm-contact-btn"
                                        data-id="{{ $c->id }}"
                                        data-name="{{ e($c->customer_name) }}"
                                        data-phone="{{ $c->customer_phone }}"
                                        data-status="{{ $c->contact_status }}"
                                        data-next="{{ $c->next_contact_at?->format('Y-m-d\TH:i') }}"
                                        data-note="{{ e($c->note ?? '') }}">
                                        <i class="fas fa-calendar-alt"></i>
                                    </button>
                                    @if($pipeline === 'cancelled_queue')
                                    <form method="POST" action="{{ route('admin.crm.destroy', $c->id) }}" onsubmit="return confirm('Delete this CRM record?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger py-1 px-2"><i class="fas fa-trash"></i></button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="{{ $pipeline === 'cancelled_queue' ? 9 : 8 }}" class="text-center py-5 text-muted">
                                <i class="fas fa-inbox fa-2x d-block mb-2 opacity-50"></i>
                                No CRM records found.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($customers->hasPages())<div class="p-3">{{ $customers->links() }}</div>@endif
        </div>
    </div>
</div>

<div class="modal fade" id="crmContactModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" id="crmContactForm" class="modal-content">
            @csrf
            <div class="modal-header">
                <h6 class="modal-title fw-bold"><i class="fas fa-phone me-2"></i>Contact — <span id="crmContactName"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Next Contact Date</label>
                    <input type="datetime-local" name="next_contact_at" id="crmNextContact" class="form-control form-control-sm">
                    <div class="form-text">Moderator manually set করবেন — এই date column এ দেখাবে।</div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Status</label>
                    <select name="contact_status" id="crmContactStatus" class="form-select form-select-sm">
                        @foreach(\App\Models\CrmCustomer::CONTACT_STATUSES as $key => $meta)
                        <option value="{{ $key }}">{{ $meta['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Call Note</label>
                    <textarea name="note" id="crmContactNote" class="form-control" rows="3" placeholder="Call result, next action…"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-save me-1"></i>Save</button>
            </div>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
const CSRF = document.querySelector('meta[name=csrf-token]').content;

document.querySelectorAll('.crm-contact-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const id = this.dataset.id;
        document.getElementById('crmContactForm').action = `{{ url('admin/crm') }}/${id}/contact`;
        document.getElementById('crmContactName').textContent = (this.dataset.name || 'Customer') + ' (' + this.dataset.phone + ')';
        document.getElementById('crmContactStatus').value = this.dataset.status || 'no_status';
        document.getElementById('crmNextContact').value = this.dataset.next || '';
        document.getElementById('crmContactNote').value = '';
        new bootstrap.Modal(document.getElementById('crmContactModal')).show();
    });
});

const checkAll = document.getElementById('checkAllCancelled');
if (checkAll) {
    checkAll.addEventListener('change', function () {
        document.querySelectorAll('.cancelled-check').forEach(cb => cb.checked = this.checked);
    });
}

const bulkBtn = document.getElementById('bulkDeleteCancelled');
if (bulkBtn) {
    bulkBtn.addEventListener('click', function () {
        const ids = [...document.querySelectorAll('.cancelled-check:checked')].map(cb => cb.value);
        if (!ids.length) {
            toastr.warning('Select at least one record.');
            return;
        }
        if (!confirm('Delete ' + ids.length + ' selected record(s)?')) return;
        fetch(`{{ route('admin.crm.bulk-destroy-cancelled') }}`, {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json'},
            body: JSON.stringify({ids})
        }).then(r => r.json()).then(data => {
            if (data.ok) location.reload();
            else toastr.error('Delete failed.');
        }).catch(() => toastr.error('Delete failed.'));
    });
}
</script>
@endpush