@extends('backEnd.layouts.master')
@section('title','CRM Reminder')
@push('styles')
<style>
.crm-badge-no_status { background:#e5e7eb; color:#374151; }
.crm-badge-contact   { background:#dbeafe; color:#1e40af; }
.crm-badge-follow_up { background:#fef3c7; color:#92400e; }
.crm-badge-closed    { background:#d1fae5; color:#065f46; }
.crm-badge-renew_again { background:#f3e8ff; color:#6b21a8; }
.reminder-overdue { color:#dc2626; font-weight:700; }
.reminder-ok      { color:#16a34a; }
.crm-note-preview {
    background:#fef3c7;border-left:3px solid #f59e0b;padding:8px 10px;font-size:13px;
    border-radius:0 4px 4px 0;white-space:pre-line;line-height:1.55;
    word-break:break-word;overflow:visible;max-height:none;
    min-width:240px;max-width:320px;color:#78350f;
}
.crm-note-cell { min-width:260px; max-width:340px; vertical-align:top !important; }
</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">
        <h4 class="fw-bold mb-0"><i class="fas fa-bell me-2 text-warning"></i>CRM Reminder</h4>
        <form method="GET" class="d-flex gap-2 align-items-center">
            <div class="live-search-wrap">
                <input type="text" name="search" value="{{ $search }}"
                       class="form-control form-control-sm live-search-input"
                       style="width:min(280px, 100%)"
                       placeholder="Search name, phone, product…"
                       autocomplete="off">
            </div>
            <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Search</button>
        </form>
    </div>

    {{-- Status Tabs --}}
    <div class="d-flex gap-2 flex-wrap mb-3">
        @foreach([
            ['no_status','No Status','bg-secondary'],
            ['contact',  'Contact',  'bg-info'],
            ['follow_up','Follow-Up','bg-warning text-dark'],
            ['closed',   'Closed',   'bg-success'],
            ['renew_again','Renew Again','bg-purple text-white'],
            ['all',      'All',      'bg-dark'],
        ] as [$k,$l,$c])
        <a href="{{ request()->fullUrlWithQuery(['status'=>$k]) }}"
            class="btn btn-sm {{ $status==$k ? $c : 'btn-outline-secondary' }} fw-semibold">
            {{ $l }}
            <span class="badge bg-white text-dark ms-1">{{ $counts[$k=='all'?'all':$k] }}</span>
        </a>
        @endforeach
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div id="liveSearchResults">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 small">
                    <thead class="table-light">
                        <tr>
                            <th style="width:200px">Product</th>
                            <th>Purchase</th>
                            <th>Reminder</th>
                            <th>Customer</th>
                            <th>Note</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($reminders as $r)
                        @php
                            $order = $r->order;
                            $firstItem = $order?->items->first();
                            $product   = $firstItem?->product;
                            $thumb     = $product?->thumbnail;
                        @endphp
                        <tr>
                            {{-- Product --}}
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($thumb)
                                    <img src="{{ asset($thumb) }}" style="width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid #e5e7eb">
                                    @else
                                    <div style="width:48px;height:48px;background:#f3f4f6;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center">
                                        <i class="fas fa-box text-muted"></i>
                                    </div>
                                    @endif
                                    <div>
                                        <div class="fw-semibold" style="max-width:140px;white-space:normal;font-size:12px">
                                            {{ $product?->name ?? ($firstItem?->product_name ?? 'Unknown Product') }}
                                        </div>
                                        <div class="text-success fw-bold">৳{{ number_format($firstItem?->unit_price ?? 0) }}</div>
                                        <div class="text-muted" style="font-size:10px">
                                            {{ $firstItem?->size ?? 'none' }}, {{ $firstItem?->color ?? 'none' }} Qty: {{ $firstItem?->quantity ?? 1 }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            {{-- Purchase --}}
                            <td>
                                @if($order)
                                <div class="text-muted" style="font-size:11px">
                                    <i class="fas fa-shopping-cart me-1 text-primary"></i>
                                    Ordered: <span style="color:#f97316;font-weight:600">{{ $order->created_at->diffForHumans() }}</span>
                                </div>
                                <div class="text-muted" style="font-size:11px">
                                    Reminder: After <strong>{{ $r->reminder_days }}</strong> days
                                </div>
                                <div class="text-muted" style="font-size:10px">
                                    {{ $order->created_at->format('Y-M-d g:i A') }}
                                </div>
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                            {{-- Reminder --}}
                            <td>
                                <div class="d-flex gap-1 mb-1">
                                    <a href="tel:{{ $r->customer_phone }}" class="btn btn-sm py-1 px-2" style="background:#dcfce7;color:#166534;font-size:13px"><i class="fas fa-phone"></i></a>
                                    <a href="{{ wa_me_url($r->customer_phone ?? '') }}" target="_blank" class="btn btn-sm py-1 px-2" style="background:#d1fae5;color:#065f46;font-size:13px"><i class="fab fa-whatsapp"></i></a>
                                </div>
                                @if($r->reminder_at)
                                <div class="{{ $r->is_overdue ? 'reminder-overdue' : 'reminder-ok' }}" style="font-size:12px">
                                    {{ $r->days_ago }}
                                </div>
                                <div class="text-muted" style="font-size:10px">{{ $r->reminder_at->format('Y-M-d g:i A') }}</div>
                                @endif
                            </td>
                            {{-- Customer --}}
                            <td>
                                @if($order)
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="text-success fw-semibold text-decoration-none" style="font-size:12px">
                                    {{ $r->customer_name }}
                                </a>
                                <div class="text-muted" style="font-size:11px">{{ $r->customer_phone }}</div>
                                <div class="text-muted" style="font-size:10px;max-width:180px;white-space:normal">{{ $r->customer_address }}</div>
                                @endif
                            </td>
                            {{-- Note --}}
                            <td class="crm-note-cell">
                                @if($r->note)
                                <div class="crm-note-preview">{{ $r->note }}</div>
                                @else
                                <span class="text-muted small">—</span>
                                @endif
                            </td>
                            {{-- Status --}}
                            <td>
                                <select class="form-select form-select-sm crm-status-select" data-id="{{ $r->id }}" style="min-width:120px;font-size:11px">
                                    <option value="no_status"  {{ $r->status=='no_status'  ? 'selected':'' }}>No Status</option>
                                    <option value="contact"    {{ $r->status=='contact'    ? 'selected':'' }}>Contact</option>
                                    <option value="follow_up"  {{ $r->status=='follow_up'  ? 'selected':'' }}>Follow-Up</option>
                                    <option value="closed"     {{ $r->status=='closed'     ? 'selected':'' }}>Closed</option>
                                    <option value="renew_again"{{ $r->status=='renew_again'? 'selected':'' }}>Renew Again</option>
                                </select>
                            </td>
                            {{-- Actions --}}
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center">
                                    @if($order)
                                    <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-info py-1 px-2" title="View Order"><i class="fas fa-eye"></i></a>
                                    @endif
                                    <button type="button" class="btn btn-sm btn-outline-warning py-1 px-2 crm-note-btn" title="Add Note"
                                        data-id="{{ $r->id }}"
                                        data-phone="{{ $r->customer_phone }}"
                                        data-name="{{ e($r->customer_name) }}"
                                        data-status="{{ $r->status }}"
                                        data-note="{{ e($r->note ?? '') }}">
                                        <i class="fas fa-sticky-note"></i>
                                    </button>
                                    <a href="{{ wa_me_url($r->customer_phone ?? '', 'আপনার শেষ অর্ডারটি কিছুদিন হয়ে গেছে। আবার অর্ডার করতে চাইলে আমাদের জানান।') }}" target="_blank" class="btn btn-sm btn-outline-success py-1 px-2" title="WhatsApp Message"><i class="fab fa-whatsapp"></i></a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <i class="fas fa-bell-slash fa-2x d-block mb-2 opacity-50"></i>
                                No CRM reminders found.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($reminders->hasPages())<div class="p-3">{{ $reminders->links() }}</div>@endif
            </div>
        </div>
    </div>
</div>

{{-- CRM Note Modal --}}
<div class="modal fade" id="crmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-bold"><i class="fas fa-bell me-2 text-warning"></i>CRM Note — <span id="crmCustomer"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="crmExistingNotesWrap" class="mb-3" style="display:none">
                    <label class="form-label fw-semibold small text-muted">Previous Notes</label>
                    <div id="crmExistingNotes" class="crm-note-preview"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold small">Status</label>
                    <select id="crmStatus" class="form-select form-select-sm">
                        <option value="no_status">No Status</option>
                        <option value="contact">Contact</option>
                        <option value="follow_up">Follow-Up</option>
                        <option value="closed">Closed</option>
                        <option value="renew_again">Renew Again</option>
                    </select>
                </div>
                <div>
                    <label class="form-label fw-semibold small">New Note</label>
                    <textarea id="crmNoteText" class="form-control" rows="3" placeholder="Call note, result, next action…"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary btn-sm" id="saveCrmBtn" onclick="submitCrm()"><i class="fas fa-save me-1"></i>Save</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
const CSRF = document.querySelector('meta[name=csrf-token]').content;
let crmId = null;
let crmOriginalStatus = 'no_status';

document.querySelectorAll('.crm-note-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        openCrmNote(
            parseInt(this.dataset.id, 10),
            this.dataset.phone || '',
            this.dataset.name || '',
            this.dataset.note || '',
            this.dataset.status || 'no_status'
        );
    });
});

// Status dropdown quick-change
document.querySelectorAll('.crm-status-select').forEach(sel => {
    sel.addEventListener('change', function() {
        const id = this.dataset.id;
        fetch(`{{ url('admin/crm-reminder') }}/${id}/mark`, {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json'},
            body: JSON.stringify({status: this.value})
        }).then(async r => {
            const data = await r.json().catch(() => ({}));
            if (!r.ok || !data.ok) throw new Error('Update failed');
            return data;
        }).then(() => {
            toastr.success('Status updated.');
            const row = this.closest('tr');
            row.style.transition = 'opacity .3s';
            row.style.opacity = '.5';
            setTimeout(() => row.style.opacity = '1', 500);
        }).catch(() => toastr.error('Could not update status.'));
    });
});

function openCrmNote(id, phone, name, existingNote, status) {
    crmId = id;
    crmOriginalStatus = status || 'no_status';
    document.getElementById('crmCustomer').textContent = name + ' (' + phone + ')';
    document.getElementById('crmNoteText').value = '';
    const statusEl = document.getElementById('crmStatus');
    statusEl.value = crmOriginalStatus;
    statusEl.dataset.original = crmOriginalStatus;
    const wrap = document.getElementById('crmExistingNotesWrap');
    const box  = document.getElementById('crmExistingNotes');
    if (existingNote) {
        box.textContent = existingNote;
        wrap.style.display = '';
    } else {
        box.textContent = '';
        wrap.style.display = 'none';
    }
    new bootstrap.Modal(document.getElementById('crmModal')).show();
}

function submitCrm() {
    const status = document.getElementById('crmStatus').value;
    const note   = document.getElementById('crmNoteText').value.trim();
    const statusChanged = status !== crmOriginalStatus;

    if (!note && !statusChanged) {
        toastr.warning('Note লিখুন অথবা status change করুন।');
        return;
    }
    const btn = document.getElementById('saveCrmBtn');
    btn.disabled = true;
    fetch(`{{ url('admin/crm-reminder') }}/${crmId}/mark`, {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json'},
        body: JSON.stringify({status, note})
    }).then(async r => {
        const data = await r.json().catch(() => ({}));
        if (!r.ok || !data.ok) {
            throw new Error(data.message || 'Could not save note.');
        }
        return data;
    }).then(() => {
        bootstrap.Modal.getInstance(document.getElementById('crmModal'))?.hide();
        toastr.success('Note saved.');
        location.reload();
    }).catch(err => {
        toastr.error(err.message || 'Could not save note.');
    }).finally(() => {
        btn.disabled = false;
    });
}
</script>
@endpush